From 3857171bdb6b741a1f83e11fa22875598bc1714e Mon Sep 17 00:00:00 2001
From: Sebastiaan de Schaetzen <sebastiaan.de.schaetzen@gmail.com>
Date: Tue, 17 Jun 2025 09:50:42 +0200
Subject: [PATCH] Implement custom video controls with play/pause and seek
 functionality

---
 static/index.html | 84 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 5 deletions(-)

diff --git a/static/index.html b/static/index.html
index 8791786..320b500 100644
--- a/static/index.html
+++ b/static/index.html
@@ -116,6 +116,41 @@
 		#video-overlay-container #back-button.button-hidden {
 			opacity: 0; /* Class to hide the button */
 		}
+
+		#custom-video-controls {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			padding: 10px;
+			background-color: rgba(0, 0, 0, 0.5);
+			display: flex;
+			align-items: center;
+			z-index: 1; /* Above video, but below back button if it were in the same direct stacking context */
+			opacity: 1;
+			transition: opacity 0.3s ease-in-out;
+			box-sizing: border-box;
+		}
+
+		#custom-video-controls.controls-hidden {
+			opacity: 0;
+		}
+
+		#custom-play-pause-button {
+			background: none;
+			border: none;
+			color: white;
+			font-size: 1.5em; /* Adjust size as needed */
+			cursor: pointer;
+			padding: 5px 10px;
+			margin-right: 10px;
+		}
+
+		#custom-seek-bar {
+			flex-grow: 1;
+			cursor: pointer;
+			accent-color: #3498db; /* Optional: color for the seek bar thumb and progress */
+		}
 	</style>
 	<script>
 		function hideLoader() {
@@ -146,7 +181,7 @@
 						let overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
 
 						// Create video element and append to container
-						let videoElement = $("<video controls autoplay class='video-player'></video>")
+						let videoElement = $("<video autoplay class='video-player'></video>") // Removed 'controls' attribute
 											.attr("src", currentVideo.url)
 											.appendTo(overlayContainer)[0];
 
@@ -154,22 +189,61 @@
 						let backButton = $("<button id='back-button'>Back</button>")
 											.appendTo(overlayContainer);
 
-						// Mouse inactivity logic for back button
+						// Create custom video controls container
+						let customControls = $("<div id='custom-video-controls'></div>").appendTo(overlayContainer);
+						let playPauseButton = $("<button id='custom-play-pause-button'>❚❚</button>").appendTo(customControls); // Initial state: Pause icon
+						let seekBar = $("<input type='range' id='custom-seek-bar' value='0' />").appendTo(customControls);
+
+
+						// Mouse inactivity logic for back button, controls, and cursor
 						let inactivityTimer;
-						function showButtonAndResetTimer() {
+						function showControlsAndResetTimer() {
 							backButton.removeClass('button-hidden');
+							customControls.removeClass('controls-hidden');
 							overlayContainer.css('cursor', 'default'); // Show cursor
 							clearTimeout(inactivityTimer);
 							inactivityTimer = setTimeout(function() {
 								backButton.addClass('button-hidden');
+								customControls.addClass('controls-hidden');
 								overlayContainer.css('cursor', 'none'); // Hide cursor
 							}, 3000); // 3 seconds
 						}
 
 						overlayContainer.on('mousemove.inactivityControls', function() {
-							showButtonAndResetTimer();
+							showControlsAndResetTimer();
 						});
-						showButtonAndResetTimer(); // Initial call to show and start timer
+						showControlsAndResetTimer(); // Initial call
+
+						// Custom Controls Logic
+						// Play/Pause Button
+						playPauseButton.click(function() {
+							if (videoElement.paused) {
+								videoElement.play();
+							} else {
+								videoElement.pause();
+							}
+						});
+						$(videoElement).on('play', function() {
+							playPauseButton.text('❚❚'); // Pause icon
+						});
+						$(videoElement).on('pause', function() {
+							playPauseButton.text('►'); // Play icon
+						});
+
+						// Seek Bar
+						$(videoElement).on('loadedmetadata', function() {
+							seekBar.attr('max', videoElement.duration);
+						});
+						$(videoElement).on('timeupdate', function() {
+							seekBar.val(videoElement.currentTime);
+							// Optional: Update seek bar background to show progress
+							const percentage = (videoElement.currentTime / videoElement.duration) * 100;
+							seekBar.css('background', `linear-gradient(to right, #3498db ${percentage}%, #555 ${percentage}%)`);
+						});
+						seekBar.on('input', function() {
+							videoElement.currentTime = $(this).val();
+						});
+
 
 						// Request fullscreen on the container
 						const containerEl = overlayContainer[0];