Merge pull request 'Some minor frontend improvements' (#5) from nyancrimew/watch-party:minor-improvements into main
Reviewed-on: charlotte/watch-party#5pull/6/head
commit
7a035c5a98
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>watch party :D</title>
|
||||
<link rel="stylesheet" href="/styles.css?v=3" />
|
||||
<link rel="stylesheet" href="/styles.css?v=4" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { setupCreateSessionForm } from "./lib/create-session.mjs";
|
||||
import { setupCreateSessionForm } from "./lib/create-session.mjs?v=2";
|
||||
|
||||
const main = () => {
|
||||
setupCreateSessionForm();
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>watch party :D</title>
|
||||
<link rel="stylesheet" href="/styles.css?v=3" />
|
||||
<link rel="stylesheet" href="/styles.css?v=4" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -52,6 +52,6 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/main.mjs?v=2"></script>
|
||||
<script type="module" src="/main.mjs?v=3"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { joinSession } from "./watch-session.mjs?v=3";
|
||||
import { joinSession } from "./watch-session.mjs?v=4";
|
||||
|
||||
/**
|
||||
* @param {HTMLInputElement} field
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -129,6 +129,10 @@ button.small-button {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.chat-message > strong {
|
||||
color: rgb(126, 208, 255);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue