Basic session creation flow #2
7 changed files with 128 additions and 6 deletions
52
frontend/create.html
Normal file
52
frontend/create.html
Normal 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
11
frontend/create.mjs
Normal 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);
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>watch party :D</title>
|
||||
<link rel="stylesheet" href="/styles.css?v=2" />
|
||||
<link rel="stylesheet" href="/styles.css?v=3" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -16,7 +16,12 @@
|
|||
<form id="join-session-form">
|
||||
<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
|
||||
type="text"
|
||||
id="join-session-nickname"
|
||||
|
|
@ -24,7 +29,7 @@
|
|||
required
|
||||
/>
|
||||
|
||||
<label for="session-id">Session ID:</label>
|
||||
<label for="join-session-id">Session ID:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="join-session-id"
|
||||
|
|
|
|||
18
frontend/lib/create-session.mjs
Normal file
18
frontend/lib/create-session.mjs
Normal 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);
|
||||
});
|
||||
};
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { joinSession } from "./watch-session.mjs?v=2";
|
||||
import { joinSession } from "./watch-session.mjs?v=3";
|
||||
|
||||
/**
|
||||
* @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 = () => {
|
||||
displayPostCreateMessage();
|
||||
|
||||
const form = document.querySelector("#join-session-form");
|
||||
const nickname = form.querySelector("#join-session-nickname");
|
||||
const sessionId = form.querySelector("#join-session-id");
|
||||
|
|
|
|||
|
|
@ -167,3 +167,20 @@ export const joinSession = async (nickname, sessionId) => {
|
|||
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}`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -106,16 +106,25 @@ button.small-button {
|
|||
margin-right: 1ch !important;
|
||||
}
|
||||
|
||||
#pre-join-controls {
|
||||
#pre-join-controls,
|
||||
#create-controls {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
#join-session-form {
|
||||
#join-session-form,
|
||||
#create-session-form {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
|
||||
#post-create-message {
|
||||
display: none;
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
#chatbox-container {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue