more styling: add meta info

src/client.js

@@ -1,106 +1,6 @@
 const vid = document.querySelector('video');
 const wsProto = window.location.protocol === 'https:' ? 'wss' : 'ws';
-let socket = null; // Initialize socket as null
+const socket = new WebSocket(`${wsProto}://${window.location.hostname}:${window.location.port}`);
-let retryInterval = 1000; // Initial retry interval in milliseconds
-const maxRetryInterval = 30000; // Maximum retry interval
-
-function createWebSocket() {
-	socket = new WebSocket(`${wsProto}://${window.location.hostname}:${window.location.port}`);
-
-	// Connection opened
-	socket.addEventListener('open', function (event) {
-		console.log('Connected to WS Server');
-		retryInterval = 1000; // Reset retry interval on successful connection
-	});
-
-	// Got message from the server
-	socket.addEventListener("message", (event) => {
-
-		// Reload the page if the server sends a reload request
-		if (event.data.startsWith("reload_request")) {
-			console.log("Reloading the page as requested by the server");
-			setTimeout(() => window.location.reload(), 1000);
-			return;
-		}
-
-		// Time syncing backward server-response
-		if (event.data.startsWith("time_sync_response_backward")) {
-			let time_at_server = Number(event.data.slice("time_sync_response_backward".length + 1));
-			let under_estimate_latest = time_at_server - get_global_time(0);
-
-			under_estimates.push(under_estimate_latest);
-			under_estimate = median(under_estimates);
-			correction = (under_estimate + over_estimate) / 2;
-
-			console.log(`%c Updated val for under_estimate is ${under_estimate}`, "color:green");
-			console.log(`%c New correction time is ${correction} miliseconds`, 'color:red; font-size:12px');
-		}
-		
-		// Time syncing forward server-response
-		if (event.data.startsWith("time_sync_response_forward")) {
-			let calculated_diff = Number(event.data.slice("time_sync_response_forward".length + 1));
-			over_estimates.push(calculated_diff);
-			over_estimate = median(over_estimates);
-			correction = (under_estimate + over_estimate) / 2;
-
-			console.log(`%c Updated val for over_estimate is ${over_estimate}`, "color:green");
-			console.log(`%c New correction time is ${correction} miliseconds`, 'color:red; font-size:12px');
-		}
-
-		// Video state update from server
-		if (event.data.startsWith("state_update_from_server")) {
-			let state = JSON.parse(event.data.slice("state_update_from_server".length + 1));
-
-			// Whenever the client connects or reconnects
-			if (client_uid == null) {
-				client_uid = state.client_uid;
-			}
-
-			// calculating the new timestamp for both cases - when the video is playing and when it is paused
-			let proposed_time = (state.playing) ? ((get_global_time(correction) - state.global_timestamp) / 1000 + state.video_timestamp) : (state.video_timestamp);
-			let gap = Math.abs(proposed_time - vid.currentTime);
-
-			console.log(`%cGap was ${proposed_time - vid.currentTime}`, 'font-size:12px; color:purple');
-			if (state.playing) {
-				// tolerance while the video is playing
-				if (gap > PLAYING_THRESH) {
-					vid.currentTime = proposed_time;
-				}
-				vid.play()
-			} else {
-				vid.pause()
-				// condition to prevent an unnecessary seek
-				if (gap > PAUSED_THRESH) {
-					vid.currentTime = proposed_time;
-				}
-			}
-		}
-	});
-
-	// Connection closed
-	socket.addEventListener('close', function (event) {
-		console.log('Disconnected from the WS Server');
-		client_uid = null;
-		retryWebSocketConnection(); // Attempt to reconnect
-	});
-
-	// Connection error
-	socket.addEventListener('error', function (event) {
-		console.error('WebSocket error:', event);
-		socket.close(); // Ensure the socket is closed on error
-	});
-}
-
-function retryWebSocketConnection() {
-	console.log(`Attempting to reconnect in ${retryInterval / 1000} seconds...`);
-	setTimeout(() => {
-		retryInterval = Math.min(retryInterval * 2, maxRetryInterval); // Exponential backoff
-		createWebSocket(); // Recreate the WebSocket connection
-	}, retryInterval);
-}
-
-// Initial WebSocket connection
-createWebSocket();
 
 // if the new tms is within this margin of the current tms, then the change is ignored for smoother viewing
 const PLAYING_THRESH = 1;
@@ -119,6 +19,78 @@ let over_estimate = 0;
 let under_estimate = 0;
 let correction = 0;
 
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+	console.log('Connected to WS Server');
+});
+
+// Got message from the server
+socket.addEventListener("message", (event) => {
+
+	// Time syncing backward server-response
+	if (event.data.startsWith("time_sync_response_backward")) {
+		let time_at_server = Number(event.data.slice("time_sync_response_backward".length + 1));
+		let under_estimate_latest = time_at_server - get_global_time(0);
+
+		under_estimates.push(under_estimate_latest);
+		under_estimate = median(under_estimates);
+		correction = (under_estimate + over_estimate) / 2;
+
+		console.log(`%c Updated val for under_estimate is ${under_estimate}`, "color:green");
+		console.log(`%c New correction time is ${correction} miliseconds`, 'color:red; font-size:12px');
+	}
+	
+	// Time syncing forward server-response
+	if (event.data.startsWith("time_sync_response_forward")) {
+		let calculated_diff = Number(event.data.slice("time_sync_response_forward".length + 1));
+		over_estimates.push(calculated_diff);
+		over_estimate = median(over_estimates);
+		correction = (under_estimate + over_estimate) / 2;
+
+		console.log(`%c Updated val for over_estimate is ${over_estimate}`, "color:green");
+		console.log(`%c New correction time is ${correction} miliseconds`, 'color:red; font-size:12px');
+	}
+
+	// Video state update from server
+	if (event.data.startsWith("state_update_from_server")) {
+		let state = JSON.parse(event.data.slice("state_update_from_server".length + 1));
+
+		// Whenever the client connects or reconnects
+		if (client_uid == null) {
+			client_uid = state.client_uid;
+		}
+
+		// calculating the new timestamp for both cases - when the video is playing and when it is paused
+		let proposed_time = (state.playing) ? ((get_global_time(correction) - state.global_timestamp) / 1000 + state.video_timestamp) : (state.video_timestamp);
+		let gap = Math.abs(proposed_time - vid.currentTime);
+
+		console.log(`%cGap was ${proposed_time - vid.currentTime}`, 'font-size:12px; color:purple');
+		if (state.playing) {
+			// tolerance while the video is playing
+			if (gap > PLAYING_THRESH) {
+				vid.currentTime = proposed_time;
+			}
+			vid.play()
+		} else {
+			vid.pause()
+			// condition to prevent an unnecessary seek
+			if (gap > PAUSED_THRESH) {
+				vid.currentTime = proposed_time;
+			}
+		}
+	}
+});
+
+
+// Connection closed
+socket.addEventListener('close', function (event) {
+	console.log('Disconnected from the WS Server');
+	client_uid = null;
+	setTimeout(() => window.location.reload(), 1000);
+});
+
+
 // Send video state update to the server
 // event: the video event (ex: seeking, pause play) 
 function state_change_handler(event) {
@@ -139,9 +111,7 @@ function state_change_handler(event) {
 		client_uid: client_uid
 	};
 
-	if (socket.readyState === WebSocket.OPEN) {
+	socket.send(`state_update_from_client ${JSON.stringify(state_image)}`);
-		socket.send(`state_update_from_client ${JSON.stringify(state_image)}`);
-	}
 }
 
 // assigning event handlers
@@ -243,4 +213,3 @@ document.addEventListener('DOMContentLoaded', function() {
 		style.textContent = `::cue { font-size: ${size} !important; }`;
 	});
 });
-

src/index.js

@@ -80,14 +80,6 @@ wss.on('connection', function connection(ws) {
 ////  Web server  ////
 
 // app settings
-
-// disable cache globally because it may break things between server restarts,
-// since the paths aren't unique
-app.use(function (req, res, next) {
-	res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
-	next();
-});
-
 app.use('/', express.static(__dirname));
 app.use(bodyParser.urlencoded({
 	extended: true
@@ -100,6 +92,13 @@ app.use(session({
 	logged: false
 }));
 
+// disable cache globally because it may break things between server restarts,
+// since the paths aren't unique
+app.use(function (req, res, next) {
+	res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	next();
+});
+
 
 // home page
 app.get("/", function (req, res) {
@@ -187,10 +186,7 @@ server.listen(settings.server_port, settings.server_ip,
 process.on('SIGINT', () => {
 	console.log("Shutting down server...");
 	// wss.close();
-	wss.clients.forEach(client => {
+	wss.clients.forEach(client => client.terminate());
-		client.send("reload_request");
-		client.terminate();
-	});
 	server.close(() => {
 		console.log("Server closed");
 		process.exit(0);

src/main.css

@@ -21,7 +21,7 @@ body[data-background] {
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
-	background-blend-mode: multiply;
+	background-blend-mode: darken;
 }
 
 .container {
@@ -39,7 +39,6 @@ header {
 video {
 	/*height:;*/
 	max-width: 100%;
-	max-height: 80vh;
 	/*max-height: 400px;*/
 	/*position: absolute;*/
 	/*top: 0;*/