rf-web/src/modules/watch.js
2020-09-23 17:03:45 +02:00

81 lines
2.7 KiB
JavaScript

const twitchChannel1 = 'reclaimfutures';
const twitchChannel2 = 'reclaimfutures2';
let streamChannel = 1;
export default () => {
if (document.getElementById('page-watch')) {
let chatVisible = true;
const toggleChatButton = document.querySelector('#chat-toggle');
const rightPanel = document.querySelector('.right-panel');
const program = document.getElementById('program');
const now = new Date();
const today = `${(`0${now.getDate()}`).slice(-2)}.${
(`0${now.getMonth() + 1}`).slice(-2)}.${
now.getFullYear()}`;
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);
}
if (program) {
const dateToday = new Date();
const monthIsSeptember = dateToday.getMonth() + 1 === 9;
const days = {
18: program.querySelector('.day-18-09'),
19: program.querySelector('.day-19-09'),
20: program.querySelector('.day-20-09'),
};
if (monthIsSeptember && days[dateToday.getDate()]) {
Object.keys(days).forEach(day => {
if (`${day}` !== `${dateToday.getDate()}`) {
days[`${day}`].classList.add('hide');
}
});
}
}
if (today === '18.09.2020') {
const watchPanel = document.querySelector('.watch-panel');
const switchStreams = (titleButton, toggleButton) => {
const twitchEmbed = document.querySelector('#twitch-embed iframe');
twitchEmbed.setAttribute('src', `https://player.twitch.tv?channel=${streamChannel === 2 ? twitchChannel1 : twitchChannel2}&migration=true&parent=reclaimfutures.org&referrer=https%3A%2F%2Freclaimfutures.org%2Frf2020%2Fwatch%2F`);
streamChannel = streamChannel === 1 ? 2 : 1;
titleButton.innerText = `Stream ${streamChannel === 1 ? 'A' : 'B'}`;
toggleButton.innerText = `-> watch stream ${streamChannel === 1 ? 'B' : 'A'}`;
titleButton.classList.toggle('stream-a');
titleButton.classList.toggle('stream-b');
};
const streamTitle = document.createElement('span');
const streamToggle = document.createElement('button');
streamTitle.innerText = `Stream A`;
streamToggle.innerText = `-> watch stream B`;
streamTitle.classList.add('stream-title', 'stream-a');
streamToggle.classList.add('stream-toggle',);
streamToggle.addEventListener('click', () => switchStreams(streamTitle, streamToggle));
watchPanel.prepend(streamToggle);
watchPanel.prepend(streamTitle);
}
}
};