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

Rewrite Fullscreen function

Browse source
This commit is contained in:
Korbs 2024-12-02 00:04:47 -05:00
parent a48b9ab983
commit 989a45e6ae
1 changed files with 34 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/Controls/Controller.astro
View file

@ -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) {