From 051516fef636e93bbafbed74eb4ab82072e3acc3 Mon Sep 17 00:00:00 2001 From: maia tillie arson crimew Date: Fri, 19 Nov 2021 21:29:49 +0100 Subject: [PATCH 1/4] Dont send events if video controls hidden --- frontend/create.mjs | 2 +- frontend/index.html | 2 +- frontend/lib/create-session.mjs | 2 +- frontend/lib/join-session.mjs | 2 +- frontend/lib/watch-session.mjs | 6 +++--- frontend/main.mjs | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/create.mjs b/frontend/create.mjs index 851daef..dfce25a 100644 --- a/frontend/create.mjs +++ b/frontend/create.mjs @@ -1,4 +1,4 @@ -import { setupCreateSessionForm } from "./lib/create-session.mjs"; +import { setupCreateSessionForm } from "./lib/create-session.mjs?v=2"; const main = () => { setupCreateSessionForm(); diff --git a/frontend/index.html b/frontend/index.html index 41a8707..10b393a 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -52,6 +52,6 @@ - + diff --git a/frontend/lib/create-session.mjs b/frontend/lib/create-session.mjs index 6364be0..43ea22b 100644 --- a/frontend/lib/create-session.mjs +++ b/frontend/lib/create-session.mjs @@ -1,4 +1,4 @@ -import { createSession } from "./watch-session.mjs?v=3"; +import { createSession } from "./watch-session.mjs?v=4"; 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 2337398..93118c2 100644 --- a/frontend/lib/join-session.mjs +++ b/frontend/lib/join-session.mjs @@ -1,4 +1,4 @@ -import { joinSession } from "./watch-session.mjs?v=3"; +import { joinSession } from "./watch-session.mjs?v=4"; /** * @param {HTMLInputElement} field diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index 762cfee..87e296e 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -85,7 +85,7 @@ const setupOutgoingEvents = (video, socket) => { const currentVideoTime = () => (video.currentTime * 1000) | 0; video.addEventListener("pause", async (event) => { - if (outgoingDebounce) { + if (outgoingDebounce || !video.controls) { return; } @@ -101,7 +101,7 @@ const setupOutgoingEvents = (video, socket) => { }); video.addEventListener("play", (event) => { - if (outgoingDebounce) { + if (outgoingDebounce || !video.controls) { return; } @@ -124,7 +124,7 @@ const setupOutgoingEvents = (video, socket) => { return; } - if (outgoingDebounce) { + if (outgoingDebounce || !video.controls) { return; } diff --git a/frontend/main.mjs b/frontend/main.mjs index a0bec35..f380e4e 100644 --- a/frontend/main.mjs +++ b/frontend/main.mjs @@ -1,4 +1,4 @@ -import { setupJoinSessionForm } from "./lib/join-session.mjs?v=2"; +import { setupJoinSessionForm } from "./lib/join-session.mjs?v=3"; const main = () => { setupJoinSessionForm(); From bece6a5d44048303ff105e4fb4a18f090dd50d31 Mon Sep 17 00:00:00 2001 From: maia tillie arson crimew Date: Tue, 23 Nov 2021 01:48:53 +0100 Subject: [PATCH 2/4] Fix chat message overflow wrapping --- frontend/create.html | 2 +- frontend/index.html | 2 +- frontend/styles.css | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/create.html b/frontend/create.html index f408e3e..66b242a 100644 --- a/frontend/create.html +++ b/frontend/create.html @@ -3,7 +3,7 @@ watch party :D - + diff --git a/frontend/index.html b/frontend/index.html index 10b393a..1ee7ea4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ watch party :D - + diff --git a/frontend/styles.css b/frontend/styles.css index 35bf64d..e2ca53d 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -129,6 +129,10 @@ button.small-button { display: none; } +.chat-message { + overflow-wrap: break-word; +} + .chat-message > strong { color: rgb(126, 208, 255); } From 26b3f789206addd7b030539efca1ac00144e2802 Mon Sep 17 00:00:00 2001 From: maia tillie arson crimew Date: Tue, 23 Nov 2021 02:17:23 +0100 Subject: [PATCH 3/4] ignore media button events while controls are hidden this prevents local pausing (while we already stopped syncing local events to remote with controls hidden in an earlier commit) --- frontend/lib/video.mjs | 34 ++++++++++++++++++++++++++++++++++ frontend/lib/watch-session.mjs | 2 +- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/frontend/lib/video.mjs b/frontend/lib/video.mjs index e4c5d4a..669ca84 100644 --- a/frontend/lib/video.mjs +++ b/frontend/lib/video.mjs @@ -28,6 +28,40 @@ const createVideoElement = (videoUrl, subtitles) => { video.appendChild(track); } + // watch for attribute changes on the video object to detect hiding/showing of controls + // as far as i can tell this is the least hacky solutions to get control visibility change events + const observer = new MutationObserver(async (mutations) => { + for (const mutation of mutations) { + if (mutation.attributeName == "controls") { + if (video.controls) { + // enable media button support + navigator.mediaSession.setActionHandler("play", null); + navigator.mediaSession.setActionHandler("pause", null); + 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); + 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", () => {}); + } + return; + } + } + }); + observer.observe(video, { attributes: true }); + return video; }; diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index 87e296e..404990a 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -1,4 +1,4 @@ -import { setupVideo } from "./video.mjs?v=2"; +import { setupVideo } from "./video.mjs?v=e"; import { setupChat, logEventToChat } from "./chat.mjs?v=2"; /** From 2e64148912929e5d20ab6849b955b87805ee1d33 Mon Sep 17 00:00:00 2001 From: maia tillie arson crimew Date: Tue, 23 Nov 2021 02:22:19 +0100 Subject: [PATCH 4/4] don't send a pause event for the video ending --- frontend/lib/watch-session.mjs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index 404990a..49feac2 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -89,6 +89,11 @@ const setupOutgoingEvents = (video, socket) => { return; } + // don't send a pause event for the video ending + if (video.currentTime == video.duration) { + return; + } + socket.send( JSON.stringify({ op: "SetPlaying",