Zorn/docs/setting-menus.mdx

---
Title: Setting Menus
Type: Document
---

import {Code} from "astro:components"
import {Zorn} from "@minpluto/zorn"

<Zorn
	PlayerName="ennie_and_yoyki"
	Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
	Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki:%20Non-Girly%20Games.mp4"
	ShowPlaybackRate
	Settings={
		[
			{
				"Type": "Button",
				"Name": "Stats for Geeks",
				"Action": "null",
			},
			{
				"Type": "Separator"
			},
			{
				"Type": "Link",
				"Name": "Open Video URL",
				"Action": "#",
			},
			{
				"Type": "Link",
				"Name": "Download",
				"Action": "#",
			},
			{
				"Type": "Link",
				"Name": "Embed",
				"Action": "#",
			},
			{
				"Type": "Separator"
			},
		]
	}
/>

## 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:

<Code 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:

<Code 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`, `Link`, or `Separator`                              |
| 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:

<Code 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.