k
/
watch-party
forked from lavender/watch-party
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: k:votekiss
Branches Tags
k:options-pane
k:main
k:votekiss
k:experimental
lavender:main
lavender:votekiss
lavender:experimental
...
pull from: k:main
Branches Tags
k:options-pane
k:main
k:votekiss
k:experimental
lavender:main
lavender:votekiss
lavender:experimental

18 Commits
votekiss ... main

Author SHA1 Message Date
easrng e43184ab49 fix the color input styles on chrome 2022-07-12 20:21:36 +00:00
Charlotte Som 61c456eceb Default captions to enabled 2022-04-29 23:50:35 +01:00
Charlotte Som 0fc8953a69 Textual feedback for personal colour 2022-04-29 23:41:33 +01:00
Charlotte Som 8e19d7b34d Don't allow controls by default 2022-04-29 23:28:11 +01:00
Charlotte Som 8717e0dff2 Bust cache 2022-04-29 23:25:31 +01:00
Charlotte Som bfdcf2afed Default personal colour to white 2022-04-29 23:24:37 +01:00
Charlotte Som 8531c83574 Sort unicode emoji before emojos, let enter fill an emoji 2022-04-29 23:22:23 +01:00
Charlotte Som 0d555adf21 Remove blobcat.png 
It should be gitignored anyway
 2022-04-29 23:08:10 +01:00
maia arson crimew b72a7d11d7 bust cache 2022-03-30 16:28:10 +02:00
maia arson crimew ee93fb84af turn the beep into a pling 2022-03-30 16:26:34 +02:00
maia arson crimew 40b20b2157 Improve global state handling 2022-03-30 15:02:08 +02:00
maia arson crimew 9a2ac1c432 make pings send browser notifications 2022-03-30 13:45:59 +02:00
maia arson crimew 2197d2b757 make the ping sound a lot more tolerable 2022-03-30 13:28:35 +02:00
maia arson crimew 3d4ea0773d Clicking the join chip will directly join the session without a reload 
also adds a /join command (most likely still requires some further debugging)
 2022-03-30 13:17:44 +02:00
easrng 2d544620ed add linkification and time and join chips 2022-03-09 18:38:22 -05:00
easrng 60672a04ef oh no aaaa 2022-03-08 15:35:12 -05:00
easrng c8ccb7afc4 fix broken things 2022-03-08 15:34:55 -05:00
easrng 2adc8b9d02 fix emoji name overflow (again) and sorting 2022-03-08 15:33:14 -05:00
17 changed files with 813 additions and 493 deletions
Show Stats Expand all files Collapse all files

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=048af96" /> <link rel="stylesheet" href="/styles.css?v=bfdcf2" />
</head> </head>
<body> <body>
@ -47,6 +47,6 @@
</form> </form>
</div> </div>
<script type="module" src="/create.mjs?v=048af96"></script> <script type="module" src="/create.mjs?v=bfdcf2"></script>
</body> </body>
</html> </html>

2
frontend/create.mjs
View File

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

BIN
frontend/emojis/blobcat.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

23
frontend/index.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=048af96" /> <link rel="stylesheet" href="/styles.css?v=bfdcf2" />
</head> </head>
<body> <body>
@ -30,8 +30,10 @@
required required
/> />
<label for="join-session-colour">Colour:</label> <label id="join-session-colour-label" for="join-session-colour">
<input type="color" id="join-session-colour" value="#7ed0ff" required /> Personal Colour:
</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
@ -64,6 +66,19 @@
</form> </form>
</div> </div>
<script type="module" src="/main.mjs?v=048af96"></script> <script type="module" src="/main.mjs?v=bfdcf2"></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>

206
frontend/lib/chat.mjs
View File

@ -2,8 +2,12 @@ import {
setDebounce, setDebounce,
setVideoTime, setVideoTime,
setPlaying, setPlaying,
} from "./watch-session.mjs?v=048af96"; } from "./watch-session.mjs?v=bfdcf2";
import { emojify, findEmojis } from "./emojis.mjs?v=048af96"; import { emojify, findEmojis } from "./emojis.mjs?v=bfdcf2";
import { linkify } from "./links.mjs?v=bfdcf2";
import { joinSession } from "./watch-session.mjs?v=bfdcf2";
import { pling } from "./pling.mjs?v=bfdcf2";
import { state } from "./state.mjs";
function setCaretPosition(elem, caretPos) { function setCaretPosition(elem, caretPos) {
if (elem.createTextRange) { if (elem.createTextRange) {
@ -35,77 +39,81 @@ const setupChatboxEvents = (socket) => {
}; };
async function autocomplete(fromListTimeout) { async function autocomplete(fromListTimeout) {
if (autocompleting) return; if (autocompleting) return;
clearInterval(showListTimer); try {
emojiAutocomplete.textContent = ""; clearInterval(showListTimer);
autocompleting = true; emojiAutocomplete.textContent = "";
let text = messageInput.value.slice(0, messageInput.selectionStart); autocompleting = true;
const match = text.match(/(:[^\s:]+)?:([^\s:]*)$/); let text = messageInput.value.slice(0, messageInput.selectionStart);
if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete. const match = text.match(/(:[^\s:]+)?:([^\s:]{2,})$/);
const prefix = text.slice(0, match.index); if (!match || match[1]) return (autocompleting = false); // We don't need to autocomplete.
const search = text.slice(match.index + 1); const prefix = text.slice(0, match.index);
if (search.length < 1 && !fromListTimeout) { const search = text.slice(match.index + 1);
if (search.length < 1 && !fromListTimeout) {
autocompleting = false;
showListTimer = setTimeout(() => autocomplete(true), 500);
return;
}
const suffix = messageInput.value.slice(messageInput.selectionStart);
let selected;
const select = (button) => {
if (selected) selected.classList.remove("selected");
selected = button;
button.classList.add("selected");
};
let results = await findEmojis(search);
let yieldAt = performance.now() + 13;
for (let i = 0; i < results.length; i += 100) {
emojiAutocomplete.append.apply(
emojiAutocomplete,
results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
const button = Object.assign(document.createElement("button"), {
className: "emoji-option",
onmousedown: (e) => e.preventDefault(),
onclick: () => {
messageInput.value = prefix + replaceWith + " " + suffix;
setCaretPosition(
messageInput,
(prefix + " " + replaceWith).length
);
},
onmouseover: () => select(button),
onfocus: () => select(button),
type: "button",
title: name,
});
button.append(
replaceWith[0] !== ":"
? Object.assign(document.createElement("span"), {
textContent: replaceWith,
className: "emoji",
})
: Object.assign(new Image(), {
loading: "lazy",
src: `/emojis/${name}${ext}`,
className: "emoji",
}),
Object.assign(document.createElement("span"), {
textContent: name,
className: "emoji-name",
})
);
return button;
})
);
if (i == 0 && emojiAutocomplete.children[0]) {
emojiAutocomplete.children[0].scrollIntoView();
select(emojiAutocomplete.children[0]);
}
const now = performance.now();
if (now > yieldAt) {
yieldAt = now + 13;
await new Promise((cb) => setTimeout(cb, 0));
}
}
autocompleting = false;
} catch (e) {
autocompleting = false; autocompleting = false;
showListTimer = setTimeout(() => autocomplete(true), 500);
return;
} }
const suffix = messageInput.value.slice(messageInput.selectionStart);
let selected;
const select = (button) => {
if (selected) selected.classList.remove("selected");
selected = button;
button.classList.add("selected");
};
let results = await findEmojis(search);
let yieldAt = performance.now() + 13;
for (let i = 0; i < results.length; i += 100) {
emojiAutocomplete.append.apply(
emojiAutocomplete,
results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
const button = Object.assign(document.createElement("button"), {
className: "emoji-option",
onmousedown: (e) => e.preventDefault(),
onclick: () => {
messageInput.value = prefix + replaceWith + " " + suffix;
setCaretPosition(
messageInput,
(prefix + " " + replaceWith).length
);
},
onmouseover: () => select(button),
onfocus: () => select(button),
type: "button",
title: name,
});
button.append(
replaceWith[0] !== ":"
? Object.assign(document.createElement("span"), {
textContent: replaceWith,
className: "emoji",
})
: Object.assign(new Image(), {
loading: "lazy",
src: `/emojis/${name}${ext}`,
className: "emoji",
}),
Object.assign(document.createElement("span"), {
textContent: name,
className: "emoji-name",
})
);
return button;
})
);
if (i == 0 && emojiAutocomplete.children[0]) {
emojiAutocomplete.children[0].scrollIntoView();
select(emojiAutocomplete.children[0]);
}
const now = performance.now();
if (now > yieldAt) {
yieldAt = now + 13;
await new Promise((cb) => setTimeout(cb, 0));
}
}
autocompleting = false;
} }
messageInput.addEventListener("input", () => autocomplete()); messageInput.addEventListener("input", () => autocomplete());
messageInput.addEventListener("selectionchange", () => autocomplete()); messageInput.addEventListener("selectionchange", () => autocomplete());
@ -125,7 +133,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") { if (event.key == "Tab" || event.key == "Enter") {
let selected = document.querySelector(".emoji-option.selected"); let selected = document.querySelector(".emoji-option.selected");
if (!selected) return; if (!selected) return;
event.preventDefault(); event.preventDefault();
@ -184,6 +192,11 @@ 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 =
@ -191,7 +204,8 @@ 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"; "&emsp;<code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
"&emsp;<code>/join [session id]</code> - joins another session";
printChatMessage( printChatMessage(
"command-message", "command-message",
@ -227,13 +241,6 @@ const setupChatboxEvents = (socket) => {
export const setupChat = async (socket) => { export const setupChat = async (socket) => {
document.querySelector("#chatbox-container").style["display"] = "flex"; document.querySelector("#chatbox-container").style["display"] = "flex";
setupChatboxEvents(socket); setupChatboxEvents(socket);
window.addEventListener("keydown", (event) => {
try {
const isSelectionEmpty = window.getSelection().toString().length === 0;
if (event.code.match(/Key\w/) && isSelectionEmpty) messageInput.focus();
} catch (_err) {}
});
}; };
const addToChat = (node) => { const addToChat = (node) => {
@ -296,7 +303,7 @@ const matpad = (n) => {
* @param {string?} user * @param {string?} user
* @param {Node?} content * @param {Node?} content
*/ */
const printChatMessage = (eventType, user, colour, content) => { export 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);
@ -354,7 +361,7 @@ export const logEventToChat = async (event) => {
case "ChatMessage": { case "ChatMessage": {
const messageContent = document.createElement("span"); const messageContent = document.createElement("span");
messageContent.classList.add("message-content"); messageContent.classList.add("message-content");
messageContent.append(...(await emojify(event.data))); messageContent.append(...(await linkify(event.data, emojify)));
printChatMessage( printChatMessage(
"chat-message", "chat-message",
event.user, event.user,
@ -411,28 +418,29 @@ export const logEventToChat = async (event) => {
} }
printChatMessage("ping", event.user, event.colour, messageContent); printChatMessage("ping", event.user, event.colour, messageContent);
beep(); pling();
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=048af96"; import { createSession } from "./watch-session.mjs?v=bfdcf2";
export const setupCreateSessionForm = () => { export const setupCreateSessionForm = () => {
const form = document.querySelector("#create-session-form"); const form = document.querySelector("#create-session-form");

27
frontend/lib/emojis.mjs
View File

@ -5,7 +5,10 @@ export async function emojify(text) {
text.replace(/:([^\s:]+):/g, (match, name, index) => { text.replace(/:([^\s:]+):/g, (match, name, index) => {
if (last <= index) if (last <= index)
nodes.push(document.createTextNode(text.slice(last, index))); nodes.push(document.createTextNode(text.slice(last, index)));
let emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name); let emoji;
try {
emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
} catch (e) {}
if (!emoji) { if (!emoji) {
nodes.push(document.createTextNode(match)); nodes.push(document.createTextNode(match));
} else { } else {
@ -29,7 +32,15 @@ export async function emojify(text) {
const emojis = {}; const emojis = {};
export const emojisLoaded = Promise.all([ export const emojisLoaded = Promise.all([
fetch("/emojis") 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]]);
}
}),
fetch("/emojos")
.then((e) => e.json()) .then((e) => e.json())
.then((a) => { .then((a) => {
for (let e of a) { for (let e of a) {
@ -39,21 +50,13 @@ 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) {
await emojisLoaded; await emojisLoaded;
let groups = [[], []]; let groups = [[], []];
if (search.length < 1) { if (search.length < 1) {
for (let letter in emojis) for (let letter of Object.keys(emojis).sort())
for (let emoji of emojis[letter]) { for (let emoji of emojis[letter]) {
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji); (emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
} }
@ -65,5 +68,5 @@ export async function findEmojis(search) {
} }
} }
} }
return [...groups[0], ...groups[1]]; return [...groups[1], ...groups[0]];
} }

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

@ -1,4 +1,5 @@
import { joinSession } from "./watch-session.mjs?v=048af96"; import { joinSession } from "./watch-session.mjs?v=bfdcf2";
import { state } from "./state.mjs";
/** /**
* @param {HTMLInputElement} field * @param {HTMLInputElement} field
@ -80,11 +81,10 @@ export const setupJoinSessionForm = () => {
saveNickname(nickname); saveNickname(nickname);
saveColour(colour); saveColour(colour);
try { try {
await joinSession( state().nickname = nickname.value;
nickname.value, state().sessionId = sessionId.value;
sessionId.value, state().colour = colour.value.replace(/^#/, "");
colour.value.replace(/^#/, "") await joinSession();
);
} catch (e) { } catch (e) {
alert(e.message); alert(e.message);
button.disabled = false; button.disabled = false;

121
frontend/lib/links.mjs Normal file
View File

@ -0,0 +1,121 @@
import { joinSession } from "./watch-session.mjs?v=bfdcf2";
import { state } from "./state.mjs";
export async function linkify(
text,
next = async (t) => [document.createTextNode(t)]
) {
let last = 0;
let nodes = [];
let promise = Promise.resolve();
// matching non-urls isn't a problem, we use the browser's url parser to filter them out
text.replace(
/[^:/?#\s]+:\/\/\S+/g,
(match, index) =>
(promise = promise.then(async () => {
if (last <= index) nodes.push(...(await next(text.slice(last, index))));
let url;
try {
url = new URL(match);
if (url.protocol === "javascript:") throw new Error();
} catch (e) {
url = null;
}
if (!url) {
nodes.push(...(await next(match)));
} else {
let s;
if (
url.origin == location.origin &&
url.pathname == "/" &&
url.hash.length > 1
) {
nodes.push(
Object.assign(document.createElement("a"), {
textContent: "Join Session",
className: "chip join-chip",
onclick: () => {
state().sessionId = url.hash.substring(1);
joinSession();
},
})
);
} else if (
url.hostname == "xiv.st" &&
(s = url.pathname.match(/(\d?\d).?(\d\d)/))
) {
if (s) {
const date = new Date();
date.setUTCSeconds(0);
date.setUTCMilliseconds(0);
date.setUTCHours(s[1]), date.setUTCMinutes(s[2]);
nodes.push(
Object.assign(document.createElement("a"), {
href: url.href,
textContent: date.toLocaleString([], {
hour: "2-digit",
minute: "2-digit",
}),
className: "chip time-chip",
target: "_blank",
})
);
}
} else {
nodes.push(
Object.assign(document.createElement("a"), {
href: url.href,
textContent: url.href,
target: "_blank",
})
);
}
}
last = index + match.length;
}))
);
await promise;
if (last < text.length) nodes.push(...(await next(text.slice(last))));
return nodes;
}
const emojis = {};
export const emojisLoaded = Promise.all([
fetch("/emojis")
.then((e) => e.json())
.then((a) => {
for (let e of a) {
const name = e.slice(0, -4),
lower = name.toLowerCase();
emojis[lower[0]] = emojis[lower[0]] || [];
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) {
await emojisLoaded;
let groups = [[], []];
if (search.length < 1) {
for (let letter of Object.keys(emojis).sort())
for (let emoji of emojis[letter]) {
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
}
} else {
search = search.toLowerCase();
for (let emoji of emojis[search[0]]) {
if (search.length == 1 || emoji[3].startsWith(search)) {
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
}
}
}
return [...groups[0], ...groups[1]];
}

80
frontend/lib/pling.mjs Normal file
View File

@ -0,0 +1,80 @@
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));
};

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

@ -11,6 +11,7 @@ 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) {
@ -26,9 +27,9 @@ export default class ReconnectingWebSocket {
} }
this._socket.addEventListener("close", () => this._reconnect()); this._socket.addEventListener("close", () => this._reconnect());
this._socket.addEventListener("error", () => this._reconnect()); this._socket.addEventListener("error", () => this._reconnect());
this._socket.addEventListener("message", ({ data }) => this._socket.addEventListener("message", ({ data }) => {
this._eventTarget.dispatchEvent(new MessageEvent("message", { data })) this._eventTarget.dispatchEvent(new MessageEvent("message", { data }));
); });
this._socket.addEventListener("open", (e) => { this._socket.addEventListener("open", (e) => {
if (first) this._eventTarget.dispatchEvent(new Event("open")); if (first) this._eventTarget.dispatchEvent(new Event("open"));
if (this._reconnecting) if (this._reconnecting)
@ -40,6 +41,7 @@ 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;
@ -56,6 +58,10 @@ 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 Normal file
View File

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

7
frontend/lib/video.mjs
View File

@ -51,7 +51,12 @@ const saveCaptionsTrack = (track) => {
* @param {{name: string, url: string}[]} subtitles * @param {{name: string, url: string}[]} subtitles
*/ */
const createVideoElement = (videoUrl, subtitles) => { const createVideoElement = (videoUrl, subtitles) => {
const oldVideo = document.getElementById("video");
if (oldVideo) {
oldVideo.remove();
}
const video = document.createElement("video"); const video = document.createElement("video");
video.id = "video";
video.controls = true; video.controls = true;
video.autoplay = false; video.autoplay = false;
video.volume = loadVolume(); video.volume = loadVolume();
@ -74,7 +79,7 @@ const createVideoElement = (videoUrl, subtitles) => {
track.src = url; track.src = url;
track.kind = "captions"; track.kind = "captions";
if (id == storedTrack) { if (id == storedTrack || storedTrack == -1) {
track.default = true; track.default = true;
} }

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

@ -1,21 +1,23 @@
import { setupVideo } from "./video.mjs?v=048af96"; import { setupVideo } from "./video.mjs?v=bfdcf2";
import { import {
setupChat, setupChat,
logEventToChat, logEventToChat,
updateViewerList, updateViewerList,
} from "./chat.mjs?v=048af96"; printChatMessage,
} from "./chat.mjs?v=bfdcf2";
import ReconnectingWebSocket from "./reconnecting-web-socket.mjs"; import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
import { state } from "./state.mjs";
/** /**
* @param {string} sessionId * @param {string} sessionId
* @param {string} nickname * @param {string} nickname
* @returns {ReconnectingWebSocket} * @returns {ReconnectingWebSocket}
*/ */
const createWebSocket = (sessionId, nickname, colour) => { const createWebSocket = () => {
const wsUrl = new URL( const wsUrl = new URL(
`/sess/${sessionId}/subscribe` + `/sess/${state().sessionId}/subscribe` +
`?nickname=${encodeURIComponent(nickname)}` + `?nickname=${encodeURIComponent(state().nickname)}` +
`&colour=${encodeURIComponent(colour)}`, `&colour=${encodeURIComponent(state().colour)}`,
window.location.href window.location.href
); );
wsUrl.protocol = "ws" + window.location.protocol.slice(4); wsUrl.protocol = "ws" + window.location.protocol.slice(4);
@ -71,7 +73,6 @@ 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);
if (!event.reflected) { if (!event.reflected) {
switch (event.op) { switch (event.op) {
case "SetPlaying": case "SetPlaying":
@ -167,19 +168,29 @@ const setupOutgoingEvents = (video, socket) => {
}); });
}; };
/** export const joinSession = async () => {
* @param {string} nickname if (state().activeSession) {
* @param {string} sessionId if (state().activeSession === state().sessionId) {
*/ // we are already in this session, dont rejoin
export const joinSession = async (nickname, sessionId, colour) => { return;
}
// 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 = sessionId; window.location.hash = state().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/${sessionId}`); response = await fetch(`/sess/${state().sessionId}`);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
throw genericConnectionError; throw genericConnectionError;
@ -203,7 +214,12 @@ export const joinSession = async (nickname, sessionId, colour) => {
throw genericConnectionError; throw genericConnectionError;
} }
const socket = createWebSocket(sessionId, nickname, colour); if (state().socket) {
state().socket.close();
state().socket = null;
}
const socket = createWebSocket();
state().socket = socket;
socket.addEventListener("open", async () => { socket.addEventListener("open", async () => {
const video = await setupVideo( const video = await setupVideo(
video_url, video_url,
@ -212,10 +228,18 @@ export const joinSession = async (nickname, sessionId, colour) => {
is_playing is_playing
); );
// TODO: Allow the user to set this somewhere
let defaultAllowControls = false;
try {
defaultAllowControls = localStorage.getItem(
"watch-party-default-allow-controls"
);
} catch (_err) {}
// By default, we should disable video controls if the video is already playing. // By default, we should disable video controls if the video is already playing.
// This solves an issue where Safari users join and seek to 00:00:00 because of // This solves an issue where Safari users join and seek to 00:00:00 because of
// outgoing events. // outgoing events.
if (current_time_ms != 0) { if (current_time_ms != 0 || !defaultAllowControls) {
video.controls = false; video.controls = false;
} }

2
frontend/main.mjs
View File

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

743
frontend/styles.css
View File

@ -1,346 +1,397 @@
* { *,
box-sizing: border-box; *:before,
} *:after {
box-sizing: border-box;
:root { }
--bg-rgb: 28, 23, 36;
--fg-rgb: 234, 234, 248; :root {
--accent-rgb: 181, 127, 220; --bg-rgb: 28, 23, 36;
--fg: rgb(var(--fg-rgb)); --fg-rgb: 234, 234, 248;
--bg: rgb(var(--bg-rgb)); --accent-rgb: 181, 127, 220;
--default-user-color: rgb(126, 208, 255); --fg: rgb(var(--fg-rgb));
--accent: rgb(var(--accent-rgb)); --bg: rgb(var(--bg-rgb));
--fg-transparent: rgba(var(--fg-rgb), 0.25); --default-user-color: rgb(126, 208, 255);
--bg-transparent: rgba(var(--bg-rgb), 0.25); --accent: rgb(var(--accent-rgb));
--autocomplete-bg: linear-gradient( --fg-transparent: rgba(var(--fg-rgb), 0.25);
var(--fg-transparent), --bg-transparent: rgba(var(--bg-rgb), 0.25);
var(--fg-transparent) --autocomplete-bg: linear-gradient(
), var(--fg-transparent),
linear-gradient(var(--bg), var(--bg)); var(--fg-transparent)
} ),
linear-gradient(var(--bg), var(--bg));
html { --chip-bg: linear-gradient(
background-color: var(--bg); var(--accent-transparent),
color: var(--fg); var(--accent-transparent)
font-size: 1.125rem; ),
font-family: sans-serif; linear-gradient(var(--bg), var(--bg));
} --accent-transparent: rgba(var(--accent-rgb), 0.25);
}
html,
body { html {
margin: 0; background-color: var(--bg);
padding: 0; color: var(--fg);
overflow: hidden; font-size: 1.125rem;
overscroll-behavior: none; font-family: sans-serif;
width: 100%; }
height: 100%;
} html,
body {
body { margin: 0;
display: flex; padding: 0;
flex-direction: column; overflow: hidden;
} overscroll-behavior: none;
width: 100%;
video { height: 100%;
display: block; }
width: 100%;
height: 100%; body {
object-fit: contain; display: flex;
} flex-direction: column;
}
#video-container {
flex-grow: 0; video {
flex-shrink: 1; display: block;
display: none; width: 100%;
} height: 100%;
object-fit: contain;
a { }
color: var(--accent);
} #video-container {
flex-grow: 0;
label { flex-shrink: 1;
display: block; display: none;
} }
input[type="url"], a {
input[type="text"] { color: var(--accent);
background: #fff; }
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.12); .chip {
border-radius: 6px; color: var(--fg);
color: rgba(0, 0, 0, 0.8); background: var(--chip-bg);
display: block; text-decoration: none;
padding: 0 0.5rem 0 1.45rem;
margin: 0.5em 0; display: inline-flex;
padding: 0.5em 1em; position: relative;
line-height: 1.5; font-size: 0.9rem;
height: 1.125rem;
font-family: sans-serif; align-items: center;
font-size: 1em; border-radius: 2rem;
width: 100%; overflow: hidden;
}
resize: none;
overflow-x: wrap; .chip::before {
overflow-y: scroll; content: "";
} position: absolute;
left: 0;
button { top: 0;
background-color: var(--accent); width: 1.125rem;
border: var(--accent); height: 100%;
border-radius: 6px; display: flex;
color: #fff; align-items: center;
padding: 0.5em 1em; justify-content: center;
display: inline-block; text-align: center;
font-weight: 400; background: var(--accent-transparent);
text-align: center; background-repeat: no-repeat;
white-space: nowrap; background-size: 18px;
vertical-align: middle; background-position: center;
}
font-family: sans-serif;
font-size: 1em; .join-chip::before {
width: 100%; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPg==");
}
user-select: none;
border: 1px solid rgba(0, 0, 0, 0); .time-chip::before {
line-height: 1.5; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyczQuNDcgMTAgOS45OSAxMEMxNy41MiAyMiAyMiAxNy41MiAyMiAxMlMxNy41MiAyIDExLjk5IDJ6TTEyIDIwYy00LjQyIDAtOC0zLjU4LTgtOHMzLjU4LTggOC04IDggMy41OCA4IDgtMy41OCA4LTggOHoiLz48cGF0aCBkPSJNMTIuNSA3SDExdjZsNS4yNSAzLjE1Ljc1LTEuMjMtNC41LTIuNjd6Ii8+PC9zdmc+");
cursor: pointer; }
margin: 0.5em 0;
} label {
display: block;
button:disabled { }
filter: saturate(0.75);
opacity: 0.75; input[type="url"],
cursor: default; input[type="text"] {
} background: #fff;
background-clip: padding-box;
button.small-button { border: 1px solid rgba(0, 0, 0, 0.12);
font-size: 0.75em; border-radius: 6px;
padding-top: 0; color: rgba(0, 0, 0, 0.8);
padding-bottom: 0; display: block;
}
margin: 0.5em 0;
.subtitle-track-group { padding: 0.5em 1em;
display: flex; line-height: 1.5;
}
font-family: sans-serif;
.subtitle-track-group > * { font-size: 1em;
margin-top: 0 !important; width: 100%;
margin-bottom: 0 !important;
margin-right: 1ch !important; resize: none;
} overflow-x: wrap;
overflow-y: scroll;
#pre-join-controls, }
#create-controls {
margin: 0; button {
flex-grow: 1; background-color: var(--accent);
overflow-y: auto; border: var(--accent);
display: flex; border-radius: 6px;
flex-direction: column; color: #fff;
align-items: center; padding: 0.5em 1em;
justify-content: center; display: inline-block;
} font-weight: 400;
text-align: center;
#join-session-form, white-space: nowrap;
#create-session-form { vertical-align: middle;
width: 500px;
max-width: 100%; font-family: sans-serif;
padding: 1rem; font-size: 1em;
} width: 100%;
#join-session-form > *:first-child, user-select: none;
#create-session-form > *:first-child { border: 1px solid rgba(0, 0, 0, 0);
margin-top: 0; line-height: 1.5;
} cursor: pointer;
margin: 0.5em 0;
#post-create-message { }
display: none;
width: 100%; button:disabled {
font-size: 0.85em; filter: saturate(0.75);
} opacity: 0.75;
cursor: default;
#chatbox-container { }
display: none;
} button.small-button {
font-size: 0.75em;
.chat-message { padding-top: 0;
overflow-wrap: break-word; padding-bottom: 0;
} }
.chat-message > strong, .subtitle-track-group {
#viewer-list strong { display: flex;
color: var(--user-color, var(--default-user-color)); }
}
.subtitle-track-group > * {
/* margin-top: 0 !important;
@supports (-webkit-background-clip: text) { margin-bottom: 0 !important;
.chat-message > strong, margin-right: 1ch !important;
#viewer-list strong { }
background: linear-gradient(var(--fg-transparent), var(--fg-transparent)),
linear-gradient( #pre-join-controls,
var(--user-color, var(--default-user-color)), #create-controls {
var(--user-color, var(--default-user-color)) margin: 0;
); flex-grow: 1;
-webkit-background-clip: text; overflow-y: auto;
color: transparent !important; display: flex;
} flex-direction: column;
} align-items: center;
*/ justify-content: center;
}
.chat-message.user-join,
.chat-message.user-leave, #join-session-form,
.chat-message.ping { #create-session-form {
font-style: italic; width: 500px;
} max-width: 100%;
padding: 1rem;
.chat-message.set-time, }
.chat-message.set-playing {
font-style: italic; #join-session-form > *:first-child,
text-align: right; #create-session-form > *:first-child {
font-size: 0.85em; margin-top: 0;
} }
.chat-message.command-message { #post-create-message {
font-size: 0.85em; display: none;
} width: 100%;
font-size: 0.85em;
.chat-message.set-time > strong, }
.chat-message.set-playing > strong {
color: unset !important; #chatbox-container {
} display: none;
}
.emoji {
width: 2ch; .chat-message {
height: 2ch; overflow-wrap: break-word;
object-fit: contain; margin-bottom: 0.125rem;
margin-bottom: -0.35ch; }
}
.chat-message > strong,
#chatbox { #viewer-list strong {
padding: 0.5em 1em; color: var(--user-color, var(--default-user-color));
overflow-y: scroll; }
flex-shrink: 1;
flex-grow: 1; .chat-message.user-join,
} .chat-message.user-leave,
.chat-message.ping {
#viewer-list { font-style: italic;
padding: 0.5em 1em; }
/* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
overflow-y: scroll; .chat-message.set-time,
border-bottom: var(--fg-transparent); .chat-message.set-playing,
border-bottom-style: solid; .chat-message.join-session {
max-height: 4rem; font-style: italic;
flex-shrink: 0; text-align: right;
} font-size: 0.85em;
}
#chatbox-container {
background-color: var(--bg); .chat-message.command-message {
flex-direction: column; font-size: 0.85em;
flex-grow: 1; }
flex-shrink: 1;
flex-basis: 36ch; .chat-message.set-time > strong,
min-width: 36ch; .chat-message.set-playing > strong,
overflow: hidden; .chat-message.join-session > strong {
} color: unset !important;
}
#chatbox-send {
padding: 0 1em; .emoji {
padding-bottom: 0.5em; width: 2ch;
position: relative; height: 2ch;
} object-fit: contain;
margin-bottom: -0.35ch;
#chatbox-send > input { }
font-size: 0.75em;
width: 100%; #chatbox {
} padding: 0.5em 1em;
overflow-y: scroll;
#emoji-autocomplete { flex-shrink: 1;
position: absolute; flex-grow: 1;
bottom: 3.25rem; }
background-image: var(--autocomplete-bg);
border-radius: 6px; #viewer-list {
width: calc(100% - 2rem); padding: 0.5em 1em;
max-height: 8.5rem; /* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
overflow-y: auto; overflow-y: scroll;
clip-path: inset(0 0 0 0 round 8px); border-bottom: var(--fg-transparent);
} border-bottom-style: solid;
max-height: 4rem;
#emoji-autocomplete:empty { flex-shrink: 0;
display: none; }
}
#chatbox-container {
.emoji-option { background-color: var(--bg);
background: transparent; flex-direction: column;
font-size: 0.75rem; flex-grow: 1;
text-align: left; flex-shrink: 1;
margin: 0 0.25rem; flex-basis: 36ch;
border-radius: 4px; min-width: 36ch;
width: calc(100% - 0.5rem); overflow: hidden;
display: flex; }
align-items: center;
padding: 0.25rem 0.5rem; #chatbox-send {
scroll-margin: 0.25rem; padding: 0 1em;
} padding-bottom: 0.5em;
.emoji-option:first-child { position: relative;
margin-top: 0.25rem; }
}
.emoji-option:last-child { #chatbox-send > input {
margin-bottom: 0.25rem; font-size: 0.75em;
} width: 100%;
}
.emoji-option .emoji {
width: 1.25rem; #emoji-autocomplete {
height: 1.25rem; position: absolute;
margin: 0 0.5rem 0 0; bottom: 3.25rem;
font-size: 2.25ch; background-image: var(--autocomplete-bg);
display: flex; border-radius: 6px;
align-items: center; width: calc(100% - 2rem);
justify-content: center; max-height: 8.5rem;
overflow: hidden; overflow-y: auto;
flex-shrink: 0; clip-path: inset(0 0 0 0 round 8px);
} }
.emoji-option.selected { #emoji-autocomplete:empty {
background: var(--fg-transparent); display: none;
} }
#join-session-colour { .emoji-option {
-moz-appearance: none; background: transparent;
-webkit-appearance: none; font-size: 0.75rem;
appearance: none; text-align: left;
border: none; margin: 0 0.25rem;
padding: 0; border-radius: 4px;
border-radius: 6px; width: calc(100% - 0.5rem);
overflow: hidden; display: flex;
margin: 0.5em 0; align-items: center;
height: 2rem; padding: 0.25rem 0.5rem;
width: 2.5rem; scroll-margin: 0.25rem;
cursor: pointer; }
}
.emoji-option:first-child {
input[type="color"]::-moz-color-swatch, margin-top: 0.25rem;
input[type="color"]::-webkit-color-swatch, }
input[type="color"]::-webkit-color-swatch-wrapper {
/* This *should* be working in Chrome, but it doesn't for reasons that are beyond me. */ .emoji-option:last-child {
border: none; margin-bottom: 0.25rem;
margin: 0; }
padding: 0;
} .emoji-option .emoji {
width: 1.25rem;
@media (min-aspect-ratio: 4/3) { height: 1.25rem;
body { margin: 0 0.5rem 0 0;
flex-direction: row; font-size: 2.25ch;
} display: flex;
align-items: center;
#chatbox-container { justify-content: center;
height: 100vh !important; overflow: hidden;
flex-grow: 0; flex-shrink: 0;
} }
#video-container { .emoji-name {
flex-grow: 1; overflow: hidden;
} text-overflow: ellipsis;
}
#chatbox {
height: calc(100vh - 5em - 4em) !important; .emoji-option.selected {
} background: var(--fg-transparent);
} }
#join-session-colour {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
padding: 0;
border-radius: 6px;
overflow: hidden;
margin: 0.5em 0;
height: 2rem;
width: 2.5rem;
cursor: pointer;
}
input[type="color"]::-moz-color-swatch {
border: none;
margin: 0;
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
margin: 0;
padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
border: none;
margin: 0;
padding: 0;
}
@media (min-aspect-ratio: 4/3) {
body {
flex-direction: row;
}
#chatbox-container {
height: 100vh !important;
flex-grow: 0;
}
#video-container {
flex-grow: 1;
}
#chatbox {
height: calc(100vh - 5em - 4em) !important;
}
}

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!("emojis").and_then(get_emoji_list); let get_emoji_route = warb::path!("emojos").and_then(get_emoji_list);
enum RequestedSession { enum RequestedSession {
Session(Uuid, WatchSession), Session(Uuid, WatchSession),