77 lines
No EOL
2.6 KiB
Text
77 lines
No EOL
2.6 KiB
Text
---
|
|
Title: Setting Menus
|
|
Type: Document
|
|
---
|
|
|
|
import {Prism} from "@astrojs/prism"
|
|
import {Zorn} from "@minpluto/zorn"
|
|
|
|
<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>
|
|
|
|
If you want to add additional settings to the player, you can enable the Settings button and add your own menu and sub-menus.
|
|
|
|
To enable the menu, add the `SettingsMenu` option:
|
|
<Prism lang="jsx" code={`<Zorn SettingsMenu/>`}/>
|
|
|
|
Then, as a slot, add your menu like so:
|
|
<Prism lang="jsx" code={`
|
|
<Zorn SettingsMenu>
|
|
<slot slot="menu">
|
|
<button>Stats for Geeks</button>
|
|
<hr/>
|
|
<button>Open Video URL <ArrowUpRight/></button>
|
|
<button>Download <ArrowUpRight/></button>
|
|
<button>Embed <ArrowUpRight/></button>
|
|
<hr/>
|
|
<button id="has-switch">Milieu <SwitchOn/></button>
|
|
<button>Close Captions <NavArrowRight/></button>
|
|
</slot>
|
|
</Zorn>
|
|
`}/>
|
|
|
|
Remember to add it as a slot with the slot name of `menu`.
|
|
|
|
> 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:
|
|
<Prism lang="jsx" code={`
|
|
<Zorn SettingsMenu>
|
|
<slot slot="menu">
|
|
<button>Stats for Geeks</button>
|
|
<hr/>
|
|
<button>Open Video URL <ArrowUpRight/></button>
|
|
<button>Download <ArrowUpRight/></button>
|
|
<button>Embed <ArrowUpRight/></button>
|
|
<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>
|
|
</Zorn>
|
|
|
|
<script is:inline>
|
|
function PlayerMenu_HideAll() {
|
|
document.querySelector('.vc-menu#settings').style.display = 'none'
|
|
document.querySelector('.vc-menu#quality-changer').style.display = 'none'
|
|
document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'OpenZornMenu()')
|
|
}
|
|
function OpenZornMenu() {
|
|
PlayerMenu_HideAll()
|
|
document.querySelector('.vc-menu#settings').style.display = 'flex'
|
|
document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'PlayerMenu_HideAll()')
|
|
}
|
|
function PlayerMenu_Quality() {
|
|
PlayerMenu_HideAll()
|
|
document.querySelector('.vc-menu#quality-changer').style.display = 'flex'
|
|
}
|
|
</script>
|
|
`}/>
|
|
|
|
Remember to add it as a slot with the slot name of `extra-menus`. |