From e880a93dcb7d4fda7c7a09e906f44c12ec067254 Mon Sep 17 00:00:00 2001
From: Sebastiaan de Schaetzen <sebastiaan.de.schaetzen@gmail.com>
Date: Tue, 17 Jun 2025 09:46:36 +0200
Subject: [PATCH] Implement inactivity-based visibility for back button in
 video overlay

---
 static/index.html | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index 42d3091..efb3636 100644
--- a/static/index.html
+++ b/static/index.html
@@ -95,10 +95,9 @@
 			width: 100%;
 			height: 100%;
 			display: block;
-			position: fixed;
 		}
 
-		#video-overlay-container #back-button {
+		#video-overlay-container #back-button { /* Back button is now inside the container */
 			position: absolute;
 			top: 20px;
 			left: 20px;
@@ -110,6 +109,12 @@
 			border: 1px solid white;
 			border-radius: 5px;
 			cursor: pointer;
+			opacity: 1; /* Visible by default */
+			transition: opacity 0.3s ease-in-out; /* Smooth transition */
+		}
+
+		#video-overlay-container #back-button.button-hidden {
+			opacity: 0; /* Class to hide the button */
 		}
 	</style>
 	<script>
@@ -149,6 +154,21 @@
 						let backButton = $("<button id='back-button'>Back</button>")
 											.appendTo(overlayContainer);
 
+						// Mouse inactivity logic for back button
+						let inactivityTimer;
+						function showButtonAndResetTimer() {
+							backButton.removeClass('button-hidden');
+							clearTimeout(inactivityTimer);
+							inactivityTimer = setTimeout(function() {
+								backButton.addClass('button-hidden');
+							}, 3000); // 3 seconds
+						}
+
+						overlayContainer.on('mousemove.inactivityControls', function() {
+							showButtonAndResetTimer();
+						});
+						showButtonAndResetTimer(); // Initial call to show and start timer
+
 						// Request fullscreen on the container
 						const containerEl = overlayContainer[0];
 						if (containerEl.requestFullscreen) {
@@ -165,6 +185,7 @@
 							if (videoElement && videoElement.pause) {
 								videoElement.pause();
 							}
+							clearTimeout(inactivityTimer); // Clear inactivity timer
 							// Exit fullscreen if active
 							if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) {
 								if (document.exitFullscreen) {
@@ -178,6 +199,7 @@
 								}
 							}
 							if (overlayContainer) {
+								overlayContainer.off('mousemove.inactivityControls'); // Remove specific listener
 								overlayContainer.remove();
 							}
 						}