diff --git a/frontend/create.html b/frontend/create.html index ed15b74..914f54d 100644 --- a/frontend/create.html +++ b/frontend/create.html @@ -3,7 +3,7 @@ watch party :D - + @@ -47,6 +47,6 @@

- + diff --git a/frontend/create.mjs b/frontend/create.mjs index bb00cab..7c52b18 100644 --- a/frontend/create.mjs +++ b/frontend/create.mjs @@ -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(); diff --git a/frontend/index.html b/frontend/index.html index 92d958a..b58c401 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ watch party :D - + @@ -53,10 +53,10 @@
- +
- + diff --git a/frontend/lib/chat.mjs b/frontend/lib/chat.mjs index 1dc4275..46cb197 100644 --- a/frontend/lib/chat.mjs +++ b/frontend/lib/chat.mjs @@ -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:
" + + " /help - display this help message
" + + " /ping [message] - ping all viewers
" + + " /sync - resyncs you with other viewers"; + + printChatMessage("command-message", "/help", "b57fdc", helpMessageContent); handled = true; break; default: diff --git a/frontend/lib/create-session.mjs b/frontend/lib/create-session.mjs index 4380bef..2c135f8 100644 --- a/frontend/lib/create-session.mjs +++ b/frontend/lib/create-session.mjs @@ -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"); diff --git a/frontend/lib/join-session.mjs b/frontend/lib/join-session.mjs index c139e74..8d9f04b 100644 --- a/frontend/lib/join-session.mjs +++ b/frontend/lib/join-session.mjs @@ -1,4 +1,4 @@ -import { joinSession } from "./watch-session.mjs?v=8"; +import { joinSession } from "./watch-session.mjs?v=9"; /** * @param {HTMLInputElement} field diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index f817f4b..e2cb661 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -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); diff --git a/frontend/main.mjs b/frontend/main.mjs index 863afb9..3be39f1 100644 --- a/frontend/main.mjs +++ b/frontend/main.mjs @@ -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(); diff --git a/frontend/styles.css b/frontend/styles.css index dc1448d..f1b9d52 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -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 {