Improve and update the demo

This commit is contained in:
Korbs 2024-11-08 21:22:33 -05:00
parent 7bea355fd9
commit 72b292f860
9 changed files with 303 additions and 250 deletions

View file

@ -0,0 +1,40 @@
---
// Components
import Switcher from './Switcher.astro'
---
<header>
<div class="header-start">
<img src="https://md.sudovanilla.org/images/Zorn%20Player.png"/>
<a href="/about">About Demo</a>
</div>
<div class="header-end">
<Switcher/>
</div>
</header>
<style lang="scss">
header {
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
margin-top: -8px;
max-width: 1200px;
height: 64px;
.header-start {
display: flex;
align-items: center;
gap: 12px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
img {
width: 32px;
}
}
}
</style>

View file

@ -9,7 +9,7 @@
<style lang="scss"> <style lang="scss">
.switcher { .switcher {
background: #232323; background: #232323;
border-radius: 6px; border-radius: 3rem;
text-align: center; text-align: center;
margin: auto; margin: auto;
max-width: max-content; max-width: max-content;
@ -20,7 +20,7 @@
a { a {
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 6px; border-radius: 3rem;
padding: 6px 12px; padding: 6px 12px;
font-size: 14px; font-size: 14px;
} }

View file

@ -0,0 +1,44 @@
---
// Properites
const {
Title,
Description,
Page
} = Astro.props
// Components
import Header from '@components/Header.astro'
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
---
<html>
<head>
<meta charset="utf-8">
<title>Zorn Demo</title>
</head>
<body>
<Header/>
<slot/>
<Info Title={Title} Description={Description}>
<slot name="info"></slot>
</Info>
</body>
</html>
<style is:global is:inline>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
margin: auto;
max-width: 1200px;
a {
color: white;
}
}
.video-container {
position: relative;
margin: auto;
max-width: 1200px;
}
</style>

30
test/src/pages/about.md Normal file
View file

@ -0,0 +1,30 @@
---
layout: src/layouts/Default.astro
---
## Data Streams
All sources used in Zorn player, in this demo, are pulled directly from the SudoVanilla Ocean. The upload speed on SudoVanilla's internet connection is 10/Mpbs, which is slow for video and audio streaming. So while viewing the demo, expect buffering and some videos to lag a bit.
SudoVanilla has a strict policy about only pulling sources from it's own servers only, which is why the demo is setup like this.
## Credits
**Milieu**
The Milieu function, also known as ambient mode on other players, uses it's script directly from [Poke's source code](https://codeberg.org/ashley/poke/src/commit/a28f8e253663264abfcd284f8769b6e901ac1371/html/poketube.ejs#L2186-L2261).
**HLS**
HLS, HTTP Live Streaming, makes it possible for Zorn to support live streaming such as using .m3u8 sources. The script is minified in Zorn's source code. [You can view here](https://hlsjs.video-dev.org/dist/hls.js).
To apply HLS to Zorn, another script is used from the same developers. [You can view that here](https://github.com/video-dev/hls.js/blob/master/demo/basic-usage.html#L14-L36).
**Video and Audio Sync**
Zorn supports a function to have a separated video and audio source, this was built to allow for 1080p/4K/8K support in MinPluto as it was originally built as a YouTube frontend.
To pull this off, SudoVanilla went through a few scripts that were somewhat usable, but not the best. Eventfully, I landed on the script by Michancio on their Gist. You can [view their Gist here](https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84). It is modified in Zorn's source code.
**Icons**
All icons used in Zorn are from [Iconoir](https://iconoir.com/support), a free icon library.

View file

@ -1,4 +1,7 @@
--- ---
// Layout
import Default from 'src/layouts/Default.astro'
// Components // Components
import {Zorn} from '@minpluto/zorn' import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro' import Info from '@components/Info.astro'
@ -12,8 +15,8 @@ import {
NavArrowRight NavArrowRight
} from '@iconoir/vue' } from '@iconoir/vue'
--- ---
<meta charset="utf-8">
<Default Page="/" Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<Zorn <Zorn
PlayerName="nameit_whatever_you_want" PlayerName="nameit_whatever_you_want"
Title="Ennie and Yoyki: Non-Girly Games" Title="Ennie and Yoyki: Non-Girly Games"
@ -40,29 +43,13 @@ import {
<button>360p</button> <button>360p</button>
</div> </div>
</Zorn> </Zorn>
<slot slot="info">
<Switcher/>
<style is:inline>a[href="/"] {background: white !important;color: black !important;}</style>
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p> <p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
<p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p> <p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
</Info> </slot>
</Default>
<style is:global> <style is:inline>a[href="/"] {background: white !important;color: black !important;}</style>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<script is:inline> <script is:inline>
function PlayerMenu_HideAll() { function PlayerMenu_HideAll() {

View file

@ -1,36 +1,22 @@
--- ---
// Layout
import Default from 'src/layouts/Default.astro'
// Components // Components
import {Zorn} from '@minpluto/zorn' import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
--- ---
<Default Title="Relax Beats" Description="Live on Twitch">
<Zorn <Zorn
PlayerName="nameit_whatever_you_want" PlayerName="nameit_whatever_you_want"
Title="relaxbeats" Title="relaxbeats"
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8" Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
Live Live
/> />
<slot slot="info">
<style is:global is:inline>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<Switcher/>
<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>
<Info Title="Relax Beats" Description="Live on Twitch">
<p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p> <p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p>
<p>This demo pulls from: <a href="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8">https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8</a></p> <p>This demo pulls from: <a href="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8">https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8</a></p>
</Info> </slot>
</Default>
<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>

View file

@ -1,4 +1,7 @@
--- ---
// Layout
import Default from 'src/layouts/Default.astro'
// Components // Components
import {Zorn} from '@minpluto/zorn' import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro' import Info from '@components/Info.astro'
@ -12,8 +15,8 @@ import {
NavArrowRight NavArrowRight
} from '@iconoir/vue' } from '@iconoir/vue'
--- ---
<meta charset="utf-8">
<Default Title="Islandia" Description="Created by Vadim Sherbakov">
<Zorn <Zorn
PlayerName="nameit_whatever_you_want" PlayerName="nameit_whatever_you_want"
Title="Islandia" Title="Islandia"
@ -41,31 +44,14 @@ import {
<button>360p</button> <button>360p</button>
</div> </div>
</Zorn> </Zorn>
<slot slot="info">
<Switcher/>
<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
<Info Title="Islandia" Description="Created by Vadim Sherbakov">
<p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p> <p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4">https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4</a></p> <p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4">https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4</a></p>
<p>Zorn Player uses the <a href="https://codeberg.org/ashley/poke/src/commit/a28f8e253663264abfcd284f8769b6e901ac1371/html/poketube.ejs#L2186-L2261">Ambient effect from Poke's source code</a>.</p> <p>Zorn Player uses the <a href="https://codeberg.org/ashley/poke/src/commit/a28f8e253663264abfcd284f8769b6e901ac1371/html/poketube.ejs#L2186-L2261">Ambient effect from Poke's source code</a>.</p>
</Info> </slot>
</Default>
<style is:global> <style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<script is:inline> <script is:inline>
function PlayerMenu_HideAll() { function PlayerMenu_HideAll() {

View file

@ -1,19 +1,13 @@
--- ---
// Layout
import Default from 'src/layouts/Default.astro'
// Components // Components
import {Zorn} from '@minpluto/zorn' import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro' import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
// Icons
import {
ArrowUpRight,
NavArrowLeft,
SwitchOff,
NavArrowRight
} from '@iconoir/vue'
--- ---
<meta charset="utf-8">
<Default>
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;"> <div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
<div> <div>
<Zorn <Zorn
@ -48,9 +42,6 @@ import {
</div> </div>
</div> </div>
<Switcher/>
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
<div style="margin: auto; max-width: 600px;"> <div style="margin: auto; max-width: 600px;">
<p> <p>
As of Zorn Player v0.4.6, it is now possible to have multiple instances of the player on one page. With the new <code>PlayerName</code> option, which is required from now on. As of Zorn Player v0.4.6, it is now possible to have multiple instances of the player on one page. With the new <code>PlayerName</code> option, which is required from now on.
@ -92,3 +83,6 @@ code {
color: black; color: black;
} }
</style> </style>
</Default>
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>

View file

@ -1,10 +1,12 @@
--- ---
// Layout
import Default from 'src/layouts/Default.astro'
// Components // Components
import {Zorn} from '@minpluto/zorn' import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
--- ---
<Default Title="The Mark On The Wall" Description="Created by Anderson Wright">
<Zorn <Zorn
PlayerName="nameit_whatever_you_want" PlayerName="nameit_whatever_you_want"
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg" Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
@ -14,27 +16,11 @@ import Switcher from '@components/Switcher.astro'
VideoAttributes="muted" VideoAttributes="muted"
AudioAttributes="" AudioAttributes=""
/> />
<slot slot="info">
<Switcher/>
<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p> <p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo is using the video source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p> <p>This demo is using the video source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
<p>This demo is using the audio source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p> <p>This demo is using the audio source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</Info> </slot>
</Default>
<style is:global> <style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>