From d3a7d577f7e3b4ef15cda28b6ff682dfe4c46bcf Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Wed, 5 Feb 2025 22:47:26 -0500
Subject: [PATCH] Update documentations for new version

---
 docs/audio-source.mdx  | 24 ++++++-------
 docs/compatibility.mdx | 67 +++++++++++++++++++----------------
 docs/context-menu.mdx  | 79 ++++++++++++++++++++++++++++++++++++++++++
 docs/installation.mdx  |  4 +--
 docs/milieu.mdx        | 21 +----------
 docs/setting-menus.mdx | 45 +++++++++++++++++++++---
 docs/subtitles.mdx     | 22 ++++++++----
 docs/toggles.mdx       | 10 +++++-
 docs/youtube.mdx       |  1 -
 9 files changed, 197 insertions(+), 76 deletions(-)
 create mode 100644 docs/context-menu.mdx

diff --git a/docs/audio-source.mdx b/docs/audio-source.mdx
index f145696..41196c8 100644
--- a/docs/audio-source.mdx
+++ b/docs/audio-source.mdx
@@ -18,19 +18,19 @@ import {Zorn} from "@minpluto/zorn"
 Since Zorn was originally built for the MinPluto frontend project, there are scenarios where the video source has no audio to get higher quality options. If you're in a scenario where the video source is missing audio, but you do have the audio itself, you can add that audio source to the video player. A separated `<audio/>` element is used, this will use a sync function in JavaScript to make sure the video and audio are synced. As before with the video source, it can be local or remote. 
 
 **Demo Used Above**
-<Code lang="jsx" code={
-`---
-import {Zorn} from "@minpluto/zorn"
----
+<Code lang="jsx" code={`
+	---
+	import {Zorn} from "@minpluto/zorn"
+	---
 
-<Zorn
-	PlayerName="the_mark_on_the_wall"
-	Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
-	Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
-	Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
-	VideoAttributes="muted"
-	AudioAttributes=""
-/>
+	<Zorn
+		PlayerName="the_mark_on_the_wall"
+		Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
+		Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
+		Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
+		VideoAttributes="muted"
+		AudioAttributes=""
+	/>
 `}/>
 
 **Local**
diff --git a/docs/compatibility.mdx b/docs/compatibility.mdx
index 2b583d1..c8d8988 100644
--- a/docs/compatibility.mdx
+++ b/docs/compatibility.mdx
@@ -3,43 +3,52 @@ Title: Compatibility
 Type: Document
 ---
 
-## Web Browsers
-| Browser            | Live Streams |Player | CSS | JavaScript | Milieu |
-|--------------------|--------------|-------|-----|------------|--------|
+| Browser            | Live Streams |Player | CSS | JavaScript | Milieu | Picture-in-Picture |
+|--------------------|--------------|-------|-----|------------|--------|--------------------|
 | **Other Browsers**|
-| FOSS Browser       | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Ladybird           | 🔘           | 🔘    | 🔘  | 🔘         | 🔘     |
-| Pale Moon          | ❌           | ✅    | ✅  | ✅         | ✅     |
+| FOSS Browser       | ✅           | ✅    | ✅  | ✅         | ✅     | 🔘                 |
+| Ladybird           | ❌           | ❌    | 🔵  | ✅         | ✅     | ❌                 |
+| Pale Moon          | ❌           | ✅    | ✅  | ✅         | ✅     | 🔘                 |
 | **WebKit Browsers**|
-| Safari             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| GNOME Web          | ✅           | ✅    | ✅  | ✅         | ❌     |
-| DuckDuckGo         | ✅           | ✅    | ✅  | ✅         | ✅     |
+| Safari             | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| GNOME Web          | ✅           | ✅    | ✅  | ✅         | ❌     | ❌                 |
+| DuckDuckGo         | ✅           | ✅    | ✅  | ✅         | ✅     | 🔘                 |
 | **Electron Browsers**|
-| Min                | ✅           | ✅    | ✅  | ✅         | ✅     |
+| Min                | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
 | **Chromium Browsers**|
-| Brave              | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Chromium           | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Google Chrome      | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Microsoft Edge     | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Opera              | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Vivaldi            | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Yandex             | ✅           | ✅    | ✅  | ✅         | ✅     |
+| Brave              | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Chromium           | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Google Chrome      | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Microsoft Edge     | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Opera              | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Vivaldi            | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Yandex             | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
 | **Firefox Browsers**|
-| Falkon             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Firefox            | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Floorp             | ✅           | ✅    | ✅  | ✅         | ✅     |
-| GNU/IceCat         | ✅           | ✅    | ✅  | ✅❶        | ✅     |
-| Ghostery           | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Huma               | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Librewolf          | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Mull               | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Mullvad            | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Waterfox           | ✅           | ✅    | ✅  | ✅         | ✅     |
-| Zen                | ✅           | ✅    | ✅  | ✅         | ✅     |
+| Falkon             | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Firefox            | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Floorp             | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| GNU/IceCat         | ✅           | ✅    | ✅  | ✅❶        | ✅    | ❌❷                 |
+| Ghostery           | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Huma               | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Librewolf          | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Mull               | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Mullvad            | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Waterfox           | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| Zen                | ✅           | ✅    | ✅  | ✅         | ✅     | ❌❷                 |
+| **SDKs** |
+| Electron           | ✅           | ✅    | ✅  | ✅         | ✅     | ✅                 |
+| Tauri              | ✅           | ✅    | ✅  | ✅         | ✅     | ❌                 |
 
 **Symbols**
  - ✅ Supported
+ - 🔵 Somewhat works
  - ❌ Not Supported or broken
  - 🔘 Not Tested
 
-> ❶ By default, GNU/IceCat has the LibreJS extension installed, it will block all JS by default if it does not provide a valid license. Examples for settings menu do not provide one nor one is shown in the test version. For settings menu script, you can add [this license](https://ark.sudovanilla.org/MinPluto/Zorn/src/commit/9bcbd72237f7ccb56f526d96b8f4a3caf1289bfb/src/Controls/Controller.astro#L2-L26) to the top of the script. Learn more: https://www.gnu.org/software/librejs/free-your-javascript.html
\ No newline at end of file
+> ❶ By default, GNU/IceCat has the LibreJS extension installed, it will block all JS by default if it does not provide a valid license. Examples for settings menu do not provide one nor one is shown in the test version. For settings menu script, you can add [this license](https://ark.sudovanilla.org/MinPluto/Zorn/src/commit/9bcbd72237f7ccb56f526d96b8f4a3caf1289bfb/src/Controls/Controller.astro#L2-L26) to the top of the script. Learn more: https://www.gnu.org/software/librejs/free-your-javascript.html
+
+<br/>
+
+> ❷ Zorn uses the `requestPictureInPicture()` function for it's **Picture-in-Picture** button, is it not compatible with Mozilla Firefox. \
+> With this compatibility issue, the PiP button is disabled for Mozilla Firefox-based web browsers. A different method may be used in the future to allow compatibility for the browser. \
+> Learn more on MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture
\ No newline at end of file
diff --git a/docs/context-menu.mdx b/docs/context-menu.mdx
new file mode 100644
index 0000000..f421bf7
--- /dev/null
+++ b/docs/context-menu.mdx
@@ -0,0 +1,79 @@
+---
+Title: Context Menu
+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"
+	ContextItems={
+		[
+			{
+				"Type": "Button",
+				"Name": "Copy URL",
+				"Action": "null",
+			},
+			{
+				"Type": "Link",
+				"Name": "Copy URL with Timestamp",
+				"Action": "#",
+			},
+			{
+				"Type": "Link",
+				"Name": "Copy Embed Code",
+				"Action": "#",
+			},
+			{
+				"Type": "Link",
+				"Name": "Troubleshoot Player",
+				"Action": "#",
+			}
+		]
+	}
+/>
+
+> Right-click in the demo above to see it action.
+
+You can override the browser's default context menu by adding your own, this is done with the `ContextItems` variable being added with an array.
+
+Example:
+
+<Code lang="jsx" code={`
+<Zorn
+	ContextItems={
+		[
+			{
+				"Type": "Button",
+				"Name": "Copy URL",
+				"Action": "null",
+			},
+			{
+				"Type": "Link",
+				"Name": "Copy Embed Code",
+				"Action": "#",
+			},
+			{
+				"Type": "Separator"
+			},
+			{
+				"Type": "Link",
+				"Name": "Troubleshoot Player",
+				"Action": "#",
+			}
+		]
+	}
+/>
+`}/>
+
+If the `ContextItems` variable is not applied, Zorn will default to the browser's default context menu.
+
+| Variable           | Option                                                        |
+|--------------------|---------------------------------------------------------------|
+| Type               | `Button`, `Link`, or `Separator`                              |
+| Name               | string                                                        |
+| Action (Button)    | `onclick` - Use JavaScript                                    |
+| Action (Link)      | `href` - Use a link                                           |
\ No newline at end of file
diff --git a/docs/installation.mdx b/docs/installation.mdx
index 1e1a45b..b182ae0 100644
--- a/docs/installation.mdx
+++ b/docs/installation.mdx
@@ -1,10 +1,8 @@
 ---
-Title: Introduction
+Title: Installation
 Type: Document
 ---
 
-import { Prism } from '@astrojs/prism';
-
 Zorn is available to install as a package from [npmjs.org](https://npmjs.org/) or [registry.sudovanilla.org](https://registry.sudovanilla.org/).
 
 ```bash
diff --git a/docs/milieu.mdx b/docs/milieu.mdx
index 3299fb0..54b0a38 100644
--- a/docs/milieu.mdx
+++ b/docs/milieu.mdx
@@ -14,28 +14,9 @@ import {Zorn} from "@minpluto/zorn"
     Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
     Milieu
     Whitelabel
-    BigPlayButton
     ShowFullscreen={false}
+	Settings={[{"Type": "Button","Name": "","Action": "null"}]}
 >
-    <slot slot="menu">
-        <div id="settings" class="vc-menu">
-            <button>Stats for Geeks</button>
-            <hr/>
-            <button>Open Video URL <i class="iconoir-arrow-up-right"></i></button>
-            <button>Download <i class="iconoir-arrow-up-right"></i></button>
-            <button>Embed <i class="iconoir-arrow-up-right"></i></button>
-            <hr/>
-            <button id="has-switch">Milieu <i class="iconoir-switch-off"></i></button>
-            <button>Close Captions <i class="iconoir-nav-arrow-right"></i></button>
-            <button onclick="PlayerMenu_Quality()">Quality <i class="iconoir-nav-arrow-right"></i></button>
-        </div>
-        <div id="quality-changer" class="vc-menu">
-            <button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><i class="iconoir-nav-arrow-left"></i> Back</span></button>
-            <button>1080p</button>
-            <button>720p</button>
-            <button>360p</button>
-        </div>
-    </slot>
 </Zorn>
 
 The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two `<canvas/>`s behind the player to make a smooth transition when it changes.
diff --git a/docs/setting-menus.mdx b/docs/setting-menus.mdx
index 3e95ece..62b8c8d 100644
--- a/docs/setting-menus.mdx
+++ b/docs/setting-menus.mdx
@@ -6,6 +6,43 @@ 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.
@@ -31,9 +68,9 @@ To setup the settings menu with your own custom items, you'll need to setup an a
 				"Name": "Menu Item Button",
 				"Action": "null",
 			},
-				{
-					"Type": "Separator"
-				},
+			{
+				"Type": "Separator"
+			},
 			{
 				"Type": "Link",
 				"Name": "Menu Item Link",
@@ -46,7 +83,7 @@ To setup the settings menu with your own custom items, you'll need to setup an a
 
 | Variable           | Option                                                        |
 |--------------------|---------------------------------------------------------------|
-| Type               | `Button` or `Link`                                            |
+| Type               | `Button`, `Link`, or `Separator`                              |
 | Name               | string                                                        |
 | Action (Button)    | `onclick` - Use JavaScript                                    |
 | Action (Link)      | `href` - Use a link                                           |
diff --git a/docs/subtitles.mdx b/docs/subtitles.mdx
index 1e70380..4cfaccb 100644
--- a/docs/subtitles.mdx
+++ b/docs/subtitles.mdx
@@ -6,17 +6,27 @@ Type: Document
 import {Code} from "astro:components"
 import {Zorn} from "@minpluto/zorn"
 
-![Native HTML5 Subtitles (Firefox)](https://md.sudovanilla.org/images/subtitles-example-native-html5.png)
+<img
+	alt="Natie HTML5 Subtitles in Mozilla Firefox"
+	src="https://md.sudovanilla.org/images/subtitles-example-native-html5.png"
+	style="height: 160px; object-position: bottom; object-fit: cover;"
+/>
 
 To apply subtitles to the video player, add a slot for tracks and insert HTML5 [`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks). Make sure to set the `label` and `srclang`.
 
 <Code lang="jsx" code={`
 <Zorn Subtitles>
-	<slot slot="subtitles">
-		<track kind="subtitles" src="/subtitles/English.vtt" label="English" srclang="en" />
-		<track kind="subtitles" src="/subtitles/Russian.vtt" label="Russian" srclang="ru" />
-	</slot>
+		<slot slot="subtitles">
+			<track kind="subtitles" src="/subtitles/English.vtt" label="English" srclang="en" />
+			<track kind="subtitles" src="/subtitles/Russian.vtt" label="Russian" srclang="ru" />
+		</slot>
 </Zorn>
 `}/>
 
-When the `Subtitles` option is enabled, a subtitles button will appear automatically in the control on the right side and a menu will be generated for you.
+When the `Subtitles` option is enabled, a subtitles iten will appear in the settings menu. This subtitles item open it's own menu generated by a built-in script.
+
+> If a settings icon doesn't show up, you haven't set one up. So setup a quick blank one:
+> <Code lang="jsx" code={`<Zorn
+>	 	Settings={[{"Type": "Button","Name": "","Action": "null"}}
+>	 />
+> `}/>
\ No newline at end of file
diff --git a/docs/toggles.mdx b/docs/toggles.mdx
index e369762..4a6b035 100644
--- a/docs/toggles.mdx
+++ b/docs/toggles.mdx
@@ -12,4 +12,12 @@ Zorn has plent of controls to show, some are enabled or disabled by default with
 
 By default, these buttons are hidden. If you want to show them, just add the `ShowBackAndForward` option:
 
-<Code lang="jsx" code={`<Zorn ShowBackAndForward/>`}/>
\ No newline at end of file
+<Code lang="jsx" code={`<Zorn ShowBackAndForward/>`}/>
+
+| Option                   | Default      | Description                                               |
+|--------------------------|--------------|-----------------------------------------------------------|
+| `ShowBackAndForward`     | `false`      | Show seek backwards and forwards buttons                  |
+| `ShowPlaybackRate`       | `false`      | Show Playback Rate button                                 |
+| `ShowPiP`                | `true`       | Show Picture-in-Picture button                            |
+| `ShowFullscreen`         | `true`       | Show Fullscreen button                                    |
+| `BigPlayButton`          | `false`      | Before showing controls, show a large player button first |
\ No newline at end of file
diff --git a/docs/youtube.mdx b/docs/youtube.mdx
index 5cc281c..7e1091b 100644
--- a/docs/youtube.mdx
+++ b/docs/youtube.mdx
@@ -12,7 +12,6 @@ import {Zorn} from "@minpluto/zorn"
     WatchId="u9lj-c29dxI"
     Invidious="invidious.nerdvpn.de"
     Audio
-    BigPlayButton
     SeekColor="#FF0000"
 >
 </Zorn>