2.3 KiB
| Title | Type |
|---|---|
| Setting Menus | Document |
import {Prism} from "@astrojs/prism" import {Zorn} from "@minpluto/zorn"
Automated items
When enabling certain functions and features of Zorn, certain items will automatically be added to the main settings menu. As an example, if you enable Milieu, an item named "Milieu" will be added and it's setup to open the Milieu menu.
However, if you don't have your items added at all with no Settings variable setup, the Settings icon is setup to not be shown. So if you decide to enable these other functions and features without creating a custom settings menu, at least create a blank one:
<Prism lang="jsx" code={<Zorn Settings={[{"Type": "Button","Name": "","Action": "null"}} />}/>
Custom Menu
To setup the settings menu with your own custom items, you'll need to setup an array within the Zorn player, here's a quick example:
<Prism lang="jsx" code={<Zorn Settings={ [ { "Type": "Button", "Name": "Menu Item Button", "Action": "null", }, { "Type": "Separator" }, { "Type": "Link", "Name": "Menu Item Link", "Action": "#", }, ] } />}/>
| Variable | Option |
|---|---|
| Type | Button or Link |
| Name | string |
| Action (Button) | onclick - Use JavaScript |
| Action (Link) | href - Use a link |
Quality Menu
You can also enable the "Quality" menu, doing so will automatically add this to the main menu. If you enable just the quality menu only, please add a blank Settings variable like this.
You can set what resolutions are available and set the onclick action for it:
<Prism lang="jsx" code={<Zorn Quality={ [ {"Resolution": "1080p","Action": "null"}, {"Resolution": "720p","Action": "null"}, {"Resolution": "480p","Action": "null"} ] } />}/>
It should be up the developer on how they'll implement the change of quality within the video player. Each "Action" is an onclick variable, so use JavaScript.