Bump

package.json

@@ -15,7 +15,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.67",
+  "version": "0.4.70",
   "exports": {
     ".": "./index.ts"
   },

src/Controls.astro

@@ -18,6 +18,7 @@ import './Styles/Iconoir.css'
     <div class="vc-top">
         <p>{Title}</p>
     </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

@@ -1,10 +1,11 @@
 ---
 const {
-  PlayerName
+  PlayerName,
+  BigPlayButton
 } = Astro.props
 ---
 
-<script define:vars={{PlayerName}}>
+<script define:vars={{PlayerName, BigPlayButton}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -34,6 +35,27 @@ var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
 var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
 var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
 
+// Big Present Button
+function BigPresentButton() {
+  if (BigPlayButton === true) {
+    VideoControls.style.opacity = '0'
+    VideoControls.style.pointerEvents = 'none'
+  } else {
+    null
+  }
+
+  const Button_BigPresentButton = document.querySelector("#zorn-player-" + PlayerName + " .big-present-button")
+  Button_BigPresentButton.onclick = BigButtonClicked
+
+  function BigButtonClicked() {
+    Button_BigPresentButton.style.opacity = '0'
+    Button_BigPresentButton.style.pointerEvents = 'none'
+    VideoControls.style.opacity = '1'
+    VideoControls.style.pointerEvents = 'all'
+    Player.play()
+  }
+}
+
 // Icons
 var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
 var pause_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
@@ -138,6 +160,29 @@ function SkipAround() {
   }
 }
 
+// Gestures (Click / Double-click)
+function Gestures() {
+  var GestureCanvas = document.querySelector('#zorn-player-' + PlayerName + ' #vc-gestures')
+
+  GestureCanvas.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
+    }
+    document.querySelector('#zorn-player-' + PlayerName + ' #vc-fullscreen').click()
+  })
+}
+
 // Hide Controls
 function AutoToggleControls() {
   function Hide_Controls2() {
@@ -267,7 +312,9 @@ function PlayItAgain() {
 
 // Init All Functions
 AutoToggleControls()
+BigPresentButton()
 Fullscreen()
+Gestures()
 KeyboardShortcuts()
 PlayPause()
 SkipAround()

src/Player.astro

@@ -12,6 +12,7 @@ const {
     AudioAttributes,
 
     ShowBackAndForward,
+    BigPlayButton = false,
 
     YouTube = false,
     YouTubeQuality = '137',
@@ -43,6 +44,7 @@ if (YouTube === true) {
     // 1080p = 137
     // 720p = 302
     // Dash Audio = 251
+    var YTThumbnail = 'https://i.ytimg.com/vi/' + WatchId +'/maxresdefault.jpg'
     var YTVideo = 'https://' + Invidious +'/latest_version?id=' + WatchId + '&itag=' + YouTubeQuality
     var YTAudio = 'https://' + Invidious +'/latest_version?id=' + WatchId + '&itag=251'
 } else if (YouTube === false) {
@@ -55,7 +57,7 @@ import './Styles/Iconoir.css'
 ---
 
 <div class="video-container" id={"zorn-player-" + PlayerName}>
-    <video class="main-video" {VideoAttributes} disableremoteplayback src={YouTube ? YTVideo : Video} poster={Poster} preload="auto"></video>
+    <video class="main-video" {VideoAttributes} disableremoteplayback src={YouTube ? YTVideo : Video} poster={YouTube ? YTThumbnail : Poster} preload="auto"></video>
     {Audio ? <audio class="main-audio"><source {AudioAttributes} src={YouTube ? YTAudio : Audio} type="audio/mp3"/></audio> : null }
     {Audio ? <Sync PlayerName={PlayerName}/> : null }
     {Milieu ?
@@ -69,6 +71,11 @@ import './Styles/Iconoir.css'
         :
         null
     }
+    {BigPlayButton ?
+        <button class="big-present-button"><i class="iconoir-play-solid"></i></button>
+        :
+        null
+    }
     {SettingsMenu ?
         <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}>
             <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
@@ -81,7 +88,7 @@ import './Styles/Iconoir.css'
         :
         <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
     }
-    <Controller PlayerName={PlayerName}/>
+    <Controller PlayerName={PlayerName} BigPlayButton={BigPlayButton}/>
     <Seek PlayerName={PlayerName}/>
 </div>
 

src/Styles/Index.scss

@@ -23,6 +23,7 @@
         height: 100%;
         object-fit: contain;
         z-index: 1;
+        pointer-events: none;
     }
     canvas {
         top: 0px;
@@ -66,6 +67,10 @@
             opacity: 0;
             transition: 0.3s opacity;
         }
+        #vc-gestures {
+            height: 100%;
+            opacity: 0;
+        }
         .vc-bottom {
             display: flex;
             gap: 12px;
@@ -213,6 +218,27 @@
     transition: 0.3s opacity;
 }
 
+.big-present-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 10;
+    transform: translate(-50%, -50%);
+    color: white;
+    border: none;
+    border-radius: 6rem;
+    background: rgba(0, 0, 0, 0.32);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+    cursor: pointer;
+    i::before {
+        width: 64px;
+        height: 64px;
+    }
+}
+
 .vc-menu {
     position: absolute;
     right: 0px;

test/src/layouts/Default.astro

@@ -19,7 +19,8 @@ import Info from '@components/Info.astro'
         <Header/>
         <slot/>
         <Info Title={Title} Description={Description}>
-            <slot name="info"></slot>
+            <div class="info-section"><slot name="info"></slot></div>
+            <div class="code-section"><slot name="code"></slot></div>
         </Info>
     </body>
 </html>

test/src/pages/index.astro

@@ -15,6 +15,7 @@ import {Zorn} from '@minpluto/zorn'
 		CustomControlsWithMenu
 		SettingsMenu
 		Whitelabel
+		BigPlayButton
 	>
 		<slot slot="menu">
 			<button>Stats for Geeks</button>

test/src/pages/milieu.astro

@@ -16,6 +16,7 @@ import {Zorn} from '@minpluto/zorn'
 		SettingsMenu
 		Milieu
 		Whitelabel
+        BigPlayButton
 	>
 		<slot slot="menu">
 			<div id="settings" class="vc-menu">

test/src/pages/youtube.astro

@@ -14,6 +14,7 @@ import {Zorn} from '@minpluto/zorn'
         WatchId="u9lj-c29dxI"
         Invidious="invidious.nerdvpn.de"
         Audio
+        BigPlayButton
 	>
 	</Zorn>
 	<slot slot="info">