Docs/Zorn
Docs/Zorn
1
Fork 0
Code Issues Pull requests Activity

Update documentations for new version

Browse source
This commit is contained in:
Korbs 2025-02-05 22:47:26 -05:00
parent ded7d47e1e
commit d3a7d577f7
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
9 changed files with 197 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
docs/audio-source.mdx
View file

@ -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**

67
docs/compatibility.mdx
View file

@ -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
> ❶ 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

79
docs/context-menu.mdx Normal file
View file

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

4
docs/installation.mdx
View file

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

21
docs/milieu.mdx
View file

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

45
docs/setting-menus.mdx
View file

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

22
docs/subtitles.mdx
View file

@ -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"}}
> />
> `}/>

10
docs/toggles.mdx
View file

@ -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/>`}/>
<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 |

1
docs/youtube.mdx
View file

@ -12,7 +12,6 @@ import {Zorn} from "@minpluto/zorn"
WatchId="u9lj-c29dxI"
Invidious="invidious.nerdvpn.de"
Audio
BigPlayButton
SeekColor="#FF0000"
>
</Zorn>