From 7eb737705ea2918252a686a138d584e335878fc8 Mon Sep 17 00:00:00 2001
From: Sebastiaan de Schaetzen <sebastiaan.de.schaetzen@gmail.com>
Date: Tue, 17 Jun 2025 09:43:23 +0200
Subject: [PATCH] Implement video overlay with back button and fullscreen
 handling

---
 static/index.html | 113 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 90 insertions(+), 23 deletions(-)

diff --git a/static/index.html b/static/index.html
index 53282f1..42d3091 100644
--- a/static/index.html
+++ b/static/index.html
@@ -78,14 +78,38 @@
 			box-shadow: 0 0 15px rgba(0,0,0,0.7);
 		}
 
-		.video-player {
-			width: 100%;
-			height: 100%;
+		#video-overlay-container {
 			position: fixed;
 			top: 0;
 			left: 0;
-			z-index: 10000;
+			width: 100%;
+			height: 100%;
 			background-color: black;
+			z-index: 10000; /* Above other page content */
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		#video-overlay-container .video-player {
+			width: 100%;
+			height: 100%;
+			display: block;
+			position: fixed;
+		}
+
+		#video-overlay-container #back-button {
+			position: absolute;
+			top: 20px;
+			left: 20px;
+			z-index: 1; /* z-index relative to siblings in container */
+			padding: 10px 20px;
+			font-size: 16px;
+			background-color: rgba(0, 0, 0, 0.5);
+			color: white;
+			border: 1px solid white;
+			border-radius: 5px;
+			cursor: pointer;
 		}
 	</style>
 	<script>
@@ -113,28 +137,71 @@
 
 				$("#play-button").click(function() {
 					if (currentVideo && currentVideo.url) {
-						let videoElement = $("<video controls autoplay class='video-player'></video>").attr("src", currentVideo.url).appendTo("body")[0];
-						if (videoElement.requestFullscreen) {
-							videoElement.requestFullscreen();
-						} else if (videoElement.mozRequestFullScreen) { /* Firefox */
-							videoElement.mozRequestFullScreen();
-						} else if (videoElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
-							videoElement.webkitRequestFullscreen();
-						} else if (videoElement.msRequestFullscreen) { /* IE/Edge */
-							videoElement.msRequestFullscreen();
+						// Create the overlay container
+						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>")
+											.attr("src", currentVideo.url)
+											.appendTo(overlayContainer)[0];
+
+						// Create back button and append to container
+						let backButton = $("<button id='back-button'>Back</button>")
+											.appendTo(overlayContainer);
+
+						// Request fullscreen on the container
+						const containerEl = overlayContainer[0];
+						if (containerEl.requestFullscreen) {
+							containerEl.requestFullscreen();
+						} else if (containerEl.mozRequestFullScreen) { /* Firefox */
+							containerEl.mozRequestFullScreen();
+						} else if (containerEl.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+							containerEl.webkitRequestFullscreen();
+						} else if (containerEl.msRequestFullscreen) { /* IE/Edge */
+							containerEl.msRequestFullscreen();
 						}
-						videoElement.onended = function() {
-							if (document.exitFullscreen) {
-								document.exitFullscreen();
-							} else if (document.mozCancelFullScreen) { /* Firefox */
-								document.mozCancelFullScreen();
-							} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
-								document.webkitExitFullscreen();
-							} else if (document.msExitFullscreen) { /* IE/Edge */
-								document.msExitFullscreen();
+
+						function exitVideoPlayback() {
+							if (videoElement && videoElement.pause) {
+								videoElement.pause();
 							}
-							$(videoElement).remove(); // Remove video element when playback ends
+							// Exit fullscreen if active
+							if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) {
+								if (document.exitFullscreen) {
+									document.exitFullscreen().catch(() => {});
+								} else if (document.mozCancelFullScreen) {
+									document.mozCancelFullScreen();
+								} else if (document.webkitExitFullscreen) {
+									document.webkitExitFullscreen();
+								} else if (document.msExitFullscreen) {
+									document.msExitFullscreen();
+								}
+							}
+							if (overlayContainer) {
+								overlayContainer.remove();
+							}
+						}
+
+						// Handle video ending
+						videoElement.onended = function() {
+							exitVideoPlayback();
 						};
+
+						// Handle back button click
+						backButton.click(function() {
+							exitVideoPlayback();
+						});
+
+						// Detach previous fullscreen change listeners to avoid multiple triggers
+						$(document).off('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback');
+						// Handle fullscreen change (e.g., user pressing Esc)
+						$(document).on('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback', function() {
+							const isActuallyFullscreen = document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;
+							// Check if fullscreen was exited AND if our container was the one in fullscreen or is still around
+							if (!isActuallyFullscreen && overlayContainer && overlayContainer.length && overlayContainer.is(':visible')) {
+								exitVideoPlayback();
+							}
+						});
 					}
 				});
 			})