forked from lavender/watch-party
Basic creation page
parent
bd4a333d67
commit
10d821659d
|
@ -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>
|
|
@ -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>
|
<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,6 +16,11 @@
|
||||||
<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">
|
||||||
|
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>
|
<label for="join-session-nickname">Nickname:</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
|
@ -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
|
* @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");
|
||||||
|
|
|
@ -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}`;
|
||||||
|
};
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue