Bump

README.md

@@ -120,6 +120,14 @@ Remote:
 <Zorn Audio="https://example.org/media/audio.ogg"/>
 ```
 
+**Show Backwards and Forwards Button** - `ShowBackAndForward`
+
+By default, these buttons are hidden. If you want to show them, just add the `ShowBackAndForward` option:
+
+```jsx
+<Zorn ShowBackAndForward/>
+```
+
 **Settings Menu** - `SettingsMenu`
 
 <video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>
@@ -134,7 +142,7 @@ To enable the menu, add the `SettingsMenu` option:
 Then, as a slot, add your menu like so:
 ```jsx
 <Zorn SettingsMenu>
-	<div id="settings" class="vc-menu">
+	<slot slot="menu">
 		<button>Stats for Geeks</button>
 		<hr/>
 		<button>Open Video URL <ArrowUpRight/></button>
@@ -143,16 +151,19 @@ Then, as a slot, add your menu like so:
 		<hr/>
 		<button id="has-switch">Milieu <SwitchOn/></button>
 		<button>Close Captions <NavArrowRight/></button>
-	</div>
+	</slot>
 </Zorn>
 ```
+
+Remember to add it as a slot with the slot name of `menu`.
+
 > [!NOTE]
 > Use `OpenZornMenu()` as the open menu function. You can use the scripts provided in `/test/` of this package.
 
 You can also add sub-menus with additional scripts you'll need to add:
 ```jsx
 <Zorn SettingsMenu>
-	<div id="settings" class="vc-menu">
+	<slot slot="menu">
 		<button>Stats for Geeks</button>
 		<hr/>
 		<button>Open Video URL <ArrowUpRight/></button>
@@ -161,14 +172,15 @@ You can also add sub-menus with additional scripts you'll need to add:
 		<hr/>
 		<button id="has-switch">Milieu <SwitchOn/></button>
 		<button>Close Captions <NavArrowRight/></button>
-		<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
+	</slot>
-	</div>
+	<slot slot="extra-menus">
 		<div id="quality-changer" class="vc-menu">
 			<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
 			<button>1080p</button>
 			<button>720p</button>
 			<button>360p</button>
 		</div>
+	</slot>
 </Zorn>
 
 <script is:inline>
@@ -189,6 +201,8 @@ You can also add sub-menus with additional scripts you'll need to add:
 </script>
 ```
 
+Remember to add it as a slot with the slot name of `extra-menus`.
+
 **Attributes** - `VideoAttributes` / `AudioAttributes`
 
 If you need to add an addition attribute to either the video and/or audio source, then you can with `VideoAttributes` and `AudioAttributes`.

package.json

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

src/Controls.astro

@@ -3,6 +3,7 @@
 const {
     Title,
     Live,
+    ShowBackAndForward,
     SeekColor = '#2185d0'
 } = Astro.props
 
@@ -24,8 +25,11 @@ import './Styles/Iconoir.css'
             {Live ?
                 null
                 :
+                ShowBackAndForward ? 
                     <button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button>
                     <button id="vc-forwards"><i class="iconoir-forward-solid"></i></button>
+                    :
+                    null
             }
             <div class="vc-volume-controller">
                 <button><i class="iconoir-sound-high-solid"></i></button>
@@ -41,7 +45,7 @@ import './Styles/Iconoir.css'
                 :
                 <div class="vc-seek">
                     <span style={`background: ${SeekColor}`} class="vc-progress-bar"></span>
-                    <input class="seek" id="seek" value="0" min="0" type="range" step="1"/>
+                    <input class="seek" id="seek" value="0" min="0" aria-valuenow="1" type="range" step="1"/>
                 </div>
                 <p class="timestamp">
                     <span class="seek-tooltip" id="seek-tooltip">00:00</span>

src/Player.astro

@@ -11,6 +11,8 @@ const {
     VideoAttributes,
     AudioAttributes,
 
+    ShowBackAndForward,
+
     YouTube = false,
     YouTubeQuality = '137',
     Invidious,
@@ -68,12 +70,16 @@ import './Styles/Iconoir.css'
         null
     }
     {SettingsMenu ?
-        <Controls PlayerName={PlayerName} Live={Live}>
+        <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}>
             <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
-            <slot/>
+			<div id="settings" class="vc-menu">
+                <slot name="menu"/>
+                {Whitelabel ? <a class="vc-menu-whitelabel" aria-label="Zorn Player Whitelabel" href="https://studio.sudovanilla.org/" target="_blank">Zorn Player</a> : null}
+            </div>
+            <slot name="extra-menus"/>
         </Controls>
         :
-        <Controls PlayerName={PlayerName} Live={Live}/>
+        <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
     }
     <Controller PlayerName={PlayerName}/>
     <Seek PlayerName={PlayerName}/>

src/Styles/Index.scss

@@ -13,9 +13,10 @@
     .video-controls, video {
         border-radius: 12px;
     }
-    *:focus {
+    *:focus-visible {
-        border: 2px white solid;
+        outline: none;
-        transition: 1s border;
+        background: rgba(255, 255, 255, 0.5) !important;
+        transition: 1s background;
     }
     video {
         width: 100%;
@@ -81,7 +82,7 @@
                 transition: 0.3s opacity;
             }
             .vc-center {
-                width: calc(100% - 220px);
+                width: 100%;
                 display: flex;
                 align-items: center;
                 gap: 12px;
@@ -127,7 +128,9 @@
                     top: -8px;
                     left: 0px;
                     width: 100%;
-                    
+                    *:focus-visible {
+                        border-radius: 3rem !important;
+                    }
                 }
                 #seek[type="range"] {
                     -webkit-appearance: none;
@@ -249,6 +252,16 @@
             width: 14px;
         }
     }
+    .vc-menu-whitelabel {
+        opacity: 0.5;
+        text-align: center;
+        text-decoration: none;
+        font-size: 14px;
+        margin: 0px 0px 6px 0px;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }
 
 button#has-switch svg {

test/src/pages/index.astro

@@ -14,8 +14,9 @@ import {Zorn} from '@minpluto/zorn'
 		Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
 		CustomControlsWithMenu
 		SettingsMenu
+		Whitelabel
 	>
-		<div id="settings" class="vc-menu">
+		<slot slot="menu">
 			<button>Stats for Geeks</button>
 			<hr/>
 			<button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
@@ -25,13 +26,15 @@ import {Zorn} from '@minpluto/zorn'
 			<button id="has-switch">Milieu <i class="iconoir-switch-off"></i></button>
 			<button>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
 			<button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
-		</div>
+		</slot>
+		<slot slot="extra-menus">
 			<div id="quality-changer" class="vc-menu">
 				<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><i class="iconoir-nav-arrow-left"></i> Back</span></button>
 				<button>1080p</button>
 				<button>720p</button>
 				<button>360p</button>
 			</div>
+		</slot>
 	</Zorn>
 	<slot slot="info">
 		<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>

test/src/pages/milieu.astro

@@ -15,7 +15,9 @@ import {Zorn} from '@minpluto/zorn'
 		CustomControlsWithMenu
 		SettingsMenu
 		Milieu
+		Whitelabel
 	>
+		<slot slot="menu">
 			<div id="settings" class="vc-menu">
 				<button>Stats for Geeks</button>
 				<hr/>
@@ -23,7 +25,7 @@ import {Zorn} from '@minpluto/zorn'
 				<button>Download <i class="iconoir-arrow-up-right"></i></button>
 				<button>Embed <i class="iconoir-arrow-up-right"></i></button>
 				<hr/>
-			<button id="has-switch">Milieu <i class="iconoir-switch-on"></i></button>
+				<button id="has-switch">Milieu <i class="iconoir-switch-off"></i></button>
 				<button>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
 				<button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
 			</div>
@@ -33,6 +35,7 @@ import {Zorn} from '@minpluto/zorn'
 				<button>720p</button>
 				<button>360p</button>
 			</div>
+		</slot>
 	</Zorn>
 	<slot slot="info">
 		<p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p>

test/src/pages/with-separate-audio.astro

@@ -15,6 +15,7 @@ import {Zorn} from '@minpluto/zorn'
 		CustomControls
 		VideoAttributes="muted"
 		AudioAttributes=""
+		ShowBackAndForward
 	/>
 	<slot slot="info">
 		<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>