watch-party/frontend/main.js

235 lines
5.8 KiB
JavaScript
Raw Normal View History

2021-10-24 22:48:10 +00:00
/**
* @param {string} videoUrl
* @param {{name: string, url: string}[]} subtitles
*/
const createVideoElement = (videoUrl, subtitles) => {
const video = document.createElement("video");
video.controls = true;
video.autoplay = false;
const source = document.createElement("source");
source.src = videoUrl;
video.appendChild(source);
let first = true;
for (const { name, url } of subtitles) {
const track = document.createElement("track");
track.label = name;
track.src = url;
track.kind = "captions";
if (first) {
track.default = true;
first = false;
}
video.appendChild(track);
}
return video;
}
let outgoingDebounce = false;
let outgoingDebounceCallbackId = null;
2021-10-25 01:59:52 +00:00
const setDebounce = () => {
outgoingDebounce = true;
if (outgoingDebounceCallbackId) {
cancelIdleCallback(outgoingDebounceCallbackId);
outgoingDebounceCallbackId = null;
}
outgoingDebounceCallbackId = setTimeout(() => {
outgoingDebounce = false;
}, 500);
}
2021-10-24 22:48:10 +00:00
/**
* @param {WebSocket} socket
* @param {HTMLVideoElement} video
*/
const setupSocketEvents = (socket, video) => {
const setVideoTime = time => {
const timeSecs = time / 1000.0;
if (Math.abs(video.currentTime - timeSecs) > 0.5) {
video.currentTime = timeSecs;
}
}
socket.addEventListener("message", async messageEvent => {
try {
const event = JSON.parse(messageEvent.data);
console.log(event);
switch (event.op) {
case "SetPlaying":
2021-10-25 01:59:52 +00:00
setDebounce();
2021-10-24 22:48:10 +00:00
if (event.data.playing) {
await video.play();
} else {
video.pause();
}
setVideoTime(event.data.time);
break;
case "SetTime":
2021-10-25 01:59:52 +00:00
setDebounce();
2021-10-24 22:48:10 +00:00
setVideoTime(event.data);
break;
2021-10-25 01:59:52 +00:00
// TODO: UserJoin, UserLeave, ChatMessage
2021-10-24 22:48:10 +00:00
}
} catch (_err) {
}
});
}
/**
* @param {string} sessionId
* @param {HTMLVideoElement} video
* @param {WebSocket} socket
*/
const setupVideoEvents = (sessionId, video, socket) => {
const currentVideoTime = () => (video.currentTime * 1000) | 0;
video.addEventListener("pause", async event => {
if (outgoingDebounce) {
return;
}
socket.send(JSON.stringify({
"op": "SetPlaying",
"data": {
"playing": false,
"time": currentVideoTime(),
}
}));
});
video.addEventListener("play", event => {
if (outgoingDebounce) {
return;
}
socket.send(JSON.stringify({
"op": "SetPlaying",
"data": {
"playing": true,
"time": currentVideoTime(),
}
}));
});
let firstSeekComplete = false;
video.addEventListener("seeked", async event => {
if (!firstSeekComplete) {
// The first seeked event is performed by the browser when the video is loading
firstSeekComplete = true;
return;
}
if (outgoingDebounce) {
return;
}
socket.send(JSON.stringify({
"op": "SetTime",
"data": currentVideoTime(),
}));
2021-10-24 22:48:10 +00:00
});
}
/**
* @param {string} videoUrl
* @param {{name: string, url: string}[]} subtitles
* @param {number} currentTime
* @param {boolean} playing
* @param {WebSocket} socket
*/
const setupVideo = async (sessionId, videoUrl, subtitles, currentTime, playing, socket) => {
2021-10-25 01:59:52 +00:00
document.querySelector("#pre-join-controls").style["display"] = "none";
2021-10-24 22:48:10 +00:00
const video = createVideoElement(videoUrl, subtitles);
2021-10-25 01:59:52 +00:00
document.querySelector("#video-container").appendChild(video);
2021-10-24 22:48:10 +00:00
video.currentTime = (currentTime / 1000.0);
try {
if (playing) {
await video.play()
} else {
video.pause()
}
} catch (err) {
// Auto-play is probably disabled, we should uhhhhhhh do something about it
}
setupSocketEvents(socket, video);
setupVideoEvents(sessionId, video, socket);
2021-10-24 22:48:10 +00:00
}
2021-10-25 01:59:52 +00:00
/**
* @param {string} sessionId
* @param {WebSocket} socket
*/
const setupChat = async (sessionId, socket) => {
document.querySelector("#chatbox-container").style["display"] = "initial";
// TODO
}
/**
* @param {string} nickname
* @param {string} sessionId
*/
const joinSession = async (nickname, sessionId) => {
2021-10-24 22:48:10 +00:00
try {
window.location.hash = sessionId;
const {
video_url, subtitle_tracks,
current_time_ms, is_playing
} = await fetch(`/sess/${sessionId}`).then(r => r.json());
2021-10-25 01:59:52 +00:00
const wsUrl = new URL(`/sess/${sessionId}/subscribe?nickname=${encodeURIComponent(nickname)}`, window.location.href);
2021-10-24 22:48:10 +00:00
wsUrl.protocol = { "http:": "ws:", "https:": "wss:" }[wsUrl.protocol];
const socket = new WebSocket(wsUrl.toString());
2021-10-25 01:59:52 +00:00
socket.addEventListener("open", () => {
setupVideo(sessionId, video_url, subtitle_tracks, current_time_ms, is_playing, socket);
setupChat(sessionId, socket);
});
2021-10-24 22:48:10 +00:00
} catch (err) {
// TODO: Show an error on the screen
console.error(err);
}
}
const main = () => {
2021-10-25 01:59:52 +00:00
document.querySelector("#join-session-nickname").value = localStorage.getItem("watch-party-nickname");
2021-10-24 22:48:10 +00:00
document.querySelector("#join-session-form").addEventListener("submit", event => {
event.preventDefault();
2021-10-25 01:59:52 +00:00
const nickname = document.querySelector("#join-session-nickname").value;
2021-10-24 22:48:10 +00:00
const sessionId = document.querySelector("#join-session-id").value;
2021-10-25 01:59:52 +00:00
localStorage.setItem("watch-party-nickname", nickname);
joinSession(nickname, sessionId);
2021-10-24 22:48:10 +00:00
});
if (window.location.hash.match(/#[0-9a-f\-]+/)) {
document.querySelector("#join-session-id").value = window.location.hash.substring(1);
}
};
if (document.readyState === "complete") {
main();
} else {
document.addEventListener("DOMContentLoaded", main);
}