From 994248c667c6842db602a906285045e9bf808fc4 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 29 Nov 2024 22:33:07 -0500
Subject: [PATCH] Update docs

---
 README.md | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 8190dcd..85b9f71 100644
--- a/README.md
+++ b/README.md
@@ -120,6 +120,14 @@ Remote:
 <Zorn Audio="https://example.org/media/audio.ogg"/>
 ```
 
+**Show Backwards and Forwards Button** - `ShowBackAndForward`
+
+By default, these buttons are hidden. If you want to show them, just add the `ShowBackAndForward` option:
+
+```jsx
+<Zorn ShowBackAndForward/>
+```
+
 **Settings Menu** - `SettingsMenu`
 
 <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>
@@ -134,7 +142,7 @@ To enable the menu, add the `SettingsMenu` option:
 Then, as a slot, add your menu like so:
 ```jsx
 <Zorn SettingsMenu>
-	<div id="settings" class="vc-menu">
+	<slot slot="menu">
 		<button>Stats for Geeks</button>
 		<hr/>
 		<button>Open Video URL <ArrowUpRight/></button>
@@ -143,16 +151,19 @@ Then, as a slot, add your menu like so:
 		<hr/>
 		<button id="has-switch">Milieu <SwitchOn/></button>
 		<button>Close Captions <NavArrowRight/></button>
-	</div>
+	</slot>
 </Zorn>
 ```
+
+Remember to add it as a slot with the slot name of `menu`.
+
 > [!NOTE]
 > 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:
 ```jsx
 <Zorn SettingsMenu>
-	<div id="settings" class="vc-menu">
+	<slot slot="menu">
 		<button>Stats for Geeks</button>
 		<hr/>
 		<button>Open Video URL <ArrowUpRight/></button>
@@ -161,14 +172,15 @@ You can also add sub-menus with additional scripts you'll need to add:
 		<hr/>
 		<button id="has-switch">Milieu <SwitchOn/></button>
 		<button>Close Captions <NavArrowRight/></button>
-		<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
-	</div>
-    <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>
+	<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>
@@ -189,6 +201,8 @@ You can also add sub-menus with additional scripts you'll need to add:
 </script>
 ```
 
+Remember to add it as a slot with the slot name of `extra-menus`.
+
 **Attributes** - `VideoAttributes` / `AudioAttributes`
 
 If you need to add an addition attribute to either the video and/or audio source, then you can with `VideoAttributes` and `AudioAttributes`.