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">
{% include embeds/twitch.html %}
{% include embeds/discord-chat.html %}
<div class="watch-contents">
<div class="left-panel">
{% include embeds/twitch.html %}
</div>
<div class="right-panel">
{% 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>

View File

@ -1,3 +1,9 @@
{% if page.lang == fr %}
{% assign defaultchannel="752951588070359110" %}
{% else %}
{% assign defaultchannel="752951544089149590" %}
{% endif %}
<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>

View File

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

View File

@ -1,29 +1,63 @@
.watch-panel {
margin: 0 auto;
display: flex;
width: 95vw;
margin-bottom: var(--size-128);
width: 95vw;
margin: 0 auto;
#twitch-embed {
flex: 4;
iframe {
.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 {
width: 100%;
height: 100%;
iframe {
width: 100%;
height: 100%;
}
}
.discord-chat {
iframe {
width: 100%;
}
}
@include touch {
flex-direction: column;
#twitch-embed {
height: 80vh;
}
}
}
.discord-chat {
flex: 1;
.watch-controls {
display: flex;
justify-content: flex-end;
margin-top: var(--size-16);
iframe {
width: 100%;
}
}
@include touch {
flex-direction: column;
#twitch-embed {
height: 80vh;
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)');
function countdownTimer() {
if (!banner) return;
var difference = +new Date(targetDate) - +new Date();
var remaining = '';
@ -4303,6 +4304,36 @@ function 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;
},{}],"index.js":[function(require,module,exports) {
"use strict";
@ -4313,17 +4344,20 @@ var _clock = _interopRequireDefault(require("./modules/clock"));
var _countdown = _interopRequireDefault(require("./modules/countdown"));
var _watch = _interopRequireDefault(require("./modules/watch"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var app = function app() {
(0, _scrollHandler.default)();
(0, _clock.default)();
(0, _watch.default)();
(0, _countdown.default)();
setInterval(_countdown.default, 1000);
};
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 OVERLAY_ID = '__parcel__error__overlay__';
var OldModule = module.bundle.Module;
@ -4351,7 +4385,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
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) {
checkedAssets = {};

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,12 @@
import scrollHandler from './modules/scrollHandler';
import clock from './modules/clock';
import countdownTimer from './modules/countdown';
import watchPanel from './modules/watch';
const app = () => {
scrollHandler();
clock();
watchPanel();
countdownTimer();
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() {
if (!banner) return;
const difference = +new Date(targetDate) - +new Date();
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);
}
};