Setting Menus

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:

<Zorn SettingsMenu/>

Then, as a slot, add your menu like so:

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

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