Update Demo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@minpluto/zorn",
-  "version": "0.4.8",
+  "version": "0.4.81",
   "author": "SudoVanilla",
   "displayName": "Zorn",
   "description": "In-House Player built by MinPluto",

src/Controls.astro

@@ -1,12 +1,21 @@
 ---
 // Properties
 const {
+    // Meta
     Title,
+    PlayerName,
+    SeekColor = '#2185d0',
+
+    // Type
     Live,
+
+    // Toggles
     ShowBackAndForward,
     ShowPlaybackRate,
-    SeekColor = '#2185d0',
+    ShowPiP = true,
-    PlayerName,
+    ShowFullscreen =  true,
+
+    // OThers
     Subtitles
 } = Astro.props
 
@@ -19,7 +28,8 @@ import './Styles/Iconoir.css'
 
 <div class="video-controls">
     <div class="vc-top">
-        <p>{Title}</p>
+        <div>{Title ? <p id="vc-title">{Title}</p> : null}</div>
+        <div><p id="vc-buffering"><i class="iconoir-refresh-circle-solid"></i> Buffering...</p> </div>
     </div>
     <div id="vc-gestures">
         <span id="vc-gesture-left"></span>
@@ -63,18 +73,12 @@ import './Styles/Iconoir.css'
             }
         </div>
         <div class="vc-end">
-            {Live ?
+            {Live ? <HLS/><span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>:null}
-                <HLS/>
-                <span id="live-text" style="pointer-events: none;border-radius: 3rem;padding: 6px 12px;background: #933c3c;letter-spacing: 4px;">Live</span>
-                :
-                null
-            }
             <slot/>
-            <!-- The requestPictureInPicture() function is not supported in Firefox -->
+            {ShowPiP ? <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button> : null}
-            <button id="vc-pip" onclick={'document.querySelector("#zorn-player-' + PlayerName + ' video").requestPictureInPicture()'}><i class="iconoir-multi-window"></i></button>
             {Subtitles ? <button id="vc-subtitles"><i class="iconoir-closed-captions-tag-solid"></i></button> : null}
-            {ShowPlaybackRate ? <button onclick="PlayerMenu_PlaybackRate()"><i class="iconoir-timer-solid"></i></button> : null}
+            {ShowPlaybackRate ? <button id="vc-playbackrate"><i class="iconoir-timer-solid"></i></button> : null}
-            <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button>
+            {ShowFullscreen ? <button id="vc-fullscreen"><i class="iconoir-enlarge"></i></button> : null}
         </div>
     </div>
 </div>

src/Controls/Controller.astro

@@ -2,11 +2,12 @@
 const {
   PlayerName,
   BigPlayButton,
-  ShowBackAndForward
+  ShowBackAndForward,
+  ShowFullscreen
 } = Astro.props
 ---
 
-<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward}}>
+<script define:vars={{PlayerName, BigPlayButton, ShowBackAndForward, ShowFullscreen}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -47,10 +48,23 @@ var exit_fullscreen_solid_default = '<svg width="24px" height="24px" stroke-widt
 var FullscreenIcon = fullscreen_solid_default
 var ExitFullscreenIcon = exit_fullscreen_solid_default
 
+// Buffering
+function Buffering() {
+  var BufferingIndicator = document.querySelector('#zorn-player-' + PlayerName + ' #vc-buffering')
+  Player.onwaiting = (event) => {
+    BufferingIndicator.style.opacity = '1'
+  }
+  Player.onplaying = (event) => {
+    BufferingIndicator.style.opacity = '0'
+  }
+}
+
 // Fullscreen
 function Fullscreen() {
   // Get Button
-  const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
+  if (ShowFullscreen === true) {
+    var Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
+  }
 
   // Create and Call Functions
   function Toggle_Fullscreen() {
@@ -70,19 +84,19 @@ function Fullscreen() {
       EnterFullscreen();
       VideoContainer.requestFullscreen()
     }
-    Update_FullscreenButton()
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   }
   function EnterFullscreen() {
     VideoContainer.classList.add('zorn-fullscreen');
-    Update_FullscreenButton();
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   }
   function ExitFullscreen() {
     VideoContainer.classList.remove('zorn-fullscreen');
-    Update_FullscreenButton();
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   }
 
   // Event Listener
-  Button_Fullscreen.onclick = Toggle_Fullscreen;
+  if (ShowFullscreen === true) {Button_Fullscreen.onclick = Toggle_Fullscreen;}
   function Update_FullscreenButton() {
     if (document.fullscreenElement) {
       Button_Fullscreen.setAttribute("data-title", "Exit full screen (f)");
@@ -96,7 +110,7 @@ function Fullscreen() {
   // Gesture
   Player.addEventListener("dblclick", () => {
     Toggle_Fullscreen()
-    Update_FullscreenButton()
+    if (ShowFullscreen === true) {Update_FullscreenButton()}
   });
 
   // Keyboard Shortcut
@@ -337,6 +351,7 @@ function PlayAgain() {
 
 // Init Functions
 AutoToggleControls()
+Buffering()
 Fullscreen()
 Gestures()
 KeyboardShortcuts()

src/Styles/Index.scss

@@ -7,6 +7,16 @@
     }
 }
 
+// Animations
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 // Zorn Player
 .video-container {
     position: relative;
@@ -62,10 +72,12 @@
             }
         }
         .vc-top {
+            display: flex;
+            justify-content: space-between;
+            #vc-title, #vc-buffering {
                 pointer-events: none;
                 opacity: 0;
                 transition: 0.3s opacity;
-            p {
                 color: white;
                 backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
                 -webkit-backdrop-filter: blur(6px) contrast(0.9) brightness(0.5);
@@ -75,6 +87,17 @@
                 margin: 0px;
                 font-size: 24px;
             }
+            #vc-buffering {
+                font-size: 14px !important;
+                align-items: center;
+                display: flex;
+                gap: 12px;
+                border-radius: 3rem !important;
+                padding: 4px 12px 4px 4px !important;
+                i::before {
+                    animation: 1s spin infinite linear;
+                }
+            }
         }
         #vc-gestures {
             height: 100%;
@@ -300,7 +323,7 @@
         background: rgb(255 255 255 / 25%);
     }
     button {
-        padding: 6px 12px !important;
+        padding: 10px 12px !important;
         margin: 0px !important;
         aspect-ratio: inherit !important;
         background: transparent !important;
@@ -340,6 +363,12 @@
 #playback-rate {
     flex-direction: row;
     min-width: 100px;
+    border-radius: 3rem;
+    padding: 2px;
+    button {
+        border-radius: 3rem !important;
+        padding: 10px 13px !important;
+    }
 }
 
 button#has-switch svg {

test/src/pages/index.astro

@@ -18,6 +18,7 @@ import {Zorn} from '@minpluto/zorn'
 		BigPlayButton
 		ShowPlaybackRate
 		Subtitles
+		SeekColor="#f28438"
 	>
 		<slot slot="menu">
 			<button>Stats for Geeks</button>

test/src/pages/milieu.astro

@@ -12,11 +12,10 @@ import {Zorn} from '@minpluto/zorn'
 		Title="Islandia"
 		Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
 		Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
-		CustomControlsWithMenu
-		SettingsMenu
 		Milieu
 		Whitelabel
         BigPlayButton
+		ShowFullscreen={false}
 	>
 		<slot slot="menu">
 			<div id="settings" class="vc-menu">

test/src/pages/multi.astro

@@ -15,6 +15,7 @@ import Info from '@components/Info.astro'
                 Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
                 Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
                 PlayerName="EAYNGG"
+                SeekColor="#f28438"
             />
             
             <Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
@@ -28,12 +29,10 @@ import Info from '@components/Info.astro'
                 Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
                 Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
                 Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
-                CustomControls
                 VideoAttributes="muted"
                 AudioAttributes=""
                 PlayerName="TMOTW"
             />
-            
             <Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
                 <p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
                 <p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>

test/src/pages/youtube.astro

@@ -15,6 +15,7 @@ import {Zorn} from '@minpluto/zorn'
         Invidious="invidious.nerdvpn.de"
         Audio
         BigPlayButton
+        SeekColor="#FF0000"
 	>
 	</Zorn>
 	<slot slot="info">