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"/>
```
**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>
<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>
<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`.

2
package.json
View file

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

10
src/Controls.astro
View file

@ -3,6 +3,7 @@
const {
Title,
Live,
ShowBackAndForward,
SeekColor = '#2185d0'
} = Astro.props
@ -24,8 +25,11 @@ import './Styles/Iconoir.css'
{Live ?
null
:
<button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button>
<button id="vc-forwards"><i class="iconoir-forward-solid"></i></button>
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>

12
src/Player.astro
View file

@ -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}/>

23
src/Styles/Index.scss
View file

@ -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 {

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"
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>
<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>
<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>

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

@ -15,24 +15,27 @@ import {Zorn} from '@minpluto/zorn'
CustomControlsWithMenu
SettingsMenu
Milieu
Whitelabel
>
<div id="settings" class="vc-menu">
<button>Stats for Geeks</button>
<hr/>
<button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
<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>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
<button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
</div>
<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 slot="menu">
<div id="settings" class="vc-menu">
<button>Stats for Geeks</button>
<hr/>
<button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
<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-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>
<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://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
VideoAttributes="muted"
AudioAttributes=""
ShowBackAndForward
/>
<slot slot="info">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>