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; }`;
+	});
+});