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"
-
+<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>