From 989a45e6ae4db4c6ad9f41b6e4b6362e1ad38dbf Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 2 Dec 2024 00:04:47 -0500
Subject: [PATCH] Rewrite Fullscreen function

---
 src/Controls/Controller.astro | 71 +++++++++++++++++------------------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/Controls/Controller.astro b/src/Controls/Controller.astro
index 77ebbfb..4867b7a 100644
--- a/src/Controls/Controller.astro
+++ b/src/Controls/Controller.astro
@@ -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) {