lavender
/
watch-party
7
4
Fork 5
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Some minor frontend improvements #5

Merged
nyancrimew merged 4 commits from nyancrimew/watch-party:minor-improvements into main 2021-11-23 02:00:30 +00:00
Conversation 0 Commits 4 Files Changed 9
9 changed files with 54 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/create.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>watch party :D</title> <title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=3" /> <link rel="stylesheet" href="/styles.css?v=4" />
</head> </head>
<body> <body>

2
frontend/create.mjs
View File

@ -1,4 +1,4 @@
import { setupCreateSessionForm } from "./lib/create-session.mjs"; import { setupCreateSessionForm } from "./lib/create-session.mjs?v=2";
const main = () => { const main = () => {
setupCreateSessionForm(); setupCreateSessionForm();

4
frontend/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>watch party :D</title> <title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=3" /> <link rel="stylesheet" href="/styles.css?v=4" />
</head> </head>
<body> <body>
@ -52,6 +52,6 @@
</form> </form>
</div> </div>
<script type="module" src="/main.mjs?v=2"></script> <script type="module" src="/main.mjs?v=3"></script>
</body> </body>
</html> </html>

2
frontend/lib/create-session.mjs
View File

@ -1,4 +1,4 @@
import { createSession } from "./watch-session.mjs?v=3"; import { createSession } from "./watch-session.mjs?v=4";
export const setupCreateSessionForm = () => { export const setupCreateSessionForm = () => {
const form = document.querySelector("#create-session-form"); const form = document.querySelector("#create-session-form");

2
frontend/lib/join-session.mjs
View File

@ -1,4 +1,4 @@
import { joinSession } from "./watch-session.mjs?v=3"; import { joinSession } from "./watch-session.mjs?v=4";
/** /**
* @param {HTMLInputElement} field * @param {HTMLInputElement} field

34
frontend/lib/video.mjs
View File

@ -28,6 +28,40 @@ const createVideoElement = (videoUrl, subtitles) => {
video.appendChild(track); 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; return video;
}; };

13
frontend/lib/watch-session.mjs
View File

@ -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"; import { setupChat, logEventToChat } from "./chat.mjs?v=2";
/** /**
@ -85,7 +85,12 @@ const setupOutgoingEvents = (video, socket) => {
const currentVideoTime = () => (video.currentTime * 1000) | 0; const currentVideoTime = () => (video.currentTime * 1000) | 0;
video.addEventListener("pause", async (event) => { 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; return;
} }
@ -101,7 +106,7 @@ const setupOutgoingEvents = (video, socket) => {
}); });
video.addEventListener("play", (event) => { video.addEventListener("play", (event) => {
if (outgoingDebounce) { if (outgoingDebounce || !video.controls) {
return; return;
} }
@ -124,7 +129,7 @@ const setupOutgoingEvents = (video, socket) => {
return; return;
} }
if (outgoingDebounce) { if (outgoingDebounce || !video.controls) {
return; return;
} }

2
frontend/main.mjs
View File

@ -1,4 +1,4 @@
import { setupJoinSessionForm } from "./lib/join-session.mjs?v=2"; import { setupJoinSessionForm } from "./lib/join-session.mjs?v=3";
const main = () => { const main = () => {
setupJoinSessionForm(); setupJoinSessionForm();

4
frontend/styles.css
View File

@ -129,6 +129,10 @@ button.small-button {
display: none; display: none;
} }
.chat-message {
overflow-wrap: break-word;
}
.chat-message > strong { .chat-message > strong {
color: rgb(126, 208, 255); color: rgb(126, 208, 255);
} }