From f42200b0fecd699e760a8a77ead738d9681256d4 Mon Sep 17 00:00:00 2001 From: videogame hacker Date: Fri, 3 Dec 2021 20:20:08 +0000 Subject: [PATCH 1/3] Make controls opt-in when joining a running session --- frontend/lib/watch-session.mjs | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index 49feac2..c09cec8 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -9,7 +9,7 @@ import { setupChat, logEventToChat } from "./chat.mjs?v=2"; const createWebSocket = (sessionId, nickname) => { const wsUrl = new URL( `/sess/${sessionId}/subscribe` + - `?nickname=${encodeURIComponent(nickname)}`, + `?nickname=${encodeURIComponent(nickname)}`, window.location.href ); wsUrl.protocol = { "http:": "ws:", "https:": "wss:" }[wsUrl.protocol]; @@ -73,7 +73,7 @@ const setupIncomingEvents = (video, socket) => { } logEventToChat(event); - } catch (_err) {} + } catch (_err) { } }); }; @@ -162,6 +162,13 @@ export const joinSession = async (nickname, sessionId) => { is_playing ); + // By default, we should disable video controls if the video is already playing. + // This solves an issue where Safari users join and seek to 00:00:00 because of + // outgoing events. + if (current_time_ms != 0) { + video.controls = false; + } + setupOutgoingEvents(video, socket); setupIncomingEvents(video, socket); setupChat(socket); -- 2.30.5 From e4740c757fc21c4c8e53a6cb4242fbda884f460e Mon Sep 17 00:00:00 2001 From: videogame hacker Date: Fri, 3 Dec 2021 20:24:57 +0000 Subject: [PATCH 2/3] Initialize volume to 0.5 --- frontend/lib/video.mjs | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/frontend/lib/video.mjs b/frontend/lib/video.mjs index 669ca84..e1ba5c4 100644 --- a/frontend/lib/video.mjs +++ b/frontend/lib/video.mjs @@ -6,6 +6,7 @@ const createVideoElement = (videoUrl, subtitles) => { const video = document.createElement("video"); video.controls = true; video.autoplay = false; + video.volume = 0.5; video.crossOrigin = "anonymous"; const source = document.createElement("source"); @@ -46,15 +47,15 @@ const createVideoElement = (videoUrl, subtitles) => { navigator.mediaSession.setActionHandler("skipad", 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", () => {}); - navigator.mediaSession.setActionHandler("skipad", () => {}); + 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", () => { }); + navigator.mediaSession.setActionHandler("skipad", () => { }); } return; } -- 2.30.5 From 1892b325899293b7ea8dc74e14e81cb72cdd71fa Mon Sep 17 00:00:00 2001 From: videogame hacker Date: Fri, 3 Dec 2021 20:28:36 +0000 Subject: [PATCH 3/3] Bump cache-busting version to 5 --- frontend/create.html | 4 ++-- frontend/create.mjs | 2 +- frontend/index.html | 4 ++-- frontend/lib/create-session.mjs | 2 +- frontend/lib/join-session.mjs | 2 +- frontend/lib/watch-session.mjs | 4 ++-- frontend/main.mjs | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/create.html b/frontend/create.html index 66b242a..e560149 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 dfce25a..bf2e0eb 100644 --- a/frontend/create.mjs +++ b/frontend/create.mjs @@ -1,4 +1,4 @@ -import { setupCreateSessionForm } from "./lib/create-session.mjs?v=2"; +import { setupCreateSessionForm } from "./lib/create-session.mjs?v=5"; const main = () => { setupCreateSessionForm(); diff --git a/frontend/index.html b/frontend/index.html index d964bc3..b779929 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ watch party :D - + @@ -52,6 +52,6 @@ - + diff --git a/frontend/lib/create-session.mjs b/frontend/lib/create-session.mjs index 43ea22b..45f15b3 100644 --- a/frontend/lib/create-session.mjs +++ b/frontend/lib/create-session.mjs @@ -1,4 +1,4 @@ -import { createSession } from "./watch-session.mjs?v=4"; +import { createSession } from "./watch-session.mjs?v=5"; 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 7feb1df..6eaf1fc 100644 --- a/frontend/lib/join-session.mjs +++ b/frontend/lib/join-session.mjs @@ -1,4 +1,4 @@ -import { joinSession } from "./watch-session.mjs?v=4"; +import { joinSession } from "./watch-session.mjs?v=5"; /** * @param {HTMLInputElement} field diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index c09cec8..d1b1d1a 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -1,5 +1,5 @@ -import { setupVideo } from "./video.mjs?v=e"; -import { setupChat, logEventToChat } from "./chat.mjs?v=2"; +import { setupVideo } from "./video.mjs?v=5"; +import { setupChat, logEventToChat } from "./chat.mjs?v=5"; /** * @param {string} sessionId diff --git a/frontend/main.mjs b/frontend/main.mjs index 65def96..90bafa0 100644 --- a/frontend/main.mjs +++ b/frontend/main.mjs @@ -1,4 +1,4 @@ -import { setupJoinSessionForm } from "./lib/join-session.mjs?v=4"; +import { setupJoinSessionForm } from "./lib/join-session.mjs?v=5"; const main = () => { setupJoinSessionForm(); -- 2.30.5