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
Download Patch File Download Diff File Expand all files Collapse all files

65
static/index.html
View File

@@ -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;