styling: max-height for video player

settings.json

@@ -1,8 +1,8 @@
 {
     "server_ip": "0.0.0.0",
     "server_port": 8080,
-    "video_path": "videos/Orb-22.mp4",
-    "subtitles_path": "videos/Orb-22.vtt",
-    "bg_path": "videos/chisato_peak.jpg",
+    "video_path": "videos/Orb-21.mp4",
+    "subtitles_path": "videos/Orb-21.vtt",
+    "bg_path": "videos/bg-20.png",
     "password": "password"
 }

src/client.js

@@ -1,32 +1,27 @@
 const vid = document.querySelector('video');
 const wsProto = window.location.protocol === 'https:' ? 'wss' : 'ws';
-const socket = new WebSocket(`${wsProto}://${window.location.hostname}:${window.location.port}`);
+let socket = null; // Initialize socket as null
+let retryInterval = 1000; // Initial retry interval in milliseconds
+const maxRetryInterval = 30000; // Maximum retry interval
 
-// if the new tms is within this margin of the current tms, then the change is ignored for smoother viewing
-const PLAYING_THRESH = 1;
-const PAUSED_THRESH = 0.01;
+function createWebSocket() {
+	socket = new WebSocket(`${wsProto}://${window.location.hostname}:${window.location.port}`);
 
-// local state
-let video_playing = false;
-let last_updated = 0;
-let client_uid = null;
-
-// clocks sync variables
-const num_time_sync_cycles = 10;
-let over_estimates = new Array();
-let under_estimates = new Array();
-let over_estimate = 0;
-let under_estimate = 0;
-let correction = 0;
-
-
-// Connection opened
-socket.addEventListener('open', function (event) {
+	// 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) => {
+	// 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")) {
@@ -80,16 +75,49 @@ socket.addEventListener("message", (event) => {
 				}
 			}
 		}
-});
+	});
 
-
-// Connection closed
-socket.addEventListener('close', function (event) {
+	// Connection closed
+	socket.addEventListener('close', function (event) {
 		console.log('Disconnected from the WS Server');
 		client_uid = null;
-	setTimeout(() => window.location.reload(), 1000);
-});
+		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;
+const PAUSED_THRESH = 0.01;
+
+// local state
+let video_playing = false;
+let last_updated = 0;
+let client_uid = null;
+
+// clocks sync variables
+const num_time_sync_cycles = 10;
+let over_estimates = new Array();
+let under_estimates = new Array();
+let over_estimate = 0;
+let under_estimate = 0;
+let correction = 0;
 
 // Send video state update to the server
 // event: the video event (ex: seeking, pause play) 
@@ -111,7 +139,9 @@ function state_change_handler(event) {
 		client_uid: client_uid
 	};
 
+	if (socket.readyState === WebSocket.OPEN) {
 		socket.send(`state_update_from_client ${JSON.stringify(state_image)}`);
+	}
 }
 
 // assigning event handlers
@@ -213,3 +243,4 @@ document.addEventListener('DOMContentLoaded', function() {
 		style.textContent = `::cue { font-size: ${size} !important; }`;
 	});
 });
+

src/index.js

@@ -129,7 +129,7 @@ app.post("/login", function (req, res) {
 
 
 // video streaming
-app.get("/video-3", function (req, res) {
+app.get("/video", function (req, res) {
 	// Ensure there is a range given for the video
 	const range = req.headers.range;
 	if (!range) {
@@ -187,7 +187,10 @@ server.listen(settings.server_port, settings.server_ip,
 process.on('SIGINT', () => {
 	console.log("Shutting down server...");
 	// wss.close();
-	wss.clients.forEach(client => client.terminate());
+	wss.clients.forEach(client => {
+		client.send("reload_request");
+		client.terminate();
+	});
 	server.close(() => {
 		console.log("Server closed");
 		process.exit(0);

src/main.css

@@ -39,6 +39,7 @@ header {
 video {
 	/*height:;*/
 	max-width: 100%;
+	max-height: 80vh;
 	/*max-height: 400px;*/
 	/*position: absolute;*/
 	/*top: 0;*/

src/main.html

@@ -9,7 +9,7 @@
     <link rel="icon" href="/icon.png" type="image/png">
     <!-- Open Graph Meta Tags -->
     <meta property="og:title" content="The Orboverse">
-    <meta property="og:description" content="Join the heliocentrism ☀️ gang. 🔫.">
+    <meta property="og:description" content="Join the funny. 🔫.">
     <meta property="og:image" content="/stars.jpg">
     <meta property="og:url" content="https://anistream.cazzzer.com">
     <meta property="og:type" content="website">
@@ -20,7 +20,7 @@
 				<h1>Welcome to the Orboverse</h1>
 			</header>
       <video id="videoPlayer" muted controls controlsList="nodownload noplaybackrate">
-        <source src="/video-3" type="video/mp4" />
+        <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>