added controls to watch panel

This commit is contained in:
Benjamin Jones 2020-09-11 11:42:00 +02:00
parent d66e447ce8
commit 9b541eb4fc
9 changed files with 139 additions and 25 deletions

View File

@ -1,4 +1,16 @@
<div class="watch-panel"> <div class="watch-panel">
<div class="watch-contents">
<div class="left-panel">
{% include embeds/twitch.html %} {% include embeds/twitch.html %}
</div>
<div class="right-panel">
{% include embeds/discord-chat.html %} {% include embeds/discord-chat.html %}
<!-- <button>{{ site.data.translations.join-discord[page.lang] }}</button> -->
</div>
</div>
<div class="watch-controls">
<button id="chat-toggle">Toggle chat</button>
<a href="https://discord.gg/Hr9zQkQ" class="margin-0"><button>Join Discord</button></a>
</div>
</div> </div>

View File

@ -1,3 +1,9 @@
{% if page.lang == fr %}
{% assign defaultchannel="752951588070359110" %}
{% else %}
{% assign defaultchannel="752951544089149590" %}
{% endif %}
<div class="discord-chat"> <div class="discord-chat">
<iframe src="https://titanembeds.com/embed/{{ site.discordID }}?css=155&theme=DiscordDark" height="650" width="400" frameborder="0"></iframe> <iframe src="https://titanembeds.com/embed/{{ site.discordID }}?css=155&theme=DiscordDark&defaultchannel={{ defaultchannel }}" height="650" width="400" frameborder="0"></iframe>
</div> </div>

View File

@ -3,11 +3,14 @@
p, p,
span { span {
color: var(--colour-graphite);
@include darkMode {
color: var(--colour-white); color: var(--colour-white);
} }
}
.time { .time {
font-size: var(--size-32); font-size: var(--size-32);
// font-weight: bold;
} }
} }

View File

@ -1,11 +1,35 @@
.watch-panel { .watch-panel {
margin: 0 auto;
display: flex;
width: 95vw;
margin-bottom: var(--size-128); margin-bottom: var(--size-128);
width: 95vw;
margin: 0 auto;
.watch-contents {
display: flex;
.left-panel {
flex: 4;
}
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
&.chat-hidden {
flex: 0;
.discord-chat {
width: 0;
@include touch {
display: none;
}
}
}
}
#twitch-embed { #twitch-embed {
flex: 4; width: 100%;
height: 100%;
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -13,8 +37,6 @@
} }
.discord-chat { .discord-chat {
flex: 1;
iframe { iframe {
width: 100%; width: 100%;
} }
@ -26,4 +48,16 @@
height: 80vh; height: 80vh;
} }
} }
}
.watch-controls {
display: flex;
justify-content: flex-end;
margin-top: var(--size-16);
button {
border: none;
margin-left: var(--size-16);
}
}
} }

View File

@ -4282,6 +4282,7 @@ var cdTime = banner === null || banner === void 0 ? void 0 : banner.querySelecto
var targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)'); var targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European Summer Time)');
function countdownTimer() { function countdownTimer() {
if (!banner) return;
var difference = +new Date(targetDate) - +new Date(); var difference = +new Date(targetDate) - +new Date();
var remaining = ''; var remaining = '';
@ -4303,6 +4304,36 @@ function countdownTimer() {
} }
var _default = countdownTimer; var _default = countdownTimer;
exports.default = _default;
},{}],"modules/watch.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default() {
var chatVisible = true;
var toggleChatButton = document.querySelector('#chat-toggle');
var rightPanel = document.querySelector('.right-panel');
console.log('toggleChatButton', toggleChatButton);
var handleButtonClick = function handleButtonClick() {
if (chatVisible) {
rightPanel.classList.add('chat-hidden');
chatVisible = false;
} else {
rightPanel.classList.remove('chat-hidden');
chatVisible = true;
}
};
if (toggleChatButton) {
toggleChatButton.addEventListener('click', handleButtonClick, false);
}
};
exports.default = _default; exports.default = _default;
},{}],"index.js":[function(require,module,exports) { },{}],"index.js":[function(require,module,exports) {
"use strict"; "use strict";
@ -4313,17 +4344,20 @@ var _clock = _interopRequireDefault(require("./modules/clock"));
var _countdown = _interopRequireDefault(require("./modules/countdown")); var _countdown = _interopRequireDefault(require("./modules/countdown"));
var _watch = _interopRequireDefault(require("./modules/watch"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var app = function app() { var app = function app() {
(0, _scrollHandler.default)(); (0, _scrollHandler.default)();
(0, _clock.default)(); (0, _clock.default)();
(0, _watch.default)();
(0, _countdown.default)(); (0, _countdown.default)();
setInterval(_countdown.default, 1000); setInterval(_countdown.default, 1000);
}; };
app(); app();
},{"./modules/scrollHandler":"modules/scrollHandler.js","./modules/clock":"modules/clock.js","./modules/countdown":"modules/countdown.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) { },{"./modules/scrollHandler":"modules/scrollHandler.js","./modules/clock":"modules/clock.js","./modules/countdown":"modules/countdown.js","./modules/watch":"modules/watch.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
var global = arguments[3]; var global = arguments[3];
var OVERLAY_ID = '__parcel__error__overlay__'; var OVERLAY_ID = '__parcel__error__overlay__';
var OldModule = module.bundle.Module; var OldModule = module.bundle.Module;
@ -4351,7 +4385,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60692" + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + "61278" + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
checkedAssets = {}; checkedAssets = {};

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,12 @@
import scrollHandler from './modules/scrollHandler'; import scrollHandler from './modules/scrollHandler';
import clock from './modules/clock'; import clock from './modules/clock';
import countdownTimer from './modules/countdown'; import countdownTimer from './modules/countdown';
import watchPanel from './modules/watch';
const app = () => { const app = () => {
scrollHandler(); scrollHandler();
clock(); clock();
watchPanel();
countdownTimer(); countdownTimer();
setInterval(countdownTimer, 1000); setInterval(countdownTimer, 1000);

View File

@ -5,6 +5,8 @@ const targetDate = new Date('Wed Sep 18 2020 10:30:00 GMT+0200 (Central European
function countdownTimer() { function countdownTimer() {
if (!banner) return;
const difference = +new Date(targetDate) - +new Date(); const difference = +new Date(targetDate) - +new Date();
let remaining = ''; let remaining = '';

21
src/modules/watch.js Normal file
View File

@ -0,0 +1,21 @@
export default () => {
let chatVisible = true;
const toggleChatButton = document.querySelector('#chat-toggle');
const rightPanel = document.querySelector('.right-panel');
console.log('toggleChatButton', toggleChatButton)
const handleButtonClick = () => {
if (chatVisible) {
rightPanel.classList.add('chat-hidden');
chatVisible = false;
} else {
rightPanel.classList.remove('chat-hidden');
chatVisible = true;
}
}
if (toggleChatButton) {
toggleChatButton.addEventListener('click', handleButtonClick, false);
}
};