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

Refactor video thumbnail handling and improve overlay positioning for enhanced user experience

Browse Source
This commit is contained in:
Sebastiaan de Schaetzen
2025-06-17 16:00:10 +02:00
parent f226d1f402
commit f22ff5c1a4
1 changed files with 95 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
static/index.html
View File

@@ -52,7 +52,9 @@
background-color: #444;
aspect-ratio: 16/9;
width: 20vw;
transition: width 0.3s ease, box-shadow 0.3s ease;
transition: width 0.3s ease, box-shadow 0.3s ease, left 0.3s ease;
transform: translate(-50%, 0);
position: fixed;
}
.video-thumbnail.focussed {
@@ -104,6 +106,7 @@
width: 100%;
height: 100%;
display: block;
position: fixed;
}
#video-overlay-container #back-button { /* Back button is now inside the container */
@@ -299,7 +302,7 @@
}
}
let videoThumbnails = [];
let videoInfo = [];
let selectedThumbnailIndex = 0;
/**
@@ -314,12 +317,19 @@
let index;
if (append) {
$("#video-container").append(thumbnail);
index = videoThumbnails.length;
videoThumbnails.push(thumbnail)
index = videoInfo.length;
videoInfo.push({
thumbnail,
data
})
} else {
$("#video-container").prepend(thumbnail);
index = 0;
videoThumbnails.unshift(thumbnail);
videoInfo.unshift({
thumbnail,
data
});
selectedThumbnailIndex++;
}
if (selected) {
thumbnail.classList.add("focussed");
@@ -332,14 +342,83 @@
* @param index The index of the thumbnail to select.
*/
function selectThumbnail(index) {
if (index < 0 || index >= videoThumbnails.length) return; // Out of bounds check
if (selectedThumbnailIndex !== -1 && videoThumbnails[selectedThumbnailIndex]) {
videoThumbnails[selectedThumbnailIndex].classList.remove("focussed");
if (index < 0 || index >= videoInfo.length) return; // Out of bounds check
if (selectedThumbnailIndex !== -1 && videoInfo[selectedThumbnailIndex]) {
videoInfo[selectedThumbnailIndex].thumbnail.classList.remove("focussed");
}
selectedThumbnailIndex = index;
videoThumbnails[selectedThumbnailIndex].classList.add("focussed");
// $("#video-container")[0].style.position = "relative";
// $("#video-container")[0].style.left = (-index * 5) + "vw";
videoInfo[selectedThumbnailIndex].thumbnail.classList.add("focussed");
for (let i = 0; i < videoInfo.length; i++) {
if (i < selectedThumbnailIndex - 1) {
videoInfo[i].thumbnail.style.left = "-20%";
} else if (i === selectedThumbnailIndex - 1) {
videoInfo[i].thumbnail.style.left = "15%";
} else if (i === selectedThumbnailIndex) {
videoInfo[i].thumbnail.style.left = "50%";
} else if (i === selectedThumbnailIndex + 1) {
videoInfo[i].thumbnail.style.left = "85%";
} else {
videoInfo[i].thumbnail.style.left = "120%";
}
}
}
/**
* Starts the currently selected video.
*/
function startVideo() {
showSpinner();
let currentVideo = videoInfo[selectedThumbnailIndex].data
// Clear previous handlers and set new ones for this specific load attempt
videoElement.oncanplaythrough = null;
videoElement.onerror = null;
videoElement.oncanplaythrough = function() {
hideSpinner();
videoElement.oncanplaythrough = null; // Clean up handler
videoElement.onerror = null; // Clean up handler
videoElement.play().catch(err => {
console.error("Error attempting to play video:", err);
exitVideoPlayback(); // Exit overlay on play error
});
};
videoElement.onerror = function() {
console.error("Error loading video.");
hideSpinner();
videoElement.oncanplaythrough = null; // Clean up handler
videoElement.onerror = null; // Clean up handler
exitVideoPlayback(); // Exit overlay on load error
};
videoElement.src = currentVideo.url;
videoElement.load();
// --- Setup Inactivity Controls (session-specific) ---
showControlsAndResetTimer(); // Initial call
updatePlayPauseButtonState(); // Initial state for the button
// Show overlay and request fullscreen
overlayContainer.css('display', 'flex');
const containerEl = overlayContainer[0];
if (containerEl.requestFullscreen) {
containerEl.requestFullscreen().catch(err => console.error("Error attempting to enable full-screen mode:", err));
} else if (containerEl.mozRequestFullScreen) {
containerEl.mozRequestFullScreen();
} else if (containerEl.webkitRequestFullscreen) {
containerEl.webkitRequestFullscreen();
} else if (containerEl.msRequestFullscreen) {
containerEl.msRequestFullscreen();
}
// FOCUS: Set focus in the video overlay
if (playPauseButton && playPauseButton.length) {
playPauseButton.focus();
}
updatePlayPauseButtonState()
}
$(document).ready(function() {
@@ -358,9 +437,9 @@
$.getJSON("/api/homepage", function(data) {
createVideoThumbnailElement(data.currentVideo, true, true);
for (let i = 0; i < 10; i++)
{
createVideoThumbnailElement(data.nextVideo, false, true);
}
for (let i = 0; i < 10; i++)
createVideoThumbnailElement(data.nextVideo, false, false);
// currentVideo = data.currentVideo;
// nextVideo = data.nextVideo;
// $("#current-thumb").attr("src", currentVideo.thumbnail);
@@ -369,6 +448,7 @@
hideSpinner();
showVideoContainer();
selectThumbnail(selectedThumbnailIndex);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error("Failed to load homepage data:", textStatus, errorThrown);
hideSpinner();
@@ -384,60 +464,6 @@
if (backButton) backButton.click(exitVideoPlayback);
$("#play-button").click(function() {
if (currentVideo && currentVideo.url && videoElement && overlayContainer) {
showSpinner();
// Clear previous handlers and set new ones for this specific load attempt
videoElement.oncanplaythrough = null;
videoElement.onerror = null;
videoElement.oncanplaythrough = function() {
hideSpinner();
videoElement.oncanplaythrough = null; // Clean up handler
videoElement.onerror = null; // Clean up handler
videoElement.play().catch(err => {
console.error("Error attempting to play video:", err);
exitVideoPlayback(); // Exit overlay on play error
});
};
videoElement.onerror = function() {
console.error("Error loading video.");
hideSpinner();
videoElement.oncanplaythrough = null; // Clean up handler
videoElement.onerror = null; // Clean up handler
exitVideoPlayback(); // Exit overlay on load error
};
videoElement.src = currentVideo.url;
videoElement.load();
// --- Setup Inactivity Controls (session-specific) ---
showControlsAndResetTimer(); // Initial call
updatePlayPauseButtonState(); // Initial state for the button
// Show overlay and request fullscreen
overlayContainer.css('display', 'flex');
const containerEl = overlayContainer[0];
if (containerEl.requestFullscreen) {
containerEl.requestFullscreen().catch(err => console.error("Error attempting to enable full-screen mode:", err));
} else if (containerEl.mozRequestFullScreen) {
containerEl.mozRequestFullScreen();
} else if (containerEl.webkitRequestFullscreen) {
containerEl.webkitRequestFullscreen();
} else if (containerEl.msRequestFullscreen) {
containerEl.msRequestFullscreen();
}
// FOCUS: Set focus in the video overlay
if (playPauseButton && playPauseButton.length) {
playPauseButton.focus();
}
}
});
// --- Setup Custom Video Controls Events (session-specific for video element) ---
$(videoElement).on('play.currentVideo', updatePlayPauseButtonState);
$(videoElement).on('pause.currentVideo', updatePlayPauseButtonState);
@@ -519,16 +545,14 @@
case 'ArrowRight':
case 39: // ArrowRight
nextIndex = Math.min(selectedThumbnailIndex + 1, videoThumbnails.length - 1);
nextIndex = Math.min(selectedThumbnailIndex + 1, videoInfo.length - 1);
selectThumbnail(nextIndex);
keyHandled = true;
break;
case 'Enter':
case 13: // Enter
if (currentIndex !== -1) {
activeFocusableSet[currentIndex].click();
}
startVideo();
keyHandled = true;
break;