2021-10-24 22:48:10 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>watch party :D</title>
|
2022-04-29 22:25:31 +00:00
|
|
|
<link rel="stylesheet" href="/styles.css?v=bfdcf2" />
|
2021-10-24 22:48:10 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<noscript>
|
|
|
|
|
This site will <em>not</em> work without JavaScript, and there's not
|
|
|
|
|
really any way around that :(
|
|
|
|
|
</noscript>
|
|
|
|
|
|
|
|
|
|
<div id="pre-join-controls">
|
|
|
|
|
<form id="join-session-form">
|
|
|
|
|
<h2>Join a session</h2>
|
|
|
|
|
|
2021-11-11 17:26:30 +00:00
|
|
|
<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>
|
|
|
|
|
|
2021-11-11 15:47:43 +00:00
|
|
|
<label for="join-session-nickname">Nickname:</label>
|
2021-10-25 01:59:52 +00:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="join-session-nickname"
|
|
|
|
|
placeholder="Nickname"
|
2022-01-18 11:55:44 +00:00
|
|
|
maxlength="50"
|
2021-10-25 01:59:52 +00:00
|
|
|
required
|
|
|
|
|
/>
|
2022-02-13 17:23:20 +00:00
|
|
|
|
2022-04-29 22:41:33 +00:00
|
|
|
<label id="join-session-colour-label" for="join-session-colour">
|
|
|
|
|
Personal Colour:
|
|
|
|
|
</label>
|
2022-04-29 22:24:37 +00:00
|
|
|
<input type="color" id="join-session-colour" value="#ffffff" required />
|
2021-10-25 01:59:52 +00:00
|
|
|
|
2021-11-11 15:47:43 +00:00
|
|
|
<label for="join-session-id">Session ID:</label>
|
2021-10-24 22:48:10 +00:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="join-session-id"
|
|
|
|
|
placeholder="123e4567-e89b-12d3-a456-426614174000"
|
|
|
|
|
required
|
|
|
|
|
/>
|
2021-12-03 19:37:16 +00:00
|
|
|
<button id="join-session-button">Join</button>
|
2021-10-24 22:48:10 +00:00
|
|
|
|
2022-02-15 22:19:48 +00:00
|
|
|
<p>
|
2022-02-16 00:30:22 +00:00
|
|
|
No session to join?
|
|
|
|
|
<a href="/create.html">Create a session</a> instead.
|
2022-02-15 22:19:48 +00:00
|
|
|
</p>
|
|
|
|
|
</form>
|
2021-10-24 22:48:10 +00:00
|
|
|
</div>
|
|
|
|
|
|
2021-10-25 01:59:52 +00:00
|
|
|
<div id="video-container"></div>
|
2021-11-05 13:07:21 +00:00
|
|
|
<div id="chatbox-container">
|
2023-01-28 14:04:05 +00:00
|
|
|
<section id="viewing">
|
|
|
|
|
<div id="viewer-list"></div>
|
|
|
|
|
<div id="chatbox"></div>
|
|
|
|
|
<form id="chatbox-send">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Message... (/help for commands)"
|
|
|
|
|
list="emoji-autocomplete"
|
|
|
|
|
/>
|
|
|
|
|
<div id="emoji-autocomplete"></div>
|
|
|
|
|
<!-- DO NOT ADD SPACING INSIDE THE TAG IT WILL BREAK THE CSS kthxbye -->
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
<section id="options">
|
|
|
|
|
<h2>settings</h2>
|
|
|
|
|
<hr />
|
|
|
|
|
<form id="options-form">
|
|
|
|
|
<label for="plingVolume"
|
|
|
|
|
><input
|
|
|
|
|
type="range"
|
|
|
|
|
min="0"
|
|
|
|
|
max="100"
|
|
|
|
|
value="100"
|
|
|
|
|
id="plingVolume"
|
|
|
|
|
onchange="handlePlingVolume(this)"
|
|
|
|
|
/>
|
|
|
|
|
ping volume</label
|
|
|
|
|
>
|
|
|
|
|
<label
|
|
|
|
|
><input
|
|
|
|
|
id="playerControlsShown"
|
|
|
|
|
type="checkbox"
|
|
|
|
|
onchange="togglePlayerControlsShown(this)"
|
|
|
|
|
/>hide controls when loading video player</label
|
|
|
|
|
>
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
<div id="options-toggle">
|
|
|
|
|
<button
|
|
|
|
|
aria-label="settings"
|
|
|
|
|
id="options-icon"
|
|
|
|
|
onclick="toggleOptionPane(event, this)"
|
|
|
|
|
>
|
|
|
|
|
⚙️
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2021-11-05 13:07:21 +00:00
|
|
|
</div>
|
2021-10-25 01:59:52 +00:00
|
|
|
|
2022-04-29 22:25:31 +00:00
|
|
|
<script type="module" src="/main.mjs?v=bfdcf2"></script>
|
2022-04-29 22:41:33 +00:00
|
|
|
<script>
|
|
|
|
|
const updateColourLabel = () => {
|
|
|
|
|
const colour = document.querySelector("#join-session-colour").value;
|
|
|
|
|
document.querySelector(
|
|
|
|
|
"#join-session-colour-label"
|
|
|
|
|
).textContent = `Personal Colour: ${colour}`;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document
|
|
|
|
|
.querySelector("#join-session-colour")
|
|
|
|
|
.addEventListener("input", updateColourLabel);
|
|
|
|
|
updateColourLabel();
|
|
|
|
|
</script>
|
2021-10-24 22:48:10 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
