Rewrite Fullscreen function

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

src/Styles/Index.scss

@@ -37,15 +37,15 @@
     .video-controls {
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.7523460068) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 94%, rgb(0 0 0 / 0%) 100%);
         position: absolute;
-        bottom: 4px;
+        top: 0px;
         left: 0px;
         width: calc(100% - 24px);
+        height: calc(100% - 28px);
         padding: 12px;
-        z-index: 5;
+        z-index: 4;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        height: calc(100% - 28px);
         transition: 0.3s opacity;
         button {
             color: white;
@@ -62,10 +62,19 @@
             }
         }
         .vc-top {
-            margin-top: 12px;
             pointer-events: none;
             opacity: 0;
             transition: 0.3s opacity;
+            p {
+                color: white;
+                backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
+                -webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
+                width: max-content;
+                padding: 6px 12px;
+                border-radius: 4px;
+                margin: 0px;
+                font-size: 24px;
+            }
         }
         #vc-gestures {
             height: 100%;
@@ -232,6 +241,18 @@
     transition: 0.3s opacity !important;
 }
 
+.zorn-fullscreen {
+    .video-controls, video {
+        border-radius: 0 !important;
+    }
+    .video-controls {
+        height: calc(100% - 24px);
+        .vc-top {
+            opacity: 1 !important;
+        }
+    }
+}
+
 .big-present-button {
     position: absolute;
     top: 50%;