Fix auto hide controls function, fix onmousemove function to check video not the entire page

src/Controls/Controller.astro

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

src/Styles/Index.scss

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