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();
|