Improve and update the demo
This commit is contained in:
Korbs
parent
7bea355fd9
commit
72b292f860
9 changed files with 303 additions and 250 deletions
40
test/src/components/Header.astro
Normal file
40
test/src/components/Header.astro
Normal 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>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<style lang="scss">
|
||||
.switcher {
|
||||
background: #232323;
|
||||
border-radius: 6px;
|
||||
border-radius: 3rem;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
max-width: max-content;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 3rem;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
|||
44
test/src/layouts/Default.astro
Normal file
44
test/src/layouts/Default.astro
Normal 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
30
test/src/pages/about.md
Normal 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.
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
---
|
||||
// Layout
|
||||
import Default from 'src/layouts/Default.astro'
|
||||
|
||||
// Components
|
||||
import {Zorn} from '@minpluto/zorn'
|
||||
import Info from '@components/Info.astro'
|
||||
|
|
@ -12,16 +15,16 @@ import {
|
|||
NavArrowRight
|
||||
} from '@iconoir/vue'
|
||||
---
|
||||
<meta charset="utf-8">
|
||||
|
||||
<Zorn
|
||||
<Default Page="/" Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
|
||||
<Zorn
|
||||
PlayerName="nameit_whatever_you_want"
|
||||
Title="Ennie and Yoyki: Non-Girly Games"
|
||||
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%3A%20Non-Girly%20Games.mp4"
|
||||
CustomControlsWithMenu
|
||||
SettingsMenu
|
||||
>
|
||||
>
|
||||
<div id="settings" class="vc-menu">
|
||||
<button>Stats for Geeks</button>
|
||||
<hr/>
|
||||
|
|
@ -39,30 +42,14 @@ import {
|
|||
<button>720p</button>
|
||||
<button>360p</button>
|
||||
</div>
|
||||
</Zorn>
|
||||
|
||||
<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">
|
||||
</Zorn>
|
||||
<slot slot="info">
|
||||
<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>
|
||||
</Info>
|
||||
</slot>
|
||||
</Default>
|
||||
|
||||
<style is:global>
|
||||
body {
|
||||
background: #010101;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
margin: 40px;
|
||||
}
|
||||
</style>
|
||||
<style is:inline>a[href="/"] {background: white !important;color: black !important;}</style>
|
||||
|
||||
<script is:inline>
|
||||
function PlayerMenu_HideAll() {
|
||||
|
|
|
|||
|
|
@ -1,36 +1,22 @@
|
|||
---
|
||||
// Layout
|
||||
import Default from 'src/layouts/Default.astro'
|
||||
|
||||
// Components
|
||||
import {Zorn} from '@minpluto/zorn'
|
||||
import Info from '@components/Info.astro'
|
||||
import Switcher from '@components/Switcher.astro'
|
||||
---
|
||||
|
||||
<Zorn
|
||||
<Default Title="Relax Beats" Description="Live on Twitch">
|
||||
<Zorn
|
||||
PlayerName="nameit_whatever_you_want"
|
||||
Title="relaxbeats"
|
||||
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
|
||||
Live
|
||||
/>
|
||||
|
||||
<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">
|
||||
/>
|
||||
<slot slot="info">
|
||||
<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>
|
||||
</Info>
|
||||
</slot>
|
||||
</Default>
|
||||
|
||||
<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
---
|
||||
// Layout
|
||||
import Default from 'src/layouts/Default.astro'
|
||||
|
||||
// Components
|
||||
import {Zorn} from '@minpluto/zorn'
|
||||
import Info from '@components/Info.astro'
|
||||
|
|
@ -12,9 +15,9 @@ import {
|
|||
NavArrowRight
|
||||
} from '@iconoir/vue'
|
||||
---
|
||||
<meta charset="utf-8">
|
||||
|
||||
<Zorn
|
||||
<Default Title="Islandia" Description="Created by Vadim Sherbakov">
|
||||
<Zorn
|
||||
PlayerName="nameit_whatever_you_want"
|
||||
Title="Islandia"
|
||||
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
|
||||
|
|
@ -22,7 +25,7 @@ import {
|
|||
CustomControlsWithMenu
|
||||
SettingsMenu
|
||||
Milieu
|
||||
>
|
||||
>
|
||||
<div id="settings" class="vc-menu">
|
||||
<button>Stats for Geeks</button>
|
||||
<hr/>
|
||||
|
|
@ -40,32 +43,15 @@ import {
|
|||
<button>720p</button>
|
||||
<button>360p</button>
|
||||
</div>
|
||||
</Zorn>
|
||||
|
||||
|
||||
<Switcher/>
|
||||
<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
|
||||
|
||||
<Info Title="Islandia" Description="Created by Vadim Sherbakov">
|
||||
</Zorn>
|
||||
<slot slot="info">
|
||||
<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>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>
|
||||
body {
|
||||
background: #010101;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
margin: 40px;
|
||||
}
|
||||
</style>
|
||||
<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
|
||||
|
||||
<script is:inline>
|
||||
function PlayerMenu_HideAll() {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,14 @@
|
|||
---
|
||||
// Layout
|
||||
import Default from 'src/layouts/Default.astro'
|
||||
|
||||
// Components
|
||||
import {Zorn} from '@minpluto/zorn'
|
||||
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">
|
||||
|
||||
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
|
||||
<Default>
|
||||
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
|
||||
<div>
|
||||
<Zorn
|
||||
Title="Ennie and Yoyki: Non-Girly Games"
|
||||
|
|
@ -46,12 +40,9 @@ import {
|
|||
<p>This demo also pulls 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>
|
||||
</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>
|
||||
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.
|
||||
<br/>
|
||||
|
|
@ -64,31 +55,34 @@ import {
|
|||
<p>
|
||||
Having multiple instances can still be buggy, depending on how you have it setup.
|
||||
</p>
|
||||
</div>
|
||||
<style is:global>
|
||||
body {
|
||||
</div>
|
||||
<style is:global>
|
||||
body {
|
||||
background: #010101;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.video-container {
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
|
||||
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),
|
||||
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > hr:nth-child(7),
|
||||
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > hr:nth-child(7) {
|
||||
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
|
||||
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),
|
||||
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > hr:nth-child(7),
|
||||
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > hr:nth-child(7) {
|
||||
display: none !important;
|
||||
}
|
||||
code {
|
||||
}
|
||||
code {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 0px 4px;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
</Default>
|
||||
|
||||
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
---
|
||||
// Layout
|
||||
import Default from 'src/layouts/Default.astro'
|
||||
|
||||
// Components
|
||||
import {Zorn} from '@minpluto/zorn'
|
||||
import Info from '@components/Info.astro'
|
||||
import Switcher from '@components/Switcher.astro'
|
||||
---
|
||||
|
||||
<Zorn
|
||||
<Default Title="The Mark On The Wall" Description="Created by Anderson Wright">
|
||||
<Zorn
|
||||
PlayerName="nameit_whatever_you_want"
|
||||
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
|
||||
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
|
||||
|
|
@ -13,28 +15,12 @@ import Switcher from '@components/Switcher.astro'
|
|||
CustomControls
|
||||
VideoAttributes="muted"
|
||||
AudioAttributes=""
|
||||
/>
|
||||
|
||||
<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">
|
||||
/>
|
||||
<slot slot="info">
|
||||
<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 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>
|
||||
body {
|
||||
background: #010101;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
margin: 40px;
|
||||
}
|
||||
</style>
|
||||
<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
|
||||
Loading…
Reference in a new issue