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

Implement video overlay with back button and fullscreen handling

Browse Source
This commit is contained in:
Sebastiaan de Schaetzen 2025-06-17 09:43:23 +02:00
parent a0b4e6d649
commit 7eb737705e
1 changed files with 90 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
static/index.html
View File

@ -78,14 +78,38 @@
box-shadow: 0 0 15px rgba(0,0,0,0.7);
}
.video-player {
width: 100%;
height: 100%;
#video-overlay-container {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
background-color: black;
z-index: 10000; /* Above other page content */
display: flex;
align-items: center;
justify-content: center;
}
#video-overlay-container .video-player {
width: 100%;
height: 100%;
display: block;
position: fixed;
}
#video-overlay-container #back-button {
position: absolute;
top: 20px;
left: 20px;
z-index: 1; /* z-index relative to siblings in container */
padding: 10px 20px;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: 1px solid white;
border-radius: 5px;
cursor: pointer;
}
</style>
<script>
@ -113,28 +137,71 @@
$("#play-button").click(function() {
if (currentVideo && currentVideo.url) {
let videoElement = $("<video controls autoplay class='video-player'></video>").attr("src", currentVideo.url).appendTo("body")[0];
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
} else if (videoElement.mozRequestFullScreen) { /* Firefox */
videoElement.mozRequestFullScreen();
} else if (videoElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
videoElement.webkitRequestFullscreen();
} else if (videoElement.msRequestFullscreen) { /* IE/Edge */
videoElement.msRequestFullscreen();
// Create the overlay container
let overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
// Create video element and append to container
let videoElement = $("<video controls autoplay class='video-player'></video>")
.attr("src", currentVideo.url)
.appendTo(overlayContainer)[0];
// Create back button and append to container
let backButton = $("<button id='back-button'>Back</button>")
.appendTo(overlayContainer);
// 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();
}
videoElement.onended = function() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
function exitVideoPlayback() {
if (videoElement && videoElement.pause) {
videoElement.pause();
}
$(videoElement).remove(); // Remove video element when playback ends
// 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.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();
}
});
}
});
})