MinPluto/Zorn
MinPluto/Zorn
1
Fork 0
Code Issues Pull requests Activity

Compare commits

base: MinPluto:6c0ce61d0b86e187b7e16d4bbeb0d7d942f1d499
Branches Tags
MinPluto:main
...
compare: MinPluto:782a4c48ef70eb1c6b17d5377ccb06d01cf16736
Branches Tags
MinPluto:main

6 commits
6c0ce61d0b ... 782a4c48ef

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
8 changed files with 92 additions and 48 deletions
Show stats Expand all files Collapse all files

36
README.md
View file

@ -120,6 +120,14 @@ Remote:
<Zorn Audio="https://example.org/media/audio.ogg"/> <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` **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> <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: Then, as a slot, add your menu like so:
```jsx ```jsx
<Zorn SettingsMenu> <Zorn SettingsMenu>
<div id="settings" class="vc-menu"> <slot slot="menu">
<button>Stats for Geeks</button> <button>Stats for Geeks</button>
<hr/> <hr/>
<button>Open Video URL <ArrowUpRight/></button> <button>Open Video URL <ArrowUpRight/></button>
@ -143,16 +151,19 @@ Then, as a slot, add your menu like so:
<hr/> <hr/>
<button id="has-switch">Milieu <SwitchOn/></button> <button id="has-switch">Milieu <SwitchOn/></button>
<button>Close Captions <NavArrowRight/></button> <button>Close Captions <NavArrowRight/></button>
</div> </slot>
</Zorn> </Zorn>
``` ```
Remember to add it as a slot with the slot name of `menu`.
> [!NOTE] > [!NOTE]
> Use `OpenZornMenu()` as the open menu function. You can use the scripts provided in `/test/` of this package. > 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: You can also add sub-menus with additional scripts you'll need to add:
```jsx ```jsx
<Zorn SettingsMenu> <Zorn SettingsMenu>
<div id="settings" class="vc-menu"> <slot slot="menu">
<button>Stats for Geeks</button> <button>Stats for Geeks</button>
<hr/> <hr/>
<button>Open Video URL <ArrowUpRight/></button> <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/> <hr/>
<button id="has-switch">Milieu <SwitchOn/></button> <button id="has-switch">Milieu <SwitchOn/></button>
<button>Close Captions <NavArrowRight/></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"> <div id="quality-changer" class="vc-menu">
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button> <button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
<button>1080p</button> <button>1080p</button>
<button>720p</button> <button>720p</button>
<button>360p</button> <button>360p</button>
</div> </div>
</slot>
</Zorn> </Zorn>
<script is:inline> <script is:inline>
@ -189,6 +201,8 @@ You can also add sub-menus with additional scripts you'll need to add:
</script> </script>
``` ```
Remember to add it as a slot with the slot name of `extra-menus`.
**Attributes** - `VideoAttributes` / `AudioAttributes` **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`. If you need to add an addition attribute to either the video and/or audio source, then you can with `VideoAttributes` and `AudioAttributes`.

2
package.json
View file

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

10
src/Controls.astro
View file

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

12
src/Player.astro
View file

@ -11,6 +11,8 @@ const {
VideoAttributes, VideoAttributes,
AudioAttributes, AudioAttributes,
ShowBackAndForward,
YouTube = false, YouTube = false,
YouTubeQuality = '137', YouTubeQuality = '137',
Invidious, Invidious,
@ -68,12 +70,16 @@ import './Styles/Iconoir.css'
null null
} }
{SettingsMenu ? {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> <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>
: :
<Controls PlayerName={PlayerName} Live={Live}/> <Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
} }
<Controller PlayerName={PlayerName}/> <Controller PlayerName={PlayerName}/>
<Seek PlayerName={PlayerName}/> <Seek PlayerName={PlayerName}/>

23
src/Styles/Index.scss
View file

@ -13,9 +13,10 @@
.video-controls, video { .video-controls, video {
border-radius: 12px; 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 { video {
width: 100%; width: 100%;
@ -81,7 +82,7 @@
transition: 0.3s opacity; transition: 0.3s opacity;
} }
.vc-center { .vc-center {
width: calc(100% - 220px); width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@ -127,7 +128,9 @@
top: -8px; top: -8px;
left: 0px; left: 0px;
width: 100%; width: 100%;
*:focus-visible {
border-radius: 3rem !important;
}
} }
#seek[type="range"] { #seek[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
@ -249,6 +252,16 @@
width: 14px; 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 { button#has-switch svg {

19
test/src/pages/index.astro
View file

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

37
test/src/pages/milieu.astro
View file

@ -15,24 +15,27 @@ import {Zorn} from '@minpluto/zorn'
CustomControlsWithMenu CustomControlsWithMenu
SettingsMenu SettingsMenu
Milieu Milieu
Whitelabel
> >
<div id="settings" class="vc-menu"> <slot slot="menu">
<button>Stats for Geeks</button> <div id="settings" class="vc-menu">
<hr/> <button>Stats for Geeks</button>
<button>Open Video URL <i class="iconoir-arrow-up-right"></i></button> <hr/>
<button>Download <i class="iconoir-arrow-up-right"></i></button> <button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
<button>Embed <i class="iconoir-arrow-up-right"></i></button> <button>Download <i class="iconoir-arrow-up-right"></i></button>
<hr/> <button>Embed <i class="iconoir-arrow-up-right"></i></button>
<button id="has-switch">Milieu <i class="iconoir-switch-on"></i></button> <hr/>
<button>Close Captions <i class="iconoir-nav-arrow-right"></i></button> <button id="has-switch">Milieu <i class="iconoir-switch-off"></i></button>
<button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button> <button>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
</div> <button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
<div id="quality-changer" class="vc-menu"> </div>
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><i class="iconoir-nav-arrow-left"></i> Back</span></button> <div id="quality-changer" class="vc-menu">
<button>1080p</button> <button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><i class="iconoir-nav-arrow-left"></i> Back</span></button>
<button>720p</button> <button>1080p</button>
<button>360p</button> <button>720p</button>
</div> <button>360p</button>
</div>
</slot>
</Zorn> </Zorn>
<slot slot="info"> <slot slot="info">
<p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p> <p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p>

1
test/src/pages/with-separate-audio.astro
View file

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