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