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

Dedicated Milieu demo

Browse source
This commit is contained in:
Korbs 2024-11-02 21:07:23 -04:00
parent 4e81f677dc
commit 922e65065e
4 changed files with 79 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
test/src/pages/index.astro
View file

@ -43,6 +43,7 @@ import {Zorn} from '@minpluto/zorn'
<br/>
<a href="/with-separate-audio">View with separated audio</a>
<a href="/live">Live Stream</a>
<a href="/milieu">Milieu effect</a>
<style>
body {

3
test/src/pages/live.astro
View file

@ -24,4 +24,5 @@ body {
<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>
<br/>
<a href="/">Generic Usage</a>
<a href="/with-separate-audio">View with separated audio</a>
<a href="/with-separate-audio">View with separated audio</a>
<a href="/milieu">Milieu effect</a>

75
test/src/pages/milieu.astro Normal file
View file

@ -0,0 +1,75 @@
---
// Components
import {
ArrowUpRight,
NavArrowLeft,
SwitchOn,
NavArrowRight
} from '@iconoir/vue'
import {Zorn} from '@minpluto/zorn'
---
<meta charset="utf-8">
<Zorn
Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
CustomControlsWithMenu
SettingsMenu
Milieu
>
<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>
<h2>Ennie and Yoyki: Non-Girly Games</h2>
<p>Created by Daniyar Yambushev</p>
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
<p>This demo pulls from: <a href="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm">https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm</a></p>
<br/>
<a href="/with-separate-audio">View with separated audio</a>
<a href="/live">Live Stream</a>
<a href="/milieu">Milieu effect</a>
<style>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
</style>
<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>

1
test/src/pages/with-separate-audio.astro
View file

@ -21,6 +21,7 @@ import {Zorn} from '@minpluto/zorn'
<br/>
<a href="/">Generic Usage</a>
<a href="/live">Live Stream</a>
<a href="/milieu">Milieu effect</a>
<style>
body {