Add mobile gestures, for skipping around timeline

src/Controls.astro

@@ -18,7 +18,11 @@ import './Styles/Iconoir.css'
     <div class="vc-top">
         <p>{Title}</p>
     </div>
-    <div id="vc-gestures"></div>
+    <div id="vc-gestures">
+        <span id="vc-gesture-left"></span>
+        <span id="vc-gesture-middle"></span>
+        <span id="vc-gesture-right"></span>
+    </div>
     <div class="vc-bottom">
         <button style="display: none" id="vc-playagain"><i class="iconoir-refresh"></i></button>
         <div class="vc-start">

src/Controls/Controller.astro

@@ -162,25 +162,68 @@ function SkipAround() {
 
 // Gestures (Click / Double-click)
 function Gestures() {
-  var GestureCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
+  var GesturesCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
+  var GestureCanvas_Left = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gesture-left')
+  var GestureCanvas_Middle = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gesture-middle')
+  var GestureCanvas_Right = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gesture-right')
 
-  GestureCanvas.addEventListener("click", (event) => {
+  // Middle Gesture (Single: Play/Pause   -   Double: Fullscreen)
-    if(!event) {
+  GestureCanvas_Middle.addEventListener("click", (event) => {
-      event = true
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
-      setTimeout( function() { event = false; }, 300 )
-      return false
-    }
     document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
   })
 
-  GestureCanvas.addEventListener("dblclick", (event) => {
+  GestureCanvas_Middle.addEventListener("dblclick", (event) => {
-    if(!event) {
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
-      event = true
-      setTimeout( function() { event = false; }, 300 )
-      return false
-    }
     document.querySelector('#zorn-player-' + PlayerName + ' #vc-fullscreen').click()
   })
+
+  // For Left and Right Gesture - Skip Around
+  function Skip(value) {Player.currentTime += value}
+
+  // Only show Left and Right Gesture for touch screen end-users
+  if(window.matchMedia("(pointer: coarse)").matches) {
+    GesturesCanvas.style.gridTemplateColumns = 'auto auto auto'
+    GestureCanvas_Left.style.display = 'inherit'
+    GestureCanvas_Right.style.display = 'inherit'
+  }
+
+  // Left Gesture (Single: Play/Pause   -   Double: Skip)
+  GestureCanvas_Left.addEventListener("click", (event) => {
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
+    document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
+  })
+
+  GestureCanvas_Left.addEventListener("dblclick", (event) => {
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
+    Skip(-10);
+
+    GestureCanvas_Left.style.background = 'rgba(255,255,255,0.25)'
+    GestureCanvas_Left.style.boxShadow = '0px 0px 200px 100px #ffffff14'
+    setTimeout(() => {
+      GestureCanvas_Left.style.background = 'transparent'
+      GestureCanvas_Left.style.boxShadow = '0px 0px 0px 0px transparent'
+    }, 0o500);
+  })
+
+  // Right Gesture (Single: Play/Pause   -   Double: Skip)
+  GestureCanvas_Right.addEventListener("click", (event) => {
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
+    document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
+  })
+
+  GestureCanvas_Right.addEventListener("dblclick", (event) => {
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
+    Skip(10);
+    
+    GestureCanvas_Right.style.background = 'rgba(255,255,255,0.25)'
+    GestureCanvas_Right.style.boxShadow = '0px 0px 200px 100px #ffffff14'
+   
+    setTimeout(() => {
+      GestureCanvas_Right.style.background = 'transparent'
+      GestureCanvas_Right.style.boxShadow = '0px 0px 0px 0px transparent'
+    }, 0o500);
+  })
 }
 
 // Hide Controls

src/Styles/Index.scss

@@ -69,7 +69,21 @@
         }
         #vc-gestures {
             height: 100%;
-            opacity: 0;
+            display: grid;
+            grid-template-columns: auto;
+            span {
+                background: transparent;
+                transition: 0.25s background, 0.25s box-shadow;
+                box-shadow: none;
+                &#vc-gesture-left {
+                    border-radius: 12px 16rem 16rem 12px;
+                    display: none;
+                }
+                &#vc-gesture-right {
+                    border-radius: 16rem 12px 12px 16rem;
+                    display: none;
+                }
+            }
         }
         .vc-bottom {
             display: flex;