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

Compare commits

base: lavender:903fd535ce6d53ced972d441104f77e548283503
Branches Tags
lavender:main
lavender:votekiss
lavender:experimental
..
compare: lavender:be5a05e0fd5c437bf9f76f08904b7127c0beed12
Branches Tags
lavender:main
lavender:votekiss
lavender:experimental

No commits in common. "903fd535ce6d53ced972d441104f77e548283503" and "be5a05e0fd5c437bf9f76f08904b7127c0beed12" have entirely different histories.
903fd535ce ... be5a05e0fd

7 changed files with 6 additions and 128 deletions
Show Stats Expand all files Collapse all files

52
frontend/create.html
View File

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>watch party :D</title>
<link rel="stylesheet" href="/styles.css?v=3" />
</head>
<body>
<noscript>
This site will <em>not</em> work without JavaScript, and there's not
really any way around that :(
</noscript>
<div id="create-controls">
<form id="create-session-form">
<h2>Create a session</h2>
<label for="create-session-video">Video:</label>
<input
type="text"
id="create-session-video"
placeholder="https://video.example.com/example.mp4"
required
/>
<!-- TODO: Ability to add multiple subtitles for different languages -->
<label for="create-session-subs">Subtitles:</label>
<input
type="text"
id="create-session-subs"
placeholder="https://video.example.com/example.vtt"
/>
<label for="create-session-subs-name">Subtitle track name:</label>
<input
type="text"
id="create-session-subs-name"
placeholder="English"
/>
<button>Create</button>
</form>
<p>
Already have a session?
<a href="/">Join your session</a> instead.
</p>
</div>
<script type="module" src="/create.mjs?v=1"></script>
</body>
</html>

11
frontend/create.mjs
View File

@ -1,11 +0,0 @@
import { setupCreateSessionForm } from "./lib/create-session.mjs";
const main = () => {
setupCreateSessionForm();
};
if (document.readyState === "complete") {
main();
} else {
document.addEventListener("DOMContentLoaded", main);
}

11
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=2" />
</head> </head>
<body> <body>
@ -16,12 +16,7 @@
<form id="join-session-form"> <form id="join-session-form">
<h2>Join a session</h2> <h2>Join a session</h2>
<p id="post-create-message"> <label for="nickname">Nickname:</label>
Your session has been created successfully. Copy the current url or
the Session ID below and share it with your friends. :)
</p>
<label for="join-session-nickname">Nickname:</label>
<input <input
type="text" type="text"
id="join-session-nickname" id="join-session-nickname"
@ -29,7 +24,7 @@
required required
/> />
<label for="join-session-id">Session ID:</label> <label for="session-id">Session ID:</label>
<input <input
type="text" type="text"
id="join-session-id" id="join-session-id"

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

@ -1,18 +0,0 @@
import { createSession } from "./watch-session.mjs?v=3";
export const setupCreateSessionForm = () => {
const form = document.querySelector("#create-session-form");
const videoUrl = form.querySelector("#create-session-video");
const subsUrl = form.querySelector("#create-session-subs");
const subsName = form.querySelector("#create-session-subs-name");
form.addEventListener("submit", (event) => {
event.preventDefault();
let subs = [];
if (subsUrl.value) {
subs.push({ url: subsUrl.value, name: subsName.value || "default" });
}
createSession(videoUrl.value, subs);
});
};

12
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=2";
/** /**
* @param {HTMLInputElement} field * @param {HTMLInputElement} field
@ -23,17 +23,7 @@ const saveNickname = (field) => {
} }
}; };
const displayPostCreateMessage = () => {
const params = new URLSearchParams(window.location.search);
if (params.get("created") == "true") {
document.querySelector("#post-create-message").style["display"] = "block";
window.history.replaceState({}, document.title, `/${window.location.hash}`);
}
};
export const setupJoinSessionForm = () => { export const setupJoinSessionForm = () => {
displayPostCreateMessage();
const form = document.querySelector("#join-session-form"); const form = document.querySelector("#join-session-form");
const nickname = form.querySelector("#join-session-nickname"); const nickname = form.querySelector("#join-session-nickname");
const sessionId = form.querySelector("#join-session-id"); const sessionId = form.querySelector("#join-session-id");

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

@ -167,20 +167,3 @@ export const joinSession = async (nickname, sessionId) => {
console.error(err); console.error(err);
} }
}; };
/**
* @param {string} videoUrl
* @param {Array} subtitleTracks
*/
export const createSession = async (videoUrl, subtitleTracks) => {
const { id } = await fetch("/start_session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
video_url: videoUrl,
subtitle_tracks: subtitleTracks,
}),
}).then((r) => r.json());
window.location = `/?created=true#${id}`;
};

13
frontend/styles.css
View File

@ -106,25 +106,16 @@ button.small-button {
margin-right: 1ch !important; margin-right: 1ch !important;
} }
#pre-join-controls, #pre-join-controls {
#create-controls {
width: 60%; width: 60%;
margin: 0 auto; margin: 0 auto;
margin-top: 4em; margin-top: 4em;
} }
#join-session-form, #join-session-form {
#create-session-form {
margin-bottom: 4em; margin-bottom: 4em;
} }
#post-create-message {
display: none;
width: 500px;
max-width: 100%;
font-size: 0.85em;
}
#chatbox-container { #chatbox-container {
display: none; display: none;
} }