Compare commits
1 Commits
main
...
options-pa
| Author | SHA1 | Date |
|---|---|---|
Kay
|
bcd36e2269 |
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,52 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<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=bfdcf2" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
This site will <em>not</em> work without JavaScript, and there's not
|
This site will <em>not</em> work without JavaScript, and there's not
|
||||||
really any way around that :(
|
really any way around that :(
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<div id="create-controls">
|
<div id="create-controls">
|
||||||
<form id="create-session-form">
|
<form id="create-session-form">
|
||||||
<h2>Create a session</h2>
|
<h2>Create a session</h2>
|
||||||
|
|
||||||
<label for="create-session-video">Video:</label>
|
<label for="create-session-video">Video:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="create-session-video"
|
id="create-session-video"
|
||||||
placeholder="https://video.example.com/example.mp4"
|
placeholder="https://video.example.com/example.mp4"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- TODO: Ability to add multiple subtitles for different languages -->
|
<!-- TODO: Ability to add multiple subtitles for different languages -->
|
||||||
<label for="create-session-subs">Subtitles:</label>
|
<label for="create-session-subs">Subtitles:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="create-session-subs"
|
id="create-session-subs"
|
||||||
placeholder="https://video.example.com/example.vtt"
|
placeholder="https://video.example.com/example.vtt"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label for="create-session-subs-name">Subtitle track name:</label>
|
<label for="create-session-subs-name">Subtitle track name:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="create-session-subs-name"
|
id="create-session-subs-name"
|
||||||
placeholder="English"
|
placeholder="English"
|
||||||
/>
|
/>
|
||||||
<button>Create</button>
|
<button>Create</button>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Already have a session?
|
Already have a session?
|
||||||
<a href="/">Join your session</a> instead.
|
<a href="/">Join your session</a> instead.
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="/create.mjs?v=4b61c4"></script>
|
<script type="module" src="/create.mjs?v=bfdcf2"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { setupCreateSessionForm } from "./lib/create-session.mjs?v=4b61c4";
|
import { setupCreateSessionForm } from "./lib/create-session.mjs?v=bfdcf2";
|
||||||
|
|
||||||
const main = () => {
|
const main = () => {
|
||||||
setupCreateSessionForm();
|
setupCreateSessionForm();
|
||||||
};
|
};
|
||||||
|
|
||||||
if (document.readyState === "complete") {
|
if (document.readyState === "complete") {
|
||||||
main();
|
main();
|
||||||
} else {
|
} else {
|
||||||
document.addEventListener("DOMContentLoaded", main);
|
document.addEventListener("DOMContentLoaded", main);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,119 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<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=bfdcf2" />
|
||||||
<link rel="stylesheet" href="/styles.css?v=4b61c4" />
|
</head>
|
||||||
</head>
|
|
||||||
|
<body>
|
||||||
<body>
|
<noscript>
|
||||||
<noscript>
|
This site will <em>not</em> work without JavaScript, and there's not
|
||||||
This site will <em>not</em> work without JavaScript, and there's not
|
really any way around that :(
|
||||||
really any way around that :(
|
</noscript>
|
||||||
</noscript>
|
|
||||||
|
<div id="pre-join-controls">
|
||||||
<div id="pre-join-controls">
|
<form id="join-session-form">
|
||||||
<form id="join-session-form">
|
<h2>Join a session</h2>
|
||||||
<h2>Join a session</h2>
|
|
||||||
|
<p id="post-create-message">
|
||||||
<p id="post-create-message">
|
Your session has been created successfully. Copy the current url or
|
||||||
Your session has been created successfully. Copy the current url or
|
the Session ID below and share it with your friends. :)
|
||||||
the Session ID below and share it with your friends. :)
|
</p>
|
||||||
</p>
|
|
||||||
|
<label for="join-session-nickname">Nickname:</label>
|
||||||
<label for="join-session-nickname">Nickname:</label>
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
id="join-session-nickname"
|
||||||
id="join-session-nickname"
|
placeholder="Nickname"
|
||||||
placeholder="Nickname"
|
maxlength="50"
|
||||||
maxlength="50"
|
required
|
||||||
required
|
/>
|
||||||
/>
|
|
||||||
|
<label id="join-session-colour-label" for="join-session-colour">
|
||||||
<label id="join-session-colour-label" for="join-session-colour">
|
Personal Colour:
|
||||||
Personal Colour:
|
</label>
|
||||||
</label>
|
<input type="color" id="join-session-colour" value="#ffffff" required />
|
||||||
<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
|
type="text"
|
||||||
type="text"
|
id="join-session-id"
|
||||||
id="join-session-id"
|
placeholder="123e4567-e89b-12d3-a456-426614174000"
|
||||||
placeholder="123e4567-e89b-12d3-a456-426614174000"
|
required
|
||||||
required
|
/>
|
||||||
/>
|
<button id="join-session-button">Join</button>
|
||||||
<button id="join-session-button">Join</button>
|
|
||||||
|
<p>
|
||||||
<p>
|
No session to join?
|
||||||
No session to join?
|
<a href="/create.html">Create a session</a> instead.
|
||||||
<a href="/create.html">Create a session</a> instead.
|
</p>
|
||||||
</p>
|
</form>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div id="video-container"></div>
|
||||||
<div id="video-container"></div>
|
<div id="chatbox-container">
|
||||||
<div id="chatbox-container">
|
<section id="viewing">
|
||||||
<div id="viewer-list"></div>
|
<div id="viewer-list"></div>
|
||||||
<div id="chatbox"></div>
|
<div id="chatbox"></div>
|
||||||
<form id="chatbox-send">
|
<form id="chatbox-send">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Message... (/help for commands)"
|
placeholder="Message... (/help for commands)"
|
||||||
list="emoji-autocomplete"
|
list="emoji-autocomplete"
|
||||||
/>
|
/>
|
||||||
<div id="emoji-autocomplete"></div>
|
<div id="emoji-autocomplete"></div>
|
||||||
<!-- DO NOT ADD SPACING INSIDE THE TAG IT WILL BREAK THE CSS kthxbye -->
|
<!-- DO NOT ADD SPACING INSIDE THE TAG IT WILL BREAK THE CSS kthxbye -->
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</section>
|
||||||
|
<section id="options">
|
||||||
<script type="module" src="/main.mjs?v=4b61c4"></script>
|
<h2>settings</h2>
|
||||||
<script>
|
<hr />
|
||||||
const updateColourLabel = () => {
|
<form id="options-form">
|
||||||
const colour = document.querySelector("#join-session-colour").value;
|
<label for="plingVolume"
|
||||||
document.querySelector(
|
><input
|
||||||
"#join-session-colour-label"
|
type="range"
|
||||||
).textContent = `Personal Colour: ${colour}`;
|
min="0"
|
||||||
};
|
max="100"
|
||||||
|
value="100"
|
||||||
document
|
id="plingVolume"
|
||||||
.querySelector("#join-session-colour")
|
onchange="handlePlingVolume(this)"
|
||||||
.addEventListener("input", updateColourLabel);
|
/>
|
||||||
updateColourLabel();
|
ping volume</label
|
||||||
</script>
|
>
|
||||||
</body>
|
<label
|
||||||
</html>
|
><input
|
||||||
|
id="playerControlsShown"
|
||||||
|
type="checkbox"
|
||||||
|
onchange="togglePlayerControlsShown(this)"
|
||||||
|
/>hide controls when loading video player</label
|
||||||
|
>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<div id="options-toggle">
|
||||||
|
<button
|
||||||
|
aria-label="settings"
|
||||||
|
id="options-icon"
|
||||||
|
onclick="toggleOptionPane(event, this)"
|
||||||
|
>
|
||||||
|
⚙️
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,453 +1,459 @@
|
||||||
import {
|
import {
|
||||||
setDebounce,
|
setDebounce,
|
||||||
setVideoTime,
|
setVideoTime,
|
||||||
setPlaying,
|
setPlaying,
|
||||||
sync,
|
} from "./watch-session.mjs?v=bfdcf2";
|
||||||
} from "./watch-session.mjs?v=4b61c4";
|
import { emojify, findEmojis } from "./emojis.mjs?v=bfdcf2";
|
||||||
import { emojify, findEmojis } from "./emojis.mjs?v=4b61c4";
|
import { linkify } from "./links.mjs?v=bfdcf2";
|
||||||
import { linkify } from "./links.mjs?v=4b61c4";
|
import { joinSession } from "./watch-session.mjs?v=bfdcf2";
|
||||||
import { joinSession } from "./watch-session.mjs?v=4b61c4";
|
import { pling } from "./pling.mjs?v=bfdcf2";
|
||||||
import { pling } from "./pling.mjs?v=4b61c4";
|
import { state } from "./state.mjs";
|
||||||
import { state } from "./state.mjs";
|
|
||||||
|
function setCaretPosition(elem, caretPos) {
|
||||||
function setCaretPosition(elem, caretPos) {
|
if (elem.createTextRange) {
|
||||||
if (elem.createTextRange) {
|
var range = elem.createTextRange();
|
||||||
var range = elem.createTextRange();
|
range.move("character", caretPos);
|
||||||
range.move("character", caretPos);
|
range.select();
|
||||||
range.select();
|
} else {
|
||||||
} else {
|
if (elem.selectionStart) {
|
||||||
if (elem.selectionStart) {
|
elem.focus();
|
||||||
elem.focus();
|
elem.setSelectionRange(caretPos, caretPos);
|
||||||
elem.setSelectionRange(caretPos, caretPos);
|
} else elem.focus();
|
||||||
} else elem.focus();
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
const setupChatboxEvents = (socket) => {
|
||||||
const setupChatboxEvents = (socket) => {
|
// clear events by just reconstructing the form
|
||||||
// clear events by just reconstructing the form
|
const oldChatForm = document.querySelector("#chatbox-send");
|
||||||
const oldChatForm = document.querySelector("#chatbox-send");
|
const chatForm = oldChatForm.cloneNode(true);
|
||||||
const chatForm = oldChatForm.cloneNode(true);
|
const messageInput = chatForm.querySelector("input");
|
||||||
const messageInput = chatForm.querySelector("input");
|
const emojiAutocomplete = chatForm.querySelector("#emoji-autocomplete");
|
||||||
const emojiAutocomplete = chatForm.querySelector("#emoji-autocomplete");
|
oldChatForm.replaceWith(chatForm);
|
||||||
oldChatForm.replaceWith(chatForm);
|
|
||||||
|
let autocompleting = false,
|
||||||
let autocompleting = false,
|
showListTimer;
|
||||||
showListTimer;
|
|
||||||
|
const replaceMessage = (message) => () => {
|
||||||
const replaceMessage = (message) => () => {
|
messageInput.value = message;
|
||||||
messageInput.value = message;
|
autocomplete();
|
||||||
autocomplete();
|
};
|
||||||
};
|
async function autocomplete(fromListTimeout) {
|
||||||
async function autocomplete(fromListTimeout) {
|
if (autocompleting) return;
|
||||||
if (autocompleting) return;
|
try {
|
||||||
try {
|
clearInterval(showListTimer);
|
||||||
clearInterval(showListTimer);
|
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:]{2,})$/);
|
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);
|
if (search.length < 1 && !fromListTimeout) {
|
||||||
if (search.length < 1 && !fromListTimeout) {
|
autocompleting = false;
|
||||||
autocompleting = false;
|
showListTimer = setTimeout(() => autocomplete(true), 500);
|
||||||
showListTimer = setTimeout(() => autocomplete(true), 500);
|
return;
|
||||||
return;
|
}
|
||||||
}
|
const suffix = messageInput.value.slice(messageInput.selectionStart);
|
||||||
const suffix = messageInput.value.slice(messageInput.selectionStart);
|
let selected;
|
||||||
let selected;
|
const select = (button) => {
|
||||||
const select = (button) => {
|
if (selected) selected.classList.remove("selected");
|
||||||
if (selected) selected.classList.remove("selected");
|
selected = button;
|
||||||
selected = button;
|
button.classList.add("selected");
|
||||||
button.classList.add("selected");
|
};
|
||||||
};
|
let results = await findEmojis(search);
|
||||||
let results = await findEmojis(search);
|
let yieldAt = performance.now() + 13;
|
||||||
let yieldAt = performance.now() + 13;
|
for (let i = 0; i < results.length; i += 100) {
|
||||||
for (let i = 0; i < results.length; i += 100) {
|
emojiAutocomplete.append.apply(
|
||||||
emojiAutocomplete.append.apply(
|
emojiAutocomplete,
|
||||||
emojiAutocomplete,
|
results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
|
||||||
results.slice(i, i + 100).map(([name, replaceWith, ext], i) => {
|
const button = Object.assign(document.createElement("button"), {
|
||||||
const button = Object.assign(document.createElement("button"), {
|
className: "emoji-option",
|
||||||
className: "emoji-option",
|
onmousedown: (e) => e.preventDefault(),
|
||||||
onmousedown: (e) => e.preventDefault(),
|
onclick: () => {
|
||||||
onclick: () => {
|
messageInput.value = prefix + replaceWith + " " + suffix;
|
||||||
messageInput.value = prefix + replaceWith + " " + suffix;
|
setCaretPosition(
|
||||||
setCaretPosition(
|
messageInput,
|
||||||
messageInput,
|
(prefix + " " + replaceWith).length
|
||||||
(prefix + " " + replaceWith).length
|
);
|
||||||
);
|
},
|
||||||
},
|
onmouseover: () => select(button),
|
||||||
onmouseover: () => select(button),
|
onfocus: () => select(button),
|
||||||
onfocus: () => select(button),
|
type: "button",
|
||||||
type: "button",
|
title: name,
|
||||||
title: name,
|
});
|
||||||
});
|
button.append(
|
||||||
button.append(
|
replaceWith[0] !== ":"
|
||||||
replaceWith[0] !== ":"
|
? Object.assign(document.createElement("span"), {
|
||||||
? Object.assign(document.createElement("span"), {
|
textContent: replaceWith,
|
||||||
textContent: replaceWith,
|
className: "emoji",
|
||||||
className: "emoji",
|
})
|
||||||
})
|
: Object.assign(new Image(), {
|
||||||
: Object.assign(new Image(), {
|
loading: "lazy",
|
||||||
loading: "lazy",
|
src: `/emojis/${name}${ext}`,
|
||||||
src: `/emojis/${name}${ext}`,
|
className: "emoji",
|
||||||
className: "emoji",
|
}),
|
||||||
}),
|
Object.assign(document.createElement("span"), {
|
||||||
Object.assign(document.createElement("span"), {
|
textContent: name,
|
||||||
textContent: name,
|
className: "emoji-name",
|
||||||
className: "emoji-name",
|
})
|
||||||
})
|
);
|
||||||
);
|
return button;
|
||||||
return button;
|
})
|
||||||
})
|
);
|
||||||
);
|
if (i == 0 && emojiAutocomplete.children[0]) {
|
||||||
if (i == 0 && emojiAutocomplete.children[0]) {
|
emojiAutocomplete.children[0].scrollIntoView();
|
||||||
emojiAutocomplete.children[0].scrollIntoView();
|
select(emojiAutocomplete.children[0]);
|
||||||
select(emojiAutocomplete.children[0]);
|
}
|
||||||
}
|
const now = performance.now();
|
||||||
const now = performance.now();
|
if (now > yieldAt) {
|
||||||
if (now > yieldAt) {
|
yieldAt = now + 13;
|
||||||
yieldAt = now + 13;
|
await new Promise((cb) => setTimeout(cb, 0));
|
||||||
await new Promise((cb) => setTimeout(cb, 0));
|
}
|
||||||
}
|
}
|
||||||
}
|
autocompleting = false;
|
||||||
autocompleting = false;
|
} catch (e) {
|
||||||
} catch (e) {
|
autocompleting = false;
|
||||||
autocompleting = false;
|
}
|
||||||
}
|
}
|
||||||
}
|
messageInput.addEventListener("input", () => autocomplete());
|
||||||
messageInput.addEventListener("input", () => autocomplete());
|
messageInput.addEventListener("selectionchange", () => autocomplete());
|
||||||
messageInput.addEventListener("selectionchange", () => autocomplete());
|
messageInput.addEventListener("keydown", (event) => {
|
||||||
messageInput.addEventListener("keydown", (event) => {
|
if (event.key == "ArrowUp" || event.key == "ArrowDown") {
|
||||||
if (event.key == "ArrowUp" || event.key == "ArrowDown") {
|
let selected = document.querySelector(".emoji-option.selected");
|
||||||
let selected = document.querySelector(".emoji-option.selected");
|
if (!selected) return;
|
||||||
if (!selected) return;
|
event.preventDefault();
|
||||||
event.preventDefault();
|
selected.classList.remove("selected");
|
||||||
selected.classList.remove("selected");
|
selected =
|
||||||
selected =
|
event.key == "ArrowDown"
|
||||||
event.key == "ArrowDown"
|
? selected.nextElementSibling || selected.parentElement.children[0]
|
||||||
? selected.nextElementSibling || selected.parentElement.children[0]
|
: selected.previousElementSibling ||
|
||||||
: selected.previousElementSibling ||
|
selected.parentElement.children[
|
||||||
selected.parentElement.children[
|
selected.parentElement.children.length - 1
|
||||||
selected.parentElement.children.length - 1
|
];
|
||||||
];
|
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" || 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();
|
selected.onclick();
|
||||||
selected.onclick();
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
chatForm.addEventListener("submit", async (e) => {
|
||||||
chatForm.addEventListener("submit", async (e) => {
|
e.preventDefault();
|
||||||
e.preventDefault();
|
const content = messageInput.value;
|
||||||
const content = messageInput.value;
|
if (content.trim().length) {
|
||||||
if (content.trim().length) {
|
messageInput.value = "";
|
||||||
messageInput.value = "";
|
|
||||||
|
// handle commands
|
||||||
// handle commands
|
if (content.startsWith("/")) {
|
||||||
if (content.startsWith("/")) {
|
const command = content.toLowerCase().match(/^\/\S+/)[0];
|
||||||
const command = content.toLowerCase().match(/^\/\S+/)[0];
|
const args = content.slice(command.length).trim();
|
||||||
const args = content.slice(command.length).trim();
|
|
||||||
|
let handled = false;
|
||||||
let handled = false;
|
switch (command) {
|
||||||
switch (command) {
|
case "/ping":
|
||||||
case "/ping":
|
socket.send(
|
||||||
socket.send(
|
JSON.stringify({
|
||||||
JSON.stringify({
|
op: "Ping",
|
||||||
op: "Ping",
|
data: args,
|
||||||
data: args,
|
})
|
||||||
})
|
);
|
||||||
);
|
handled = true;
|
||||||
handled = true;
|
break;
|
||||||
break;
|
case "/sync":
|
||||||
case "/sync":
|
const sessionId = window.location.hash.slice(1);
|
||||||
await sync();
|
const { current_time_ms, is_playing } = await fetch(
|
||||||
|
`/sess/${sessionId}`
|
||||||
const syncMessageContent = document.createElement("span");
|
).then((r) => r.json());
|
||||||
syncMessageContent.appendChild(
|
|
||||||
document.createTextNode("resynced you to ")
|
setDebounce();
|
||||||
);
|
setPlaying(is_playing);
|
||||||
syncMessageContent.appendChild(
|
setVideoTime(current_time_ms);
|
||||||
document.createTextNode(formatTime(current_time_ms))
|
|
||||||
);
|
const syncMessageContent = document.createElement("span");
|
||||||
printChatMessage("set-time", "/sync", "b57fdc", syncMessageContent);
|
syncMessageContent.appendChild(
|
||||||
handled = true;
|
document.createTextNode("resynced you to ")
|
||||||
break;
|
);
|
||||||
case "/shrug":
|
syncMessageContent.appendChild(
|
||||||
socket.send(
|
document.createTextNode(formatTime(current_time_ms))
|
||||||
JSON.stringify({
|
);
|
||||||
op: "ChatMessage",
|
printChatMessage("set-time", "/sync", "b57fdc", syncMessageContent);
|
||||||
data: `${args} ¯\\_(ツ)_/¯`.trim(),
|
handled = true;
|
||||||
})
|
break;
|
||||||
);
|
case "/shrug":
|
||||||
handled = true;
|
socket.send(
|
||||||
break;
|
JSON.stringify({
|
||||||
case "/join":
|
op: "ChatMessage",
|
||||||
state().sessionId = args;
|
data: `${args} ¯\\_(ツ)_/¯`.trim(),
|
||||||
joinSession();
|
})
|
||||||
handled = true;
|
);
|
||||||
break;
|
handled = true;
|
||||||
case "/help":
|
break;
|
||||||
const helpMessageContent = document.createElement("span");
|
case "/join":
|
||||||
helpMessageContent.innerHTML =
|
state().sessionId = args;
|
||||||
"Available commands:<br>" +
|
joinSession();
|
||||||
" <code>/help</code> - display this help message<br>" +
|
handled = true;
|
||||||
" <code>/ping [message]</code> - ping all viewers<br>" +
|
break;
|
||||||
" <code>/sync</code> - resyncs you with other viewers<br>" +
|
case "/help":
|
||||||
" <code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
|
const helpMessageContent = document.createElement("span");
|
||||||
" <code>/join [session id]</code> - joins another session";
|
helpMessageContent.innerHTML =
|
||||||
|
"Available commands:<br>" +
|
||||||
printChatMessage(
|
" <code>/help</code> - display this help message<br>" +
|
||||||
"command-message",
|
" <code>/ping [message]</code> - ping all viewers<br>" +
|
||||||
"/help",
|
" <code>/sync</code> - resyncs you with other viewers<br>" +
|
||||||
"b57fdc",
|
" <code>/shrug</code> - appends ¯\\_(ツ)_/¯ to your message<br>" +
|
||||||
helpMessageContent
|
" <code>/join [session id]</code> - joins another session";
|
||||||
);
|
|
||||||
handled = true;
|
printChatMessage(
|
||||||
break;
|
"command-message",
|
||||||
default:
|
"/help",
|
||||||
break;
|
"b57fdc",
|
||||||
}
|
helpMessageContent
|
||||||
|
);
|
||||||
if (handled) {
|
handled = true;
|
||||||
return;
|
break;
|
||||||
}
|
default:
|
||||||
}
|
break;
|
||||||
|
}
|
||||||
// handle regular chat messages
|
|
||||||
socket.send(
|
if (handled) {
|
||||||
JSON.stringify({
|
return;
|
||||||
op: "ChatMessage",
|
}
|
||||||
data: content,
|
}
|
||||||
})
|
|
||||||
);
|
// handle regular chat messages
|
||||||
}
|
socket.send(
|
||||||
});
|
JSON.stringify({
|
||||||
};
|
op: "ChatMessage",
|
||||||
|
data: content,
|
||||||
/**
|
})
|
||||||
* @param {WebSocket} socket
|
);
|
||||||
*/
|
}
|
||||||
export const setupChat = async (socket) => {
|
});
|
||||||
document.querySelector("#chatbox-container").style["display"] = "flex";
|
};
|
||||||
setupChatboxEvents(socket);
|
|
||||||
};
|
/**
|
||||||
|
* @param {WebSocket} socket
|
||||||
const addToChat = (node) => {
|
*/
|
||||||
const chatbox = document.querySelector("#chatbox");
|
export const setupChat = async (socket) => {
|
||||||
chatbox.appendChild(node);
|
document.querySelector("#chatbox-container").style["display"] = "flex";
|
||||||
chatbox.scrollTop = chatbox.scrollHeight;
|
setupChatboxEvents(socket);
|
||||||
};
|
};
|
||||||
|
|
||||||
let lastTimeMs = null;
|
const addToChat = (node) => {
|
||||||
let lastPlaying = false;
|
const chatbox = document.querySelector("#chatbox");
|
||||||
|
chatbox.appendChild(node);
|
||||||
const checkDebounce = (event) => {
|
chatbox.scrollTop = chatbox.scrollHeight;
|
||||||
let timeMs = null;
|
};
|
||||||
let playing = null;
|
|
||||||
if (event.op == "SetTime") {
|
let lastTimeMs = null;
|
||||||
timeMs = event.data;
|
let lastPlaying = false;
|
||||||
} else if (event.op == "SetPlaying") {
|
|
||||||
timeMs = event.data.time;
|
const checkDebounce = (event) => {
|
||||||
playing = event.data.playing;
|
let timeMs = null;
|
||||||
}
|
let playing = null;
|
||||||
|
if (event.op == "SetTime") {
|
||||||
let shouldIgnore = false;
|
timeMs = event.data;
|
||||||
|
} else if (event.op == "SetPlaying") {
|
||||||
if (timeMs != null) {
|
timeMs = event.data.time;
|
||||||
if (lastTimeMs && Math.abs(lastTimeMs - timeMs) < 500) {
|
playing = event.data.playing;
|
||||||
shouldIgnore = true;
|
}
|
||||||
}
|
|
||||||
lastTimeMs = timeMs;
|
let shouldIgnore = false;
|
||||||
}
|
|
||||||
|
if (timeMs != null) {
|
||||||
if (playing != null) {
|
if (lastTimeMs && Math.abs(lastTimeMs - timeMs) < 500) {
|
||||||
if (lastPlaying != playing) {
|
shouldIgnore = true;
|
||||||
shouldIgnore = false;
|
}
|
||||||
}
|
lastTimeMs = timeMs;
|
||||||
lastPlaying = playing;
|
}
|
||||||
}
|
|
||||||
|
if (playing != null) {
|
||||||
return shouldIgnore;
|
if (lastPlaying != playing) {
|
||||||
};
|
shouldIgnore = false;
|
||||||
|
}
|
||||||
/**
|
lastPlaying = playing;
|
||||||
* @returns {string}
|
}
|
||||||
*/
|
|
||||||
const getCurrentTimestamp = () => {
|
return shouldIgnore;
|
||||||
const t = new Date();
|
};
|
||||||
return `${matpad(t.getHours())}:${matpad(t.getMinutes())}:${matpad(
|
|
||||||
t.getSeconds()
|
/**
|
||||||
)}`;
|
* @returns {string}
|
||||||
};
|
*/
|
||||||
|
const getCurrentTimestamp = () => {
|
||||||
/**
|
const t = new Date();
|
||||||
* https://media.discordapp.net/attachments/834541919568527361/931678814751301632/66d2c68c48daa414c96951381665ec2e.png
|
return `${matpad(t.getHours())}:${matpad(t.getMinutes())}:${matpad(
|
||||||
*/
|
t.getSeconds()
|
||||||
const matpad = (n) => {
|
)}`;
|
||||||
return ("00" + n).slice(-2);
|
};
|
||||||
};
|
|
||||||
|
/**
|
||||||
/**
|
* https://media.discordapp.net/attachments/834541919568527361/931678814751301632/66d2c68c48daa414c96951381665ec2e.png
|
||||||
* @param {string} eventType
|
*/
|
||||||
* @param {string?} user
|
const matpad = (n) => {
|
||||||
* @param {Node?} content
|
return ("00" + n).slice(-2);
|
||||||
*/
|
};
|
||||||
export const printChatMessage = (eventType, user, colour, content) => {
|
|
||||||
const chatMessage = document.createElement("div");
|
/**
|
||||||
chatMessage.classList.add("chat-message");
|
* @param {string} eventType
|
||||||
chatMessage.classList.add(eventType);
|
* @param {string?} user
|
||||||
chatMessage.title = getCurrentTimestamp();
|
* @param {Node?} content
|
||||||
|
*/
|
||||||
if (user != null) {
|
export const printChatMessage = (eventType, user, colour, content) => {
|
||||||
const userName = document.createElement("strong");
|
const chatMessage = document.createElement("div");
|
||||||
userName.style = `--user-color: #${colour}`;
|
chatMessage.classList.add("chat-message");
|
||||||
userName.textContent = user + " ";
|
chatMessage.classList.add(eventType);
|
||||||
chatMessage.appendChild(userName);
|
chatMessage.title = getCurrentTimestamp();
|
||||||
}
|
|
||||||
|
if (user != null) {
|
||||||
if (content != null) {
|
const userName = document.createElement("strong");
|
||||||
chatMessage.appendChild(content);
|
userName.style = `--user-color: #${colour}`;
|
||||||
}
|
userName.textContent = user + " ";
|
||||||
|
chatMessage.appendChild(userName);
|
||||||
addToChat(chatMessage);
|
}
|
||||||
|
|
||||||
return chatMessage;
|
if (content != null) {
|
||||||
};
|
chatMessage.appendChild(content);
|
||||||
|
}
|
||||||
const formatTime = (ms) => {
|
|
||||||
const seconds = Math.floor((ms / 1000) % 60);
|
addToChat(chatMessage);
|
||||||
const minutes = Math.floor((ms / (60 * 1000)) % 60);
|
|
||||||
const hours = Math.floor((ms / (3600 * 1000)) % 3600);
|
return chatMessage;
|
||||||
return `${hours < 10 ? "0" + hours : hours}:${
|
};
|
||||||
minutes < 10 ? "0" + minutes : minutes
|
|
||||||
}:${seconds < 10 ? "0" + seconds : seconds}`;
|
const formatTime = (ms) => {
|
||||||
};
|
const seconds = Math.floor((ms / 1000) % 60);
|
||||||
|
const minutes = Math.floor((ms / (60 * 1000)) % 60);
|
||||||
export const logEventToChat = async (event) => {
|
const hours = Math.floor((ms / (3600 * 1000)) % 3600);
|
||||||
if (checkDebounce(event)) {
|
return `${hours < 10 ? "0" + hours : hours}:${
|
||||||
return;
|
minutes < 10 ? "0" + minutes : minutes
|
||||||
}
|
}:${seconds < 10 ? "0" + seconds : seconds}`;
|
||||||
|
};
|
||||||
switch (event.op) {
|
|
||||||
case "UserJoin": {
|
export const logEventToChat = async (event) => {
|
||||||
printChatMessage(
|
if (checkDebounce(event)) {
|
||||||
"user-join",
|
return;
|
||||||
event.user,
|
}
|
||||||
event.colour,
|
|
||||||
document.createTextNode("joined")
|
switch (event.op) {
|
||||||
);
|
case "UserJoin": {
|
||||||
break;
|
printChatMessage(
|
||||||
}
|
"user-join",
|
||||||
case "UserLeave": {
|
event.user,
|
||||||
printChatMessage(
|
event.colour,
|
||||||
"user-leave",
|
document.createTextNode("joined")
|
||||||
event.user,
|
);
|
||||||
event.colour,
|
break;
|
||||||
document.createTextNode("left")
|
}
|
||||||
);
|
case "UserLeave": {
|
||||||
break;
|
printChatMessage(
|
||||||
}
|
"user-leave",
|
||||||
case "ChatMessage": {
|
event.user,
|
||||||
const messageContent = document.createElement("span");
|
event.colour,
|
||||||
messageContent.classList.add("message-content");
|
document.createTextNode("left")
|
||||||
messageContent.append(...(await linkify(event.data, emojify)));
|
);
|
||||||
printChatMessage(
|
break;
|
||||||
"chat-message",
|
}
|
||||||
event.user,
|
case "ChatMessage": {
|
||||||
event.colour,
|
const messageContent = document.createElement("span");
|
||||||
messageContent
|
messageContent.classList.add("message-content");
|
||||||
);
|
messageContent.append(...(await linkify(event.data, emojify)));
|
||||||
break;
|
printChatMessage(
|
||||||
}
|
"chat-message",
|
||||||
case "SetTime": {
|
event.user,
|
||||||
const messageContent = document.createElement("span");
|
event.colour,
|
||||||
if (event.data.from != undefined) {
|
messageContent
|
||||||
messageContent.appendChild(
|
);
|
||||||
document.createTextNode("set the time from ")
|
break;
|
||||||
);
|
}
|
||||||
|
case "SetTime": {
|
||||||
messageContent.appendChild(
|
const messageContent = document.createElement("span");
|
||||||
document.createTextNode(formatTime(event.data.from))
|
if (event.data.from != undefined) {
|
||||||
);
|
messageContent.appendChild(
|
||||||
|
document.createTextNode("set the time from ")
|
||||||
messageContent.appendChild(document.createTextNode(" to "));
|
);
|
||||||
} else {
|
|
||||||
messageContent.appendChild(document.createTextNode("set the time to "));
|
messageContent.appendChild(
|
||||||
}
|
document.createTextNode(formatTime(event.data.from))
|
||||||
|
);
|
||||||
messageContent.appendChild(
|
|
||||||
document.createTextNode(formatTime(event.data.to))
|
messageContent.appendChild(document.createTextNode(" to "));
|
||||||
);
|
} else {
|
||||||
|
messageContent.appendChild(document.createTextNode("set the time to "));
|
||||||
printChatMessage("set-time", event.user, event.colour, messageContent);
|
}
|
||||||
break;
|
|
||||||
}
|
messageContent.appendChild(
|
||||||
case "SetPlaying": {
|
document.createTextNode(formatTime(event.data.to))
|
||||||
const messageContent = document.createElement("span");
|
);
|
||||||
messageContent.appendChild(
|
|
||||||
document.createTextNode(
|
printChatMessage("set-time", event.user, event.colour, messageContent);
|
||||||
event.data.playing ? "started playing" : "paused"
|
break;
|
||||||
)
|
}
|
||||||
);
|
case "SetPlaying": {
|
||||||
messageContent.appendChild(document.createTextNode(" at "));
|
const messageContent = document.createElement("span");
|
||||||
messageContent.appendChild(
|
messageContent.appendChild(
|
||||||
document.createTextNode(formatTime(event.data.time))
|
document.createTextNode(
|
||||||
);
|
event.data.playing ? "started playing" : "paused"
|
||||||
|
)
|
||||||
printChatMessage("set-playing", event.user, event.colour, messageContent);
|
);
|
||||||
break;
|
messageContent.appendChild(document.createTextNode(" at "));
|
||||||
}
|
messageContent.appendChild(
|
||||||
case "Ping": {
|
document.createTextNode(formatTime(event.data.time))
|
||||||
const messageContent = document.createElement("span");
|
);
|
||||||
if (event.data) {
|
|
||||||
messageContent.appendChild(document.createTextNode("pinged saying: "));
|
printChatMessage("set-playing", event.user, event.colour, messageContent);
|
||||||
messageContent.appendChild(document.createTextNode(event.data));
|
break;
|
||||||
} else {
|
}
|
||||||
messageContent.appendChild(document.createTextNode("pinged"));
|
case "Ping": {
|
||||||
}
|
const messageContent = document.createElement("span");
|
||||||
|
if (event.data) {
|
||||||
printChatMessage("ping", event.user, event.colour, messageContent);
|
messageContent.appendChild(document.createTextNode("pinged saying: "));
|
||||||
pling();
|
messageContent.appendChild(document.createTextNode(event.data));
|
||||||
if ("Notification" in window) {
|
} else {
|
||||||
const title = "watch party :)";
|
messageContent.appendChild(document.createTextNode("pinged"));
|
||||||
const options = {
|
}
|
||||||
body: event.data
|
|
||||||
? `${event.user} pinged saying: ${event.data}`
|
printChatMessage("ping", event.user, event.colour, messageContent);
|
||||||
: `${event.user} pinged`,
|
pling();
|
||||||
};
|
if ("Notification" in window) {
|
||||||
if (Notification.permission === "granted") {
|
const title = "watch party :)";
|
||||||
new Notification(title, options);
|
const options = {
|
||||||
} else if (Notification.permission !== "denied") {
|
body: event.data
|
||||||
Notification.requestPermission().then(function (permission) {
|
? `${event.user} pinged saying: ${event.data}`
|
||||||
if (permission === "granted") {
|
: `${event.user} pinged`,
|
||||||
new Notification(title, options);
|
};
|
||||||
}
|
if (Notification.permission === "granted") {
|
||||||
});
|
new Notification(title, options);
|
||||||
}
|
} else if (Notification.permission !== "denied") {
|
||||||
}
|
Notification.requestPermission().then(function (permission) {
|
||||||
break;
|
if (permission === "granted") {
|
||||||
}
|
new Notification(title, options);
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
|
}
|
||||||
export const updateViewerList = (viewers) => {
|
}
|
||||||
const listContainer = document.querySelector("#viewer-list");
|
break;
|
||||||
|
}
|
||||||
// empty out the current list
|
}
|
||||||
listContainer.innerHTML = "";
|
};
|
||||||
|
|
||||||
// display the updated list
|
export const updateViewerList = (viewers) => {
|
||||||
for (const viewer of viewers) {
|
const listContainer = document.querySelector("#viewer-list");
|
||||||
const viewerElem = document.createElement("div");
|
|
||||||
const content = document.createElement("strong");
|
// empty out the current list
|
||||||
content.textContent = viewer.nickname;
|
listContainer.innerHTML = "";
|
||||||
content.style = `--user-color: #${viewer.colour}`;
|
|
||||||
viewerElem.appendChild(content);
|
// display the updated list
|
||||||
listContainer.appendChild(viewerElem);
|
for (const viewer of viewers) {
|
||||||
}
|
const viewerElem = document.createElement("div");
|
||||||
};
|
const content = document.createElement("strong");
|
||||||
|
content.textContent = viewer.nickname;
|
||||||
|
content.style = `--user-color: #${viewer.colour}`;
|
||||||
|
viewerElem.appendChild(content);
|
||||||
|
listContainer.appendChild(viewerElem);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
import { createSession } from "./watch-session.mjs?v=4b61c4";
|
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");
|
||||||
const videoUrl = form.querySelector("#create-session-video");
|
const videoUrl = form.querySelector("#create-session-video");
|
||||||
const subsUrl = form.querySelector("#create-session-subs");
|
const subsUrl = form.querySelector("#create-session-subs");
|
||||||
const subsName = form.querySelector("#create-session-subs-name");
|
const subsName = form.querySelector("#create-session-subs-name");
|
||||||
|
|
||||||
form.addEventListener("submit", (event) => {
|
form.addEventListener("submit", (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
let subs = [];
|
let subs = [];
|
||||||
if (subsUrl.value) {
|
if (subsUrl.value) {
|
||||||
subs.push({ url: subsUrl.value, name: subsName.value || "default" });
|
subs.push({ url: subsUrl.value, name: subsName.value || "default" });
|
||||||
}
|
}
|
||||||
createSession(videoUrl.value, subs);
|
createSession(videoUrl.value, subs);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,72 @@
|
||||||
export async function emojify(text) {
|
export async function emojify(text) {
|
||||||
await emojisLoaded;
|
await emojisLoaded;
|
||||||
let last = 0;
|
let last = 0;
|
||||||
let nodes = [];
|
let nodes = [];
|
||||||
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;
|
let emoji;
|
||||||
try {
|
try {
|
||||||
emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
|
emoji = emojis[name.toLowerCase()[0]].find((e) => e[0] == name);
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
if (!emoji) {
|
if (!emoji) {
|
||||||
nodes.push(document.createTextNode(match));
|
nodes.push(document.createTextNode(match));
|
||||||
} else {
|
} else {
|
||||||
if (emoji[1][0] !== ":") {
|
if (emoji[1][0] !== ":") {
|
||||||
nodes.push(document.createTextNode(emoji[1]));
|
nodes.push(document.createTextNode(emoji[1]));
|
||||||
} else {
|
} else {
|
||||||
nodes.push(
|
nodes.push(
|
||||||
Object.assign(new Image(), {
|
Object.assign(new Image(), {
|
||||||
src: `/emojis/${name}${emoji[2]}`,
|
src: `/emojis/${name}${emoji[2]}`,
|
||||||
className: "emoji",
|
className: "emoji",
|
||||||
alt: name,
|
alt: name,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
last = index + match.length;
|
last = index + match.length;
|
||||||
});
|
});
|
||||||
if (last < text.length) nodes.push(document.createTextNode(text.slice(last)));
|
if (last < text.length) nodes.push(document.createTextNode(text.slice(last)));
|
||||||
return nodes;
|
return nodes;
|
||||||
}
|
}
|
||||||
const emojis = {};
|
const emojis = {};
|
||||||
|
|
||||||
export const emojisLoaded = Promise.all([
|
export const emojisLoaded = Promise.all([
|
||||||
fetch("/emojis/unicode.json")
|
fetch("/emojis/unicode.json")
|
||||||
.then((e) => e.json())
|
.then((e) => e.json())
|
||||||
.then((a) => {
|
.then((a) => {
|
||||||
for (let e of a) {
|
for (let e of a) {
|
||||||
emojis[e[0][0]] = emojis[e[0][0]] || [];
|
emojis[e[0][0]] = emojis[e[0][0]] || [];
|
||||||
emojis[e[0][0]].push([e[0], e[1], null, e[0]]);
|
emojis[e[0][0]].push([e[0], e[1], null, e[0]]);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
fetch("/emojos")
|
fetch("/emojos")
|
||||||
.then((e) => e.json())
|
.then((e) => e.json())
|
||||||
.then((a) => {
|
.then((a) => {
|
||||||
for (let e of a) {
|
for (let e of a) {
|
||||||
const name = e.slice(0, -4),
|
const name = e.slice(0, -4),
|
||||||
lower = name.toLowerCase();
|
lower = name.toLowerCase();
|
||||||
emojis[lower[0]] = emojis[lower[0]] || [];
|
emojis[lower[0]] = emojis[lower[0]] || [];
|
||||||
emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
|
emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
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 of Object.keys(emojis).sort())
|
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);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
search = search.toLowerCase();
|
search = search.toLowerCase();
|
||||||
for (let emoji of emojis[search[0]]) {
|
for (let emoji of emojis[search[0]]) {
|
||||||
if (search.length == 1 || emoji[3].startsWith(search)) {
|
if (search.length == 1 || emoji[3].startsWith(search)) {
|
||||||
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
|
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return [...groups[1], ...groups[0]];
|
return [...groups[1], ...groups[0]];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,93 @@
|
||||||
import { joinSession } from "./watch-session.mjs?v=4b61c4";
|
import { joinSession } from "./watch-session.mjs?v=bfdcf2";
|
||||||
import { state } from "./state.mjs";
|
import { state } from "./state.mjs";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {HTMLInputElement} field
|
* @param {HTMLInputElement} field
|
||||||
*/
|
*/
|
||||||
const loadNickname = (field) => {
|
const loadNickname = (field) => {
|
||||||
try {
|
try {
|
||||||
const savedNickname = localStorage.getItem("watch-party-nickname");
|
const savedNickname = localStorage.getItem("watch-party-nickname");
|
||||||
field.value = savedNickname;
|
field.value = savedNickname;
|
||||||
} catch (_err) {
|
} catch (_err) {
|
||||||
// Sometimes localStorage is blocked from use
|
// Sometimes localStorage is blocked from use
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {HTMLInputElement} field
|
* @param {HTMLInputElement} field
|
||||||
*/
|
*/
|
||||||
const saveNickname = (field) => {
|
const saveNickname = (field) => {
|
||||||
try {
|
try {
|
||||||
localStorage.setItem("watch-party-nickname", field.value);
|
localStorage.setItem("watch-party-nickname", field.value);
|
||||||
} catch (_err) {
|
} catch (_err) {
|
||||||
// see loadNickname
|
// see loadNickname
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {HTMLInputElement} field
|
* @param {HTMLInputElement} field
|
||||||
*/
|
*/
|
||||||
const loadColour = (field) => {
|
const loadColour = (field) => {
|
||||||
try {
|
try {
|
||||||
const savedColour = localStorage.getItem("watch-party-colour");
|
const savedColour = localStorage.getItem("watch-party-colour");
|
||||||
if (savedColour != null && savedColour != "") {
|
if (savedColour != null && savedColour != "") {
|
||||||
field.value = savedColour;
|
field.value = savedColour;
|
||||||
}
|
}
|
||||||
} catch (_err) {
|
} catch (_err) {
|
||||||
// Sometimes localStorage is blocked from use
|
// Sometimes localStorage is blocked from use
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {HTMLInputElement} field
|
* @param {HTMLInputElement} field
|
||||||
*/
|
*/
|
||||||
const saveColour = (field) => {
|
const saveColour = (field) => {
|
||||||
try {
|
try {
|
||||||
localStorage.setItem("watch-party-colour", field.value);
|
localStorage.setItem("watch-party-colour", field.value);
|
||||||
} catch (_err) {
|
} catch (_err) {
|
||||||
// see loadColour
|
// see loadColour
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const displayPostCreateMessage = () => {
|
const displayPostCreateMessage = () => {
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
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 = () => {
|
||||||
|
displayPostCreateMessage();
|
||||||
export const setupJoinSessionForm = () => {
|
|
||||||
const created = displayPostCreateMessage();
|
const form = document.querySelector("#join-session-form");
|
||||||
|
const nickname = form.querySelector("#join-session-nickname");
|
||||||
const form = document.querySelector("#join-session-form");
|
const colour = form.querySelector("#join-session-colour");
|
||||||
const nickname = form.querySelector("#join-session-nickname");
|
const sessionId = form.querySelector("#join-session-id");
|
||||||
const colour = form.querySelector("#join-session-colour");
|
const button = form.querySelector("#join-session-button");
|
||||||
const sessionId = form.querySelector("#join-session-id");
|
|
||||||
const button = form.querySelector("#join-session-button");
|
loadNickname(nickname);
|
||||||
|
loadColour(colour);
|
||||||
loadNickname(nickname);
|
|
||||||
loadColour(colour);
|
if (window.location.hash.match(/#[0-9a-f\-]+/)) {
|
||||||
|
sessionId.value = window.location.hash.substring(1);
|
||||||
if (window.location.hash.match(/#[0-9a-f\-]+/)) {
|
}
|
||||||
sessionId.value = window.location.hash.substring(1);
|
|
||||||
}
|
form.addEventListener("submit", async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
form.addEventListener("submit", async (event) => {
|
|
||||||
event.preventDefault();
|
button.disabled = true;
|
||||||
|
|
||||||
button.disabled = true;
|
saveNickname(nickname);
|
||||||
|
saveColour(colour);
|
||||||
saveNickname(nickname);
|
try {
|
||||||
saveColour(colour);
|
state().nickname = nickname.value;
|
||||||
try {
|
state().sessionId = sessionId.value;
|
||||||
state().nickname = nickname.value;
|
state().colour = colour.value.replace(/^#/, "");
|
||||||
state().sessionId = sessionId.value;
|
await joinSession();
|
||||||
state().colour = colour.value.replace(/^#/, "");
|
} catch (e) {
|
||||||
await joinSession(created);
|
alert(e.message);
|
||||||
} catch (e) {
|
button.disabled = false;
|
||||||
alert(e.message);
|
}
|
||||||
button.disabled = false;
|
});
|
||||||
}
|
};
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -1,121 +1,121 @@
|
||||||
import { joinSession } from "./watch-session.mjs?v=4b61c4";
|
import { joinSession } from "./watch-session.mjs?v=bfdcf2";
|
||||||
import { state } from "./state.mjs";
|
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)]
|
||||||
) {
|
) {
|
||||||
let last = 0;
|
let last = 0;
|
||||||
let nodes = [];
|
let nodes = [];
|
||||||
let promise = Promise.resolve();
|
let promise = Promise.resolve();
|
||||||
// matching non-urls isn't a problem, we use the browser's url parser to filter them out
|
// matching non-urls isn't a problem, we use the browser's url parser to filter them out
|
||||||
text.replace(
|
text.replace(
|
||||||
/[^:/?#\s]+:\/\/\S+/g,
|
/[^:/?#\s]+:\/\/\S+/g,
|
||||||
(match, index) =>
|
(match, index) =>
|
||||||
(promise = promise.then(async () => {
|
(promise = promise.then(async () => {
|
||||||
if (last <= index) nodes.push(...(await next(text.slice(last, index))));
|
if (last <= index) nodes.push(...(await next(text.slice(last, index))));
|
||||||
let url;
|
let url;
|
||||||
try {
|
try {
|
||||||
url = new URL(match);
|
url = new URL(match);
|
||||||
if (url.protocol === "javascript:") throw new Error();
|
if (url.protocol === "javascript:") throw new Error();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
url = null;
|
url = null;
|
||||||
}
|
}
|
||||||
if (!url) {
|
if (!url) {
|
||||||
nodes.push(...(await next(match)));
|
nodes.push(...(await next(match)));
|
||||||
} else {
|
} else {
|
||||||
let s;
|
let s;
|
||||||
if (
|
if (
|
||||||
url.origin == location.origin &&
|
url.origin == location.origin &&
|
||||||
url.pathname == "/" &&
|
url.pathname == "/" &&
|
||||||
url.hash.length > 1
|
url.hash.length > 1
|
||||||
) {
|
) {
|
||||||
nodes.push(
|
nodes.push(
|
||||||
Object.assign(document.createElement("a"), {
|
Object.assign(document.createElement("a"), {
|
||||||
textContent: "Join Session",
|
textContent: "Join Session",
|
||||||
className: "chip join-chip",
|
className: "chip join-chip",
|
||||||
onclick: () => {
|
onclick: () => {
|
||||||
state().sessionId = url.hash.substring(1);
|
state().sessionId = url.hash.substring(1);
|
||||||
joinSession();
|
joinSession();
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
} else if (
|
} else if (
|
||||||
url.hostname == "xiv.st" &&
|
url.hostname == "xiv.st" &&
|
||||||
(s = url.pathname.match(/(\d?\d).?(\d\d)/))
|
(s = url.pathname.match(/(\d?\d).?(\d\d)/))
|
||||||
) {
|
) {
|
||||||
if (s) {
|
if (s) {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
date.setUTCSeconds(0);
|
date.setUTCSeconds(0);
|
||||||
date.setUTCMilliseconds(0);
|
date.setUTCMilliseconds(0);
|
||||||
date.setUTCHours(s[1]), date.setUTCMinutes(s[2]);
|
date.setUTCHours(s[1]), date.setUTCMinutes(s[2]);
|
||||||
nodes.push(
|
nodes.push(
|
||||||
Object.assign(document.createElement("a"), {
|
Object.assign(document.createElement("a"), {
|
||||||
href: url.href,
|
href: url.href,
|
||||||
textContent: date.toLocaleString([], {
|
textContent: date.toLocaleString([], {
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
}),
|
}),
|
||||||
className: "chip time-chip",
|
className: "chip time-chip",
|
||||||
target: "_blank",
|
target: "_blank",
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
nodes.push(
|
nodes.push(
|
||||||
Object.assign(document.createElement("a"), {
|
Object.assign(document.createElement("a"), {
|
||||||
href: url.href,
|
href: url.href,
|
||||||
textContent: url.href,
|
textContent: url.href,
|
||||||
target: "_blank",
|
target: "_blank",
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
last = index + match.length;
|
last = index + match.length;
|
||||||
}))
|
}))
|
||||||
);
|
);
|
||||||
await promise;
|
await promise;
|
||||||
if (last < text.length) nodes.push(...(await next(text.slice(last))));
|
if (last < text.length) nodes.push(...(await next(text.slice(last))));
|
||||||
return nodes;
|
return nodes;
|
||||||
}
|
}
|
||||||
const emojis = {};
|
const emojis = {};
|
||||||
|
|
||||||
export const emojisLoaded = Promise.all([
|
export const emojisLoaded = Promise.all([
|
||||||
fetch("/emojis")
|
fetch("/emojis")
|
||||||
.then((e) => e.json())
|
.then((e) => e.json())
|
||||||
.then((a) => {
|
.then((a) => {
|
||||||
for (let e of a) {
|
for (let e of a) {
|
||||||
const name = e.slice(0, -4),
|
const name = e.slice(0, -4),
|
||||||
lower = name.toLowerCase();
|
lower = name.toLowerCase();
|
||||||
emojis[lower[0]] = emojis[lower[0]] || [];
|
emojis[lower[0]] = emojis[lower[0]] || [];
|
||||||
emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
|
emojis[lower[0]].push([name, ":" + name + ":", e.slice(-4), lower]);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
fetch("/emojis/unicode.json")
|
fetch("/emojis/unicode.json")
|
||||||
.then((e) => e.json())
|
.then((e) => e.json())
|
||||||
.then((a) => {
|
.then((a) => {
|
||||||
for (let e of a) {
|
for (let e of a) {
|
||||||
emojis[e[0][0]] = emojis[e[0][0]] || [];
|
emojis[e[0][0]] = emojis[e[0][0]] || [];
|
||||||
emojis[e[0][0]].push([e[0], e[1], null, e[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 of Object.keys(emojis).sort())
|
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);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
search = search.toLowerCase();
|
search = search.toLowerCase();
|
||||||
for (let emoji of emojis[search[0]]) {
|
for (let emoji of emojis[search[0]]) {
|
||||||
if (search.length == 1 || emoji[3].startsWith(search)) {
|
if (search.length == 1 || emoji[3].startsWith(search)) {
|
||||||
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
|
(emoji[1][0] === ":" ? groups[0] : groups[1]).push(emoji);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return [...groups[0], ...groups[1]];
|
return [...groups[0], ...groups[1]];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
export const toggleOptionPane = (event, element) => {
|
||||||
|
event.preventDefault();
|
||||||
|
// show options
|
||||||
|
if (
|
||||||
|
!document.querySelector("#options").style.display ||
|
||||||
|
document.querySelector("#options").style.display === "none"
|
||||||
|
) {
|
||||||
|
// using this to do any potential init logic for the fields too
|
||||||
|
loadPlayerControlsShown(document.querySelector("#playerControlsShown"))
|
||||||
|
loadPlingVolume(document.querySelector("#plingVolume"))
|
||||||
|
|
||||||
|
element.innerText = "❌";
|
||||||
|
document.querySelector("#options").style.display = "block";
|
||||||
|
return (document.querySelector("#viewing").style.display = "none");
|
||||||
|
}
|
||||||
|
// hide options
|
||||||
|
element.innerText = "⚙️";
|
||||||
|
document.querySelector("#options").style.display = "none";
|
||||||
|
document.querySelector("#viewing").style.display = "block";
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPlayerControlsShown = () => localStorage.getItem("watch-party-default-allow-controls") || false
|
||||||
|
// delete from storage on false to prevent weird js boolean parsing (Boolean('false') === True)
|
||||||
|
const setPlayerControlShown = (boolean) => !boolean
|
||||||
|
? localStorage.removeItem("watch-party-default-allow-controls")
|
||||||
|
: localStorage.setItem("watch-party-default-allow-controls", boolean)
|
||||||
|
export const togglePlayerControlsShown = (element) => {
|
||||||
|
const isShown = element.checked
|
||||||
|
setPlayerControlShown(!isShown)
|
||||||
|
}
|
||||||
|
const loadPlayerControlsShown = (element) => {
|
||||||
|
const isShown = getPlayerControlsShown()
|
||||||
|
element.checked = !isShown
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPlingVolume = () => localStorage.getItem("watch-party-pling-volume") || 100
|
||||||
|
const setPlingVolume = (value) => localStorage.setItem("watch-party-pling-volume", value)
|
||||||
|
export const handlePlingVolume = (element) => {
|
||||||
|
setPlingVolume(element.value)
|
||||||
|
}
|
||||||
|
const loadPlingVolume = (element) => {
|
||||||
|
element.value = getPlingVolume()
|
||||||
|
}
|
||||||
|
|
@ -1,79 +1,82 @@
|
||||||
export const pling = () => {
|
export const pling = () => {
|
||||||
const maxGain = 0.3;
|
// technically volume 0 breaks it but its the wanted outcome i guess?
|
||||||
const duration = 0.22;
|
const maxGain =
|
||||||
const fadeDuration = 0.1;
|
(Number(localStorage.getItem("watch-party-pling-volume")) / 100 ?? 1) * 0.3;
|
||||||
const secondBeepOffset = 0.05;
|
|
||||||
const thirdBeepOffset = 2 * secondBeepOffset;
|
const duration = 0.22;
|
||||||
|
const fadeDuration = 0.1;
|
||||||
const ctx = new AudioContext();
|
const secondBeepOffset = 0.05;
|
||||||
|
const thirdBeepOffset = 2 * secondBeepOffset;
|
||||||
const firstBeepGain = ctx.createGain();
|
|
||||||
firstBeepGain.connect(ctx.destination);
|
const ctx = new AudioContext();
|
||||||
firstBeepGain.gain.setValueAtTime(0.01, ctx.currentTime);
|
|
||||||
firstBeepGain.gain.exponentialRampToValueAtTime(
|
const firstBeepGain = ctx.createGain();
|
||||||
maxGain,
|
firstBeepGain.connect(ctx.destination);
|
||||||
ctx.currentTime + fadeDuration
|
firstBeepGain.gain.setValueAtTime(0.01, ctx.currentTime);
|
||||||
);
|
firstBeepGain.gain.exponentialRampToValueAtTime(
|
||||||
firstBeepGain.gain.setValueAtTime(
|
maxGain,
|
||||||
maxGain,
|
ctx.currentTime + fadeDuration
|
||||||
ctx.currentTime + (duration - fadeDuration)
|
);
|
||||||
);
|
firstBeepGain.gain.setValueAtTime(
|
||||||
firstBeepGain.gain.exponentialRampToValueAtTime(
|
maxGain,
|
||||||
0.01,
|
ctx.currentTime + (duration - fadeDuration)
|
||||||
ctx.currentTime + duration
|
);
|
||||||
);
|
firstBeepGain.gain.exponentialRampToValueAtTime(
|
||||||
|
0.01,
|
||||||
const firstBeep = ctx.createOscillator();
|
ctx.currentTime + duration
|
||||||
firstBeep.connect(firstBeepGain);
|
);
|
||||||
firstBeep.frequency.value = 400;
|
|
||||||
firstBeep.type = "sine";
|
const firstBeep = ctx.createOscillator();
|
||||||
|
firstBeep.connect(firstBeepGain);
|
||||||
const secondBeepGain = ctx.createGain();
|
firstBeep.frequency.value = 400;
|
||||||
secondBeepGain.connect(ctx.destination);
|
firstBeep.type = "sine";
|
||||||
secondBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + secondBeepOffset);
|
|
||||||
secondBeepGain.gain.exponentialRampToValueAtTime(
|
const secondBeepGain = ctx.createGain();
|
||||||
maxGain,
|
secondBeepGain.connect(ctx.destination);
|
||||||
ctx.currentTime + secondBeepOffset + fadeDuration
|
secondBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + secondBeepOffset);
|
||||||
);
|
secondBeepGain.gain.exponentialRampToValueAtTime(
|
||||||
secondBeepGain.gain.setValueAtTime(
|
maxGain,
|
||||||
maxGain,
|
ctx.currentTime + secondBeepOffset + fadeDuration
|
||||||
ctx.currentTime + secondBeepOffset + (duration - fadeDuration)
|
);
|
||||||
);
|
secondBeepGain.gain.setValueAtTime(
|
||||||
secondBeepGain.gain.exponentialRampToValueAtTime(
|
maxGain,
|
||||||
0.01,
|
ctx.currentTime + secondBeepOffset + (duration - fadeDuration)
|
||||||
ctx.currentTime + secondBeepOffset + duration
|
);
|
||||||
);
|
secondBeepGain.gain.exponentialRampToValueAtTime(
|
||||||
|
0.01,
|
||||||
const secondBeep = ctx.createOscillator();
|
ctx.currentTime + secondBeepOffset + duration
|
||||||
secondBeep.connect(secondBeepGain);
|
);
|
||||||
secondBeep.frequency.value = 600;
|
|
||||||
secondBeep.type = "sine";
|
const secondBeep = ctx.createOscillator();
|
||||||
|
secondBeep.connect(secondBeepGain);
|
||||||
const thirdBeepGain = ctx.createGain();
|
secondBeep.frequency.value = 600;
|
||||||
thirdBeepGain.connect(ctx.destination);
|
secondBeep.type = "sine";
|
||||||
thirdBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + thirdBeepOffset);
|
|
||||||
thirdBeepGain.gain.exponentialRampToValueAtTime(
|
const thirdBeepGain = ctx.createGain();
|
||||||
maxGain,
|
thirdBeepGain.connect(ctx.destination);
|
||||||
ctx.currentTime + thirdBeepOffset + fadeDuration
|
thirdBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + thirdBeepOffset);
|
||||||
);
|
thirdBeepGain.gain.exponentialRampToValueAtTime(
|
||||||
thirdBeepGain.gain.setValueAtTime(
|
maxGain,
|
||||||
maxGain,
|
ctx.currentTime + thirdBeepOffset + fadeDuration
|
||||||
ctx.currentTime + thirdBeepOffset + (duration - fadeDuration)
|
);
|
||||||
);
|
thirdBeepGain.gain.setValueAtTime(
|
||||||
thirdBeepGain.gain.exponentialRampToValueAtTime(
|
maxGain,
|
||||||
0.01,
|
ctx.currentTime + thirdBeepOffset + (duration - fadeDuration)
|
||||||
ctx.currentTime + thirdBeepOffset + duration
|
);
|
||||||
);
|
thirdBeepGain.gain.exponentialRampToValueAtTime(
|
||||||
|
0.01,
|
||||||
const thirdBeep = ctx.createOscillator();
|
ctx.currentTime + thirdBeepOffset + duration
|
||||||
thirdBeep.connect(thirdBeepGain);
|
);
|
||||||
thirdBeep.frequency.value = 900;
|
|
||||||
thirdBeep.type = "sine";
|
const thirdBeep = ctx.createOscillator();
|
||||||
|
thirdBeep.connect(thirdBeepGain);
|
||||||
firstBeep.start(ctx.currentTime);
|
thirdBeep.frequency.value = 900;
|
||||||
firstBeep.stop(ctx.currentTime + duration);
|
thirdBeep.type = "sine";
|
||||||
secondBeep.start(ctx.currentTime + secondBeepOffset);
|
|
||||||
secondBeep.stop(ctx.currentTime + (secondBeepOffset + duration));
|
firstBeep.start(ctx.currentTime);
|
||||||
thirdBeep.start(ctx.currentTime + thirdBeepOffset);
|
firstBeep.stop(ctx.currentTime + duration);
|
||||||
thirdBeep.stop(ctx.currentTime + (thirdBeepOffset + duration));
|
secondBeep.start(ctx.currentTime + secondBeepOffset);
|
||||||
};
|
secondBeep.stop(ctx.currentTime + (secondBeepOffset + duration));
|
||||||
|
thirdBeep.start(ctx.currentTime + thirdBeepOffset);
|
||||||
|
thirdBeep.stop(ctx.currentTime + (thirdBeepOffset + duration));
|
||||||
|
};
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,71 +1,71 @@
|
||||||
export default class ReconnectingWebSocket {
|
export default class ReconnectingWebSocket {
|
||||||
constructor(url) {
|
constructor(url) {
|
||||||
if (url instanceof URL) {
|
if (url instanceof URL) {
|
||||||
this.url = url;
|
this.url = url;
|
||||||
} else {
|
} else {
|
||||||
this.url = new URL(url);
|
this.url = new URL(url);
|
||||||
}
|
}
|
||||||
this.connected = false;
|
this.connected = false;
|
||||||
this._eventTarget = new EventTarget();
|
this._eventTarget = new EventTarget();
|
||||||
this._backoff = 250; // milliseconds, doubled before use
|
this._backoff = 250; // milliseconds, doubled before use
|
||||||
this._lastConnect = 0;
|
this._lastConnect = 0;
|
||||||
this._socket = null;
|
this._socket = null;
|
||||||
this._unsent = [];
|
this._unsent = [];
|
||||||
this._closing = false;
|
this._closing = false;
|
||||||
this._connect(true);
|
this._connect(true);
|
||||||
}
|
}
|
||||||
_connect(first) {
|
_connect(first) {
|
||||||
if (this._socket)
|
if (this._socket)
|
||||||
try {
|
try {
|
||||||
this._socket.close();
|
this._socket.close();
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
try {
|
try {
|
||||||
this._socket = new WebSocket(this.url.href);
|
this._socket = new WebSocket(this.url.href);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this._reconnecting = false;
|
this._reconnecting = false;
|
||||||
return this._reconnect();
|
return this._reconnect();
|
||||||
}
|
}
|
||||||
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)
|
||||||
this._eventTarget.dispatchEvent(new Event("reconnected"));
|
this._eventTarget.dispatchEvent(new Event("reconnected"));
|
||||||
this._reconnecting = false;
|
this._reconnecting = false;
|
||||||
this._backoff = 250;
|
this._backoff = 250;
|
||||||
this.connected = true;
|
this.connected = true;
|
||||||
while (this._unsent.length > 0) this._socket.send(this._unsent.shift());
|
while (this._unsent.length > 0) this._socket.send(this._unsent.shift());
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
_reconnect() {
|
_reconnect() {
|
||||||
if (this._closing) return;
|
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;
|
||||||
this.connected = false;
|
this.connected = false;
|
||||||
this._backoff *= 2; // exponential backoff
|
this._backoff *= 2; // exponential backoff
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._connect();
|
this._connect();
|
||||||
}, Math.floor(this._backoff + Math.random() * this._backoff * 0.25 - this._backoff * 0.125));
|
}, Math.floor(this._backoff + Math.random() * this._backoff * 0.25 - this._backoff * 0.125));
|
||||||
}
|
}
|
||||||
send(message) {
|
send(message) {
|
||||||
if (this.connected) {
|
if (this.connected) {
|
||||||
this._socket.send(message);
|
this._socket.send(message);
|
||||||
} else {
|
} else {
|
||||||
this._unsent.push(message);
|
this._unsent.push(message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
close() {
|
close() {
|
||||||
this._closing = true;
|
this._closing = true;
|
||||||
this._socket.close();
|
this._socket.close();
|
||||||
}
|
}
|
||||||
addEventListener(...a) {
|
addEventListener(...a) {
|
||||||
return this._eventTarget.addEventListener(...a);
|
return this._eventTarget.addEventListener(...a);
|
||||||
}
|
}
|
||||||
removeEventListener(...a) {
|
removeEventListener(...a) {
|
||||||
return this._eventTarget.removeEventListener(...a);
|
return this._eventTarget.removeEventListener(...a);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,112 +1,163 @@
|
||||||
import Plyr from "./plyr-3.7.3.min.esm.js";
|
const loadVolume = () => {
|
||||||
|
try {
|
||||||
/**
|
const savedVolume = localStorage.getItem("watch-party-volume");
|
||||||
* @param {string} videoUrl
|
if (savedVolume != null && savedVolume != "") {
|
||||||
* @param {{name: string, url: string}[]} subtitles
|
return +savedVolume;
|
||||||
*/
|
}
|
||||||
const createVideoElement = (videoUrl, subtitles, created) => {
|
} catch (_err) {
|
||||||
const oldVideo = document.getElementById(".plyr");
|
// Sometimes localStorage is blocked from use
|
||||||
if (oldVideo) {
|
}
|
||||||
oldVideo.remove();
|
// default
|
||||||
}
|
return 0.5;
|
||||||
const video = document.createElement("video");
|
};
|
||||||
video.id = "video";
|
|
||||||
video.crossOrigin = "anonymous";
|
/**
|
||||||
|
* @param {number} volume
|
||||||
const source = document.createElement("source");
|
*/
|
||||||
source.src = videoUrl;
|
const saveVolume = (volume) => {
|
||||||
|
try {
|
||||||
video.appendChild(source);
|
localStorage.setItem("watch-party-volume", volume);
|
||||||
|
} catch (_err) {
|
||||||
for (const { name, url } of subtitles) {
|
// see loadVolume
|
||||||
const track = document.createElement("track");
|
}
|
||||||
track.label = name;
|
};
|
||||||
track.srclang = "xx-" + name.toLowerCase();
|
|
||||||
track.src = url;
|
const loadCaptionTrack = () => {
|
||||||
track.kind = "captions";
|
try {
|
||||||
video.appendChild(track);
|
const savedTrack = localStorage.getItem("watch-party-captions");
|
||||||
}
|
if (savedTrack != null && savedTrack != "") {
|
||||||
|
return +savedTrack;
|
||||||
const videoContainer = document.querySelector("#video-container");
|
}
|
||||||
videoContainer.style.display = "block";
|
} catch (_err) {
|
||||||
videoContainer.appendChild(video);
|
// Sometimes localStorage is blocked from use
|
||||||
|
}
|
||||||
const player = new Plyr(video, {
|
// default
|
||||||
clickToPlay: false,
|
return -1;
|
||||||
settings: ["captions", "quality"],
|
};
|
||||||
autopause: false,
|
|
||||||
});
|
/**
|
||||||
player.elements.controls.insertAdjacentHTML(
|
* @param {number} track
|
||||||
"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 saveCaptionsTrack = (track) => {
|
||||||
);
|
try {
|
||||||
const lockButton = player.elements.controls.children[0];
|
localStorage.setItem("watch-party-captions", track);
|
||||||
let controlsEnabled = created;
|
} catch (_err) {
|
||||||
const setControlsEnabled = (enabled) => {
|
// see loadCaptionsTrack
|
||||||
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 =
|
* @param {string} videoUrl
|
||||||
player.elements.inputs.seek.disabled =
|
* @param {{name: string, url: string}[]} subtitles
|
||||||
!enabled;
|
*/
|
||||||
if (!enabled) {
|
const createVideoElement = (videoUrl, subtitles) => {
|
||||||
// enable media button support
|
const oldVideo = document.getElementById("video");
|
||||||
navigator.mediaSession.setActionHandler("play", null);
|
if (oldVideo) {
|
||||||
navigator.mediaSession.setActionHandler("pause", null);
|
oldVideo.remove();
|
||||||
navigator.mediaSession.setActionHandler("stop", null);
|
}
|
||||||
navigator.mediaSession.setActionHandler("seekbackward", null);
|
const video = document.createElement("video");
|
||||||
navigator.mediaSession.setActionHandler("seekforward", null);
|
video.id = "video";
|
||||||
navigator.mediaSession.setActionHandler("seekto", null);
|
video.controls = true;
|
||||||
navigator.mediaSession.setActionHandler("previoustrack", null);
|
video.autoplay = false;
|
||||||
navigator.mediaSession.setActionHandler("nexttrack", null);
|
video.volume = loadVolume();
|
||||||
} else {
|
video.crossOrigin = "anonymous";
|
||||||
// disable media button support by ignoring the events
|
|
||||||
navigator.mediaSession.setActionHandler("play", () => {});
|
video.addEventListener("volumechange", async () => {
|
||||||
navigator.mediaSession.setActionHandler("pause", () => {});
|
saveVolume(video.volume);
|
||||||
navigator.mediaSession.setActionHandler("stop", () => {});
|
});
|
||||||
navigator.mediaSession.setActionHandler("seekbackward", () => {});
|
|
||||||
navigator.mediaSession.setActionHandler("seekforward", () => {});
|
const source = document.createElement("source");
|
||||||
navigator.mediaSession.setActionHandler("seekto", () => {});
|
source.src = videoUrl;
|
||||||
navigator.mediaSession.setActionHandler("previoustrack", () => {});
|
|
||||||
navigator.mediaSession.setActionHandler("nexttrack", () => {});
|
video.appendChild(source);
|
||||||
}
|
|
||||||
};
|
const storedTrack = loadCaptionTrack();
|
||||||
setControlsEnabled(controlsEnabled);
|
let id = 0;
|
||||||
lockButton.addEventListener("click", () =>
|
for (const { name, url } of subtitles) {
|
||||||
setControlsEnabled(!controlsEnabled)
|
const track = document.createElement("track");
|
||||||
);
|
track.label = name;
|
||||||
window.__plyr = player;
|
track.src = url;
|
||||||
|
track.kind = "captions";
|
||||||
return player;
|
|
||||||
};
|
if (id == storedTrack || storedTrack == -1) {
|
||||||
|
track.default = true;
|
||||||
/**
|
}
|
||||||
* @param {string} videoUrl
|
|
||||||
* @param {{name: string, url: string}[]} subtitles
|
video.appendChild(track);
|
||||||
* @param {number} currentTime
|
id++;
|
||||||
* @param {boolean} playing
|
}
|
||||||
*/
|
|
||||||
export const setupVideo = async (
|
video.textTracks.addEventListener("change", async () => {
|
||||||
videoUrl,
|
let id = 0;
|
||||||
subtitles,
|
for (const track of video.textTracks) {
|
||||||
currentTime,
|
if (track.mode != "disabled") {
|
||||||
playing,
|
saveCaptionsTrack(id);
|
||||||
created
|
return;
|
||||||
) => {
|
}
|
||||||
document.querySelector("#pre-join-controls").style["display"] = "none";
|
id++;
|
||||||
const player = createVideoElement(videoUrl, subtitles, created);
|
}
|
||||||
player.currentTime = currentTime / 1000.0;
|
saveCaptionsTrack(-1);
|
||||||
|
});
|
||||||
try {
|
|
||||||
if (playing) {
|
// watch for attribute changes on the video object to detect hiding/showing of controls
|
||||||
player.play();
|
// as far as i can tell this is the least hacky solutions to get control visibility change events
|
||||||
} else {
|
const observer = new MutationObserver(async (mutations) => {
|
||||||
player.pause();
|
for (const mutation of mutations) {
|
||||||
}
|
if (mutation.attributeName == "controls") {
|
||||||
} catch (err) {
|
if (video.controls) {
|
||||||
// Auto-play is probably disabled, we should uhhhhhhh do something about it
|
// enable media button support
|
||||||
}
|
navigator.mediaSession.setActionHandler("play", null);
|
||||||
|
navigator.mediaSession.setActionHandler("pause", null);
|
||||||
return player;
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} videoUrl
|
||||||
|
* @param {{name: string, url: string}[]} subtitles
|
||||||
|
* @param {number} currentTime
|
||||||
|
* @param {boolean} playing
|
||||||
|
*/
|
||||||
|
export const setupVideo = async (videoUrl, subtitles, currentTime, playing) => {
|
||||||
|
document.querySelector("#pre-join-controls").style["display"] = "none";
|
||||||
|
const video = createVideoElement(videoUrl, subtitles);
|
||||||
|
const videoContainer = document.querySelector("#video-container");
|
||||||
|
videoContainer.style.display = "block";
|
||||||
|
videoContainer.appendChild(video);
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
return video;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,270 +1,275 @@
|
||||||
import { setupVideo } from "./video.mjs?v=4b61c4";
|
import { setupVideo } from "./video.mjs?v=bfdcf2";
|
||||||
import {
|
import {
|
||||||
setupChat,
|
setupChat,
|
||||||
logEventToChat,
|
logEventToChat,
|
||||||
updateViewerList,
|
updateViewerList,
|
||||||
printChatMessage,
|
printChatMessage,
|
||||||
} from "./chat.mjs?v=4b61c4";
|
} from "./chat.mjs?v=bfdcf2";
|
||||||
import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
|
import ReconnectingWebSocket from "./reconnecting-web-socket.mjs";
|
||||||
import { state } from "./state.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 = () => {
|
||||||
const wsUrl = new URL(
|
const wsUrl = new URL(
|
||||||
`/sess/${state().sessionId}/subscribe` +
|
`/sess/${state().sessionId}/subscribe` +
|
||||||
`?nickname=${encodeURIComponent(state().nickname)}` +
|
`?nickname=${encodeURIComponent(state().nickname)}` +
|
||||||
`&colour=${encodeURIComponent(state().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);
|
||||||
const socket = new ReconnectingWebSocket(wsUrl);
|
const socket = new ReconnectingWebSocket(wsUrl);
|
||||||
|
|
||||||
return socket;
|
return socket;
|
||||||
};
|
};
|
||||||
|
|
||||||
let outgoingDebounce = false;
|
let outgoingDebounce = false;
|
||||||
let outgoingDebounceCallbackId = null;
|
let outgoingDebounceCallbackId = null;
|
||||||
|
|
||||||
export const setDebounce = () => {
|
export const setDebounce = () => {
|
||||||
outgoingDebounce = true;
|
outgoingDebounce = true;
|
||||||
|
|
||||||
if (outgoingDebounceCallbackId) {
|
if (outgoingDebounceCallbackId) {
|
||||||
cancelIdleCallback(outgoingDebounceCallbackId);
|
cancelIdleCallback(outgoingDebounceCallbackId);
|
||||||
outgoingDebounceCallbackId = null;
|
outgoingDebounceCallbackId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
outgoingDebounceCallbackId = setTimeout(() => {
|
outgoingDebounceCallbackId = setTimeout(() => {
|
||||||
outgoingDebounce = false;
|
outgoingDebounce = false;
|
||||||
}, 500);
|
}, 500);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setVideoTime = (time) => {
|
export const setVideoTime = (time, video = null) => {
|
||||||
const timeSecs = time / 1000.0;
|
if (video == null) {
|
||||||
if (Math.abs(player.currentTime - timeSecs) > 0.5) {
|
video = document.querySelector("video");
|
||||||
player.currentTime = timeSecs;
|
}
|
||||||
}
|
|
||||||
};
|
const timeSecs = time / 1000.0;
|
||||||
|
if (Math.abs(video.currentTime - timeSecs) > 0.5) {
|
||||||
export const setPlaying = async (playing) => {
|
video.currentTime = timeSecs;
|
||||||
if (playing) {
|
}
|
||||||
await player.play();
|
};
|
||||||
} else {
|
|
||||||
player.pause();
|
export const setPlaying = async (playing, video = null) => {
|
||||||
}
|
if (video == null) {
|
||||||
};
|
video = document.querySelector("video");
|
||||||
|
}
|
||||||
/**
|
|
||||||
* @param {HTMLVideoElement} video
|
if (playing) {
|
||||||
* @param {ReconnectingWebSocket} socket
|
await video.play();
|
||||||
*/
|
} else {
|
||||||
const setupIncomingEvents = (player, socket) => {
|
video.pause();
|
||||||
socket.addEventListener("message", async (messageEvent) => {
|
}
|
||||||
try {
|
};
|
||||||
const event = JSON.parse(messageEvent.data);
|
|
||||||
if (!event.reflected) {
|
/**
|
||||||
switch (event.op) {
|
* @param {HTMLVideoElement} video
|
||||||
case "SetPlaying":
|
* @param {ReconnectingWebSocket} socket
|
||||||
setDebounce();
|
*/
|
||||||
|
const setupIncomingEvents = (video, socket) => {
|
||||||
if (event.data.playing) {
|
socket.addEventListener("message", async (messageEvent) => {
|
||||||
await player.play();
|
try {
|
||||||
} else {
|
const event = JSON.parse(messageEvent.data);
|
||||||
player.pause();
|
if (!event.reflected) {
|
||||||
}
|
switch (event.op) {
|
||||||
|
case "SetPlaying":
|
||||||
setVideoTime(event.data.time);
|
setDebounce();
|
||||||
break;
|
|
||||||
case "SetTime":
|
if (event.data.playing) {
|
||||||
setDebounce();
|
await video.play();
|
||||||
setVideoTime(event.data);
|
} else {
|
||||||
break;
|
video.pause();
|
||||||
case "UpdateViewerList":
|
}
|
||||||
updateViewerList(event.data);
|
|
||||||
break;
|
setVideoTime(event.data.time, video);
|
||||||
}
|
break;
|
||||||
}
|
case "SetTime":
|
||||||
|
setDebounce();
|
||||||
logEventToChat(event);
|
setVideoTime(event.data, video);
|
||||||
} catch (_err) {}
|
break;
|
||||||
});
|
case "UpdateViewerList":
|
||||||
};
|
updateViewerList(event.data);
|
||||||
|
break;
|
||||||
/**
|
}
|
||||||
* @param {Plyr} player
|
}
|
||||||
* @param {ReconnectingWebSocket} socket
|
|
||||||
*/
|
logEventToChat(event);
|
||||||
const setupOutgoingEvents = (player, socket) => {
|
} catch (_err) {}
|
||||||
const currentVideoTime = () => (player.currentTime * 1000) | 0;
|
});
|
||||||
|
};
|
||||||
player.on("pause", async () => {
|
|
||||||
if (outgoingDebounce || player.elements.inputs.seek.disabled) {
|
/**
|
||||||
return;
|
* @param {HTMLVideoElement} video
|
||||||
}
|
* @param {ReconnectingWebSocket} socket
|
||||||
|
*/
|
||||||
// don't send a pause event for the video ending
|
const setupOutgoingEvents = (video, socket) => {
|
||||||
if (player.currentTime == player.duration) {
|
const currentVideoTime = () => (video.currentTime * 1000) | 0;
|
||||||
return;
|
|
||||||
}
|
video.addEventListener("pause", async (event) => {
|
||||||
|
if (outgoingDebounce || !video.controls) {
|
||||||
socket.send(
|
return;
|
||||||
JSON.stringify({
|
}
|
||||||
op: "SetPlaying",
|
|
||||||
data: {
|
// don't send a pause event for the video ending
|
||||||
playing: false,
|
if (video.currentTime == video.duration) {
|
||||||
time: currentVideoTime(),
|
return;
|
||||||
},
|
}
|
||||||
})
|
|
||||||
);
|
socket.send(
|
||||||
});
|
JSON.stringify({
|
||||||
|
op: "SetPlaying",
|
||||||
player.on("play", () => {
|
data: {
|
||||||
if (outgoingDebounce || player.elements.inputs.seek.disabled) {
|
playing: false,
|
||||||
return;
|
time: currentVideoTime(),
|
||||||
}
|
},
|
||||||
|
})
|
||||||
socket.send(
|
);
|
||||||
JSON.stringify({
|
});
|
||||||
op: "SetPlaying",
|
|
||||||
data: {
|
video.addEventListener("play", (event) => {
|
||||||
playing: true,
|
if (outgoingDebounce || !video.controls) {
|
||||||
time: currentVideoTime(),
|
return;
|
||||||
},
|
}
|
||||||
})
|
|
||||||
);
|
socket.send(
|
||||||
});
|
JSON.stringify({
|
||||||
|
op: "SetPlaying",
|
||||||
let firstSeekComplete = false;
|
data: {
|
||||||
player.on("seeked", async (event) => {
|
playing: true,
|
||||||
if (!firstSeekComplete) {
|
time: currentVideoTime(),
|
||||||
// The first seeked event is performed by the browser when the video is loading
|
},
|
||||||
firstSeekComplete = true;
|
})
|
||||||
return;
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
if (outgoingDebounce || player.elements.inputs.seek.disabled) {
|
let firstSeekComplete = false;
|
||||||
return;
|
video.addEventListener("seeked", async (event) => {
|
||||||
}
|
if (!firstSeekComplete) {
|
||||||
|
// The first seeked event is performed by the browser when the video is loading
|
||||||
socket.send(
|
firstSeekComplete = true;
|
||||||
JSON.stringify({
|
return;
|
||||||
op: "SetTime",
|
}
|
||||||
data: {
|
|
||||||
to: currentVideoTime(),
|
if (outgoingDebounce || !video.controls) {
|
||||||
},
|
return;
|
||||||
})
|
}
|
||||||
);
|
|
||||||
});
|
socket.send(
|
||||||
};
|
JSON.stringify({
|
||||||
|
op: "SetTime",
|
||||||
export const joinSession = async (created) => {
|
data: {
|
||||||
if (state().activeSession) {
|
to: currentVideoTime(),
|
||||||
if (state().activeSession === state().sessionId) {
|
},
|
||||||
// we are already in this session, dont rejoin
|
})
|
||||||
return;
|
);
|
||||||
}
|
});
|
||||||
// we are joining a new session from an existing session
|
};
|
||||||
const messageContent = document.createElement("span");
|
|
||||||
messageContent.appendChild(document.createTextNode("joining new session "));
|
export const joinSession = async () => {
|
||||||
messageContent.appendChild(document.createTextNode(state().sessionId));
|
if (state().activeSession) {
|
||||||
|
if (state().activeSession === state().sessionId) {
|
||||||
printChatMessage("join-session", "watch-party", "#fffff", messageContent);
|
// we are already in this session, dont rejoin
|
||||||
}
|
return;
|
||||||
state().activeSession = state().sessionId;
|
}
|
||||||
|
// we are joining a new session from an existing session
|
||||||
// try { // we are handling errors in the join form.
|
const messageContent = document.createElement("span");
|
||||||
const genericConnectionError = new Error(
|
messageContent.appendChild(document.createTextNode("joining new session "));
|
||||||
"There was an issue getting the session information."
|
messageContent.appendChild(document.createTextNode(state().sessionId));
|
||||||
);
|
|
||||||
window.location.hash = state().sessionId;
|
printChatMessage("join-session", "watch-party", "#fffff", messageContent);
|
||||||
let response, video_url, subtitle_tracks, current_time_ms, is_playing;
|
}
|
||||||
try {
|
state().activeSession = state().sessionId;
|
||||||
response = await fetch(`/sess/${state().sessionId}`);
|
|
||||||
} catch (e) {
|
// try { // we are handling errors in the join form.
|
||||||
console.error(e);
|
const genericConnectionError = new Error(
|
||||||
throw genericConnectionError;
|
"There was an issue getting the session information."
|
||||||
}
|
);
|
||||||
if (!response.ok) {
|
window.location.hash = state().sessionId;
|
||||||
let error;
|
let response, video_url, subtitle_tracks, current_time_ms, is_playing;
|
||||||
try {
|
try {
|
||||||
({ error } = await response.json());
|
response = await fetch(`/sess/${state().sessionId}`);
|
||||||
if (!error) throw new Error();
|
} catch (e) {
|
||||||
} catch (e) {
|
console.error(e);
|
||||||
console.error(e);
|
throw genericConnectionError;
|
||||||
throw genericConnectionError;
|
}
|
||||||
}
|
if (!response.ok) {
|
||||||
throw new Error(error);
|
let error;
|
||||||
}
|
try {
|
||||||
try {
|
({ error } = await response.json());
|
||||||
({ video_url, subtitle_tracks, current_time_ms, is_playing } =
|
if (!error) throw new Error();
|
||||||
await response.json());
|
} catch (e) {
|
||||||
} catch (e) {
|
console.error(e);
|
||||||
console.error(e);
|
throw genericConnectionError;
|
||||||
throw genericConnectionError;
|
}
|
||||||
}
|
throw new Error(error);
|
||||||
|
}
|
||||||
if (state().socket) {
|
try {
|
||||||
state().socket.close();
|
({ video_url, subtitle_tracks, current_time_ms, is_playing } =
|
||||||
state().socket = null;
|
await response.json());
|
||||||
}
|
} catch (e) {
|
||||||
const socket = createWebSocket();
|
console.error(e);
|
||||||
state().socket = socket;
|
throw genericConnectionError;
|
||||||
socket.addEventListener("open", async () => {
|
}
|
||||||
player = await setupVideo(
|
|
||||||
video_url,
|
if (state().socket) {
|
||||||
subtitle_tracks,
|
state().socket.close();
|
||||||
current_time_ms,
|
state().socket = null;
|
||||||
is_playing,
|
}
|
||||||
created
|
const socket = createWebSocket();
|
||||||
);
|
state().socket = socket;
|
||||||
|
socket.addEventListener("open", async () => {
|
||||||
player.on("canplay", () => {
|
const video = await setupVideo(
|
||||||
sync();
|
video_url,
|
||||||
});
|
subtitle_tracks,
|
||||||
|
current_time_ms,
|
||||||
setupOutgoingEvents(player, socket);
|
is_playing
|
||||||
setupIncomingEvents(player, socket);
|
);
|
||||||
setupChat(socket);
|
|
||||||
});
|
let defaultAllowControls = false;
|
||||||
socket.addEventListener("reconnecting", (e) => {
|
try {
|
||||||
console.log("Reconnecting...");
|
defaultAllowControls = localStorage.getItem(
|
||||||
});
|
"watch-party-default-allow-controls"
|
||||||
socket.addEventListener("reconnected", (e) => {
|
);
|
||||||
console.log("Reconnected.");
|
} catch (_err) {}
|
||||||
});
|
|
||||||
//} catch (e) {
|
// By default, we should disable video controls if the video is already playing.
|
||||||
// alert(e.message)
|
// This solves an issue where Safari users join and seek to 00:00:00 because of
|
||||||
//}
|
// outgoing events.
|
||||||
};
|
if (current_time_ms != 0 || !defaultAllowControls) {
|
||||||
|
video.controls = false;
|
||||||
/**
|
}
|
||||||
* @param {string} videoUrl
|
|
||||||
* @param {Array} subtitleTracks
|
setupOutgoingEvents(video, socket);
|
||||||
*/
|
setupIncomingEvents(video, socket);
|
||||||
export const createSession = async (videoUrl, subtitleTracks) => {
|
setupChat(socket);
|
||||||
const { id } = await fetch("/start_session", {
|
});
|
||||||
method: "POST",
|
socket.addEventListener("reconnecting", (e) => {
|
||||||
headers: { "Content-Type": "application/json" },
|
console.log("Reconnecting...");
|
||||||
body: JSON.stringify({
|
});
|
||||||
video_url: videoUrl,
|
socket.addEventListener("reconnected", (e) => {
|
||||||
subtitle_tracks: subtitleTracks,
|
console.log("Reconnected.");
|
||||||
}),
|
});
|
||||||
}).then((r) => r.json());
|
//} catch (e) {
|
||||||
|
// alert(e.message)
|
||||||
window.location = `/?created=true#${id}`;
|
//}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const sync = async () => {
|
/**
|
||||||
setDebounce();
|
* @param {string} videoUrl
|
||||||
await setPlaying(false);
|
* @param {Array} subtitleTracks
|
||||||
const { current_time_ms, is_playing } = await fetch(
|
*/
|
||||||
`/sess/${state().sessionId}`
|
export const createSession = async (videoUrl, subtitleTracks) => {
|
||||||
).then((r) => r.json());
|
const { id } = await fetch("/start_session", {
|
||||||
|
method: "POST",
|
||||||
setDebounce();
|
headers: { "Content-Type": "application/json" },
|
||||||
setVideoTime(current_time_ms);
|
body: JSON.stringify({
|
||||||
if (is_playing) await setPlaying(is_playing);
|
video_url: videoUrl,
|
||||||
};
|
subtitle_tracks: subtitleTracks,
|
||||||
|
}),
|
||||||
|
}).then((r) => r.json());
|
||||||
|
|
||||||
|
window.location = `/?created=true#${id}`;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,19 @@
|
||||||
import { setupJoinSessionForm } from "./lib/join-session.mjs?v=4b61c4";
|
import { setupJoinSessionForm } from "./lib/join-session.mjs?v=bfdcf2";
|
||||||
|
import {
|
||||||
const main = () => {
|
toggleOptionPane,
|
||||||
setupJoinSessionForm();
|
togglePlayerControlsShown,
|
||||||
};
|
handlePlingVolume
|
||||||
|
} from "./lib/options-pane.mjs?v=bfdcf2";
|
||||||
if (document.readyState === "complete") {
|
|
||||||
main();
|
const main = () => {
|
||||||
} else {
|
setupJoinSessionForm();
|
||||||
document.addEventListener("DOMContentLoaded", main);
|
window.toggleOptionPane = toggleOptionPane;
|
||||||
}
|
window.togglePlayerControlsShown = togglePlayerControlsShown;
|
||||||
|
window.handlePlingVolume = handlePlingVolume
|
||||||
|
};
|
||||||
|
|
||||||
|
if (document.readyState === "complete") {
|
||||||
|
main();
|
||||||
|
} else {
|
||||||
|
document.addEventListener("DOMContentLoaded", main);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,435 +1,465 @@
|
||||||
*,
|
*,
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg-rgb: 28, 23, 36;
|
--bg-rgb: 28, 23, 36;
|
||||||
--fg-rgb: 234, 234, 248;
|
--fg-rgb: 234, 234, 248;
|
||||||
--accent-rgb: 181, 127, 220;
|
--accent-rgb: 181, 127, 220;
|
||||||
--fg: rgb(var(--fg-rgb));
|
--accent-darker: rgb(95, 37, 136); /*50% darker*/
|
||||||
--bg: rgb(var(--bg-rgb));
|
--accent-darkest: rgb(47, 19, 68); /*75% darker*/
|
||||||
--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)
|
||||||
--chip-bg: linear-gradient(
|
),
|
||||||
var(--accent-transparent),
|
linear-gradient(var(--bg), var(--bg));
|
||||||
var(--accent-transparent)
|
--chip-bg: linear-gradient(
|
||||||
),
|
var(--accent-transparent),
|
||||||
linear-gradient(var(--bg), var(--bg));
|
var(--accent-transparent)
|
||||||
--accent-transparent: rgba(var(--accent-rgb), 0.25);
|
),
|
||||||
--plyr-color-main: var(--accent);
|
linear-gradient(var(--bg), var(--bg));
|
||||||
--plyr-control-radius: 6px;
|
--accent-transparent: rgba(var(--accent-rgb), 0.25);
|
||||||
--plyr-menu-radius: 6px;
|
}
|
||||||
--plyr-menu-background: var(--autocomplete-bg);
|
|
||||||
--plyr-menu-color: var(--fg);
|
html {
|
||||||
--plyr-menu-arrow-color: var(--fg);
|
background-color: var(--bg);
|
||||||
--plyr-menu-back-border-color: var(--fg-transparent);
|
color: var(--fg);
|
||||||
--plyr-menu-back-border-shadow-color: transparent;
|
font-size: 1.125rem;
|
||||||
}
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
html {
|
|
||||||
background-color: var(--bg);
|
html,
|
||||||
color: var(--fg);
|
body {
|
||||||
font-size: 1.125rem;
|
margin: 0;
|
||||||
font-family: sans-serif;
|
padding: 0;
|
||||||
}
|
overflow: hidden;
|
||||||
|
overscroll-behavior: none;
|
||||||
html,
|
width: 100%;
|
||||||
body {
|
height: 100%;
|
||||||
margin: 0;
|
}
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
body {
|
||||||
overscroll-behavior: none;
|
display: flex;
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
height: 100%;
|
}
|
||||||
}
|
|
||||||
|
video {
|
||||||
body {
|
display: block;
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
height: 100%;
|
||||||
}
|
object-fit: contain;
|
||||||
|
}
|
||||||
.lock-controls.plyr__control--pressed svg {
|
|
||||||
opacity: 0.5;
|
#video-container {
|
||||||
}
|
flex-grow: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
.plyr {
|
display: none;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
|
||||||
}
|
a {
|
||||||
|
color: var(--accent);
|
||||||
.plyr__menu__container {
|
}
|
||||||
--plyr-video-control-background-hover: var(--fg-transparent);
|
|
||||||
--plyr-video-control-color-hover: var(--fg);
|
.chip {
|
||||||
--plyr-control-radius: 4px;
|
color: var(--fg);
|
||||||
--plyr-control-spacing: calc(0.25rem / 0.7);
|
background: var(--chip-bg);
|
||||||
--plyr-font-size-menu: 0.75rem;
|
text-decoration: none;
|
||||||
--plyr-menu-arrow-size: 0;
|
padding: 0 0.5rem 0 1.45rem;
|
||||||
margin-bottom: 0.48rem;
|
display: inline-flex;
|
||||||
max-height: 27vmin;
|
position: relative;
|
||||||
clip-path: inset(0 0 0 0 round 4px);
|
font-size: 0.9rem;
|
||||||
scrollbar-width: thin;
|
height: 1.125rem;
|
||||||
}
|
align-items: center;
|
||||||
|
border-radius: 2rem;
|
||||||
.plyr__menu__container .plyr__control[role="menuitemradio"]::after {
|
overflow: hidden;
|
||||||
left: 10px;
|
}
|
||||||
}
|
|
||||||
|
.chip::before {
|
||||||
.plyr__menu__container
|
content: "";
|
||||||
.plyr__control[role="menuitemradio"][aria-checked="true"].plyr__tab-focus::before,
|
position: absolute;
|
||||||
.plyr__menu__container
|
left: 0;
|
||||||
.plyr__control[role="menuitemradio"][aria-checked="true"]:hover::before {
|
top: 0;
|
||||||
background: var(--accent);
|
width: 1.125rem;
|
||||||
}
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
[data-plyr="language"] .plyr__menu__value {
|
align-items: center;
|
||||||
display: none;
|
justify-content: center;
|
||||||
}
|
text-align: center;
|
||||||
|
background: var(--accent-transparent);
|
||||||
#video-container {
|
background-repeat: no-repeat;
|
||||||
flex-grow: 0;
|
background-size: 18px;
|
||||||
flex-shrink: 1;
|
background-position: center;
|
||||||
display: none;
|
}
|
||||||
}
|
|
||||||
|
.join-chip::before {
|
||||||
a {
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPg==");
|
||||||
color: var(--accent);
|
}
|
||||||
}
|
|
||||||
|
.time-chip::before {
|
||||||
.chip {
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyczQuNDcgMTAgOS45OSAxMEMxNy41MiAyMiAyMiAxNy41MiAyMiAxMlMxNy41MiAyIDExLjk5IDJ6TTEyIDIwYy00LjQyIDAtOC0zLjU4LTgtOHMzLjU4LTggOC04IDggMy41OCA4IDgtMy41OCA4LTggOHoiLz48cGF0aCBkPSJNMTIuNSA3SDExdjZsNS4yNSAzLjE1Ljc1LTEuMjMtNC41LTIuNjd6Ii8+PC9zdmc+");
|
||||||
color: var(--fg);
|
}
|
||||||
background: var(--chip-bg);
|
|
||||||
text-decoration: none;
|
label {
|
||||||
padding: 0 0.5rem 0 1.45rem;
|
display: block;
|
||||||
display: inline-flex;
|
}
|
||||||
position: relative;
|
|
||||||
font-size: 0.9rem;
|
input[type="url"],
|
||||||
height: 1.125rem;
|
input[type="text"] {
|
||||||
align-items: center;
|
background: #fff;
|
||||||
border-radius: 2rem;
|
background-clip: padding-box;
|
||||||
overflow: hidden;
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
}
|
border-radius: 6px;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
.chip::before {
|
display: block;
|
||||||
content: "";
|
|
||||||
position: absolute;
|
margin: 0.5em 0;
|
||||||
left: 0;
|
padding: 0.5em 1em;
|
||||||
top: 0;
|
line-height: 1.5;
|
||||||
width: 1.125rem;
|
|
||||||
height: 100%;
|
font-family: sans-serif;
|
||||||
display: flex;
|
font-size: 1em;
|
||||||
align-items: center;
|
width: 100%;
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
resize: none;
|
||||||
background: var(--accent-transparent);
|
overflow-x: wrap;
|
||||||
background-repeat: no-repeat;
|
overflow-y: scroll;
|
||||||
background-size: 18px;
|
}
|
||||||
background-position: center;
|
|
||||||
}
|
button {
|
||||||
|
background-color: var(--accent);
|
||||||
.join-chip::before {
|
border: var(--accent);
|
||||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPg==");
|
border-radius: 6px;
|
||||||
}
|
color: #fff;
|
||||||
|
padding: 0.5em 1em;
|
||||||
.time-chip::before {
|
display: inline-block;
|
||||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyczQuNDcgMTAgOS45OSAxMEMxNy41MiAyMiAyMiAxNy41MiAyMiAxMlMxNy41MiAyIDExLjk5IDJ6TTEyIDIwYy00LjQyIDAtOC0zLjU4LTgtOHMzLjU4LTggOC04IDggMy41OCA4IDgtMy41OCA4LTggOHoiLz48cGF0aCBkPSJNMTIuNSA3SDExdjZsNS4yNSAzLjE1Ljc1LTEuMjMtNC41LTIuNjd6Ii8+PC9zdmc+");
|
font-weight: 400;
|
||||||
}
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
label {
|
vertical-align: middle;
|
||||||
display: block;
|
|
||||||
}
|
font-family: sans-serif;
|
||||||
|
font-size: 1em;
|
||||||
input[type="url"],
|
width: 100%;
|
||||||
input[type="text"] {
|
|
||||||
background: #fff;
|
user-select: none;
|
||||||
background-clip: padding-box;
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
line-height: 1.5;
|
||||||
border-radius: 6px;
|
cursor: pointer;
|
||||||
color: rgba(0, 0, 0, 0.8);
|
margin: 0.5em 0;
|
||||||
display: block;
|
}
|
||||||
|
|
||||||
margin: 0.5em 0;
|
button:disabled {
|
||||||
padding: 0.5em 1em;
|
filter: saturate(0.75);
|
||||||
line-height: 1.5;
|
opacity: 0.75;
|
||||||
|
cursor: default;
|
||||||
font-family: sans-serif;
|
}
|
||||||
font-size: 1em;
|
|
||||||
width: 100%;
|
button.small-button {
|
||||||
|
font-size: 0.75em;
|
||||||
resize: none;
|
padding-top: 0;
|
||||||
overflow-x: wrap;
|
padding-bottom: 0;
|
||||||
overflow-y: scroll;
|
}
|
||||||
}
|
|
||||||
|
.subtitle-track-group {
|
||||||
button:not(.plyr button) {
|
display: flex;
|
||||||
background-color: var(--accent);
|
}
|
||||||
border: var(--accent);
|
|
||||||
border-radius: 6px;
|
.subtitle-track-group > * {
|
||||||
color: #fff;
|
margin-top: 0 !important;
|
||||||
padding: 0.5em 1em;
|
margin-bottom: 0 !important;
|
||||||
display: inline-block;
|
margin-right: 1ch !important;
|
||||||
font-weight: 400;
|
}
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
#pre-join-controls,
|
||||||
vertical-align: middle;
|
#create-controls {
|
||||||
|
margin: 0;
|
||||||
font-family: sans-serif;
|
flex-grow: 1;
|
||||||
font-size: 1em;
|
overflow-y: auto;
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
user-select: none;
|
align-items: center;
|
||||||
border: 1px solid rgba(0, 0, 0, 0);
|
justify-content: center;
|
||||||
line-height: 1.5;
|
}
|
||||||
cursor: pointer;
|
|
||||||
margin: 0.5em 0;
|
#join-session-form,
|
||||||
}
|
#create-session-form {
|
||||||
|
width: 500px;
|
||||||
button:disabled {
|
max-width: 100%;
|
||||||
filter: saturate(0.75);
|
padding: 1rem;
|
||||||
opacity: 0.75;
|
}
|
||||||
cursor: default;
|
|
||||||
}
|
#join-session-form > *:first-child,
|
||||||
|
#create-session-form > *:first-child {
|
||||||
button.small-button {
|
margin-top: 0;
|
||||||
font-size: 0.75em;
|
}
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
#post-create-message {
|
||||||
}
|
display: none;
|
||||||
|
width: 100%;
|
||||||
.subtitle-track-group {
|
font-size: 0.85em;
|
||||||
display: flex;
|
}
|
||||||
}
|
|
||||||
|
#chatbox-container {
|
||||||
.subtitle-track-group > * {
|
display: none;
|
||||||
margin-top: 0 !important;
|
}
|
||||||
margin-bottom: 0 !important;
|
|
||||||
margin-right: 1ch !important;
|
.chat-message {
|
||||||
}
|
overflow-wrap: break-word;
|
||||||
|
margin-bottom: 0.125rem;
|
||||||
#pre-join-controls,
|
}
|
||||||
#create-controls {
|
|
||||||
margin: 0;
|
.chat-message > strong,
|
||||||
flex-grow: 1;
|
#viewer-list strong {
|
||||||
overflow-y: auto;
|
color: var(--user-color, var(--default-user-color));
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
.chat-message.user-join,
|
||||||
justify-content: center;
|
.chat-message.user-leave,
|
||||||
}
|
.chat-message.ping {
|
||||||
|
font-style: italic;
|
||||||
#join-session-form,
|
}
|
||||||
#create-session-form {
|
|
||||||
width: 500px;
|
.chat-message.set-time,
|
||||||
max-width: 100%;
|
.chat-message.set-playing,
|
||||||
padding: 1rem;
|
.chat-message.join-session {
|
||||||
}
|
font-style: italic;
|
||||||
|
text-align: right;
|
||||||
#join-session-form > *:first-child,
|
font-size: 0.85em;
|
||||||
#create-session-form > *:first-child {
|
}
|
||||||
margin-top: 0;
|
|
||||||
}
|
.chat-message.command-message {
|
||||||
|
font-size: 0.85em;
|
||||||
#post-create-message {
|
}
|
||||||
display: none;
|
|
||||||
width: 100%;
|
.chat-message.set-time > strong,
|
||||||
font-size: 0.85em;
|
.chat-message.set-playing > strong,
|
||||||
}
|
.chat-message.join-session > 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 {
|
position: relative;
|
||||||
width: 2ch;
|
}
|
||||||
height: 2ch;
|
|
||||||
object-fit: contain;
|
#chatbox-send > input {
|
||||||
margin-bottom: -0.35ch;
|
font-size: 0.75em;
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
#chatbox {
|
|
||||||
padding: 0.5em 1em;
|
#emoji-autocomplete {
|
||||||
overflow-y: scroll;
|
position: absolute;
|
||||||
flex-shrink: 1;
|
bottom: 3.25rem;
|
||||||
flex-grow: 1;
|
background-image: var(--autocomplete-bg);
|
||||||
}
|
border-radius: 6px;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
#viewer-list {
|
max-height: 8.5rem;
|
||||||
padding: 0.5em 1em;
|
overflow-y: auto;
|
||||||
/* TODO: turn this into max-height instead of fixed height without breaking the chatbox height */
|
clip-path: inset(0 0 0 0 round 8px);
|
||||||
overflow-y: scroll;
|
}
|
||||||
border-bottom: var(--fg-transparent);
|
|
||||||
border-bottom-style: solid;
|
#emoji-autocomplete:empty {
|
||||||
max-height: 4rem;
|
display: none;
|
||||||
flex-shrink: 0;
|
}
|
||||||
}
|
|
||||||
|
.emoji-option {
|
||||||
#chatbox-container {
|
background: transparent;
|
||||||
background-color: var(--bg);
|
font-size: 0.75rem;
|
||||||
flex-direction: column;
|
text-align: left;
|
||||||
flex-grow: 1;
|
margin: 0 0.25rem;
|
||||||
flex-shrink: 1;
|
border-radius: 4px;
|
||||||
flex-basis: 36ch;
|
width: calc(100% - 0.5rem);
|
||||||
min-width: 36ch;
|
display: flex;
|
||||||
overflow: hidden;
|
align-items: center;
|
||||||
}
|
padding: 0.25rem 0.5rem;
|
||||||
|
scroll-margin: 0.25rem;
|
||||||
#chatbox-send {
|
}
|
||||||
padding: 0 1em;
|
|
||||||
padding-bottom: 0.5em;
|
.emoji-option:first-child {
|
||||||
position: relative;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatbox-send > input {
|
.emoji-option:last-child {
|
||||||
font-size: 0.75em;
|
margin-bottom: 0.25rem;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
.emoji-option .emoji {
|
||||||
#emoji-autocomplete {
|
width: 1.25rem;
|
||||||
position: absolute;
|
height: 1.25rem;
|
||||||
bottom: 3.25rem;
|
margin: 0 0.5rem 0 0;
|
||||||
background-image: var(--autocomplete-bg);
|
font-size: 2.25ch;
|
||||||
border-radius: 6px;
|
display: flex;
|
||||||
width: calc(100% - 2rem);
|
align-items: center;
|
||||||
max-height: 8.5rem;
|
justify-content: center;
|
||||||
overflow-y: auto;
|
overflow: hidden;
|
||||||
clip-path: inset(0 0 0 0 round 8px);
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#emoji-autocomplete:empty {
|
.emoji-name {
|
||||||
display: none;
|
overflow: hidden;
|
||||||
}
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
.emoji-option:not(:root) {
|
|
||||||
background: transparent;
|
.emoji-option.selected {
|
||||||
font-size: 0.75rem;
|
background: var(--fg-transparent);
|
||||||
text-align: left;
|
}
|
||||||
margin: 0 0.25rem;
|
|
||||||
border-radius: 4px;
|
#join-session-colour {
|
||||||
width: calc(100% - 0.5rem);
|
-moz-appearance: none;
|
||||||
display: flex;
|
-webkit-appearance: none;
|
||||||
align-items: center;
|
appearance: none;
|
||||||
padding: 0.25rem 0.5rem;
|
border: none;
|
||||||
scroll-margin: 0.25rem;
|
padding: 0;
|
||||||
}
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
.emoji-option:first-child {
|
margin: 0.5em 0;
|
||||||
margin-top: 0.25rem;
|
height: 2rem;
|
||||||
}
|
width: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
.emoji-option:last-child {
|
}
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
#options-toggle {
|
||||||
|
padding: 0 1em 1em;
|
||||||
.emoji-option .emoji {
|
position: relative;
|
||||||
width: 1.25rem;
|
text-align: right;
|
||||||
height: 1.25rem;
|
margin-top: auto;
|
||||||
margin: 0 0.5rem 0 0;
|
}
|
||||||
font-size: 2.25ch;
|
|
||||||
display: flex;
|
#options-toggle #options-icon {
|
||||||
align-items: center;
|
padding: 3px 10px;
|
||||||
justify-content: center;
|
font-size: 1em;
|
||||||
overflow: hidden;
|
max-width: 3em;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
color: transparent;
|
||||||
|
text-shadow: 0 0 0 white;
|
||||||
.emoji-name {
|
border: none;
|
||||||
overflow: hidden;
|
box-shadow:0px 0px 0px 2px var(--accent-darkest) inset;
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
transform-style: preserve-3d;
|
||||||
|
transition: cubic-bezier(0, 0, 0.58, 1), cubic-bezier(0, 0, 0.58, 1);
|
||||||
.emoji-option.selected {
|
transition-duration: 150ms;
|
||||||
background: var(--fg-transparent);
|
}
|
||||||
}
|
|
||||||
|
#options-toggle #options-icon::before {
|
||||||
#join-session-colour {
|
content: "";
|
||||||
-moz-appearance: none;
|
|
||||||
-webkit-appearance: none;
|
position: absolute;
|
||||||
appearance: none;
|
|
||||||
border: none;
|
width: 100%;
|
||||||
padding: 0;
|
height: 100%;
|
||||||
border-radius: 6px;
|
top: 0;
|
||||||
overflow: hidden;
|
left: 0;
|
||||||
margin: 0.5em 0;
|
right: 0;
|
||||||
height: 2rem;
|
bottom: 0;
|
||||||
width: 2.5rem;
|
|
||||||
cursor: pointer;
|
background-color: var(--accent-darker);
|
||||||
}
|
border-radius: inherit;
|
||||||
|
border: none;
|
||||||
input[type="color"]::-moz-color-swatch {
|
box-shadow:0px 0px 0px 2px var(--accent-darkest) inset;
|
||||||
border: none;
|
|
||||||
margin: 0;
|
transform: translate3d(0, 0.5em, -1em);
|
||||||
padding: 0;
|
transition: cubic-bezier(0, 0, 0.58, 1), cubic-bezier(0, 0, 0.58, 1);
|
||||||
}
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
input[type="color"]::-webkit-color-swatch {
|
|
||||||
border: none;
|
#options-toggle #options-icon:hover {
|
||||||
margin: 0;
|
transform: translate(0, 0.15em);
|
||||||
padding: 0;
|
background-color: rgb(173, 113, 216); /*5% darker accent*/
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
#options-toggle #options-icon:hover::before {
|
||||||
border: none;
|
transform: translate3d(0, 0.35em, -1em);
|
||||||
margin: 0;
|
}
|
||||||
padding: 0;
|
|
||||||
}
|
#options-toggle #options-icon:active {
|
||||||
|
transform: translate(0em, 0.5em);
|
||||||
@media (min-aspect-ratio: 4/3) {
|
background-color: rgb(165, 100, 213); /*10% darker accent*/
|
||||||
body {
|
}
|
||||||
flex-direction: row;
|
|
||||||
}
|
#options-toggle #options-icon:active::before {
|
||||||
|
transform: translate3d(0, 0, -1em);
|
||||||
#chatbox-container {
|
}
|
||||||
height: 100vh !important;
|
|
||||||
flex-grow: 0;
|
#options {
|
||||||
}
|
display: none; /* default for sections is block */
|
||||||
|
padding: 01em;
|
||||||
#video-container {
|
}
|
||||||
flex-grow: 1;
|
|
||||||
}
|
input[type="color"]::-moz-color-swatch {
|
||||||
|
border: none;
|
||||||
#chatbox {
|
margin: 0;
|
||||||
height: calc(100vh - 5em - 4em) !important;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
104
src/events.rs
104
src/events.rs
|
|
@ -1,52 +1,52 @@
|
||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
|
|
||||||
#[derive(Clone, Serialize, Deserialize)]
|
#[derive(Clone, Serialize, Deserialize)]
|
||||||
pub struct Viewer {
|
pub struct Viewer {
|
||||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
pub nickname: Option<String>,
|
pub nickname: Option<String>,
|
||||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
pub colour: Option<String>,
|
pub colour: Option<String>,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Clone, Serialize, Deserialize)]
|
#[derive(Clone, Serialize, Deserialize)]
|
||||||
#[serde(tag = "op", content = "data")]
|
#[serde(tag = "op", content = "data")]
|
||||||
pub enum WatchEventData {
|
pub enum WatchEventData {
|
||||||
SetPlaying {
|
SetPlaying {
|
||||||
playing: bool,
|
playing: bool,
|
||||||
time: u64,
|
time: u64,
|
||||||
},
|
},
|
||||||
SetTime {
|
SetTime {
|
||||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
from: Option<u64>,
|
from: Option<u64>,
|
||||||
to: u64,
|
to: u64,
|
||||||
},
|
},
|
||||||
|
|
||||||
UserJoin,
|
UserJoin,
|
||||||
UserLeave,
|
UserLeave,
|
||||||
ChatMessage(String),
|
ChatMessage(String),
|
||||||
Ping(String),
|
Ping(String),
|
||||||
UpdateViewerList(Vec<Viewer>),
|
UpdateViewerList(Vec<Viewer>),
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Clone, Serialize, Deserialize)]
|
#[derive(Clone, Serialize, Deserialize)]
|
||||||
pub struct WatchEvent {
|
pub struct WatchEvent {
|
||||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
pub user: Option<String>,
|
pub user: Option<String>,
|
||||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||||
pub colour: Option<String>,
|
pub colour: Option<String>,
|
||||||
#[serde(flatten)]
|
#[serde(flatten)]
|
||||||
pub data: WatchEventData,
|
pub data: WatchEventData,
|
||||||
#[serde(default)]
|
#[serde(default)]
|
||||||
pub reflected: bool,
|
pub reflected: bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl WatchEvent {
|
impl WatchEvent {
|
||||||
pub fn new(user: String, colour: String, data: WatchEventData) -> Self {
|
pub fn new(user: String, colour: String, data: WatchEventData) -> Self {
|
||||||
WatchEvent {
|
WatchEvent {
|
||||||
user: Some(user),
|
user: Some(user),
|
||||||
colour: Some(colour),
|
colour: Some(colour),
|
||||||
data,
|
data,
|
||||||
reflected: false,
|
reflected: false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
264
src/main.rs
264
src/main.rs
|
|
@ -1,132 +1,132 @@
|
||||||
use serde_json::json;
|
use serde_json::json;
|
||||||
use std::net::IpAddr;
|
use std::net::IpAddr;
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
|
|
||||||
use warb::{hyper::StatusCode, Filter, Reply};
|
use warb::{hyper::StatusCode, Filter, Reply};
|
||||||
use warp as warb; // i think it's funny
|
use warp as warb; // i think it's funny
|
||||||
|
|
||||||
mod events;
|
mod events;
|
||||||
mod utils;
|
mod utils;
|
||||||
mod viewer_connection;
|
mod viewer_connection;
|
||||||
mod watch_session;
|
mod watch_session;
|
||||||
|
|
||||||
use serde::Deserialize;
|
use serde::Deserialize;
|
||||||
|
|
||||||
use crate::{
|
use crate::{
|
||||||
viewer_connection::ws_subscribe,
|
viewer_connection::ws_subscribe,
|
||||||
watch_session::{get_session, SubtitleTrack, WatchSession, SESSIONS},
|
watch_session::{get_session, SubtitleTrack, WatchSession, SESSIONS},
|
||||||
};
|
};
|
||||||
|
|
||||||
#[derive(Deserialize)]
|
#[derive(Deserialize)]
|
||||||
struct StartSessionBody {
|
struct StartSessionBody {
|
||||||
video_url: String,
|
video_url: String,
|
||||||
#[serde(default = "Vec::new")]
|
#[serde(default = "Vec::new")]
|
||||||
subtitle_tracks: Vec<SubtitleTrack>,
|
subtitle_tracks: Vec<SubtitleTrack>,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Deserialize)]
|
#[derive(Deserialize)]
|
||||||
struct SubscribeQuery {
|
struct SubscribeQuery {
|
||||||
nickname: String,
|
nickname: String,
|
||||||
colour: String,
|
colour: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn get_emoji_list() -> Result<impl warb::Reply, warb::Rejection> {
|
async fn get_emoji_list() -> Result<impl warb::Reply, warb::Rejection> {
|
||||||
use tokio_stream::{wrappers::ReadDirStream, StreamExt};
|
use tokio_stream::{wrappers::ReadDirStream, StreamExt};
|
||||||
|
|
||||||
let dir = tokio::fs::read_dir("frontend/emojis")
|
let dir = tokio::fs::read_dir("frontend/emojis")
|
||||||
.await
|
.await
|
||||||
.expect("Couldn't read emojis directory!");
|
.expect("Couldn't read emojis directory!");
|
||||||
|
|
||||||
let files = ReadDirStream::new(dir)
|
let files = ReadDirStream::new(dir)
|
||||||
.filter_map(|r| r.ok())
|
.filter_map(|r| r.ok())
|
||||||
.map(|e| e.file_name().to_string_lossy().to_string())
|
.map(|e| e.file_name().to_string_lossy().to_string())
|
||||||
.collect::<Vec<_>>()
|
.collect::<Vec<_>>()
|
||||||
.await;
|
.await;
|
||||||
|
|
||||||
Ok(warb::reply::json(&files))
|
Ok(warb::reply::json(&files))
|
||||||
}
|
}
|
||||||
|
|
||||||
#[tokio::main]
|
#[tokio::main]
|
||||||
async fn main() {
|
async fn main() {
|
||||||
let start_session_route = warb::path!("start_session")
|
let start_session_route = warb::path!("start_session")
|
||||||
.and(warb::path::end())
|
.and(warb::path::end())
|
||||||
.and(warb::post())
|
.and(warb::post())
|
||||||
.and(warb::body::json())
|
.and(warb::body::json())
|
||||||
.map(|body: StartSessionBody| {
|
.map(|body: StartSessionBody| {
|
||||||
let mut sessions = SESSIONS.lock().unwrap();
|
let mut sessions = SESSIONS.lock().unwrap();
|
||||||
let session_uuid = Uuid::new_v4();
|
let session_uuid = Uuid::new_v4();
|
||||||
let session = WatchSession::new(body.video_url, body.subtitle_tracks);
|
let session = WatchSession::new(body.video_url, body.subtitle_tracks);
|
||||||
let session_view = session.view();
|
let session_view = session.view();
|
||||||
sessions.insert(session_uuid, session);
|
sessions.insert(session_uuid, session);
|
||||||
|
|
||||||
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!("emojos").and_then(get_emoji_list);
|
||||||
|
|
||||||
enum RequestedSession {
|
enum RequestedSession {
|
||||||
Session(Uuid, WatchSession),
|
Session(Uuid, WatchSession),
|
||||||
Error(warb::reply::WithStatus<warb::reply::Json>),
|
Error(warb::reply::WithStatus<warb::reply::Json>),
|
||||||
}
|
}
|
||||||
|
|
||||||
let get_running_session = warb::path::path("sess")
|
let get_running_session = warb::path::path("sess")
|
||||||
.and(warb::path::param::<String>())
|
.and(warb::path::param::<String>())
|
||||||
.map(|session_id: String| {
|
.map(|session_id: String| {
|
||||||
if let Ok(uuid) = Uuid::parse_str(&session_id) {
|
if let Ok(uuid) = Uuid::parse_str(&session_id) {
|
||||||
get_session(uuid)
|
get_session(uuid)
|
||||||
.map(|sess| RequestedSession::Session(uuid, sess))
|
.map(|sess| RequestedSession::Session(uuid, sess))
|
||||||
.unwrap_or_else(|| {
|
.unwrap_or_else(|| {
|
||||||
RequestedSession::Error(warb::reply::with_status(
|
RequestedSession::Error(warb::reply::with_status(
|
||||||
warb::reply::json(&json!({ "error": "session does not exist" })),
|
warb::reply::json(&json!({ "error": "session does not exist" })),
|
||||||
StatusCode::NOT_FOUND,
|
StatusCode::NOT_FOUND,
|
||||||
))
|
))
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
RequestedSession::Error(warb::reply::with_status(
|
RequestedSession::Error(warb::reply::with_status(
|
||||||
warb::reply::json(&json!({ "error": "invalid session UUID" })),
|
warb::reply::json(&json!({ "error": "invalid session UUID" })),
|
||||||
StatusCode::BAD_REQUEST,
|
StatusCode::BAD_REQUEST,
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let get_status_route = get_running_session
|
let get_status_route = get_running_session
|
||||||
.and(warb::path::end())
|
.and(warb::path::end())
|
||||||
.map(|requested_session| match requested_session {
|
.map(|requested_session| match requested_session {
|
||||||
RequestedSession::Session(_, sess) => {
|
RequestedSession::Session(_, sess) => {
|
||||||
warb::reply::with_status(warb::reply::json(&sess.view()), StatusCode::OK)
|
warb::reply::with_status(warb::reply::json(&sess.view()), StatusCode::OK)
|
||||||
}
|
}
|
||||||
RequestedSession::Error(e) => e,
|
RequestedSession::Error(e) => e,
|
||||||
});
|
});
|
||||||
|
|
||||||
let ws_subscribe_route = get_running_session
|
let ws_subscribe_route = get_running_session
|
||||||
.and(warb::path!("subscribe"))
|
.and(warb::path!("subscribe"))
|
||||||
.and(warb::query())
|
.and(warb::query())
|
||||||
.and(warb::ws())
|
.and(warb::ws())
|
||||||
.map(
|
.map(
|
||||||
|requested_session, query: SubscribeQuery, ws: warb::ws::Ws| match requested_session {
|
|requested_session, query: SubscribeQuery, ws: warb::ws::Ws| match requested_session {
|
||||||
RequestedSession::Session(uuid, _) => ws
|
RequestedSession::Session(uuid, _) => ws
|
||||||
.on_upgrade(move |ws| ws_subscribe(uuid, query.nickname, query.colour, ws))
|
.on_upgrade(move |ws| ws_subscribe(uuid, query.nickname, query.colour, ws))
|
||||||
.into_response(),
|
.into_response(),
|
||||||
RequestedSession::Error(error_response) => error_response.into_response(),
|
RequestedSession::Error(error_response) => error_response.into_response(),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
let routes = start_session_route
|
let routes = start_session_route
|
||||||
.or(get_status_route)
|
.or(get_status_route)
|
||||||
.or(ws_subscribe_route)
|
.or(ws_subscribe_route)
|
||||||
.or(get_emoji_route)
|
.or(get_emoji_route)
|
||||||
.or(warb::path::end().and(warb::fs::file("frontend/index.html")))
|
.or(warb::path::end().and(warb::fs::file("frontend/index.html")))
|
||||||
.or(warb::fs::dir("frontend"));
|
.or(warb::fs::dir("frontend"));
|
||||||
|
|
||||||
let ip = std::env::var("IP")
|
let ip = std::env::var("IP")
|
||||||
.ok()
|
.ok()
|
||||||
.and_then(|s| s.parse::<IpAddr>().ok())
|
.and_then(|s| s.parse::<IpAddr>().ok())
|
||||||
.unwrap_or_else(|| [127, 0, 0, 1].into());
|
.unwrap_or_else(|| [127, 0, 0, 1].into());
|
||||||
let port = std::env::var("PORT")
|
let port = std::env::var("PORT")
|
||||||
.ok()
|
.ok()
|
||||||
.and_then(|s| s.parse::<u16>().ok())
|
.and_then(|s| s.parse::<u16>().ok())
|
||||||
.unwrap_or(3000);
|
.unwrap_or(3000);
|
||||||
|
|
||||||
println!("Listening at http://{}:{} ...", &ip, &port);
|
println!("Listening at http://{}:{} ...", &ip, &port);
|
||||||
warb::serve(routes).run((ip, port)).await;
|
warb::serve(routes).run((ip, port)).await;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,156 +1,156 @@
|
||||||
use once_cell::sync::Lazy;
|
use once_cell::sync::Lazy;
|
||||||
use std::{
|
use std::{
|
||||||
collections::HashMap,
|
collections::HashMap,
|
||||||
sync::atomic::{AtomicUsize, Ordering},
|
sync::atomic::{AtomicUsize, Ordering},
|
||||||
};
|
};
|
||||||
|
|
||||||
use futures::{SinkExt, StreamExt, TryFutureExt};
|
use futures::{SinkExt, StreamExt, TryFutureExt};
|
||||||
use tokio::sync::{
|
use tokio::sync::{
|
||||||
mpsc::{self, UnboundedSender},
|
mpsc::{self, UnboundedSender},
|
||||||
RwLock,
|
RwLock,
|
||||||
};
|
};
|
||||||
use tokio_stream::wrappers::UnboundedReceiverStream;
|
use tokio_stream::wrappers::UnboundedReceiverStream;
|
||||||
|
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
use warp::ws::{Message, WebSocket};
|
use warp::ws::{Message, WebSocket};
|
||||||
|
|
||||||
use crate::{
|
use crate::{
|
||||||
events::{Viewer, WatchEvent, WatchEventData},
|
events::{Viewer, WatchEvent, WatchEventData},
|
||||||
utils::truncate_str,
|
utils::truncate_str,
|
||||||
watch_session::{get_session, handle_watch_event_data},
|
watch_session::{get_session, handle_watch_event_data},
|
||||||
};
|
};
|
||||||
|
|
||||||
static CONNECTED_VIEWERS: Lazy<RwLock<HashMap<usize, ConnectedViewer>>> =
|
static CONNECTED_VIEWERS: Lazy<RwLock<HashMap<usize, ConnectedViewer>>> =
|
||||||
Lazy::new(|| RwLock::new(HashMap::new()));
|
Lazy::new(|| RwLock::new(HashMap::new()));
|
||||||
static NEXT_VIEWER_ID: AtomicUsize = AtomicUsize::new(1);
|
static NEXT_VIEWER_ID: AtomicUsize = AtomicUsize::new(1);
|
||||||
|
|
||||||
pub struct ConnectedViewer {
|
pub struct ConnectedViewer {
|
||||||
pub session: Uuid,
|
pub session: Uuid,
|
||||||
pub viewer_id: usize,
|
pub viewer_id: usize,
|
||||||
pub tx: UnboundedSender<WatchEvent>,
|
pub tx: UnboundedSender<WatchEvent>,
|
||||||
pub nickname: Option<String>,
|
pub nickname: Option<String>,
|
||||||
pub colour: Option<String>,
|
pub colour: Option<String>,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub async fn ws_subscribe(session_uuid: Uuid, nickname: String, colour: String, ws: WebSocket) {
|
pub async fn ws_subscribe(session_uuid: Uuid, nickname: String, colour: String, ws: WebSocket) {
|
||||||
let viewer_id = NEXT_VIEWER_ID.fetch_add(1, Ordering::Relaxed);
|
let viewer_id = NEXT_VIEWER_ID.fetch_add(1, Ordering::Relaxed);
|
||||||
let (mut viewer_ws_tx, mut viewer_ws_rx) = ws.split();
|
let (mut viewer_ws_tx, mut viewer_ws_rx) = ws.split();
|
||||||
|
|
||||||
let (tx, rx) = mpsc::unbounded_channel::<WatchEvent>();
|
let (tx, rx) = mpsc::unbounded_channel::<WatchEvent>();
|
||||||
let mut rx = UnboundedReceiverStream::new(rx);
|
let mut rx = UnboundedReceiverStream::new(rx);
|
||||||
|
|
||||||
tokio::task::spawn(async move {
|
tokio::task::spawn(async move {
|
||||||
while let Some(event) = rx.next().await {
|
while let Some(event) = rx.next().await {
|
||||||
viewer_ws_tx
|
viewer_ws_tx
|
||||||
.send(Message::text(
|
.send(Message::text(
|
||||||
serde_json::to_string(&event).expect("couldn't convert WatchEvent into JSON"),
|
serde_json::to_string(&event).expect("couldn't convert WatchEvent into JSON"),
|
||||||
))
|
))
|
||||||
.unwrap_or_else(|e| eprintln!("ws send error: {}", e))
|
.unwrap_or_else(|e| eprintln!("ws send error: {}", e))
|
||||||
.await;
|
.await;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let mut colour = colour;
|
let mut colour = colour;
|
||||||
if colour.len() != 6 || !colour.chars().all(|x| x.is_ascii_hexdigit()) {
|
if colour.len() != 6 || !colour.chars().all(|x| x.is_ascii_hexdigit()) {
|
||||||
colour = String::from("7ed0ff");
|
colour = String::from("7ed0ff");
|
||||||
}
|
}
|
||||||
let nickname = truncate_str(&nickname, 50).to_string();
|
let nickname = truncate_str(&nickname, 50).to_string();
|
||||||
|
|
||||||
CONNECTED_VIEWERS.write().await.insert(
|
CONNECTED_VIEWERS.write().await.insert(
|
||||||
viewer_id,
|
viewer_id,
|
||||||
ConnectedViewer {
|
ConnectedViewer {
|
||||||
viewer_id,
|
viewer_id,
|
||||||
session: session_uuid,
|
session: session_uuid,
|
||||||
tx,
|
tx,
|
||||||
nickname: Some(nickname.clone()),
|
nickname: Some(nickname.clone()),
|
||||||
colour: Some(colour.clone()),
|
colour: Some(colour.clone()),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
ws_publish(
|
ws_publish(
|
||||||
session_uuid,
|
session_uuid,
|
||||||
None,
|
None,
|
||||||
WatchEvent::new(nickname.clone(), colour.clone(), WatchEventData::UserJoin),
|
WatchEvent::new(nickname.clone(), colour.clone(), WatchEventData::UserJoin),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
|
|
||||||
update_viewer_list(session_uuid).await;
|
update_viewer_list(session_uuid).await;
|
||||||
|
|
||||||
while let Some(Ok(message)) = viewer_ws_rx.next().await {
|
while let Some(Ok(message)) = viewer_ws_rx.next().await {
|
||||||
let event: WatchEventData = match message
|
let event: WatchEventData = match message
|
||||||
.to_str()
|
.to_str()
|
||||||
.ok()
|
.ok()
|
||||||
.and_then(|s| serde_json::from_str(s).ok())
|
.and_then(|s| serde_json::from_str(s).ok())
|
||||||
{
|
{
|
||||||
Some(e) => e,
|
Some(e) => e,
|
||||||
None => continue,
|
None => continue,
|
||||||
};
|
};
|
||||||
|
|
||||||
let session = &mut get_session(session_uuid).unwrap();
|
let session = &mut get_session(session_uuid).unwrap();
|
||||||
|
|
||||||
// server side event modification where neccessary
|
// server side event modification where neccessary
|
||||||
let event: WatchEventData = match event {
|
let event: WatchEventData = match event {
|
||||||
WatchEventData::SetTime { from: _, to } => WatchEventData::SetTime {
|
WatchEventData::SetTime { from: _, to } => WatchEventData::SetTime {
|
||||||
from: Some(session.get_time_ms()),
|
from: Some(session.get_time_ms()),
|
||||||
to,
|
to,
|
||||||
},
|
},
|
||||||
_ => event,
|
_ => event,
|
||||||
};
|
};
|
||||||
|
|
||||||
handle_watch_event_data(session_uuid, session, event.clone());
|
handle_watch_event_data(session_uuid, session, event.clone());
|
||||||
|
|
||||||
ws_publish(
|
ws_publish(
|
||||||
session_uuid,
|
session_uuid,
|
||||||
Some(viewer_id),
|
Some(viewer_id),
|
||||||
WatchEvent::new(nickname.clone(), colour.clone(), event),
|
WatchEvent::new(nickname.clone(), colour.clone(), event),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
}
|
}
|
||||||
|
|
||||||
ws_publish(
|
ws_publish(
|
||||||
session_uuid,
|
session_uuid,
|
||||||
None,
|
None,
|
||||||
WatchEvent::new(nickname.clone(), colour.clone(), WatchEventData::UserLeave),
|
WatchEvent::new(nickname.clone(), colour.clone(), WatchEventData::UserLeave),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
|
|
||||||
CONNECTED_VIEWERS.write().await.remove(&viewer_id);
|
CONNECTED_VIEWERS.write().await.remove(&viewer_id);
|
||||||
update_viewer_list(session_uuid).await;
|
update_viewer_list(session_uuid).await;
|
||||||
}
|
}
|
||||||
|
|
||||||
pub async fn ws_publish(session_uuid: Uuid, skip_viewer_id: Option<usize>, event: WatchEvent) {
|
pub async fn ws_publish(session_uuid: Uuid, skip_viewer_id: Option<usize>, event: WatchEvent) {
|
||||||
for viewer in CONNECTED_VIEWERS.read().await.values() {
|
for viewer in CONNECTED_VIEWERS.read().await.values() {
|
||||||
if viewer.session != session_uuid {
|
if viewer.session != session_uuid {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
let _ = viewer.tx.send(WatchEvent {
|
let _ = viewer.tx.send(WatchEvent {
|
||||||
reflected: skip_viewer_id == Some(viewer.viewer_id),
|
reflected: skip_viewer_id == Some(viewer.viewer_id),
|
||||||
..event.clone()
|
..event.clone()
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn update_viewer_list(session_uuid: Uuid) {
|
async fn update_viewer_list(session_uuid: Uuid) {
|
||||||
let mut viewers = Vec::new();
|
let mut viewers = Vec::new();
|
||||||
|
|
||||||
for viewer in CONNECTED_VIEWERS.read().await.values() {
|
for viewer in CONNECTED_VIEWERS.read().await.values() {
|
||||||
if viewer.session == session_uuid {
|
if viewer.session == session_uuid {
|
||||||
viewers.push(Viewer {
|
viewers.push(Viewer {
|
||||||
nickname: viewer.nickname.clone(),
|
nickname: viewer.nickname.clone(),
|
||||||
colour: viewer.colour.clone(),
|
colour: viewer.colour.clone(),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ws_publish(
|
ws_publish(
|
||||||
session_uuid,
|
session_uuid,
|
||||||
None,
|
None,
|
||||||
WatchEvent::new(
|
WatchEvent::new(
|
||||||
String::from("server"),
|
String::from("server"),
|
||||||
String::from(""),
|
String::from(""),
|
||||||
WatchEventData::UpdateViewerList(viewers),
|
WatchEventData::UpdateViewerList(viewers),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.await;
|
.await;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,96 @@
|
||||||
use once_cell::sync::Lazy;
|
use once_cell::sync::Lazy;
|
||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
use std::{collections::HashMap, sync::Mutex, time::Instant};
|
use std::{collections::HashMap, sync::Mutex, time::Instant};
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
|
|
||||||
use crate::events::WatchEventData;
|
use crate::events::WatchEventData;
|
||||||
|
|
||||||
#[derive(Serialize, Deserialize, Clone)]
|
#[derive(Serialize, Deserialize, Clone)]
|
||||||
pub struct SubtitleTrack {
|
pub struct SubtitleTrack {
|
||||||
pub url: String,
|
pub url: String,
|
||||||
pub name: String,
|
pub name: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Clone)]
|
#[derive(Clone)]
|
||||||
pub struct WatchSession {
|
pub struct WatchSession {
|
||||||
pub video_url: String,
|
pub video_url: String,
|
||||||
pub subtitle_tracks: Vec<SubtitleTrack>,
|
pub subtitle_tracks: Vec<SubtitleTrack>,
|
||||||
|
|
||||||
is_playing: bool,
|
is_playing: bool,
|
||||||
playing_from_timestamp: u64,
|
playing_from_timestamp: u64,
|
||||||
playing_from_instant: Instant,
|
playing_from_instant: Instant,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Serialize)]
|
#[derive(Serialize)]
|
||||||
pub struct WatchSessionView {
|
pub struct WatchSessionView {
|
||||||
pub video_url: String,
|
pub video_url: String,
|
||||||
pub subtitle_tracks: Vec<SubtitleTrack>,
|
pub subtitle_tracks: Vec<SubtitleTrack>,
|
||||||
pub current_time_ms: u64,
|
pub current_time_ms: u64,
|
||||||
pub is_playing: bool,
|
pub is_playing: bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl WatchSession {
|
impl WatchSession {
|
||||||
pub fn new(video_url: String, subtitle_tracks: Vec<SubtitleTrack>) -> Self {
|
pub fn new(video_url: String, subtitle_tracks: Vec<SubtitleTrack>) -> Self {
|
||||||
WatchSession {
|
WatchSession {
|
||||||
video_url,
|
video_url,
|
||||||
subtitle_tracks,
|
subtitle_tracks,
|
||||||
is_playing: false,
|
is_playing: false,
|
||||||
playing_from_timestamp: 0,
|
playing_from_timestamp: 0,
|
||||||
playing_from_instant: Instant::now(),
|
playing_from_instant: Instant::now(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn view(&self) -> WatchSessionView {
|
pub fn view(&self) -> WatchSessionView {
|
||||||
WatchSessionView {
|
WatchSessionView {
|
||||||
video_url: self.video_url.clone(),
|
video_url: self.video_url.clone(),
|
||||||
subtitle_tracks: self.subtitle_tracks.clone(),
|
subtitle_tracks: self.subtitle_tracks.clone(),
|
||||||
current_time_ms: self.get_time_ms() as u64,
|
current_time_ms: self.get_time_ms() as u64,
|
||||||
is_playing: self.is_playing,
|
is_playing: self.is_playing,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn get_time_ms(&self) -> u64 {
|
pub fn get_time_ms(&self) -> u64 {
|
||||||
if !self.is_playing {
|
if !self.is_playing {
|
||||||
return self.playing_from_timestamp;
|
return self.playing_from_timestamp;
|
||||||
}
|
}
|
||||||
|
|
||||||
self.playing_from_timestamp + self.playing_from_instant.elapsed().as_millis() as u64
|
self.playing_from_timestamp + self.playing_from_instant.elapsed().as_millis() as u64
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn set_time_ms(&mut self, time_ms: u64) {
|
pub fn set_time_ms(&mut self, time_ms: u64) {
|
||||||
self.playing_from_timestamp = time_ms;
|
self.playing_from_timestamp = time_ms;
|
||||||
self.playing_from_instant = Instant::now();
|
self.playing_from_instant = Instant::now();
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn set_playing(&mut self, playing: bool, time_ms: u64) {
|
pub fn set_playing(&mut self, playing: bool, time_ms: u64) {
|
||||||
self.set_time_ms(time_ms);
|
self.set_time_ms(time_ms);
|
||||||
self.is_playing = playing;
|
self.is_playing = playing;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pub static SESSIONS: Lazy<Mutex<HashMap<Uuid, WatchSession>>> =
|
pub static SESSIONS: Lazy<Mutex<HashMap<Uuid, WatchSession>>> =
|
||||||
Lazy::new(|| Mutex::new(HashMap::new()));
|
Lazy::new(|| Mutex::new(HashMap::new()));
|
||||||
|
|
||||||
pub fn get_session(uuid: Uuid) -> Option<WatchSession> {
|
pub fn get_session(uuid: Uuid) -> Option<WatchSession> {
|
||||||
SESSIONS.lock().unwrap().get(&uuid).cloned()
|
SESSIONS.lock().unwrap().get(&uuid).cloned()
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn handle_watch_event_data(
|
pub fn handle_watch_event_data(
|
||||||
uuid: Uuid,
|
uuid: Uuid,
|
||||||
watch_session: &mut WatchSession,
|
watch_session: &mut WatchSession,
|
||||||
event: WatchEventData,
|
event: WatchEventData,
|
||||||
) {
|
) {
|
||||||
match event {
|
match event {
|
||||||
WatchEventData::SetPlaying { playing, time } => {
|
WatchEventData::SetPlaying { playing, time } => {
|
||||||
watch_session.set_playing(playing, time);
|
watch_session.set_playing(playing, time);
|
||||||
}
|
}
|
||||||
|
|
||||||
WatchEventData::SetTime { from: _, to } => {
|
WatchEventData::SetTime { from: _, to } => {
|
||||||
watch_session.set_time_ms(to);
|
watch_session.set_time_ms(to);
|
||||||
}
|
}
|
||||||
|
|
||||||
_ => {}
|
_ => {}
|
||||||
};
|
};
|
||||||
|
|
||||||
let _ = SESSIONS.lock().unwrap().insert(uuid, watch_session.clone());
|
let _ = SESSIONS.lock().unwrap().insert(uuid, watch_session.clone());
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue