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/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..1ee7ea4 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 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/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 762cfee..49feac2 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";
/**
@@ -85,7 +85,12 @@ const setupOutgoingEvents = (video, socket) => {
const currentVideoTime = () => (video.currentTime * 1000) | 0;
video.addEventListener("pause", async (event) => {
- if (outgoingDebounce) {
+ if (outgoingDebounce || !video.controls) {
+ return;
+ }
+
+ // don't send a pause event for the video ending
+ if (video.currentTime == video.duration) {
return;
}
@@ -101,7 +106,7 @@ const setupOutgoingEvents = (video, socket) => {
});
video.addEventListener("play", (event) => {
- if (outgoingDebounce) {
+ if (outgoingDebounce || !video.controls) {
return;
}
@@ -124,7 +129,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();
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);
}