69 lines
1.5 KiB
JavaScript
69 lines
1.5 KiB
JavaScript
|
import { PeerTubePlayer } from '@peertube/embed-api';
|
||
|
import 'regenerator-runtime/runtime';
|
||
|
import { toggleVideoPlaying } from './video-controls';
|
||
|
import { getVideoData } from './scheduling';
|
||
|
|
||
|
const streamData = getVideoData();
|
||
|
|
||
|
const videoWrapper = document.getElementById('video-wrapper');
|
||
|
const overlay = document.getElementById('overlay');
|
||
|
const videoiFrame = document.querySelector('iframe.video-player');
|
||
|
|
||
|
const video = {
|
||
|
isPlaying: false,
|
||
|
overlayVisible: false,
|
||
|
};
|
||
|
|
||
|
export const setUpPlayer = async () => {
|
||
|
const player = new PeerTubePlayer(videoiFrame);
|
||
|
|
||
|
await player.ready;
|
||
|
|
||
|
onPlayerReady(player);
|
||
|
app();
|
||
|
};
|
||
|
|
||
|
const app = () => {
|
||
|
if (streamData && streamData) {
|
||
|
console.log({ streamData });
|
||
|
}
|
||
|
};
|
||
|
|
||
|
const onPlayerReady = (player) => {
|
||
|
videoWrapper.addEventListener('mousemove', showOverlay);
|
||
|
|
||
|
videoWrapper.addEventListener('click', () => {
|
||
|
toggleVideoPlaying({
|
||
|
player,
|
||
|
video,
|
||
|
onPlay: () => {
|
||
|
hideOverlay();
|
||
|
},
|
||
|
onPause: () => {
|
||
|
showOverlay();
|
||
|
},
|
||
|
});
|
||
|
video.isPlaying = !video.isPlaying;
|
||
|
});
|
||
|
};
|
||
|
|
||
|
const showOverlay = () => {
|
||
|
if (!video.overlayVisible) {
|
||
|
videoWrapper.classList.add('active');
|
||
|
overlay.classList.add('active');
|
||
|
|
||
|
setTimeout(hideOverlay, 2000);
|
||
|
}
|
||
|
video.overlayVisible = true;
|
||
|
};
|
||
|
|
||
|
const hideOverlay = () => {
|
||
|
if (video.isPlaying) {
|
||
|
video.overlayVisible = false;
|
||
|
videoWrapper.classList.remove('active');
|
||
|
overlay.classList.remove('active');
|
||
|
}
|
||
|
};
|
||
|
|
||
|
setUpPlayer();
|