seeseemelk/vivaplusdl
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor keyboard navigation for video controls to streamline event handling

Browse Source
This commit is contained in:
Sebastiaan de Schaetzen 2025-06-17 10:45:31 +02:00
parent 3d603e1b68
commit 88e8e03706
1 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/index.html
View File

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