Compare commits
2 commits
b4999dc8d9
...
72b292f860
| Author | SHA1 | Date | |
|---|---|---|---|
|
72b292f860 | ||
|
|
7bea355fd9 |
10 changed files with 305 additions and 253 deletions
|
|
@ -6,7 +6,6 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Zorn Player
|
// Zorn Player
|
||||||
.video-container {
|
.video-container {
|
||||||
|
|
@ -226,8 +225,8 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
|
backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
|
||||||
-webkit-backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
|
-webkit-backdrop-filter: blur(12px) contrast(0.6) brightness(0.4);
|
||||||
hr {
|
hr {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
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">
|
<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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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
|
// Components
|
||||||
import {Zorn} from '@minpluto/zorn'
|
import {Zorn} from '@minpluto/zorn'
|
||||||
import Info from '@components/Info.astro'
|
import Info from '@components/Info.astro'
|
||||||
|
|
@ -12,58 +15,42 @@ import {
|
||||||
NavArrowRight
|
NavArrowRight
|
||||||
} from '@iconoir/vue'
|
} from '@iconoir/vue'
|
||||||
---
|
---
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<Zorn
|
<Default Page="/" Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
|
||||||
PlayerName="nameit_whatever_you_want"
|
<Zorn
|
||||||
Title="Ennie and Yoyki: Non-Girly Games"
|
PlayerName="nameit_whatever_you_want"
|
||||||
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
|
Title="Ennie and Yoyki: Non-Girly Games"
|
||||||
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
|
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
|
||||||
CustomControlsWithMenu
|
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
|
||||||
SettingsMenu
|
CustomControlsWithMenu
|
||||||
>
|
SettingsMenu
|
||||||
<div id="settings" class="vc-menu">
|
>
|
||||||
<button>Stats for Geeks</button>
|
<div id="settings" class="vc-menu">
|
||||||
<hr/>
|
<button>Stats for Geeks</button>
|
||||||
<button>Open Video URL <ArrowUpRight/></button>
|
<hr/>
|
||||||
<button>Download <ArrowUpRight/></button>
|
<button>Open Video URL <ArrowUpRight/></button>
|
||||||
<button>Embed <ArrowUpRight/></button>
|
<button>Download <ArrowUpRight/></button>
|
||||||
<hr/>
|
<button>Embed <ArrowUpRight/></button>
|
||||||
<button id="has-switch">Milieu <SwitchOff/></button>
|
<hr/>
|
||||||
<button>Close Captions <NavArrowRight/></button>
|
<button id="has-switch">Milieu <SwitchOff/></button>
|
||||||
<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
|
<button>Close Captions <NavArrowRight/></button>
|
||||||
</div>
|
<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
|
||||||
<div id="quality-changer" class="vc-menu">
|
</div>
|
||||||
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
|
<div id="quality-changer" class="vc-menu">
|
||||||
<button>1080p</button>
|
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
|
||||||
<button>720p</button>
|
<button>1080p</button>
|
||||||
<button>360p</button>
|
<button>720p</button>
|
||||||
</div>
|
<button>360p</button>
|
||||||
</Zorn>
|
</div>
|
||||||
|
</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>
|
||||||
|
</slot>
|
||||||
|
</Default>
|
||||||
|
|
||||||
<Switcher/>
|
|
||||||
<style is:inline>a[href="/"] {background: white !important;color: black !important;}</style>
|
<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>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>
|
|
||||||
|
|
||||||
<style is:global>
|
|
||||||
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() {
|
||||||
document.querySelector('.vc-menu#settings').style.display = 'none'
|
document.querySelector('.vc-menu#settings').style.display = 'none'
|
||||||
|
|
|
||||||
|
|
@ -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'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Zorn
|
<Default Title="Relax Beats" Description="Live on Twitch">
|
||||||
PlayerName="nameit_whatever_you_want"
|
<Zorn
|
||||||
Title="relaxbeats"
|
PlayerName="nameit_whatever_you_want"
|
||||||
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
|
Title="relaxbeats"
|
||||||
Live
|
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
|
||||||
/>
|
Live
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
</slot>
|
||||||
|
</Default>
|
||||||
|
|
||||||
<style is:global is:inline>
|
<style is:inline>a[href="/live"] {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>
|
|
||||||
|
|
||||||
<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>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>
|
|
||||||
|
|
@ -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,61 +15,44 @@ import {
|
||||||
NavArrowRight
|
NavArrowRight
|
||||||
} from '@iconoir/vue'
|
} from '@iconoir/vue'
|
||||||
---
|
---
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<Zorn
|
<Default Title="Islandia" Description="Created by Vadim Sherbakov">
|
||||||
PlayerName="nameit_whatever_you_want"
|
<Zorn
|
||||||
Title="Islandia"
|
PlayerName="nameit_whatever_you_want"
|
||||||
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
|
Title="Islandia"
|
||||||
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
|
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
|
||||||
CustomControlsWithMenu
|
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
|
||||||
SettingsMenu
|
CustomControlsWithMenu
|
||||||
Milieu
|
SettingsMenu
|
||||||
>
|
Milieu
|
||||||
<div id="settings" class="vc-menu">
|
>
|
||||||
<button>Stats for Geeks</button>
|
<div id="settings" class="vc-menu">
|
||||||
<hr/>
|
<button>Stats for Geeks</button>
|
||||||
<button>Open Video URL <ArrowUpRight/></button>
|
<hr/>
|
||||||
<button>Download <ArrowUpRight/></button>
|
<button>Open Video URL <ArrowUpRight/></button>
|
||||||
<button>Embed <ArrowUpRight/></button>
|
<button>Download <ArrowUpRight/></button>
|
||||||
<hr/>
|
<button>Embed <ArrowUpRight/></button>
|
||||||
<button id="has-switch">Milieu <SwitchOn/></button>
|
<hr/>
|
||||||
<button>Close Captions <NavArrowRight/></button>
|
<button id="has-switch">Milieu <SwitchOn/></button>
|
||||||
<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
|
<button>Close Captions <NavArrowRight/></button>
|
||||||
</div>
|
<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
|
||||||
<div id="quality-changer" class="vc-menu">
|
</div>
|
||||||
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
|
<div id="quality-changer" class="vc-menu">
|
||||||
<button>1080p</button>
|
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
|
||||||
<button>720p</button>
|
<button>1080p</button>
|
||||||
<button>360p</button>
|
<button>720p</button>
|
||||||
</div>
|
<button>360p</button>
|
||||||
</Zorn>
|
</div>
|
||||||
|
</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>
|
||||||
|
</slot>
|
||||||
|
</Default>
|
||||||
|
|
||||||
|
|
||||||
<Switcher/>
|
|
||||||
<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
|
<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>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>
|
|
||||||
|
|
||||||
<style is:global>
|
|
||||||
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() {
|
||||||
document.querySelector('.vc-menu#settings').style.display = 'none'
|
document.querySelector('.vc-menu#settings').style.display = 'none'
|
||||||
|
|
|
||||||
|
|
@ -1,94 +1,88 @@
|
||||||
---
|
---
|
||||||
|
// 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">
|
|
||||||
|
|
||||||
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
|
<Default>
|
||||||
<div>
|
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
|
||||||
<Zorn
|
<div>
|
||||||
Title="Ennie and Yoyki: Non-Girly Games"
|
<Zorn
|
||||||
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
|
Title="Ennie and Yoyki: Non-Girly Games"
|
||||||
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
|
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
|
||||||
PlayerName="EAYNGG"
|
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
|
||||||
/>
|
PlayerName="EAYNGG"
|
||||||
|
/>
|
||||||
<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>
|
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
|
||||||
<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>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
|
||||||
</Info>
|
<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>
|
||||||
|
</div>
|
||||||
|
<span style="background: #232323;height: 600px;width: 6px;border-radius: 1rem;"></span>
|
||||||
|
<div>
|
||||||
|
<Zorn
|
||||||
|
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"
|
||||||
|
CustomControls
|
||||||
|
VideoAttributes="muted"
|
||||||
|
AudioAttributes=""
|
||||||
|
PlayerName="TMOTW"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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>This demo pulls 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 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>
|
||||||
<span style="background: #232323;height: 600px;width: 6px;border-radius: 1rem;"></span>
|
|
||||||
<div>
|
<div style="margin: auto; max-width: 600px;">
|
||||||
<Zorn
|
<p>
|
||||||
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
|
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.
|
||||||
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
|
<br/>
|
||||||
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
|
<br/>
|
||||||
CustomControls
|
This update now identities each Zorn Player with the <code>PlayerName</code> option, as an ID such as <code>zorn-player-PLAYER_NAME_HERE</code> is now used.
|
||||||
VideoAttributes="muted"
|
<br/>
|
||||||
AudioAttributes=""
|
<br/>
|
||||||
PlayerName="TMOTW"
|
The <code>PlayerName</code> option will be identited by the built-in scripts using Astro's <code>definer:vars</code> feature for the script tag.
|
||||||
/>
|
</p>
|
||||||
|
<p>
|
||||||
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
|
Having multiple instances can still be buggy, depending on how you have it setup.
|
||||||
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
|
</p>
|
||||||
<p>This demo pulls 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 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>
|
<style is:global>
|
||||||
|
body {
|
||||||
<Switcher/>
|
background: #010101;
|
||||||
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
|
color: white;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
<div style="margin: auto; max-width: 600px;">
|
a {
|
||||||
<p>
|
color: white;
|
||||||
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/>
|
}
|
||||||
<br/>
|
.video-container {
|
||||||
This update now identities each Zorn Player with the <code>PlayerName</code> option, as an ID such as <code>zorn-player-PLAYER_NAME_HERE</code> is now used.
|
position: relative;
|
||||||
<br/>
|
margin: 40px;
|
||||||
<br/>
|
}
|
||||||
The <code>PlayerName</code> option will be identited by the built-in scripts using Astro's <code>definer:vars</code> feature for the script tag.
|
|
||||||
</p>
|
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
|
||||||
<p>
|
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),
|
||||||
Having multiple instances can still be buggy, depending on how you have it setup.
|
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > hr:nth-child(7),
|
||||||
</p>
|
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > hr:nth-child(7) {
|
||||||
</div>
|
display: none !important;
|
||||||
<style is:global>
|
}
|
||||||
body {
|
code {
|
||||||
background: #010101;
|
background: #fff;
|
||||||
color: white;
|
border-radius: 4px;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
padding: 0px 4px;
|
||||||
a {
|
color: black;
|
||||||
color: white;
|
}
|
||||||
}
|
</style>
|
||||||
}
|
</Default>
|
||||||
.video-container {
|
|
||||||
position: relative;
|
|
||||||
margin: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
|
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
|
||||||
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 {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0px 4px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,40 +1,26 @@
|
||||||
---
|
---
|
||||||
|
// 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'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Zorn
|
<Default Title="The Mark On The Wall" Description="Created by Anderson Wright">
|
||||||
PlayerName="nameit_whatever_you_want"
|
<Zorn
|
||||||
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
|
PlayerName="nameit_whatever_you_want"
|
||||||
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
|
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
|
||||||
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
|
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
|
||||||
CustomControls
|
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
|
||||||
VideoAttributes="muted"
|
CustomControls
|
||||||
AudioAttributes=""
|
VideoAttributes="muted"
|
||||||
/>
|
AudioAttributes=""
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
</slot>
|
||||||
|
</Default>
|
||||||
|
|
||||||
<Switcher/>
|
<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
|
||||||
<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>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>
|
|
||||||
|
|
||||||
<style is:global>
|
|
||||||
body {
|
|
||||||
background: #010101;
|
|
||||||
color: white;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
a {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.video-container {
|
|
||||||
position: relative;
|
|
||||||
margin: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue