vibing part 1

src/client.js

@@ -1,5 +1,6 @@
 const vid = document.querySelector('video');
-const socket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`);
+const wsProto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+const socket = new WebSocket(`${wsProto}://${window.location.hostname}:${window.location.port}`);
 
 // if the new tms is within this margin of the current tms, then the change is ignored for smoother viewing
 const PLAYING_THRESH = 1;
@@ -188,4 +189,26 @@ async function do_time_sync() {
 		do_time_sync_one_cycle_forward();
 	}
 }
-do_time_sync();
+do_time_sync();
+
+document.addEventListener('DOMContentLoaded', function() {
+	const subtitleSizeSlider = document.getElementById('subtitle-size');
+	const sizeValueDisplay = document.getElementById('size-value');
+	const video = document.getElementById('videoPlayer');
+
+	// Update subtitle size when slider changes
+	subtitleSizeSlider.addEventListener('input', function() {
+		const size = this.value + 'em';
+		sizeValueDisplay.textContent = size;
+
+		// Create or update stylesheet for ::cue
+		let style = document.getElementById('subtitle-style');
+		if (!style) {
+			style = document.createElement('style');
+			style.id = 'subtitle-style';
+			document.head.appendChild(style);
+		}
+
+		style.textContent = `::cue { font-size: ${size} !important; }`;
+	});
+});

src/index.js

@@ -95,11 +95,11 @@ app.use(session({
 
 // home page
 app.get("/", function (req, res) {
-	if (req.session.logged)
+	// if (req.session.logged)
 		res.sendFile(__dirname + "/main.html");
-	else
-		res.sendFile(__dirname + "/login.html");
-});
+	// else
+	// 	res.sendFile(__dirname + "/login.html");
+});	
 
 
 // receive login info
@@ -160,6 +160,12 @@ app.get("/video", function (req, res) {
 	videoStream.pipe(res);
 });
 
+// subtitles track
+app.get("/subtitles", function (req, res) {
+	console.log("hello)");
+	res.sendFile(__dirname + "/subs/Orb-22.vtt");
+});
+
 
 // host server on given ip and port
 server.listen(settings.server_port, settings.server_ip,

src/main.css

@@ -1,4 +1,5 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:300);
+@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
 
 body {
 	background-color: gray;
@@ -24,11 +25,36 @@ header {
 }
 
 video {
-    width: 100%;
+	width: 100%;
 	height: 100%;
 	position: absolute;
 	top: 0;
 	left: 0;
 	border-radius: 10px;
 	border: 2px solid black;
-}
+}
+
+.subtitle-controls {
+	margin-top: 15px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 5px;
+}
+
+.subtitle-controls label {
+	font-size: 1rem;
+	margin-bottom: 5px;
+}
+
+#subtitle-size {
+	width: 80%;
+	max-width: 300px;
+}
+
+::cue {
+	font-family: "Noto Sans", sans-serif;
+	font-size: 1.25em;
+	background-color: rgba(0, 0, 0, 0.4);
+	/*text-shadow: 1px 1px 2px black;*/
+}

src/main.html

@@ -13,10 +13,17 @@
 				<h1>Watch-Together</h1>
 			</header>
 			<div class="video-wrapper">
-				<video id="videoPlayer" controls disablePictureInPicture controlsList="nodownload noplaybackrate" muted>
+				<video id="videoPlayer" controls controlsList="nodownload noplaybackrate">
 					<source src="/video" type="video/mp4" />
+<!--          subtitle track-->
+          <track kind="subtitles" src="/subtitles" srclang="en" label="English" default>
+          <p>Your browser does not support the video tag.</p>
 				</video>
 			</div>
+      <div class="subtitle-controls">
+        <label for="subtitle-size">Subtitle Size: <span id="size-value">1.25em</span></label>
+        <input type="range" id="subtitle-size" min="0.8" max="2.5" step="0.1" value="1.25">
+      </div>
 		</div>
 	</body>
 </html>