123 lines
No EOL
3.3 KiB
JavaScript
123 lines
No EOL
3.3 KiB
JavaScript
const WebsocketMessageTypeViewers = 0;
|
|
const WebsocketMessageTypeCurrentlyPlaying = 1;
|
|
|
|
const playCircle = feather.icons["play-circle"].toSvg()
|
|
const pauseCircle = feather.icons["pause-circle"].toSvg()
|
|
|
|
const viewers = document.getElementById("viewers")
|
|
const currently_playing = document.getElementById("currently_playing")
|
|
|
|
// Video player icons
|
|
const loading = document.getElementById("loading");
|
|
const paused = document.getElementById("paused");
|
|
const muted = document.getElementById("muted");
|
|
|
|
const volumeslider = document.getElementById("volumeslider");
|
|
const video = document.getElementById("video");
|
|
const pauseElement = document.getElementById("pause");
|
|
|
|
function setvolume(volume) {
|
|
video.volume = volume
|
|
}
|
|
|
|
video.onseeking = (e) => {
|
|
console.log("seeking/loading start")
|
|
loading.classList.remove("hidden")
|
|
}
|
|
|
|
video.onseeked = (e) => {
|
|
console.log("seeked/load end")
|
|
loading.classList.add("hidden")
|
|
}
|
|
|
|
video.onvolumechange = (e) => {
|
|
if (video.volume !== volumeslider.volume) {
|
|
volumeslider.volume = video.volume
|
|
}
|
|
|
|
if (video.volume == 0) {
|
|
muted.classList.remove("hidden")
|
|
} else {
|
|
muted.classList.add("hidden")
|
|
}
|
|
}
|
|
|
|
video.onpause = (e) => {
|
|
console.log("paused")
|
|
pauseElement.innerHTML = playCircle
|
|
|
|
paused.classList.remove("hidden")
|
|
}
|
|
|
|
video.onplay = (e) => {
|
|
console.log("play/resume")
|
|
video.currentTime = video.duration
|
|
pauseElement.innerHTML = pauseCircle
|
|
|
|
paused.classList.add("hidden")
|
|
}
|
|
|
|
function pause() {
|
|
if (video.paused) {
|
|
video.play()
|
|
} else {
|
|
video.pause()
|
|
}
|
|
}
|
|
|
|
function fullscreen() {
|
|
video.requestFullscreen()
|
|
}
|
|
|
|
let wsurl = "";
|
|
if (location.protocol === 'https:') {
|
|
wsurl = "wss://" + window.location.host + "/ws"
|
|
} else {
|
|
wsurl = "ws://" + window.location.host + "/ws"
|
|
}
|
|
|
|
let websocket = new WebSocket(wsurl)
|
|
|
|
websocket.onmessage = (event) => {
|
|
let data = JSON.parse(event.data)
|
|
|
|
switch (data.type) {
|
|
case WebsocketMessageTypeViewers:
|
|
viewers.innerText = data.message;
|
|
break
|
|
case WebsocketMessageTypeCurrentlyPlaying:
|
|
currently_playing.innerText = data.message
|
|
// video.duration is sometimes NaN
|
|
if (!isNaN(video.duration)) {
|
|
video.currentTime = video.duration
|
|
}
|
|
break
|
|
}
|
|
};
|
|
|
|
let videoSrc = '/media/index.m3u8';
|
|
if (Hls.isSupported()) {
|
|
let hls = new Hls();
|
|
hls.loadSource(videoSrc);
|
|
hls.attachMedia(video);
|
|
}
|
|
// HLS.js is not supported on platforms that do not have Media Source
|
|
// Extensions (MSE) enabled.
|
|
//
|
|
// When the browser has built-in HLS support (check using `canPlayType`),
|
|
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
|
|
// element through the `src` property. This is using the built-in support
|
|
// of the plain video element, without using HLS.js.
|
|
//
|
|
// Note: it would be more normal to wait on the 'canplay' event below however
|
|
// on Safari (where you are most likely to find built-in HLS support) the
|
|
// video.src URL must be on the user-driven white-list before a 'canplay'
|
|
// event will be emitted; the last video event that can be reliably
|
|
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
|
|
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
video.src = videoSrc;
|
|
}
|
|
|
|
feather.replace()
|
|
|
|
volumeslider.volume = video.volume |