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

Refactor javascript code a little

Browse Source
This commit is contained in:
Sebastiaan de Schaetzen
2025-06-17 10:01:08 +02:00
parent 3857171bdb
commit c8b6798f9b
1 changed files with 154 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
static/index.html
View File

@@ -158,12 +158,104 @@
$(".video-container").css("display", "flex"); $(".video-container").css("display", "flex");
} }
let currentVideo = null;
let videoElement = null;
let overlayContainer = null;
let inactivityTimer = null;
let backButton = null;
let customControls = null;
let playPauseButton = null;
let seekBar = null;
function exitVideoPlayback() {
if (videoElement && videoElement.pause) {
videoElement.pause();
}
clearTimeout(inactivityTimer);
if (overlayContainer) {
overlayContainer.css('cursor', 'default');
overlayContainer.off('mousemove.inactivityControls');
// Detach document-level fullscreen listener specific to this playback
$(document).off('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback', handleFullscreenChange);
overlayContainer.remove();
}
// Attempt to exit fullscreen if the document is still in fullscreen mode
// and our container was likely the one in fullscreen.
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();
}
}
}
function showControlsAndResetTimer() {
backButton.removeClass('button-hidden');
customControls.removeClass('controls-hidden');
overlayContainer.css('cursor', 'default'); // Show cursor
clearTimeout(inactivityTimer);
inactivityTimer = setTimeout(function() {
backButton.addClass('button-hidden');
customControls.addClass('controls-hidden');
overlayContainer.css('cursor', 'none'); // Hide cursor
}, 3000); // 3 seconds
}
// --- Moved Helper Function Definitions ---
function handlePlayPauseClick() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
}
function updatePlayPauseButtonState() {
if (!playPauseButton) return; // Ensure button exists
if (videoElement.paused) {
playPauseButton.text('►'); // Play icon
} else {
playPauseButton.text('❚❚'); // Pause icon
}
}
function handleVideoLoadedMetadata() {
if (!seekBar) return; // Ensure seekbar exists
seekBar.attr('max', videoElement.duration);
}
function handleVideoTimeUpdate() {
if (!seekBar) return; // Ensure seekbar exists
seekBar.val(videoElement.currentTime);
const percentage = (videoElement.currentTime / videoElement.duration) * 100;
seekBar.css('background', `linear-gradient(to right, #3498db ${percentage}%, #555 ${percentage}%)`);
}
function handleSeekBarInput() {
if (!seekBar) return; // Ensure seekbar exists
videoElement.currentTime = seekBar.val();
}
function handleFullscreenChange() {
const isActuallyFullscreen = document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;
if (!isActuallyFullscreen && overlayContainer && overlayContainer.length && !overlayContainer.is(document.fullscreenElement)) {
if (overlayContainer.is(':visible')) {
exitVideoPlayback();
}
}
}
$(document).ready(function() { $(document).ready(function() {
// Pre-set all thumbnails to a placeholder state // Pre-set all thumbnails to a placeholder state
$(".video-thumbnail").attr("src", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 9'%3E%3C/svg%3E"); $(".video-thumbnail").attr("src", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 9'%3E%3C/svg%3E");
$.getJSON("/api/homepage", function(data) { $.getJSON("/api/homepage", function(data) {
let currentVideo = data.currentVideo; currentVideo = data.currentVideo;
// previousVideo = data.previousVideo; // previousVideo = data.previousVideo;
// nextVideo = data.nextVideo; // nextVideo = data.nextVideo;
// //
@@ -174,138 +266,68 @@
// Hide loader and show videos // Hide loader and show videos
hideLoader(); hideLoader();
$("#play-button").click(function() {
if (currentVideo && currentVideo.url) {
// Create the overlay container
let overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
// Create video element and append to container
let videoElement = $("<video autoplay class='video-player'></video>") // Removed 'controls' attribute
.attr("src", currentVideo.url)
.appendTo(overlayContainer)[0];
// Create back button and append to container
let backButton = $("<button id='back-button'>Back</button>")
.appendTo(overlayContainer);
// Create custom video controls container
let customControls = $("<div id='custom-video-controls'></div>").appendTo(overlayContainer);
let playPauseButton = $("<button id='custom-play-pause-button'>❚❚</button>").appendTo(customControls); // Initial state: Pause icon
let seekBar = $("<input type='range' id='custom-seek-bar' value='0' />").appendTo(customControls);
// Mouse inactivity logic for back button, controls, and cursor
let inactivityTimer;
function showControlsAndResetTimer() {
backButton.removeClass('button-hidden');
customControls.removeClass('controls-hidden');
overlayContainer.css('cursor', 'default'); // Show cursor
clearTimeout(inactivityTimer);
inactivityTimer = setTimeout(function() {
backButton.addClass('button-hidden');
customControls.addClass('controls-hidden');
overlayContainer.css('cursor', 'none'); // Hide cursor
}, 3000); // 3 seconds
}
overlayContainer.on('mousemove.inactivityControls', function() {
showControlsAndResetTimer();
});
showControlsAndResetTimer(); // Initial call
// Custom Controls Logic
// Play/Pause Button
playPauseButton.click(function() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
});
$(videoElement).on('play', function() {
playPauseButton.text('❚❚'); // Pause icon
});
$(videoElement).on('pause', function() {
playPauseButton.text('►'); // Play icon
});
// Seek Bar
$(videoElement).on('loadedmetadata', function() {
seekBar.attr('max', videoElement.duration);
});
$(videoElement).on('timeupdate', function() {
seekBar.val(videoElement.currentTime);
// Optional: Update seek bar background to show progress
const percentage = (videoElement.currentTime / videoElement.duration) * 100;
seekBar.css('background', `linear-gradient(to right, #3498db ${percentage}%, #555 ${percentage}%)`);
});
seekBar.on('input', function() {
videoElement.currentTime = $(this).val();
});
// 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();
}
function exitVideoPlayback() {
if (videoElement && videoElement.pause) {
videoElement.pause();
}
clearTimeout(inactivityTimer); // Clear inactivity timer
if (overlayContainer) { // Ensure overlayContainer exists before trying to modify it
overlayContainer.css('cursor', 'default'); // Always reset cursor on exit
}
// 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.off('mousemove.inactivityControls'); // Remove specific listener
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();
}
});
}
});
}) })
$("#play-button").click(function() {
if (currentVideo && currentVideo.url) {
// Create the overlay container
overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
// Create video element and append to container
videoElement = $("<video autoplay class='video-player'></video>") // Removed 'controls' attribute
.attr("src", currentVideo.url)
.appendTo(overlayContainer)[0];
// Create back button and append to container
backButton = $("<button id='back-button'>Back</button>")
.appendTo(overlayContainer);
// Create custom video controls container
customControls = $("<div id='custom-video-controls'></div>").appendTo(overlayContainer);
playPauseButton = $("<button id='custom-play-pause-button'>❚❚</button>").appendTo(customControls); // Assign to global var
seekBar = $("<input type='range' id='custom-seek-bar' value='0' />").appendTo(customControls); // Assign to global var
// Remove local inactivityTimer declaration, it's global now
// let inactivityTimer;
// --- Setup Inactivity Controls ---
overlayContainer.on('mousemove.inactivityControls', showControlsAndResetTimer);
showControlsAndResetTimer(); // Initial call
// --- Setup Custom Video Controls ---
playPauseButton.click(handlePlayPauseClick);
$(videoElement).on('play', updatePlayPauseButtonState);
$(videoElement).on('pause', updatePlayPauseButtonState);
$(videoElement).on('loadedmetadata', handleVideoLoadedMetadata);
$(videoElement).on('timeupdate', handleVideoTimeUpdate);
seekBar.on('input', handleSeekBarInput);
// Initial call to set play/pause button state, especially if autoplay is effective
updatePlayPauseButtonState();
// --- Setup Video End and Back Button ---
$(videoElement).on('ended', exitVideoPlayback);
backButton.click(exitVideoPlayback);
// --- Setup Fullscreen Change Listener ---
// Detach any previous listeners first (using the specific named handler for accuracy if needed, but general works too)
$(document).off('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback');
$(document).on('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback', handleFullscreenChange);
// --- Request Fullscreen ---
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();
}
// NOTE: exitVideoPlayback was defined above.
// The original snippet showed its definition here, it's now grouped with other helpers.
}
});
}) })
</script> </script>
</head> </head>