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); box-shadow: 0 0 15px rgba(0,0,0,0.7);
} }
.video-player { #video-overlay-container {
width: 100%;
height: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 10000; width: 100%;
height: 100%;
background-color: black; 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> </style>
<script> <script>
@ -113,28 +137,71 @@
$("#play-button").click(function() { $("#play-button").click(function() {
if (currentVideo && currentVideo.url) { if (currentVideo && currentVideo.url) {
let videoElement = $("<video controls autoplay class='video-player'></video>").attr("src", currentVideo.url).appendTo("body")[0]; // Create the overlay container
if (videoElement.requestFullscreen) { let overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
videoElement.requestFullscreen();
} else if (videoElement.mozRequestFullScreen) { /* Firefox */ // Create video element and append to container
videoElement.mozRequestFullScreen(); let videoElement = $("<video controls autoplay class='video-player'></video>")
} else if (videoElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ .attr("src", currentVideo.url)
videoElement.webkitRequestFullscreen(); .appendTo(overlayContainer)[0];
} else if (videoElement.msRequestFullscreen) { /* IE/Edge */
videoElement.msRequestFullscreen(); // 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) { function exitVideoPlayback() {
document.exitFullscreen(); if (videoElement && videoElement.pause) {
} else if (document.mozCancelFullScreen) { /* Firefox */ videoElement.pause();
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
} }
$(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();
}
});
} }
}); });
}) })