109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Transient.chat - Watch Party</title>
|
|
<link rel="stylesheet" href="/assets/css/styles.css" />
|
|
<link rel="stylesheet" href="/assets/css/chat.css" />
|
|
<link rel="stylesheet" href="/assets/css/watchparty.css" />
|
|
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon" />
|
|
</head>
|
|
<body class="watchparty">
|
|
<h1 id="room-title">Watch Party Room</h1>
|
|
|
|
<div id="video-chat-container">
|
|
<!-- Column 1: Video Section -->
|
|
<div id="video-section">
|
|
<div id="video-controls">
|
|
<input
|
|
type="text"
|
|
id="video-url-input"
|
|
placeholder="Paste YouTube video URL..."
|
|
/>
|
|
<button id="start-video-button">▶️ Play</button>
|
|
<button id="pause-video-button" class="hidden">⏸ Pause</button>
|
|
<button id="resume-video-button" class="hidden">▶ Resume</button>
|
|
<button id="clear-video-button" class="hidden">
|
|
🛑 Clear Video
|
|
</button>
|
|
</div>
|
|
|
|
<div class="video-wrapper">
|
|
<iframe
|
|
id="video-iframe"
|
|
frameborder="0"
|
|
allowfullscreen
|
|
allow="autoplay; encrypted-media"
|
|
class="hidden"
|
|
></iframe>
|
|
<img
|
|
id="paused-overlay"
|
|
src="/assets/images/paused.png"
|
|
class="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 2: Chat Section -->
|
|
<div id="chat-center">
|
|
<div id="messages"></div>
|
|
<form id="chat-form">
|
|
<input
|
|
type="text"
|
|
class="inputfield"
|
|
id="message-input"
|
|
placeholder="Type a message, paste in a link, or url to an image or YouTube video."
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Column 3: User List + Controls -->
|
|
<div id="user-list-container">
|
|
<a
|
|
href="server_list.html"
|
|
style="
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
text-decoration: none;
|
|
"
|
|
>
|
|
<button>Server List</button>
|
|
</a>
|
|
<br />
|
|
<button
|
|
id="sound-toggle"
|
|
style="
|
|
margin-bottom: 10px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: left;
|
|
"
|
|
>
|
|
🔊 Sound: On
|
|
</button>
|
|
<br />
|
|
<button
|
|
id="external-toggle"
|
|
style="
|
|
margin-bottom: 10px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: left;
|
|
"
|
|
>
|
|
🔒 External Content: Off
|
|
</button>
|
|
<br /><br />
|
|
<h3>Users in room</h3>
|
|
<div id="user-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/js/chat.js"></script>
|
|
<script src="/assets/js/watchparty_chat.js"></script>
|
|
</body>
|
|
</html>
|