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

Update the README

Browse source
This commit is contained in:
Korbs 2024-08-16 22:27:23 -04:00
parent ebe50dab6a
commit adcc6dcbb6
1 changed files with 122 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
README.md
View file

@ -8,7 +8,7 @@ A custom video player tailored for MinPluto.
To install Zorn for your Astro project, run the following: To install Zorn for your Astro project, run the following:
```bash ```bash
bun install @minpluto/zorn --registry https://npm.sudovanilla.org npm install @minpluto/zorn --registry https://npm.sudovanilla.org
``` ```
Zorn uses icons from Iconoir using their Vue package, you'll need to integrate Astro's Vue package if you want to use the custom controls. Zorn uses icons from Iconoir using their Vue package, you'll need to integrate Astro's Vue package if you want to use the custom controls.
@ -55,12 +55,20 @@ import {Zorn} from '@minpluto/zorn'
Make sure to add `muted` to the `VideoAttributes` option, just in case. Make sure to add `muted` to the `VideoAttributes` option, just in case.
## References ## References
**Title** - `Title`
When the video enters fullscreen, the title of the video will appear in the upper left corner of the screen.
```jsx
<Zorn Title="Ennie and Yoyki: Non-Girly Games"/>
```
**Poster** - `Poster` **Poster** - `Poster`
Setting a thumbnail for the video player is done using the [`poster`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster) attribute. Just use a valid URL. Setting a thumbnail for the video player is done using the [`poster`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster) attribute. Just use a valid URL.
```jsx ```jsx
Poster="https://example.org/media/thumbnail.webp" <Zorn Poster="https://example.org/media/thumbnail.webp"/>
``` ```
**Video Source** - `Video` **Video Source** - `Video`
@ -69,13 +77,13 @@ The main part of the video player, is of course the video. You can set any video
Local: Local:
```jsx ```jsx
Video="/media/video.webm" <Zorn Video="/media/video.webm"/>
``` ```
> Use the `/public/` folder in your Astro project. > Use the `/public/` folder in your Astro project.
Remote: Remote:
```jsx ```jsx
Video="https://example.org/media/video.webm" <Zorn Video="https://example.org/media/video.webm"/>
``` ```
**Audio Source** - `Audio` **Audio Source** - `Audio`
@ -84,23 +92,82 @@ If you're in a scenario where the video source is missing audio, but you do have
Local: Local:
```jsx ```jsx
Audio="/media/audio.ogg" <Zorn Audio="/media/audio.ogg"/>
``` ```
> Use the `/public/` folder in your Astro project. > Use the `/public/` folder in your Astro project.
Remote: Remote:
```jsx ```jsx
Audio="https://example.org/media/audio.ogg" <Zorn Audio="https://example.org/media/audio.ogg"/>
``` ```
**Custom Controls** - `CustomControls` **Settings Menu** - `SettingsMenu`
Use the custom controls for Zorn. If this is not applied, no controls will appears. <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 use the built-in player from the web browser, then use `VideoAttributes="controls"`. 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:
```jsx ```jsx
<Zorn CustomControls/> <Zorn SettingsMenu/>
```
Then, as a slot, add your menu like so:
```jsx
<Zorn SettingsMenu>
<div id="settings" class="vc-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>
</div>
</Zorn>
```
> 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">
<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>
<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>
</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>
``` ```
**Attributes** - `VideoAttributes` / `AudioAttributes` **Attributes** - `VideoAttributes` / `AudioAttributes`
@ -118,3 +185,47 @@ The Milieu option is an attempt to copy YouTube's ambient player feature. Where
```jsx ```jsx
<Zorn Milieu/> <Zorn Milieu/>
``` ```
## Compatibility
### Web Browsers
| Browser | Live Streams |Player | CSS | JavaScript |
|--------------------|--------------|-------|-----|------------|
| **Other Browsers**|
| FOSS Browser | 🔘 | 🔘 | 🔘 | 🔘 |
| Ladybird | 🔘 | 🔘 | 🔘 | 🔘 |
| **WebKit Browsers**|
| Safari | 🔘 | 🔘 | 🔘 | 🔘 |
| GNOME Web | 🔘 | ✅ | ✅*N| ✅ |
| DuckDuckGo | 🔘 | 🔘 | 🔘 | 🔘 |
| **Electron Browsers**|
| Min | 🔘 | ✅ | ✅ | ✅ |
| **Chromium Browsers**|
| Brave | 🔘 | ✅ | ✅ | ✅ |
| Chromium | 🔘 | ✅ | ✅ | ✅ |
| Google Chrome | 🔘 | ✅ | ✅ | ✅ |
| Microsoft Edge | 🔘 | ✅ | ✅ | ✅ |
| Opera | 🔘 | ✅ | ✅ | ✅ |
| Vivaldi | 🔘 | ✅ | ✅ | ✅ |
| Yandex | 🔘 | ❌ | ✅ | ❌ |
| **Firefox Browsers**|
| Falkon | 🔘 | ✅ | ✅ | ✅ |
| Firefox | 🔘 | ✅ | ✅ | ✅ |
| Floorp | 🔘 | ✅ | ✅ | ✅ |
| GNU/IceCat | 🔘 | ✅ | ✅ | ✅*IC |
| Librewolf | 🔘 | ✅ | ✅ | ✅ |
| Mull | 🔘 | ✅ | ✅ | ✅ |
| Mullvad | 🔘 | ✅ | ✅ | ✅ |
| Tor | 🔘 | 🔘 | 🔘 | 🔘 |
| Waterfox | 🔘 | ✅ | ✅ | ✅ |
| **Outdated Browsers**|
| Internet Explorer | 🔘 | 🔘 | 🔘 | 🔘 |
> All browsers are tested as-is out of box. Some functions with ❌ can probably work if you tweak the settings or interact with a built-in extension.
> IC: 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.
> N: The backdrop blur does not work. This should not affect the function of the video player.
## To Do
- Support HLS (HTTP Live Streaming)
- Touch gestures for mobile