This commit is contained in:
Korbs 2025-01-03 19:29:12 -05:00
parent d0337c43c5
commit 324020c8e5
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
4 changed files with 46 additions and 1 deletions

View file

@ -6,6 +6,8 @@ Type: Document
import {Prism} from "@astrojs/prism" import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn" import {Zorn} from "@minpluto/zorn"
<Zorn Live Video="https://twitch.api.sudovanilla.org/proxy/stream/chillhopradio/hls.m3u8">
Zorn can stream `.m3u8` content with HLS support added. The HLS support is only added if you add the `Live` option. Zorn can stream `.m3u8` content with HLS support added. The HLS support is only added if you add the `Live` option.
Just add the `Live` option with an `.m3u8` source. Just add the `Live` option with an `.m3u8` source.

View file

@ -6,6 +6,38 @@ Type: Document
import {Prism} from "@astrojs/prism" import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn" import {Zorn} from "@minpluto/zorn"
<Zorn
PlayerName="nameit_whatever_you_want"
Title="Islandia"
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
Milieu
Whitelabel
BigPlayButton
ShowFullscreen={false}
>
<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. 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.
<Prism lang="jsx" code={`<Zorn Milieu/>`}/> <Prism lang="jsx" code={`<Zorn Milieu/>`}/>

View file

@ -6,7 +6,7 @@ Type: Document
import {Prism} from "@astrojs/prism" import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn" import {Zorn} from "@minpluto/zorn"
<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> <video title="Settings Menu in action on MinPluto" autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>
If you want to add additional settings to the player, you can enable the Settings button and add your own menu and sub-menus. If you want to add additional settings to the player, you can enable the Settings button and add your own menu and sub-menus.

View file

@ -6,6 +6,17 @@ Type: Document
import {Prism} from "@astrojs/prism" import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn" import {Zorn} from "@minpluto/zorn"
<Zorn
PlayerName="youtube_player"
YouTube
WatchId="u9lj-c29dxI"
Invidious="invidious.nerdvpn.de"
Audio
BigPlayButton
SeekColor="#FF0000"
>
</Zorn>
Zorn supports YouTube videos, using Invidious. Set the video id and quality in Zorn. If you do not set the quality, it'll default to `137`, which is the itag for 1080p. Zorn supports YouTube videos, using Invidious. Set the video id and quality in Zorn. If you do not set the quality, it'll default to `137`, which is the itag for 1080p.
<Prism lang="jsx" code={`<Zorn YouTube Audio WatchId="a0a0-0a000" YouTubeQuality="137">`}/> <Prism lang="jsx" code={`<Zorn YouTube Audio WatchId="a0a0-0a000" YouTubeQuality="137">`}/>