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

Add new demo page for "Multi-Instance" demo

Browse source
This commit is contained in:
Korbs 2024-11-04 19:52:55 -05:00
parent bccb57438f
commit 0a7f331c1f
2 changed files with 92 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
test/src/components/Switcher.astro
View file

@ -3,6 +3,7 @@
<a href="/with-separate-audio">Separated Audio</a>
<a href="/live">Live Stream</a>
<a href="/milieu">Milieu Effect</a>
<a href="/multi">Multiple Instances</a>
</div>
<style lang="scss">

91
test/src/pages/multi.astro Normal file
View file

@ -0,0 +1,91 @@
---
// 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;">
<div>
<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"
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">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>
<p>Subtitles shown are part of the video itself, not the player.</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>
<Switcher/>
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
<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/>
<br/>
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.
<br/>
<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>
<p>
Having multiple instances can still be buggy, depending on how you have it setup.
</p>
</div>
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
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 {
background: #fff;
border-radius: 4px;
padding: 0px 4px;
color: black;
}
</style>