package.json

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

src/Controls.astro

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

src/Controls/Controller.astro

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

src/Styles/Index.scss

@@ -7,16 +7,6 @@
     }
 }
 
-// Animations
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 // Zorn Player
 .video-container {
     position: relative;
@@ -72,12 +62,10 @@
             }
         }
         .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);
@@ -87,17 +75,6 @@
                 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%;
@@ -323,7 +300,7 @@
         background: rgb(255 255 255 / 25%);
     }
     button {
-        padding: 10px 12px !important;
+        padding: 6px 12px !important;
         margin: 0px !important;
         aspect-ratio: inherit !important;
         background: transparent !important;
@@ -363,12 +340,6 @@
 #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,7 +18,6 @@ import {Zorn} from '@minpluto/zorn'
 		BigPlayButton
 		ShowPlaybackRate
 		Subtitles
-		SeekColor="#f28438"
 	>
 		<slot slot="menu">
 			<button>Stats for Geeks</button>

test/src/pages/milieu.astro

@@ -12,10 +12,11 @@ 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,7 +15,6 @@ 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">
@@ -29,10 +28,12 @@ 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,7 +15,6 @@ import {Zorn} from '@minpluto/zorn'
         Invidious="invidious.nerdvpn.de"
         Audio
         BigPlayButton
-        SeekColor="#FF0000"
 	>
 	</Zorn>
 	<slot slot="info">