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 // Fullscreen
function Fullscreen() { function Fullscreen() {
// Get Fullscreen 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
function Toggle_Fullscreen() { function Toggle_Fullscreen() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0' ExitFullscreen();
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%)' document.exitFullscreen()
Player.style.borderRadius = '12px' }
VideoControls.style.bottom = '4px' else if (document.webkitFullscreenElement) {
VideoControls.style.height = 'calc(100% - 28px)' ExitFullscreen();
document.exitFullscreen(); document.webkitExitFullscreen()
} else if (document.webkitFullscreenElement) { }
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0' else if (VideoContainer.webkitRequestFullscreen) {
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%)' EnterFullscreen();
Player.style.borderRadius = '12px' VideoContainer.webkitRequestFullscreen()
VideoControls.style.bottom = '4px' }
VideoControls.style.height = 'calc(100% - 28px)' else {
document.webkitExitFullscreen(); EnterFullscreen();
} else if (VideoContainer.webkitRequestFullscreen) { VideoContainer.requestFullscreen()
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();
} }
Update_FullscreenButton() 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; Button_Fullscreen.onclick = Toggle_Fullscreen;
function Update_FullscreenButton() { function Update_FullscreenButton() {
if (document.fullscreenElement) { if (document.fullscreenElement) {
@ -113,10 +113,17 @@ function Fullscreen() {
Button_Fullscreen.innerHTML = `${ExitFullscreenIcon}`; Button_Fullscreen.innerHTML = `${ExitFullscreenIcon}`;
} }
} }
// Gesture
Player.addEventListener("dblclick", () => { Player.addEventListener("dblclick", () => {
Toggle_Fullscreen() Toggle_Fullscreen()
Update_FullscreenButton() Update_FullscreenButton()
}); });
// Keyboard Shortcuts
var FullscreenHotkey = 'f'
function FullscreenKS(event) {const { key } = event;if (key === FullscreenHotkey) {Toggle_Fullscreen()}}
document.addEventListener("keyup", FullscreenKS);
} }
// Play/Pause // Play/Pause
@ -307,16 +314,6 @@ function KeyboardShortcuts(events) {
} else { } else {
volume.value = volume.dataset.volume; 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) { } else if (key === SkipBack_KeyboardShortcut) {
Player.currentTime += -10; Player.currentTime += -10;
} else if (key === SkipForth_KeyboardShortcut) { } else if (key === SkipForth_KeyboardShortcut) {