src/Controls.astro

@@ -18,11 +18,7 @@ import './Styles/Iconoir.css'
     <div class="vc-top">
         <p>{Title}</p>
     </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 id="vc-gestures"></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,68 +162,25 @@ function SkipAround() {
 
 // Gestures (Click / Double-click)
 function 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')
+  var GestureCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
 
-  // Middle Gesture (Single: Play/Pause   -   Double: Fullscreen)
-  GestureCanvas_Middle.addEventListener("click", (event) => {
-    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
+  GestureCanvas.addEventListener("click", (event) => {
+    if(!event) {
+      event = true
+      setTimeout( function() { event = false; }, 300 )
+      return false
+    }
     document.querySelector('#zorn-player-' + PlayerName + ' #vc-playpause').click()
   })
 
-  GestureCanvas_Middle.addEventListener("dblclick", (event) => {
-    if(!event) {event = true; setTimeout( function() { event = false; }, 300 ); return false}
+  GestureCanvas.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,21 +69,7 @@
         }
         #vc-gestures {
             height: 100%;
-            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;
-                }
-            }
+            opacity: 0;
         }
         .vc-bottom {
             display: flex;

test/src/components/Header.astro

@@ -9,8 +9,7 @@ import Switcher from './Switcher.astro'
         <a href="/about">About Demo</a>
     </div>
     <div class="header-end">
-        <a href="https://studio.sudovanilla.org/" target="_blank">MinPluto</a>
-        <a href="https://ark.sudovanilla.org/MinPluto/Zorn" target="_blank">Source Code</a>
+        <Switcher/>
     </div>
 </header>
 
@@ -23,14 +22,12 @@ header {
   margin-top: -8px;
   max-width: 1200px;
   height: 64px;
-  color: white;
-  .header-start, .header-end {
+  .header-start {
     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; color: black;">
+        <p style="display: flex; gap: 12px;justify-content: center;">
             <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,7 +9,6 @@ const {
 // Components
 import Header from '@components/Header.astro'
 import Info from '@components/Info.astro'
-import Switcher from '@components/Switcher.astro'
 ---
 <html>
     <head>
@@ -18,10 +17,6 @@ import Switcher from '@components/Switcher.astro'
     </head>
     <body>
         <Header/>
-        <br/>
-        <Switcher/>
-        <br/>
-        <br/>
         <slot/>
         <Info Title={Title} Description={Description}>
             <div class="info-section"><slot name="info"></slot></div>
@@ -32,23 +27,13 @@ import Switcher from '@components/Switcher.astro'
 
 <style is:global is:inline>
 body {
-    background: white;
-    color: black;
+    background: #010101;
+    color: white;
     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: black;
+		color: white;
 	}
 }
 .video-container {

test/src/pages/about.md

@@ -2,12 +2,6 @@
 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,9 +65,6 @@ import Info from '@components/Info.astro'
             color: white;
         }
     }
-    body::before {
-        height: 370px !important;
-    }
     .video-container {
       position: relative;
       margin: 40px;