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

Rewrite a few function and move keyboard hotkeys to parent functions

Browse source
This commit is contained in:
Korbs 2024-12-02 19:14:42 -05:00
parent 7dcbb1affa
commit 6bdf58e4f6
1 changed files with 82 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
src/Controls/Controller.astro
View file

@ -36,41 +36,20 @@ var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls') var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video') 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 // Icons
var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'; var play_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>'; var pause_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
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 fullscreen_solid_default = '<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 exit_fullscreen_solid_default = '<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 FullscreenIcon = fullscreen_solid_default
var ExitFullscreenIcon = exit_fullscreen_solid_default var ExitFullscreenIcon = exit_fullscreen_solid_default
// Fullscreen // Fullscreen
function Fullscreen() { function Fullscreen() {
// Get Fullscreen Button // Get Button
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen"); const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
// Create and Call Functions // Create and Call Functions
@ -102,7 +81,7 @@ function Fullscreen() {
Update_FullscreenButton(); Update_FullscreenButton();
} }
// Button Event Listener // Event Listener
Button_Fullscreen.onclick = Toggle_Fullscreen; Button_Fullscreen.onclick = Toggle_Fullscreen;
function Update_FullscreenButton() { function Update_FullscreenButton() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
@ -120,7 +99,7 @@ function Fullscreen() {
Update_FullscreenButton() Update_FullscreenButton()
}); });
// Keyboard Shortcuts // Keyboard Shortcut
var FullscreenHotkey = 'f' var FullscreenHotkey = 'f'
function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}} function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}}
document.addEventListener("keyup", FullscreenKS); document.addEventListener("keyup", FullscreenKS);
@ -128,7 +107,11 @@ function Fullscreen() {
// Play/Pause // Play/Pause
function PlayPause() { function PlayPause() {
// Get Buttons
const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause"); 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); Button_PlayPause.addEventListener("click", Toggle_PlayPause);
Player.addEventListener("click", Toggle_PlayPause); Player.addEventListener("click", Toggle_PlayPause);
Player.addEventListener("play", Update_PlayPauseButton); Player.addEventListener("play", Update_PlayPauseButton);
@ -140,6 +123,8 @@ function PlayPause() {
Player.pause(); Player.pause();
} }
} }
// Update Button
function Update_PlayPauseButton() { function Update_PlayPauseButton() {
if (Player.paused) { if (Player.paused) {
Button_PlayPause.setAttribute("data-title", "Play (K)"); Button_PlayPause.setAttribute("data-title", "Play (K)");
@ -149,23 +134,71 @@ function PlayPause() {
Button_PlayPause.innerHTML = `${PauseIcon}`; 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 // Skip Around
function SkipAround() { function SkipAround() {
const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards"); // Get Buttins
const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards"); if (ShowBackAndForward === true) {
Button_SkipBack.addEventListener("click", Toggle_SkipBack); var Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards")
Button_SkipForth.addEventListener("click", Toggle_SkipForth); var Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards")
function Toggle_SkipBack() {
Skip(-10);
} }
function Toggle_SkipForth() {
Skip(10); // Event Listener
} if (ShowBackAndForward === true) {
function Skip(value) { Button_SkipBack.addEventListener("click", Toggle_SkipBack);
Player.currentTime += value; 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) // Gestures (Click / Double-click)
@ -264,60 +297,15 @@ function AutoToggleControls() {
}; };
} }
// Keyboard Shortcuts // Keyboard Shortcuts (Toggle Mute)
function KeyboardShortcuts(events) { function KeyboardShortcuts() {
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";
}
function keyboardShortcuts(event) { function keyboardShortcuts(event) {
const { key } = event; const { key } = event;
if (key === PlayPause_KeyboardShortcut) { var Mute_KeyboardShortcut = "m";
if (Player.paused || Player.ended) { if (key === Mute_KeyboardShortcut) {
Player.play();
} else {
Player.pause();
}
if (Player.paused) {
Show_Controls();
} else {
setTimeout(() => {
Hide_Controls();
}, 1200);
}
} else if (key === Mute_KeyboardShortcut) {
Player.muted = !Player.muted; Player.muted = !Player.muted;
if (Player.muted) { if (Player.muted) {volume.setAttribute("data-volume", volume.value);volume.value = 0;}
volume.setAttribute("data-volume", volume.value); else {volume.value = volume.dataset.volume;}
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;
} }
} }
document.addEventListener("keyup", keyboardShortcuts); document.addEventListener("keyup", keyboardShortcuts);
@ -333,9 +321,8 @@ function PlayAgain() {
document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit' document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
} }
document.querySelector('#vc-playagain').onclick = PlayItAgain 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.opacity = '1'
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all' document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1' document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
@ -345,15 +332,15 @@ function PlayItAgain() {
Player.pause(); Player.pause();
Player.currentTime = '0'; Player.currentTime = '0';
Player.play(); Player.play();
}
} }
// Init All Functions // Init Functions
AutoToggleControls() AutoToggleControls()
if (BigPlayButton === true) {BigPresentButton()} else {null}
Fullscreen() Fullscreen()
Gestures() Gestures()
KeyboardShortcuts() KeyboardShortcuts()
PlayPause() PlayPause()
if (ShowBackAndForward === true) {SkipAround()} else {null} SkipAround()
PlayAgain() PlayAgain()
</script> </script>