diff --git a/src/Controls/Controller.astro b/src/Controls/Controller.astro index 77ebbfb..4867b7a 100644 --- a/src/Controls/Controller.astro +++ b/src/Controls/Controller.astro @@ -70,39 +70,39 @@ var ExitFullscreenIcon = exit_fullscreen_solid_default // Fullscreen function Fullscreen() { + // Get Fullscreen Button const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen"); + + // Create and Call Functions function Toggle_Fullscreen() { if (document.fullscreenElement) { - document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0' - document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)' - Player.style.borderRadius = '12px' - VideoControls.style.bottom = '4px' - VideoControls.style.height = 'calc(100% - 28px)' - document.exitFullscreen(); - } else if (document.webkitFullscreenElement) { - document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0' - document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)' - Player.style.borderRadius = '12px' - VideoControls.style.bottom = '4px' - VideoControls.style.height = 'calc(100% - 28px)' - document.webkitExitFullscreen(); - } else if (VideoContainer.webkitRequestFullscreen) { - document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1' - document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)' - Player.style.borderRadius = '0' - VideoControls.style.bottom = '0px' - VideoControls.style.height = '100%' - VideoContainer.webkitRequestFullscreen(); - } else { - document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1' - document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)' - Player.style.borderRadius = '0' - VideoControls.style.bottom = '0px' - VideoControls.style.height = '100%' - VideoContainer.requestFullscreen(); + ExitFullscreen(); + document.exitFullscreen() + } + else if (document.webkitFullscreenElement) { + ExitFullscreen(); + document.webkitExitFullscreen() + } + else if (VideoContainer.webkitRequestFullscreen) { + EnterFullscreen(); + VideoContainer.webkitRequestFullscreen() + } + else { + EnterFullscreen(); + VideoContainer.requestFullscreen() } Update_FullscreenButton() } + function EnterFullscreen() { + VideoContainer.classList.add('zorn-fullscreen'); + Update_FullscreenButton(); + } + function ExitFullscreen() { + VideoContainer.classList.remove('zorn-fullscreen'); + Update_FullscreenButton(); + } + + // Button Event Listener Button_Fullscreen.onclick = Toggle_Fullscreen; function Update_FullscreenButton() { if (document.fullscreenElement) { @@ -113,10 +113,17 @@ function Fullscreen() { Button_Fullscreen.innerHTML = `${ExitFullscreenIcon}`; } } + + // Gesture Player.addEventListener("dblclick", () => { Toggle_Fullscreen() Update_FullscreenButton() }); + + // Keyboard Shortcuts + var FullscreenHotkey = 'f' + function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}} + document.addEventListener("keyup", FullscreenKS); } // Play/Pause @@ -307,16 +314,6 @@ function KeyboardShortcuts(events) { } else { volume.value = volume.dataset.volume; } - } else if (key === Fullscreen_KeyboardShortcut) { - if (document.fullscreenElement) { - document.exitFullscreen(); - } else if (document.webkitFullscreenElement) { - document.webkitExitFullscreen(); - } else if (VideoContainer.webkitRequestFullscreen) { - VideoContainer.webkitRequestFullscreen(); - } else { - VideoContainer.requestFullscreen(); - } } else if (key === SkipBack_KeyboardShortcut) { Player.currentTime += -10; } else if (key === SkipForth_KeyboardShortcut) {