diff --git a/frontend/create.html b/frontend/create.html new file mode 100644 index 0000000..f408e3e --- /dev/null +++ b/frontend/create.html @@ -0,0 +1,52 @@ + + + + + watch party :D + + + + + + +
+
+

Create a session

+ + + + + + + + + + + +
+ +

+ Already have a session? + Join your session instead. +

+
+ + + + diff --git a/frontend/create.mjs b/frontend/create.mjs new file mode 100644 index 0000000..851daef --- /dev/null +++ b/frontend/create.mjs @@ -0,0 +1,11 @@ +import { setupCreateSessionForm } from "./lib/create-session.mjs"; + +const main = () => { + setupCreateSessionForm(); +}; + +if (document.readyState === "complete") { + main(); +} else { + document.addEventListener("DOMContentLoaded", main); +} diff --git a/frontend/index.html b/frontend/index.html index 7f3abd0..41a8707 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ watch party :D - + @@ -16,6 +16,11 @@

Join a session

+

+ Your session has been created successfully. Copy the current url or + the Session ID below and share it with your friends. :) +

+ { + 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); + }); +}; diff --git a/frontend/lib/join-session.mjs b/frontend/lib/join-session.mjs index 11c3039..2337398 100644 --- a/frontend/lib/join-session.mjs +++ b/frontend/lib/join-session.mjs @@ -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"); diff --git a/frontend/lib/watch-session.mjs b/frontend/lib/watch-session.mjs index da6898b..762cfee 100644 --- a/frontend/lib/watch-session.mjs +++ b/frontend/lib/watch-session.mjs @@ -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}`; +}; diff --git a/frontend/styles.css b/frontend/styles.css index 265fa9f..35bf64d 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -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; }