Bump

Update docs
Update demo pages
2024-11-29 22:33:21 -05:00 · 2024-11-29 22:33:07 -05:00 · 2024-11-29 22:30:32 -05:00 · 2024-11-29 22:30:26 -05:00 · 2024-11-29 22:30:16 -05:00 · 2024-11-29 22:29:45 -05:00
8 changed files with 92 additions and 48 deletions
--- a/README.md
+++ b/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>
-	</div>
+	</slot>
+	<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`.
--- a/package.json
+++ b/package.json
@ -15,7 +15,7 @@
    "live-streaming"
  ],
  "type": "module",
-  "version": "0.4.66",
+  "version": "0.4.67",
  "exports": {
    ".": "./index.ts"
  },
--- a/src/Controls.astro
+++ b/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>
--- a/src/Player.astro
+++ b/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}/>
--- a/src/Styles/Index.scss
+++ b/src/Styles/Index.scss
@ -13,9 +13,10 @@
    .video-controls, video {
        border-radius: 12px;
    }
-    *:focus {
-        border: 2px white solid;
-        transition: 1s border;
+    *:focus-visible {
+        outline: none;
+        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 {
--- a/test/src/pages/index.astro
+++ b/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>
--- a/test/src/pages/milieu.astro
+++ b/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>
--- a/test/src/pages/with-separate-audio.astro
+++ b/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>
Author	SHA1	Message	Date
Korbs	782a4c48ef	Bump	2024-11-29 22:33:21 -05:00
Korbs	994248c667	Update docs	2024-11-29 22:33:07 -05:00
Korbs	c6f7416117	Update demo pages	2024-11-29 22:30:32 -05:00
Korbs	9b9b9de88a	Adjust styles	2024-11-29 22:30:26 -05:00
Korbs	29aaefd4f7	Breaking change: Custom settings menu has slot name now	2024-11-29 22:30:16 -05:00
Korbs	2370518319	Add ability to show or hide back and forward buttons	2024-11-29 22:29:45 -05:00