src/Controls/Controller.astro

@@ -1,12 +1,11 @@
 ---
 const {
   PlayerName,
-  BigPlayButton,
-  ShowBackAndForward
+  BigPlayButton
 } = Astro.props
 ---
 
-<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward}}>
+<script define:vars={{PlayerName, BigPlayButton}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -229,31 +228,35 @@ function Gestures() {
 
 // Hide Controls
 function AutoToggleControls() {
-  function Hide_Controls() {
-    if (Player.paused) {return}
-    else {VideoControls.classList.add("zorn-controls-hide")}
+  function Hide_Controls2() {
+    if (Player.paused) {
+      return;
+    } else {
+      document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.add("hide");
+    }
   }
-  function Show_Controls() {VideoControls.classList.remove("zorn-controls-hide")}
-  VideoControls.addEventListener("mouseenter", Show_Controls);
-  VideoControls.addEventListener("mouseleave", Hide_Controls);
+  function Show_Controls2() {
+    document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.remove("hide");
+  }
+  VideoControls.addEventListener("mouseenter", Show_Controls2);
+  VideoControls.addEventListener("mouseleave", Hide_Controls2);
   var mouseTimer = null, cursorVisible = true;
-
   function Hide_Cursor() {
     mouseTimer = null;
-    VideoControls.style.cursor = "none";
+    VideoContainer.style.cursor = "none";
     cursorVisible = false;
-    Hide_Controls();
+    Hide_Controls2();
   }
-  VideoControls.onmousemove = function () {
+  document.onmousemove = function () {
     if (mouseTimer) {
       window.clearTimeout(mouseTimer);
-      Show_Controls();
+      Show_Controls2();
     }
     if (!cursorVisible) {
-      VideoControls.style.cursor = "default";
+      VideoContainer.style.cursor = "default";
       cursorVisible = true;
     }
-    mouseTimer = window.setTimeout(Hide_Cursor, 2400);
+    mouseTimer = window.setTimeout(Hide_Cursor, 3200);
   };
 }
 
@@ -357,6 +360,6 @@ Fullscreen()
 Gestures()
 KeyboardShortcuts()
 PlayPause()
-if (ShowBackAndForward === true) {SkipAround()} else {null}
+SkipAround()
 PlayAgain()
 </script>

src/Controls/Seek.astro

@@ -110,5 +110,5 @@ function Seek() {
 
     initializeVideo()
 }
-setTimeout(() => {Seek()}, 1000) // Prevent invalid date error
+Seek()
 </script>

src/Player.astro

@@ -92,7 +92,7 @@ import './Styles/Iconoir.css'
         :
         <Controls Subtitles={Subtitles} ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
     }
-    <Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton} ShowBackAndForward={ShowBackAndForward}/>
+    <Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton}/>
     <Seek PlayerName={PlayerName}/>
 </div>
 

src/Styles/Index.scss

@@ -227,9 +227,9 @@
     }
 }
 
-.zorn-controls-hide {
-    opacity: 0 !important;
-    transition: 0.3s opacity !important;
+.video-controls.hide {
+    opacity: 0;
+    transition: 0.3s opacity;
 }
 
 .big-present-button {
@@ -241,9 +241,7 @@
     color: white;
     border: none;
     border-radius: 6rem;
-    background: transparent;
-    backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
-    -webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
+    background: rgba(0, 0, 0, 0.32);
     display: flex;
     align-items: center;
     justify-content: center;