Update demo

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) => {
-    if(!event) {
-      event = true
-      setTimeout( function() { event = false; }, 300 )
-      return false
-    }
+  // Middle Gesture (Single: Play/Pause   -   Double: Fullscreen)
+  GestureCanvas_Middle.addEventListener("click", (event) => {
+    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
     document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
   })
 
-  GestureCanvas.addEventListener("dblclick", (event) => {
-    if(!event) {
-      event = true
-      setTimeout( function() { event = false; }, 300 )
-      return false
-    }
+  GestureCanvas_Middle.addEventListener("dblclick", (event) => {
+    if(!event) {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;

test/src/components/Header.astro

@@ -9,7 +9,8 @@ import Switcher from './Switcher.astro'
         <a href="/about">About Demo</a>
     </div>
     <div class="header-end">
-        <Switcher/>
+        <a href="https://studio.sudovanilla.org/" target="_blank">MinPluto</a>
+        <a href="https://ark.sudovanilla.org/MinPluto/Zorn" target="_blank">Source Code</a>
     </div>
 </header>
 
@@ -22,12 +23,14 @@ header {
   margin-top: -8px;
   max-width: 1200px;
   height: 64px;
-  .header-start {
+  color: white;
+  .header-start, .header-end {
     display: flex;
     align-items: center;
     gap: 12px;
     a {
         text-decoration: none;
+        color: white;
         &:hover {
             text-decoration: underline;
         }

test/src/components/Info.astro

@@ -9,7 +9,7 @@ const { Title, Description } = Astro.props
     <slot />
     <hr/>
     <center>
-        <p style="display: flex; gap: 12px;justify-content: center;">
+        <p style="display: flex; gap: 12px; justify-content: center; color: black;">
             <a href="https://ark.sudovanilla.org/MinPluto/Zorn#installation">Documentation</a>
             <a href="https://npm.sudovanilla.org/-/web/detail/@minpluto/zorn">Package</a>
             <a href="https://ark.sudovanilla.org/MinPluto/Zorn">Source Code</a>

test/src/layouts/Default.astro

@@ -9,6 +9,7 @@ const {
 // Components
 import Header from '@components/Header.astro'
 import Info from '@components/Info.astro'
+import Switcher from '@components/Switcher.astro'
 ---
 <html>
     <head>
@@ -17,6 +18,10 @@ import Info from '@components/Info.astro'
     </head>
     <body>
         <Header/>
+        <br/>
+        <Switcher/>
+        <br/>
+        <br/>
         <slot/>
         <Info Title={Title} Description={Description}>
             <div class="info-section"><slot name="info"></slot></div>
@@ -27,13 +32,23 @@ import Info from '@components/Info.astro'
 
 <style is:global is:inline>
 body {
-    background: #010101;
-    color: white;
+    background: white;
+    color: black;
     font-family: Arial, Helvetica, sans-serif;
     margin: auto;
     max-width: 1200px;
+    &::before {
+        content: "";
+        background: #010101;
+        width: 100%;
+        height: 600px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        z-index: -1;
+    }
 	a {
-		color: white;
+		color: black;
 	}
 }
 .video-container {

test/src/pages/about.md

@@ -2,6 +2,12 @@
 layout: src/layouts/Default.astro
 ---
 
+<style>
+    body::before {
+        height: 146px !important;
+    }
+</style>
+
 ## Data Streams
 All sources used in Zorn player, in this demo, are pulled directly from the SudoVanilla Ocean. The upload speed on SudoVanilla's internet connection is 10/Mpbs, which is slow for video and audio streaming. So while viewing the demo, expect buffering and some videos to lag a bit. 
 

test/src/pages/multi.astro

@@ -65,6 +65,9 @@ import Info from '@components/Info.astro'
             color: white;
         }
     }
+    body::before {
+        height: 370px !important;
+    }
     .video-container {
       position: relative;
       margin: 40px;