nyancrimew/watch-party
1
0
Fork 0
forked from lavender/watch-party
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: nyancrimew:10d821659de1a724720352f9948e2c49765adaa7
Branches Tags
nyancrimew:main
nyancrimew:minor-improvements
nyancrimew:annie-mode
nyancrimew:user-list
nyancrimew:create-form
nyancrimew:chat-popout
lavender:main
lavender:votekiss
lavender:experimental
...
compare: nyancrimew:main
Branches Tags
nyancrimew:main
nyancrimew:minor-improvements
nyancrimew:annie-mode
nyancrimew:user-list
nyancrimew:create-form
nyancrimew:chat-popout
lavender:main
lavender:votekiss
lavender:experimental

7 commits
10d821659d ... main

Author SHA1 Message Date
maia tillie arson crimew
a69f0f7318 disable join button on first click 2021-12-03 20:45:27 +01:00
maia arson crimew
7a035c5a98 Merge pull request 'Some minor frontend improvements' (#5) from nyancrimew/watch-party:minor-improvements into main 
Reviewed-on: charlotte/watch-party#5
 2021-11-23 02:00:30 +00:00
maia tillie arson crimew
2e64148912 don't send a pause event for the video ending 2021-11-23 02:57:06 +01:00
maia tillie arson crimew
26b3f78920 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)
 2021-11-23 02:57:06 +01:00
maia tillie arson crimew
bece6a5d44 Fix chat message overflow wrapping 2021-11-23 02:56:58 +01:00
maia tillie arson crimew
051516fef6 Dont send events if video controls hidden 2021-11-20 02:12:53 +01:00
Charlotte Som
903fd535ce Merge pull request from nyancrimew/watch-party:create-form into main 
thank u maia <3
 2021-11-12 20:23:07 +00:00
9 changed files with 63 additions and 19 deletions
Show stats Expand all files Collapse all files

2
frontend/create.html
View file

@ -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>

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 = () => {
setupCreateSessionForm();

6
frontend/index.html
View file

@ -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>
@ -36,7 +36,7 @@
placeholder="123e4567-e89b-12d3-a456-426614174000"
required
/>
<button>Join</button>
<button id="join-session-button">Join</button>
</form>
<p>
@ -52,6 +52,6 @@
</form>
</div>
<script type="module" src="/main.mjs?v=2"></script>
<script type="module" src="/main.mjs?v=4"></script>
</body>
</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 = () => {
const form = document.querySelector("#create-session-form");

17
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
@ -37,6 +37,7 @@ export const setupJoinSessionForm = () => {
const form = document.querySelector("#join-session-form");
const nickname = form.querySelector("#join-session-nickname");
const sessionId = form.querySelector("#join-session-id");
const button = form.querySelector("#join-session-button");
loadNickname(nickname);
@ -44,12 +45,12 @@ export const setupJoinSessionForm = () => {
sessionId.value = window.location.hash.substring(1);
}
document
.querySelector("#join-session-form")
.addEventListener("submit", (event) => {
event.preventDefault();
form.addEventListener("submit", (event) => {
event.preventDefault();
saveNickname(nickname);
joinSession(nickname.value, sessionId.value);
});
button.disabled = true;
saveNickname(nickname);
joinSession(nickname.value, sessionId.value);
});
};

34
frontend/lib/video.mjs
View file

@ -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;
};

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";
/**
@ -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;
}

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=4";
const main = () => {
setupJoinSessionForm();

4
frontend/styles.css
View file

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