🚀 Init

docs/setting-menus.mdx

@@ -0,0 +1,77 @@
+---
+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`.