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

Compare commits

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

No commits in common. "782a4c48ef70eb1c6b17d5377ccb06d01cf16736" and "6c0ce61d0b86e187b7e16d4bbeb0d7d942f1d499" have entirely different histories.
782a4c48ef ... 6c0ce61d0b

8 changed files with 48 additions and 92 deletions
Show stats Expand all files Collapse all files

36
README.md
View file

@ -120,14 +120,6 @@ 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>
@ -142,7 +134,7 @@ To enable the menu, add the `SettingsMenu` option:
Then, as a slot, add your menu like so:
```jsx
<Zorn SettingsMenu>
<slot slot="menu">
<div id="settings" class="vc-menu">
<button>Stats for Geeks</button>
<hr/>
<button>Open Video URL <ArrowUpRight/></button>
@ -151,19 +143,16 @@ Then, as a slot, add your menu like so:
<hr/>
<button id="has-switch">Milieu <SwitchOn/></button>
<button>Close Captions <NavArrowRight/></button>
</slot>
</div>
</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>
<slot slot="menu">
<div id="settings" class="vc-menu">
<button>Stats for Geeks</button>
<hr/>
<button>Open Video URL <ArrowUpRight/></button>
@ -172,15 +161,14 @@ 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>
</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>
<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>
</Zorn>
<script is:inline>
@ -201,8 +189,6 @@ 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.67",
"version": "0.4.66",
"exports": {
".": "./index.ts"
},

10
src/Controls.astro
View file

@ -3,7 +3,6 @@
const {
Title,
Live,
ShowBackAndForward,
SeekColor = '#2185d0'
} = Astro.props
@ -25,11 +24,8 @@ 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
<button id="vc-backwards"><i class="iconoir-rewind-solid"></i></button>
<button id="vc-forwards"><i class="iconoir-forward-solid"></i></button>
}
<div class="vc-volume-controller">
<button><i class="iconoir-sound-high-solid"></i></button>
@ -45,7 +41,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" aria-valuenow="1" type="range" step="1"/>
<input class="seek" id="seek" value="0" min="0" 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,8 +11,6 @@ const {
VideoAttributes,
AudioAttributes,
ShowBackAndForward,
YouTube = false,
YouTubeQuality = '137',
Invidious,
@ -70,16 +68,12 @@ import './Styles/Iconoir.css'
null
}
{SettingsMenu ?
<Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}>
<Controls PlayerName={PlayerName} Live={Live}>
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><i class="iconoir-settings"></i></button>
<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"/>
<slot/>
</Controls>
:
<Controls ShowBackAndForward={ShowBackAndForward} PlayerName={PlayerName} Live={Live}/>
<Controls PlayerName={PlayerName} Live={Live}/>
}
<Controller PlayerName={PlayerName}/>
<Seek PlayerName={PlayerName}/>

23
src/Styles/Index.scss
View file

@ -13,10 +13,9 @@
.video-controls, video {
border-radius: 12px;
}
*:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.5) !important;
transition: 1s background;
*:focus {
border: 2px white solid;
transition: 1s border;
}
video {
width: 100%;
@ -82,7 +81,7 @@
transition: 0.3s opacity;
}
.vc-center {
width: 100%;
width: calc(100% - 220px);
display: flex;
align-items: center;
gap: 12px;
@ -128,9 +127,7 @@
top: -8px;
left: 0px;
width: 100%;
*:focus-visible {
border-radius: 3rem !important;
}
}
#seek[type="range"] {
-webkit-appearance: none;
@ -252,16 +249,6 @@
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,9 +14,8 @@ 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
>
<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>
@ -26,15 +25,13 @@ 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>
</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>
</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>
</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,27 +15,24 @@ import {Zorn} from '@minpluto/zorn'
CustomControlsWithMenu
SettingsMenu
Milieu
Whitelabel
>
<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>
<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>
</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,7 +15,6 @@ 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>