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

add /sync command 

this command resyncs you with the watch party

also added: /help command
votekiss
maia arson crimew 2022-02-14 15:30:42 +01:00
parent af4b23e879
commit ef50f2c4d9
9 changed files with 73 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/create.html
View File

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

2
frontend/create.mjs
View File

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

6
frontend/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=8" />
<link rel="stylesheet" href="/styles.css?v=9" />
</head>
<body>
@ -53,10 +53,10 @@
<div id="viewer-list"></div>
<div id="chatbox"></div>
<form id="chatbox-send">
<input type="text" placeholder="Message..." />
<input type="text" placeholder="Message... (/help for commands)" />
</form>
</div>
<script type="module" src="/main.mjs?v=8"></script>
<script type="module" src="/main.mjs?v=9"></script>
</body>
</html>

33
frontend/lib/chat.mjs
View File

@ -1,10 +1,12 @@
import { setDebounce, setVideoTime, setPlaying } from "./watch-session.mjs";
const setupChatboxEvents = (socket) => {
// clear events by just reconstructing the form
const oldChatForm = document.querySelector("#chatbox-send");
const chatForm = oldChatForm.cloneNode(true);
oldChatForm.replaceWith(chatForm);
chatForm.addEventListener("submit", (e) => {
chatForm.addEventListener("submit", async (e) => {
e.preventDefault();
const input = chatForm.querySelector("input");
@ -28,8 +30,35 @@ const setupChatboxEvents = (socket) => {
);
handled = true;
break;
case "/sync":
const sessionId = window.location.hash.slice(1);
const { current_time_ms, is_playing } = await fetch(
`/sess/${sessionId}`
).then((r) => r.json());
setDebounce();
setPlaying(is_playing);
setVideoTime(current_time_ms);
const syncMessageContent = document.createElement("span");
syncMessageContent.appendChild(
document.createTextNode("resynced you to ")
);
syncMessageContent.appendChild(
document.createTextNode(formatTime(current_time_ms))
);
printChatMessage("set-time", "/sync", "b57fdc", syncMessageContent);
handled = true;
break;
case "/help":
// TODO: print help in chat
const helpMessageContent = document.createElement("span");
helpMessageContent.innerHTML =
"Available commands:<br>" +
"&emsp;<code>/help</code> - display this help message<br>" +
"&emsp;<code>/ping [message]</code> - ping all viewers<br>" +
"&emsp;<code>/sync</code> - resyncs you with other viewers";
printChatMessage("command-message", "/help", "b57fdc", helpMessageContent);
handled = true;
break;
default:

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

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

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

@ -1,4 +1,4 @@
import { joinSession } from "./watch-session.mjs?v=8";
import { joinSession } from "./watch-session.mjs?v=9";
/**
* @param {HTMLInputElement} field

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

@ -1,5 +1,5 @@
import { setupVideo } from "./video.mjs?v=8";
import { setupChat, logEventToChat, updateViewerList } from "./chat.mjs?v=8";
import { setupVideo } from "./video.mjs?v=9";
import { setupChat, logEventToChat, updateViewerList } from "./chat.mjs?v=9";
/**
* @param {string} sessionId
@ -22,7 +22,7 @@ const createWebSocket = (sessionId, nickname, colour) => {
let outgoingDebounce = false;
let outgoingDebounceCallbackId = null;
const setDebounce = () => {
export const setDebounce = () => {
outgoingDebounce = true;
if (outgoingDebounceCallbackId) {
@ -35,19 +35,34 @@ const setDebounce = () => {
}, 500);
};
export const setVideoTime = (time, video = null) => {
if (video == null) {
video = document.querySelector("video");
}
const timeSecs = time / 1000.0;
if (Math.abs(video.currentTime - timeSecs) > 0.5) {
video.currentTime = timeSecs;
}
};
export const setPlaying = async (playing, video = null) => {
if (video == null) {
video = document.querySelector("video");
}
if (playing) {
await video.play();
} else {
video.pause();
}
};
/**
* @param {HTMLVideoElement} video
* @param {WebSocket} socket
*/
const setupIncomingEvents = (video, socket) => {
const setVideoTime = (time) => {
const timeSecs = time / 1000.0;
if (Math.abs(video.currentTime - timeSecs) > 0.5) {
video.currentTime = timeSecs;
}
};
socket.addEventListener("message", async (messageEvent) => {
try {
const event = JSON.parse(messageEvent.data);
@ -63,12 +78,11 @@ const setupIncomingEvents = (video, socket) => {
video.pause();
}
setVideoTime(event.data.time);
setVideoTime(event.data.time, video);
break;
case "SetTime":
setDebounce();
setVideoTime(event.data);
setVideoTime(event.data, video);
break;
case "UpdateViewerList":
updateViewerList(event.data);

2
frontend/main.mjs
View File

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

6
frontend/styles.css
View File

@ -150,9 +150,13 @@ button.small-button {
font-size: 0.85em;
}
.chat-message.command-message{
font-size: 0.85em;
}
.chat-message.set-time > strong,
.chat-message.set-playing > strong {
color: unset;
color: unset !important;
}
#chatbox {