lavender
/
watch-party
7
4
Fork 5
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Compare commits

base: lavender:main
Branches Tags
lavender:main
lavender:votekiss
lavender:experimental
lunaisnotaboy:main
lunaisnotaboy:votekiss
lunaisnotaboy:experimental
..
compare: lunaisnotaboy:main
Branches Tags
lunaisnotaboy:main
lunaisnotaboy:votekiss
lunaisnotaboy:experimental
lavender:main
lavender:votekiss
lavender:experimental

No commits in common. "main" and "main" have entirely different histories.
main ... main

23 changed files with 2187 additions and 2331 deletions
Show Stats Expand all files Collapse all files

2
.editorconfig
View File

@ -3,7 +3,7 @@ root = true
[*] [*]
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
end_of_line = lf end_of_line = crlf
charset = utf-8 charset = utf-8
trim_trailing_whitespace = false trim_trailing_whitespace = false
insert_final_newline = true insert_final_newline = true

4
frontend/create.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>watch party :D</title> <title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=4b61c4" /> <link rel="stylesheet" href="/styles.css?v=048af96" />
</head> </head>
<body> <body>
@ -47,6 +47,6 @@
</form> </form>
</div> </div>
<script type="module" src="/create.mjs?v=4b61c4"></script> <script type="module" src="/create.mjs?v=048af96"></script>
</body> </body>
</html> </html>

2
frontend/create.mjs
View File

@ -1,4 +1,4 @@
import { setupCreateSessionForm } from "./lib/create-session.mjs?v=4b61c4"; import { setupCreateSessionForm } from "./lib/create-session.mjs?v=048af96";
const main = () => { const main = () => {
setupCreateSessionForm(); setupCreateSessionForm();

BIN
frontend/emojis/blobcat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

24
frontend/index.html
View File

@ -3,8 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>watch party :D</title> <title>watch party :D</title>
<link rel="stylesheet" href="/lib/plyr-3.7.3.css" /> <link rel="stylesheet" href="/styles.css?v=048af96" />
<link rel="stylesheet" href="/styles.css?v=4b61c4" />
</head> </head>
<body> <body>
@ -31,10 +30,8 @@
required required
/> />
<label id="join-session-colour-label" for="join-session-colour"> <label for="join-session-colour">Colour:</label>
Personal Colour: <input type="color" id="join-session-colour" value="#7ed0ff" required />
</label>
<input type="color" id="join-session-colour" value="#ffffff" required />
<label for="join-session-id">Session ID:</label> <label for="join-session-id">Session ID:</label>
<input <input
@ -67,19 +64,6 @@
</form> </form>
</div> </div>
<script type="module" src="/main.mjs?v=4b61c4"></script> <script type="module" src="/main.mjs?v=048af96"></script>
<script>
const updateColourLabel = () => {
const colour = document.querySelector("#join-session-colour").value;
document.querySelector(
"#join-session-colour-label"
).textContent = `Personal Colour: ${colour}`;
};
document
.querySelector("#join-session-colour")
.addEventListener("input", updateColourLabel);
updateColourLabel();
</script>
</body> </body>
</html> </html>

68
frontend/lib/chat.mjs
View File

@ -2,13 +2,9 @@ import {
setDebounce, setDebounce,
setVideoTime, setVideoTime,
setPlaying, setPlaying,
sync, } from "./watch-session.mjs?v=048af96";
} from "./watch-session.mjs?v=4b61c4"; import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
import { emojify, findEmojis } from "./emojis.mjs?v=4b61c4"; import { linkify } from "./links.mjs";
import { linkify } from "./links.mjs?v=4b61c4";
import { joinSession } from "./watch-session.mjs?v=4b61c4";
import { pling } from "./pling.mjs?v=4b61c4";
import { state } from "./state.mjs";
function setCaretPosition(elem, caretPos) { function setCaretPosition(elem, caretPos) {
if (elem.createTextRange) { if (elem.createTextRange) {
@ -45,7 +41,7 @@ const setupChatboxEvents = (socket) => {
emojiAutocomplete.textContent = ""; emojiAutocomplete.textContent = "";
autocompleting = true; autocompleting = true;
let text = messageInput.value.slice(0, messageInput.selectionStart); let text = messageInput.value.slice(0, messageInput.selectionStart);
const match = text.match(/(:[^\s:]+)?:([^\s:]{2,})$/); const match = text.match(/(:[^\s:]+)?:([^\s:]*)$/);
if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete. if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete.
const prefix = text.slice(0, match.index); const prefix = text.slice(0, match.index);
const search = text.slice(match.index + 1); const search = text.slice(match.index + 1);
@ -134,7 +130,7 @@ const setupChatboxEvents = (socket) => {
selected.classList.add("selected"); selected.classList.add("selected");
selected.scrollIntoView({ scrollMode: "if-needed", block: "nearest" }); selected.scrollIntoView({ scrollMode: "if-needed", block: "nearest" });
} }
if (event.key == "Tab" || event.key == "Enter") { if (event.key == "Tab") {
let selected = document.querySelector(".emoji-option.selected"); let selected = document.querySelector(".emoji-option.selected");
if (!selected) return; if (!selected) return;
event.preventDefault(); event.preventDefault();
@ -165,7 +161,14 @@ const setupChatboxEvents = (socket) => {
handled = true; handled = true;
break; break;
case "/sync": case "/sync":
await sync(); const sessionId = window.location.hash.slice(1);
const { current_time_ms, is_playing } = await fetch(
`/sess/${sessionId}`
).then((r) => r.json());
setDebounce();
setPlaying(is_playing);
setVideoTime(current_time_ms);
const syncMessageContent = document.createElement("span"); const syncMessageContent = document.createElement("span");
syncMessageContent.appendChild( syncMessageContent.appendChild(
@ -186,11 +189,6 @@ const setupChatboxEvents = (socket) => {
); );
handled = true; handled = true;
break; break;
case "/join":
state().sessionId = args;
joinSession();
handled = true;
break;
case "/help": case "/help":
const helpMessageContent = document.createElement("span"); const helpMessageContent = document.createElement("span");
helpMessageContent.innerHTML = helpMessageContent.innerHTML =
@ -198,8 +196,7 @@ const setupChatboxEvents = (socket) => {
"&emsp;<code>/help</code> - display this help message<br>" + "&emsp;<code>/help</code> - display this help message<br>" +
"&emsp;<code>/ping [message]</code> - ping all viewers<br>" + "&emsp;<code>/ping [message]</code> - ping all viewers<br>" +
"&emsp;<code>/sync</code> - resyncs you with other viewers<br>" + "&emsp;<code>/sync</code> - resyncs you with other viewers<br>" +
"&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" + "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message";
"&emsp;<code>/join [session id]</code> - joins another session";
printChatMessage( printChatMessage(
"command-message", "command-message",
@ -297,7 +294,7 @@ const matpad = (n) => {
* @param {string?} user * @param {string?} user
* @param {Node?} content * @param {Node?} content
*/ */
export const printChatMessage = (eventType, user, colour, content) => { const printChatMessage = (eventType, user, colour, content) => {
const chatMessage = document.createElement("div"); const chatMessage = document.createElement("div");
chatMessage.classList.add("chat-message"); chatMessage.classList.add("chat-message");
chatMessage.classList.add(eventType); chatMessage.classList.add(eventType);
@ -412,29 +409,28 @@ export const logEventToChat = async (event) => {
} }
printChatMessage("ping", event.user, event.colour, messageContent); printChatMessage("ping", event.user, event.colour, messageContent);
pling(); beep();
if ("Notification" in window) {
const title = "watch party :)";
const options = {
body: event.data
? `${event.user} pinged saying: ${event.data}`
: `${event.user} pinged`,
};
if (Notification.permission === "granted") {
new Notification(title, options);
} else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
if (permission === "granted") {
new Notification(title, options);
}
});
}
}
break; break;
} }
} }
}; };
const beep = () => {
const context = new AudioContext();
const gain = context.createGain();
gain.connect(context.destination);
gain.gain.value = 0.1;
const oscillator = context.createOscillator();
oscillator.connect(gain);
oscillator.frequency.value = 520;
oscillator.type = "square";
oscillator.start(context.currentTime);
oscillator.stop(context.currentTime + 0.22);
};
export const updateViewerList = (viewers) => { export const updateViewerList = (viewers) => {
const listContainer = document.querySelector("#viewer-list"); const listContainer = document.querySelector("#viewer-list");

2
frontend/lib/create-session.mjs
View File

@ -1,4 +1,4 @@
import { createSession } from "./watch-session.mjs?v=4b61c4"; import { createSession } from "./watch-session.mjs?v=048af96";
export const setupCreateSessionForm = () => { export const setupCreateSessionForm = () => {
const form = document.querySelector("#create-session-form"); const form = document.querySelector("#create-session-form");

20
frontend/lib/emojis.mjs
View File

@ -32,15 +32,7 @@ export async function emojify(text) {
const emojis = {}; const emojis = {};
export const emojisLoaded = Promise.all([ export const emojisLoaded = Promise.all([
fetch("/emojis/unicode.json") fetch("/emojis")
.then((e) => e.json())
.then((a) => {
for (let e of a) {
emojis[e[0][0]] = emojis[e[0][0]] || [];
emojis[e[0][0]].push([e[0], e[1], null, e[0]]);
}
}),
fetch("/emojos")
.then((e) => e.json()) .then((e) => e.json())
.then((a) => { .then((a) => {
for (let e of a) { for (let e of a) {
@ -50,6 +42,14 @@ export const emojisLoaded = Promise.all([
emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]); emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
} }
}), }),
fetch("/emojis/unicode.json")
.then((e) => e.json())
.then((a) => {
for (let e of a) {
emojis[e[0][0]] = emojis[e[0][0]] || [];
emojis[e[0][0]].push([e[0], e[1], null, e[0]]);
}
}),
]); ]);
export async function findEmojis(search) { export async function findEmojis(search) {
@ -68,5 +68,5 @@ export async function findEmojis(search) {
} }
} }
} }
return [...groups[1], ...groups[0]]; return [...groups[0], ...groups[1]];
} }

16
frontend/lib/join-session.mjs
View File

@ -1,5 +1,4 @@
import { joinSession } from "./watch-session.mjs?v=4b61c4"; import { joinSession } from "./watch-session.mjs?v=048af96";
import { state } from "./state.mjs";
/** /**
* @param {HTMLInputElement} field * @param {HTMLInputElement} field
@ -54,13 +53,11 @@ const displayPostCreateMessage = () => {
if (params.get("created") == "true") { if (params.get("created") == "true") {
document.querySelector("#post-create-message").style["display"] = "block"; document.querySelector("#post-create-message").style["display"] = "block";
window.history.replaceState({}, document.title, `/${window.location.hash}`); window.history.replaceState({}, document.title, `/${window.location.hash}`);
return true;
} }
return false;
}; };
export const setupJoinSessionForm = () => { export const setupJoinSessionForm = () => {
const created = displayPostCreateMessage(); displayPostCreateMessage();
const form = document.querySelector("#join-session-form"); const form = document.querySelector("#join-session-form");
const nickname = form.querySelector("#join-session-nickname"); const nickname = form.querySelector("#join-session-nickname");
@ -83,10 +80,11 @@ export const setupJoinSessionForm = () => {
saveNickname(nickname); saveNickname(nickname);
saveColour(colour); saveColour(colour);
try { try {
state().nickname = nickname.value; await joinSession(
state().sessionId = sessionId.value; nickname.value,
state().colour = colour.value.replace(/^#/, ""); sessionId.value,
await joinSession(created); colour.value.replace(/^#/, "")
);
} catch (e) { } catch (e) {
alert(e.message); alert(e.message);
button.disabled = false; button.disabled = false;

8
frontend/lib/links.mjs
View File

@ -1,6 +1,3 @@
import { joinSession } from "./watch-session.mjs?v=4b61c4";
import { state } from "./state.mjs";
export async function linkify( export async function linkify(
text, text,
next = async (t) => [document.createTextNode(t)] next = async (t) => [document.createTextNode(t)]
@ -32,12 +29,9 @@ export async function linkify(
) { ) {
nodes.push( nodes.push(
Object.assign(document.createElement("a"), { Object.assign(document.createElement("a"), {
href: url.href,
textContent: "Join Session", textContent: "Join Session",
className: "chip join-chip", className: "chip join-chip",
onclick: () => {
state().sessionId = url.hash.substring(1);
joinSession();
},
}) })
); );
} else if ( } else if (

79
frontend/lib/pling.mjs
View File

@ -1,79 +0,0 @@
export const pling = () => {
const maxGain = 0.3;
const duration = 0.22;
const fadeDuration = 0.1;
const secondBeepOffset = 0.05;
const thirdBeepOffset = 2 * secondBeepOffset;
const ctx = new AudioContext();
const firstBeepGain = ctx.createGain();
firstBeepGain.connect(ctx.destination);
firstBeepGain.gain.setValueAtTime(0.01, ctx.currentTime);
firstBeepGain.gain.exponentialRampToValueAtTime(
maxGain,
ctx.currentTime + fadeDuration
);
firstBeepGain.gain.setValueAtTime(
maxGain,
ctx.currentTime + (duration - fadeDuration)
);
firstBeepGain.gain.exponentialRampToValueAtTime(
0.01,
ctx.currentTime + duration
);
const firstBeep = ctx.createOscillator();
firstBeep.connect(firstBeepGain);
firstBeep.frequency.value = 400;
firstBeep.type = "sine";
const secondBeepGain = ctx.createGain();
secondBeepGain.connect(ctx.destination);
secondBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + secondBeepOffset);
secondBeepGain.gain.exponentialRampToValueAtTime(
maxGain,
ctx.currentTime + secondBeepOffset + fadeDuration
);
secondBeepGain.gain.setValueAtTime(
maxGain,
ctx.currentTime + secondBeepOffset + (duration - fadeDuration)
);
secondBeepGain.gain.exponentialRampToValueAtTime(
0.01,
ctx.currentTime + secondBeepOffset + duration
);
const secondBeep = ctx.createOscillator();
secondBeep.connect(secondBeepGain);
secondBeep.frequency.value = 600;
secondBeep.type = "sine";
const thirdBeepGain = ctx.createGain();
thirdBeepGain.connect(ctx.destination);
thirdBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + thirdBeepOffset);
thirdBeepGain.gain.exponentialRampToValueAtTime(
maxGain,
ctx.currentTime + thirdBeepOffset + fadeDuration
);
thirdBeepGain.gain.setValueAtTime(
maxGain,
ctx.currentTime + thirdBeepOffset + (duration - fadeDuration)
);
thirdBeepGain.gain.exponentialRampToValueAtTime(
0.01,
ctx.currentTime + thirdBeepOffset + duration
);
const thirdBeep = ctx.createOscillator();
thirdBeep.connect(thirdBeepGain);
thirdBeep.frequency.value = 900;
thirdBeep.type = "sine";
firstBeep.start(ctx.currentTime);
firstBeep.stop(ctx.currentTime + duration);
secondBeep.start(ctx.currentTime + secondBeepOffset);
secondBeep.stop(ctx.currentTime + (secondBeepOffset + duration));
thirdBeep.start(ctx.currentTime + thirdBeepOffset);
thirdBeep.stop(ctx.currentTime + (thirdBeepOffset + duration));
};

1
frontend/lib/plyr-3.7.3.css
View File

File diff suppressed because one or more lines are too long

1
frontend/lib/plyr-3.7.3.min.esm.js
View File

File diff suppressed because one or more lines are too long

6
frontend/lib/reconnecting-web-socket.mjs
View File

@ -11,7 +11,6 @@ export default class ReconnectingWebSocket {
this._lastConnect = 0; this._lastConnect = 0;
this._socket = null; this._socket = null;
this._unsent = []; this._unsent = [];
this._closing = false;
this._connect(true); this._connect(true);
} }
_connect(first) { _connect(first) {
@ -41,7 +40,6 @@ export default class ReconnectingWebSocket {
}); });
} }
_reconnect() { _reconnect() {
if (this._closing) return;
if (this._reconnecting) return; if (this._reconnecting) return;
this._eventTarget.dispatchEvent(new Event("reconnecting")); this._eventTarget.dispatchEvent(new Event("reconnecting"));
this._reconnecting = true; this._reconnecting = true;
@ -58,10 +56,6 @@ export default class ReconnectingWebSocket {
this._unsent.push(message); this._unsent.push(message);
} }
} }
close() {
this._closing = true;
this._socket.close();
}
addEventListener(...a) { addEventListener(...a) {
return this._eventTarget.addEventListener(...a); return this._eventTarget.addEventListener(...a);
} }

7
frontend/lib/state.mjs
View File

@ -1,7 +0,0 @@
let instance = null;
export const state = () => {
if (!instance) {
instance = {};
}
return instance;
};

186
frontend/lib/video.mjs
View File

@ -1,84 +1,132 @@
import Plyr from "./plyr-3.7.3.min.esm.js"; const loadVolume = () => {
try {
const savedVolume = localStorage.getItem("watch-party-volume");
if (savedVolume != null && savedVolume != "") {
return +savedVolume;
}
} catch (_err) {
// Sometimes localStorage is blocked from use
}
// default
return 0.5;
};
/**
* @param {number} volume
*/
const saveVolume = (volume) => {
try {
localStorage.setItem("watch-party-volume", volume);
} catch (_err) {
// see loadVolume
}
};
const loadCaptionTrack = () => {
try {
const savedTrack = localStorage.getItem("watch-party-captions");
if (savedTrack != null && savedTrack != "") {
return +savedTrack;
}
} catch (_err) {
// Sometimes localStorage is blocked from use
}
// default
return -1;
};
/**
* @param {number} track
*/
const saveCaptionsTrack = (track) => {
try {
localStorage.setItem("watch-party-captions", track);
} catch (_err) {
// see loadCaptionsTrack
}
};
/** /**
* @param {string} videoUrl * @param {string} videoUrl
* @param {{name: string, url: string}[]} subtitles * @param {{name: string, url: string}[]} subtitles
*/ */
const createVideoElement = (videoUrl, subtitles, created) => { const createVideoElement = (videoUrl, subtitles) => {
const oldVideo = document.getElementById(".plyr");
if (oldVideo) {
oldVideo.remove();
}
const video = document.createElement("video"); const video = document.createElement("video");
video.id = "video"; video.controls = true;
video.autoplay = false;
video.volume = loadVolume();
video.crossOrigin = "anonymous"; video.crossOrigin = "anonymous";
video.addEventListener("volumechange", async () => {
saveVolume(video.volume);
});
const source = document.createElement("source"); const source = document.createElement("source");
source.src = videoUrl; source.src = videoUrl;
video.appendChild(source); video.appendChild(source);
const storedTrack = loadCaptionTrack();
let id = 0;
for (const { name, url } of subtitles) { for (const { name, url } of subtitles) {
const track = document.createElement("track"); const track = document.createElement("track");
track.label = name; track.label = name;
track.srclang = "xx-" + name.toLowerCase();
track.src = url; track.src = url;
track.kind = "captions"; track.kind = "captions";
if (id == storedTrack) {
track.default = true;
}
video.appendChild(track); video.appendChild(track);
id++;
} }
const videoContainer = document.querySelector("#video-container"); video.textTracks.addEventListener("change", async () => {
videoContainer.style.display = "block"; let id = 0;
videoContainer.appendChild(video); for (const track of video.textTracks) {
if (track.mode != "disabled") {
const player = new Plyr(video, { saveCaptionsTrack(id);
clickToPlay: false, return;
settings: ["captions", "quality"], }
autopause: false, id++;
});
player.elements.controls.insertAdjacentHTML(
"afterbegin",
`<button type="button" aria-pressed="false" class="plyr__controls__item plyr__control lock-controls"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"></path></svg><span class="label--pressed plyr__sr-only">Unlock controls</span><span class="label--not-pressed plyr__sr-only">Lock controls</span></button>`
);
const lockButton = player.elements.controls.children[0];
let controlsEnabled = created;
const setControlsEnabled = (enabled) => {
controlsEnabled = enabled;
lockButton.setAttribute("aria-pressed", enabled);
lockButton.classList.toggle("plyr__control--pressed", enabled);
player.elements.buttons.play[0].disabled =
player.elements.buttons.play[1].disabled =
player.elements.inputs.seek.disabled =
!enabled;
if (!enabled) {
// enable media button support
navigator.mediaSession.setActionHandler("play", null);
navigator.mediaSession.setActionHandler("pause", null);
navigator.mediaSession.setActionHandler("stop", null);
navigator.mediaSession.setActionHandler("seekbackward", null);
navigator.mediaSession.setActionHandler("seekforward", null);
navigator.mediaSession.setActionHandler("seekto", null);
navigator.mediaSession.setActionHandler("previoustrack", null);
navigator.mediaSession.setActionHandler("nexttrack", null);
} else {
// disable media button support by ignoring the events
navigator.mediaSession.setActionHandler("play", () => {});
navigator.mediaSession.setActionHandler("pause", () => {});
navigator.mediaSession.setActionHandler("stop", () => {});
navigator.mediaSession.setActionHandler("seekbackward", () => {});
navigator.mediaSession.setActionHandler("seekforward", () => {});
navigator.mediaSession.setActionHandler("seekto", () => {});
navigator.mediaSession.setActionHandler("previoustrack", () => {});
navigator.mediaSession.setActionHandler("nexttrack", () => {});
} }
}; saveCaptionsTrack(-1);
setControlsEnabled(controlsEnabled); });
lockButton.addEventListener("click", () =>
setControlsEnabled(!controlsEnabled)
);
window.__plyr = player;
return player; // watch for attribute changes on the video object to detect hiding/showing of controls
// as far as i can tell this is the least hacky solutions to get control visibility change events
const observer = new MutationObserver(async (mutations) => {
for (const mutation of mutations) {
if (mutation.attributeName == "controls") {
if (video.controls) {
// enable media button support
navigator.mediaSession.setActionHandler("play", null);
navigator.mediaSession.setActionHandler("pause", null);
navigator.mediaSession.setActionHandler("stop", null);
navigator.mediaSession.setActionHandler("seekbackward", null);
navigator.mediaSession.setActionHandler("seekforward", null);
navigator.mediaSession.setActionHandler("seekto", null);
navigator.mediaSession.setActionHandler("previoustrack", null);
navigator.mediaSession.setActionHandler("nexttrack", null);
} else {
// disable media button support by ignoring the events
navigator.mediaSession.setActionHandler("play", () => {});
navigator.mediaSession.setActionHandler("pause", () => {});
navigator.mediaSession.setActionHandler("stop", () => {});
navigator.mediaSession.setActionHandler("seekbackward", () => {});
navigator.mediaSession.setActionHandler("seekforward", () => {});
navigator.mediaSession.setActionHandler("seekto", () => {});
navigator.mediaSession.setActionHandler("previoustrack", () => {});
navigator.mediaSession.setActionHandler("nexttrack", () => {});
}
return;
}
}
});
observer.observe(video, { attributes: true });
return video;
}; };
/** /**
@ -87,26 +135,24 @@ const createVideoElement = (videoUrl, subtitles, created) => {
* @param {number} currentTime * @param {number} currentTime
* @param {boolean} playing * @param {boolean} playing
*/ */
export const setupVideo = async ( export const setupVideo = async (videoUrl, subtitles, currentTime, playing) => {
videoUrl,
subtitles,
currentTime,
playing,
created
) => {
document.querySelector("#pre-join-controls").style["display"] = "none"; document.querySelector("#pre-join-controls").style["display"] = "none";
const player = createVideoElement(videoUrl, subtitles, created); const video = createVideoElement(videoUrl, subtitles);
player.currentTime = currentTime / 1000.0; const videoContainer = document.querySelector("#video-container");
videoContainer.style.display = "block";
videoContainer.appendChild(video);
video.currentTime = currentTime / 1000.0;
try { try {
if (playing) { if (playing) {
player.play(); await video.play();
} else { } else {
player.pause(); video.pause();
} }
} catch (err) { } catch (err) {
// Auto-play is probably disabled, we should uhhhhhhh do something about it // Auto-play is probably disabled, we should uhhhhhhh do something about it
} }
return player; return video;
}; };

127
frontend/lib/watch-session.mjs
View File

@ -1,23 +1,21 @@
import { setupVideo } from "./video.mjs?v=4b61c4"; import { setupVideo } from "./video.mjs?v=048af96";
import { import {
setupChat, setupChat,
logEventToChat, logEventToChat,
updateViewerList, updateViewerList,
printChatMessage, } from "./chat.mjs?v=048af96";
} from "./chat.mjs?v=4b61c4";
import ReconnectingWebSocket from "./reconnecting-web-socket.mjs"; import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
import { state } from "./state.mjs";
let player;
/** /**
* @param {string} sessionId * @param {string} sessionId
* @param {string} nickname * @param {string} nickname
* @returns {ReconnectingWebSocket} * @returns {ReconnectingWebSocket}
*/ */
const createWebSocket = () => { const createWebSocket = (sessionId, nickname, colour) => {
const wsUrl = new URL( const wsUrl = new URL(
`/sess/${state().sessionId}/subscribe` + `/sess/${sessionId}/subscribe` +
`?nickname=${encodeURIComponent(state().nickname)}` + `?nickname=${encodeURIComponent(nickname)}` +
`&colour=${encodeURIComponent(state().colour)}`, `&colour=${encodeURIComponent(colour)}`,
window.location.href window.location.href
); );
wsUrl.protocol = "ws" + window.location.protocol.slice(4); wsUrl.protocol = "ws" + window.location.protocol.slice(4);
@ -42,18 +40,26 @@ export const setDebounce = () => {
}, 500); }, 500);
}; };
export const setVideoTime = (time) => { export const setVideoTime = (time, video = null) => {
if (video == null) {
video = document.querySelector("video");
}
const timeSecs = time / 1000.0; const timeSecs = time / 1000.0;
if (Math.abs(player.currentTime - timeSecs) > 0.5) { if (Math.abs(video.currentTime - timeSecs) > 0.5) {
player.currentTime = timeSecs; video.currentTime = timeSecs;
} }
}; };
export const setPlaying = async (playing) => { export const setPlaying = async (playing, video = null) => {
if (video == null) {
video = document.querySelector("video");
}
if (playing) { if (playing) {
await player.play(); await video.play();
} else { } else {
player.pause(); video.pause();
} }
}; };
@ -61,7 +67,7 @@ export const setPlaying = async (playing) => {
* @param {HTMLVideoElement} video * @param {HTMLVideoElement} video
* @param {ReconnectingWebSocket} socket * @param {ReconnectingWebSocket} socket
*/ */
const setupIncomingEvents = (player, socket) => { const setupIncomingEvents = (video, socket) => {
socket.addEventListener("message", async (messageEvent) => { socket.addEventListener("message", async (messageEvent) => {
try { try {
const event = JSON.parse(messageEvent.data); const event = JSON.parse(messageEvent.data);
@ -71,16 +77,16 @@ const setupIncomingEvents = (player, socket) => {
setDebounce(); setDebounce();
if (event.data.playing) { if (event.data.playing) {
await player.play(); await video.play();
} else { } else {
player.pause(); video.pause();
} }
setVideoTime(event.data.time); setVideoTime(event.data.time, video);
break; break;
case "SetTime": case "SetTime":
setDebounce(); setDebounce();
setVideoTime(event.data); setVideoTime(event.data, video);
break; break;
case "UpdateViewerList": case "UpdateViewerList":
updateViewerList(event.data); updateViewerList(event.data);
@ -94,19 +100,19 @@ const setupIncomingEvents = (player, socket) => {
}; };
/** /**
* @param {Plyr} player * @param {HTMLVideoElement} video
* @param {ReconnectingWebSocket} socket * @param {ReconnectingWebSocket} socket
*/ */
const setupOutgoingEvents = (player, socket) => { const setupOutgoingEvents = (video, socket) => {
const currentVideoTime = () => (player.currentTime * 1000) | 0; const currentVideoTime = () => (video.currentTime * 1000) | 0;
player.on("pause", async () => { video.addEventListener("pause", async (event) => {
if (outgoingDebounce || player.elements.inputs.seek.disabled) { if (outgoingDebounce || !video.controls) {
return; return;
} }
// don't send a pause event for the video ending // don't send a pause event for the video ending
if (player.currentTime == player.duration) { if (video.currentTime == video.duration) {
return; return;
} }
@ -121,8 +127,8 @@ const setupOutgoingEvents = (player, socket) => {
); );
}); });
player.on("play", () => { video.addEventListener("play", (event) => {
if (outgoingDebounce || player.elements.inputs.seek.disabled) { if (outgoingDebounce || !video.controls) {
return; return;
} }
@ -138,14 +144,14 @@ const setupOutgoingEvents = (player, socket) => {
}); });
let firstSeekComplete = false; let firstSeekComplete = false;
player.on("seeked", async (event) => { video.addEventListener("seeked", async (event) => {
if (!firstSeekComplete) { if (!firstSeekComplete) {
// The first seeked event is performed by the browser when the video is loading // The first seeked event is performed by the browser when the video is loading
firstSeekComplete = true; firstSeekComplete = true;
return; return;
} }
if (outgoingDebounce || player.elements.inputs.seek.disabled) { if (outgoingDebounce || !video.controls) {
return; return;
} }
@ -160,29 +166,19 @@ const setupOutgoingEvents = (player, socket) => {
}); });
}; };
export const joinSession = async (created) => { /**
if (state().activeSession) { * @param {string} nickname
if (state().activeSession === state().sessionId) { * @param {string} sessionId
// we are already in this session, dont rejoin */
return; export const joinSession = async (nickname, sessionId, colour) => {
}
// we are joining a new session from an existing session
const messageContent = document.createElement("span");
messageContent.appendChild(document.createTextNode("joining new session "));
messageContent.appendChild(document.createTextNode(state().sessionId));
printChatMessage("join-session", "watch-party", "#fffff", messageContent);
}
state().activeSession = state().sessionId;
// try { // we are handling errors in the join form. // try { // we are handling errors in the join form.
const genericConnectionError = new Error( const genericConnectionError = new Error(
"There was an issue getting the session information." "There was an issue getting the session information."
); );
window.location.hash = state().sessionId; window.location.hash = sessionId;
let response, video_url, subtitle_tracks, current_time_ms, is_playing; let response, video_url, subtitle_tracks, current_time_ms, is_playing;
try { try {
response = await fetch(`/sess/${state().sessionId}`); response = await fetch(`/sess/${sessionId}`);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
throw genericConnectionError; throw genericConnectionError;
@ -206,27 +202,24 @@ export const joinSession = async (created) => {
throw genericConnectionError; throw genericConnectionError;
} }
if (state().socket) { const socket = createWebSocket(sessionId, nickname, colour);
state().socket.close();
state().socket = null;
}
const socket = createWebSocket();
state().socket = socket;
socket.addEventListener("open", async () => { socket.addEventListener("open", async () => {
player = await setupVideo( const video = await setupVideo(
video_url, video_url,
subtitle_tracks, subtitle_tracks,
current_time_ms, current_time_ms,
is_playing, is_playing
created
); );
player.on("canplay", () => { // By default, we should disable video controls if the video is already playing.
sync(); // This solves an issue where Safari users join and seek to 00:00:00 because of
}); // outgoing events.
if (current_time_ms != 0) {
video.controls = false;
}
setupOutgoingEvents(player, socket); setupOutgoingEvents(video, socket);
setupIncomingEvents(player, socket); setupIncomingEvents(video, socket);
setupChat(socket); setupChat(socket);
}); });
socket.addEventListener("reconnecting", (e) => { socket.addEventListener("reconnecting", (e) => {
@ -256,15 +249,3 @@ export const createSession = async (videoUrl, subtitleTracks) => {
window.location = `/?created=true#${id}`; window.location = `/?created=true#${id}`;
}; };
export const sync = async () => {
setDebounce();
await setPlaying(false);
const { current_time_ms, is_playing } = await fetch(
`/sess/${state().sessionId}`
).then((r) => r.json());
setDebounce();
setVideoTime(current_time_ms);
if (is_playing) await setPlaying(is_playing);
};

2
frontend/main.mjs
View File

@ -1,4 +1,4 @@
import { setupJoinSessionForm } from "./lib/join-session.mjs?v=4b61c4"; import { setupJoinSessionForm } from "./lib/join-session.mjs?v=048af96";
const main = () => { const main = () => {
setupJoinSessionForm(); setupJoinSessionForm();

69
frontend/styles.css
View File

@ -25,14 +25,6 @@
), ),
linear-gradient(var(--bg), var(--bg)); linear-gradient(var(--bg), var(--bg));
--accent-transparent: rgba(var(--accent-rgb), 0.25); --accent-transparent: rgba(var(--accent-rgb), 0.25);
--plyr-color-main: var(--accent);
--plyr-control-radius: 6px;
--plyr-menu-radius: 6px;
--plyr-menu-background: var(--autocomplete-bg);
--plyr-menu-color: var(--fg);
--plyr-menu-arrow-color: var(--fg);
--plyr-menu-back-border-color: var(--fg-transparent);
--plyr-menu-back-border-shadow-color: transparent;
} }
html { html {
@ -57,41 +49,11 @@ body {
flex-direction: column; flex-direction: column;
} }
.lock-controls.plyr__control--pressed svg { video {
opacity: 0.5; display: block;
}
.plyr {
width: 100%; width: 100%;
height: 100%; height: 100%;
} object-fit: contain;
.plyr__menu__container {
--plyr-video-control-background-hover: var(--fg-transparent);
--plyr-video-control-color-hover: var(--fg);
--plyr-control-radius: 4px;
--plyr-control-spacing: calc(0.25rem / 0.7);
--plyr-font-size-menu: 0.75rem;
--plyr-menu-arrow-size: 0;
margin-bottom: 0.48rem;
max-height: 27vmin;
clip-path: inset(0 0 0 0 round 4px);
scrollbar-width: thin;
}
.plyr__menu__container .plyr__control[role="menuitemradio"]::after {
left: 10px;
}
.plyr__menu__container
.plyr__control[role="menuitemradio"][aria-checked="true"].plyr__tab-focus::before,
.plyr__menu__container
.plyr__control[role="menuitemradio"][aria-checked="true"]:hover::before {
background: var(--accent);
}
[data-plyr="language"] .plyr__menu__value {
display: none;
} }
#video-container { #video-container {
@ -169,7 +131,7 @@ input[type="text"] {
overflow-y: scroll; overflow-y: scroll;
} }
button:not(.plyr button) { button {
background-color: var(--accent); background-color: var(--accent);
border: var(--accent); border: var(--accent);
border-radius: 6px; border-radius: 6px;
@ -264,8 +226,7 @@ button.small-button {
} }
.chat-message.set-time, .chat-message.set-time,
.chat-message.set-playing, .chat-message.set-playing {
.chat-message.join-session {
font-style: italic; font-style: italic;
text-align: right; text-align: right;
font-size: 0.85em; font-size: 0.85em;
@ -276,8 +237,7 @@ button.small-button {
} }
.chat-message.set-time > strong, .chat-message.set-time > strong,
.chat-message.set-playing > strong, .chat-message.set-playing > strong {
.chat-message.join-session > strong {
color: unset !important; color: unset !important;
} }
@ -341,7 +301,7 @@ button.small-button {
display: none; display: none;
} }
.emoji-option:not(:root) { .emoji-option {
background: transparent; background: transparent;
font-size: 0.75rem; font-size: 0.75rem;
text-align: left; text-align: left;
@ -397,19 +357,10 @@ button.small-button {
cursor: pointer; cursor: pointer;
} }
input[type="color"]::-moz-color-swatch { input[type="color"]::-moz-color-swatch,
border: none; input[type="color"]::-webkit-color-swatch,
margin: 0;
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
margin: 0;
padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { input[type="color"]::-webkit-color-swatch-wrapper {
/* This *should* be working in Chrome, but it doesn't for reasons that are beyond me. */
border: none; border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;

2
src/main.rs
View File

@ -62,7 +62,7 @@ async fn main() {
warb::reply::json(&json!({ "id": session_uuid.to_string(), "session": session_view })) warb::reply::json(&json!({ "id": session_uuid.to_string(), "session": session_view }))
}); });
let get_emoji_route = warb::path!("emojos").and_then(get_emoji_list); let get_emoji_route = warb::path!("emojis").and_then(get_emoji_list);
enum RequestedSession { enum RequestedSession {
Session(Uuid, WatchSession), Session(Uuid, WatchSession),