MinPluto/Zorn
MinPluto/Zorn
1
0
Fork 0
Code Issues Activity

Fix fullscreen button updates, add "Play again?" option when video ends

Browse source
This commit is contained in:
Korbs 2024-11-01 21:37:51 -04:00
parent ce4007160a
commit 9bcbd72237
1 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/Controls/Controller.astro
View file

@ -34,6 +34,11 @@ var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24p
var PlayIcon = play_solid_default; var PlayIcon = play_solid_default;
var PauseIcon = pause_solid_default; var PauseIcon = pause_solid_default;
var fullscreen_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M15 9L20 4M20 4V8M20 4H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 15L4 20M4 20V16M4 20H8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
var exit_fullscreen_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M4 20L9 15M9 15V19M9 15H5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L15 9M15 9V5M15 9H19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
var FullscreenIcon = fullscreen_solid_default
var ExitFullscreenIcon = exit_fullscreen_solid_default
// Fullscreen // Fullscreen
function Fullscreen() { function Fullscreen() {
const Button_Fullscreen = document.getElementById("vc-fullscreen"); const Button_Fullscreen = document.getElementById("vc-fullscreen");
@ -67,13 +72,16 @@ function Fullscreen() {
document.querySelector('.video-container .video-controls').style.height = '100%' document.querySelector('.video-container .video-controls').style.height = '100%'
VideoContainer.requestFullscreen(); VideoContainer.requestFullscreen();
} }
Update_FullscreenButton()
} }
Button_Fullscreen.onclick = Toggle_Fullscreen; Button_Fullscreen.onclick = Toggle_Fullscreen;
function Update_FullscreenButton() { function Update_FullscreenButton() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)"); Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
Button_Fullscreen.innerHTML = `${FullscreenIcon}`;
} else { } else {
Button_Fullscreen.setAttribute("data-title", "Full screen (f)"); Button_Fullscreen.setAttribute("data-title", "Full screen (f)");
Button_Fullscreen.innerHTML = `${ExitFullscreenIcon}`;
} }
} }
Player.addEventListener("dblclick", () => { Player.addEventListener("dblclick", () => {
@ -82,6 +90,17 @@ function Fullscreen() {
}); });
} }
function Update_PlayPauseButton() {
if (Player.paused) {
Button_PlayPause.setAttribute("data-title", "Play (K)");
Button_PlayPause.innerHTML = `${PlayIcon}`;
} else {
Button_PlayPause.setAttribute("data-title", "Pause (K)");
Button_PlayPause.innerHTML = `${PauseIcon}`;
}
}
// Play/Pause // Play/Pause
function PlayPause() { function PlayPause() {
const Button_PlayPause = document.querySelector(".video-controls #vc-playpause"); const Button_PlayPause = document.querySelector(".video-controls #vc-playpause");
@ -227,10 +246,35 @@ function KeyboardShortcuts(events) {
document.addEventListener("keyup", keyboardShortcuts); document.addEventListener("keyup", keyboardShortcuts);
} }
// If Media Ends, fade main controls and show a "Replay" button
function PlayAgain() {
Player.onended = (event) => {
document.querySelector('.vc-start').style.opacity = '0'
document.querySelector('.vc-start').style.pointerEvents = 'none'
document.querySelector('.vc-center').style.opacity = '0'
document.querySelector('.vc-center').style.pointerEvents = 'none'
document.querySelector('#vc-playagain').style.display = 'inherit'
}
document.querySelector('#vc-playagain').onclick = PlayItAgain
}
function PlayItAgain() {
document.querySelector('.vc-start').style.opacity = '1'
document.querySelector('.vc-start').style.pointerEvents = 'all'
document.querySelector('.vc-center').style.opacity = '1'
document.querySelector('.vc-center').style.pointerEvents = 'all'
document.querySelector('#vc-playagain').style.display = 'none'
Player.pause();
Player.currentTime = '0';
Player.play();
}
// Init All Functions // Init All Functions
AutoToggleControls() AutoToggleControls()
Fullscreen() Fullscreen()
KeyboardShortcuts() KeyboardShortcuts()
PlayPause() PlayPause()
SkipAround() SkipAround()
PlayAgain()
</script> </script>