From 88e8e03706d009daaffcc7921c867698d84a09bc Mon Sep 17 00:00:00 2001
From: Sebastiaan de Schaetzen <sebastiaan.de.schaetzen@gmail.com>
Date: Tue, 17 Jun 2025 10:45:31 +0200
Subject: [PATCH] Refactor keyboard navigation for video controls to streamline
 event handling

---
 static/index.html | 65 +++++++++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/static/index.html b/static/index.html
index 6b0008f..27e489a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -177,7 +177,6 @@
 		let customControls = null;
 		let playPauseButton = null;
 		let seekBar = null;
-        let videoPlaying = false;
 
 		function exitVideoPlayback() {
 			if (videoElement && videoElement.pause) {
@@ -219,8 +218,6 @@
 			if ($(".video-container").is(":visible") && $('#play-button').length) {
 				$('#play-button').focus();
 			}
-
-            videoPlaying = false;
 		}
 
 		function showControlsAndResetTimer() {
@@ -244,6 +241,7 @@
 					videoElement.pause();
 				}
 			}
+            updatePlayPauseButtonState();
 		}
 
 		function updatePlayPauseButtonState() {
@@ -344,7 +342,6 @@
 					}
 
 					videoElement.play().catch(err => console.error("Error attempting to play video:", err));
-                    videoPlaying = true;
 				}
 			});
 
@@ -389,20 +386,36 @@
 
                 // Global key handling for overlay
                 if (isOverlayVisible) {
-                    if (e.key === 'Backspace' || e.keyCode === 8) { // Backspace
-                        e.preventDefault();
-                        if (backButton && backButton.length) backButton.click();
-                        return;
-                    }
-                    if (e.keyCode === 179) { // MediaPlayPause
-                        e.preventDefault();
-                        if (playPauseButton && playPauseButton.length) playPauseButton.click();
-                        return;
-                    }
-                    if (e.keyCode === 178) { // MediaStop
-                         e.preventDefault();
-                         exitVideoPlayback();
-                         return;
+                    switch (e.key || e.keyCode) {
+						case 'Backspace':
+						case 8:
+							e.preventDefault();
+							if (backButton && backButton.length) backButton.click();
+							return;
+						case 'Enter':
+						case 13:
+						case 179: // MediaPlayPause
+							e.preventDefault();
+							if (playPauseButton && playPauseButton.length) playPauseButton.click();
+							return;
+						case 178: // MediaStop
+							 e.preventDefault();
+							 exitVideoPlayback();
+							 return;
+						case 'ArrowLeft':
+						case 37: // ArrowLeft
+                            videoElement.currentTime = Math.max(0, videoElement.currentTime - 5); // Seek back 5s
+                            handleVideoTimeUpdate();
+                            showControlsAndResetTimer();
+                            e.preventDefault();
+                            return;
+						case 'ArrowRight':
+						case 39: // ArrowRight
+							videoElement.currentTime = Math.min(videoElement.duration, videoElement.currentTime + 5); // Seek forward 5s
+							handleVideoTimeUpdate();
+							showControlsAndResetTimer();
+							e.preventDefault();
+							return;
                     }
                 }
 
@@ -416,11 +429,7 @@
                 switch (e.key || e.keyCode) {
                     case 'ArrowLeft':
                     case 37: // ArrowLeft
-						if (videoPlaying) {
-                            videoElement.currentTime = Math.max(0, videoElement.currentTime - 5); // Seek back 5s
-                            handleVideoTimeUpdate();
-                            showControlsAndResetTimer();
-						} else if (currentIndex !== -1) {
+						if (currentIndex !== -1) {
                             let nextIndex = (currentIndex - 1 + activeFocusableSet.length) % activeFocusableSet.length;
                             activeFocusableSet[nextIndex].focus();
                         } else if (activeFocusableSet.length > 0) { // If nothing specific focused, focus last
@@ -431,11 +440,7 @@
 
                     case 'ArrowRight':
                     case 39: // ArrowRight
-						if (videoPlaying) {
-                            videoElement.currentTime = Math.min(videoElement.duration, videoElement.currentTime + 5); // Seek forward 5s
-                            handleVideoTimeUpdate();
-                            showControlsAndResetTimer();
-						} else if (currentIndex !== -1) {
+						if (currentIndex !== -1) {
                             let nextIndex = (currentIndex + 1) % activeFocusableSet.length;
                             activeFocusableSet[nextIndex].focus();
                         } else if (activeFocusableSet.length > 0) { // If nothing specific focused, focus first
@@ -446,9 +451,7 @@
 
                     case 'Enter':
                     case 13: // Enter
-						if (videoPlaying) {
-                            $('#play-button').click();
-						} else if (currentIndex !== -1) {
+						if (currentIndex !== -1) {
                             activeFocusableSet[currentIndex].click();
                         }
                         keyHandled = true;