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

Basic session creation flow #2

Merged
char merged 2 commits from nyancrimew/watch-party:create-form into main 2021-11-12 20:23:08 +00:00
Conversation 0 Commits 2 Files changed 7 +128 -6
7 changed files with 128 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/create.html Normal file
View file

@ -0,0 +1,52 @@
<!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 Normal file
View file

@ -0,0 +1,11 @@
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=2" /> <link rel="stylesheet" href="/styles.css?v=3" />
</head> </head>
<body> <body>
@ -16,7 +16,12 @@
<form id="join-session-form"> <form id="join-session-form">
<h2>Join a session</h2> <h2>Join a session</h2>
<label for="nickname">Nickname:</label> <p id="post-create-message">
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"
@ -24,7 +29,7 @@
required required
/> />
<label for="session-id">Session ID:</label> <label for="join-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 Normal file
View file

@ -0,0 +1,18 @@
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=2"; import { joinSession } from "./watch-session.mjs?v=3";
/** /**
* @param {HTMLInputElement} field * @param {HTMLInputElement} field
@ -23,7 +23,17 @@ 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,3 +167,20 @@ 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,16 +106,25 @@ 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;
} }