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

Update docs

Browse source
This commit is contained in:
Korbs 2024-11-29 22:33:07 -05:00
parent c6f7416117
commit 994248c667
1 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file 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`.