From 6bdf58e4f669726f112209cb7f61c856a851b443 Mon Sep 17 00:00:00 2001 From: Korbs Date: Mon, 2 Dec 2024 19:14:42 -0500 Subject: [PATCH] Rewrite a few function and move keyboard hotkeys to parent functions --- src/Controls/Controller.astro | 177 ++++++++++++++++------------------ 1 file changed, 82 insertions(+), 95 deletions(-) diff --git a/src/Controls/Controller.astro b/src/Controls/Controller.astro index 4867b7a..38a1995 100644 --- a/src/Controls/Controller.astro +++ b/src/Controls/Controller.astro @@ -36,41 +36,20 @@ var VideoContainer = document.querySelector('#zorn-player-' + PlayerName) var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls') var Player = document.querySelector('#zorn-player-' + PlayerName + ' video') -// Big Present Button -function BigPresentButton() { - if (BigPlayButton === true) { - VideoControls.style.opacity = '0' - VideoControls.style.pointerEvents = 'none' - } else { - null - } - - const Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button") - Button_BigPresentButton.onclick = BigButtonClicked - - function BigButtonClicked() { - Button_BigPresentButton.style.opacity = '0' - Button_BigPresentButton.style.pointerEvents = 'none' - VideoControls.style.opacity = '1' - VideoControls.style.pointerEvents = 'all' - Player.play() - } -} - // Icons -var play_solid_default = ''; -var pause_solid_default = ''; +var play_solid_default = ''; +var pause_solid_default = ''; var PlayIcon = play_solid_default; var PauseIcon = pause_solid_default; -var fullscreen_solid_default = '' -var exit_fullscreen_solid_default = '' +var fullscreen_solid_default = '' +var exit_fullscreen_solid_default = '' var FullscreenIcon = fullscreen_solid_default var ExitFullscreenIcon = exit_fullscreen_solid_default // Fullscreen function Fullscreen() { - // Get Fullscreen Button + // Get Button const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen"); // Create and Call Functions @@ -102,7 +81,7 @@ function Fullscreen() { Update_FullscreenButton(); } - // Button Event Listener + // Event Listener Button_Fullscreen.onclick = Toggle_Fullscreen; function Update_FullscreenButton() { if (document.fullscreenElement) { @@ -120,7 +99,7 @@ function Fullscreen() { Update_FullscreenButton() }); - // Keyboard Shortcuts + // Keyboard Shortcut var FullscreenHotkey = 'f' function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}} document.addEventListener("keyup", FullscreenKS); @@ -128,7 +107,11 @@ function Fullscreen() { // Play/Pause function PlayPause() { + // Get Buttons const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause"); + var Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button") + + // Event Listern Button_PlayPause.addEventListener("click", Toggle_PlayPause); Player.addEventListener("click", Toggle_PlayPause); Player.addEventListener("play", Update_PlayPauseButton); @@ -140,6 +123,8 @@ function PlayPause() { Player.pause(); } } + + // Update Button function Update_PlayPauseButton() { if (Player.paused) { Button_PlayPause.setAttribute("data-title", "Play (K)"); @@ -149,23 +134,71 @@ function PlayPause() { Button_PlayPause.innerHTML = `${PauseIcon}`; } } + + // Keyboard Shortcut + var FullscreenHotkey = 'k' + function PlayPauseKS(event) {const { key } = event;if (key === FullscreenHotkey) { + Toggle_PlayPause(); + Update_PlayPauseButton(); + // If Big Present Button is still presented + if (BigPlayButton === true) { + VideoControls.style.opacity = '1' + VideoControls.style.pointerEvents = 'all' + Button_BigPresentButton.style.display = 'none' + } + }} + document.addEventListener("keyup", PlayPauseKS); + + //////////////////////// + // Big Present Button // + //////////////////////// + // Check if the option is enabled + if (BigPlayButton === true) { + VideoControls.style.opacity = '0' + VideoControls.style.pointerEvents = 'none' + + // Event Listern + Button_BigPresentButton.onclick = BigButtonClicked + } + + function BigButtonClicked() { + Button_BigPresentButton.style.opacity = '0' + Button_BigPresentButton.style.pointerEvents = 'none' + VideoControls.style.opacity = '1' + VideoControls.style.pointerEvents = 'all' + Player.play() + } } // Skip Around function SkipAround() { - const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards"); - const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards"); - Button_SkipBack.addEventListener("click", Toggle_SkipBack); - Button_SkipForth.addEventListener("click", Toggle_SkipForth); - function Toggle_SkipBack() { - Skip(-10); + // Get Buttins + if (ShowBackAndForward === true) { + var Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards") + var Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards") } - function Toggle_SkipForth() { - Skip(10); - } - function Skip(value) { - Player.currentTime += value; + + // Event Listener + if (ShowBackAndForward === true) { + Button_SkipBack.addEventListener("click", Toggle_SkipBack); + Button_SkipForth.addEventListener("click", Toggle_SkipForth); } + + // Functions + function Toggle_SkipBack() {Skip(-10)} + function Toggle_SkipForth() {Skip(10)} + function Skip(value) {Player.currentTime += value} + + // Keyboard Shortcuts + var SkipBackHotkey = 'j' + function SkipBackKS(event) {const { key } = event + if (key === SkipBackHotkey) {Toggle_SkipBack()}} + document.addEventListener("keyup", SkipBackKS) + + var SkipForwardHotkey = 'l' + function SkipForwardKS(event) {const { key } = event + if (key === SkipForwardHotkey) {Toggle_SkipForth()}} + document.addEventListener("keyup", SkipForwardKS) } // Gestures (Click / Double-click) @@ -264,60 +297,15 @@ function AutoToggleControls() { }; } -// Keyboard Shortcuts -function KeyboardShortcuts(events) { - if (Player.hasAttribute("keyboard-shortcut-fullscreen")) { - var Fullscreen_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-fullscreen"); - } else { - var Fullscreen_KeyboardShortcut = "f"; - } - if (Player.hasAttribute("keyboard-shortcut-mute")) { - var Mute_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-mute"); - } else { - var Mute_KeyboardShortcut = "m"; - } - if (Player.hasAttribute("keyboard-shortcut-playpause")) { - var PlayPause_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-playpause"); - } else { - var PlayPause_KeyboardShortcut = "k"; - } - if (Player.hasAttribute("keyboard-shortcut-skipback")) { - var SkipBack_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipback"); - } else { - var SkipBack_KeyboardShortcut = "j"; - } - if (Player.hasAttribute("keyboard-shortcut-skipforth")) { - var SkipForth_KeyboardShortcut = Player.getAttribute("keyboard-shortcut-skipforth"); - } else { - var SkipForth_KeyboardShortcut = "l"; - } +// Keyboard Shortcuts (Toggle Mute) +function KeyboardShortcuts() { function keyboardShortcuts(event) { const { key } = event; - if (key === PlayPause_KeyboardShortcut) { - if (Player.paused || Player.ended) { - Player.play(); - } else { - Player.pause(); - } - if (Player.paused) { - Show_Controls(); - } else { - setTimeout(() => { - Hide_Controls(); - }, 1200); - } - } else if (key === Mute_KeyboardShortcut) { + var Mute_KeyboardShortcut = "m"; + if (key === Mute_KeyboardShortcut) { Player.muted = !Player.muted; - if (Player.muted) { - volume.setAttribute("data-volume", volume.value); - volume.value = 0; - } else { - volume.value = volume.dataset.volume; - } - } else if (key === SkipBack_KeyboardShortcut) { - Player.currentTime += -10; - } else if (key === SkipForth_KeyboardShortcut) { - Player.currentTime += 10; + if (Player.muted) {volume.setAttribute("data-volume", volume.value);volume.value = 0;} + else {volume.value = volume.dataset.volume;} } } document.addEventListener("keyup", keyboardShortcuts); @@ -333,9 +321,8 @@ function PlayAgain() { document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit' } document.querySelector('#vc-playagain').onclick = PlayItAgain -} -function PlayItAgain() { + function PlayItAgain() { document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1' document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all' document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1' @@ -345,15 +332,15 @@ function PlayItAgain() { Player.pause(); Player.currentTime = '0'; Player.play(); + } } -// Init All Functions +// Init Functions AutoToggleControls() -if (BigPlayButton === true) {BigPresentButton()} else {null} Fullscreen() Gestures() KeyboardShortcuts() PlayPause() -if (ShowBackAndForward === true) {SkipAround()} else {null} +SkipAround() PlayAgain() \ No newline at end of file