From 0a7f331c1f5d3941e2b7b3877e243ae8451aede7 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 4 Nov 2024 19:52:55 -0500
Subject: [PATCH] Add new demo page for "Multi-Instance" demo

---
 test/src/components/Switcher.astro |  1 +
 test/src/pages/multi.astro         | 91 ++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 test/src/pages/multi.astro

diff --git a/test/src/components/Switcher.astro b/test/src/components/Switcher.astro
index b3d428e..3a9b42a 100644
--- a/test/src/components/Switcher.astro
+++ b/test/src/components/Switcher.astro
@@ -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">
diff --git a/test/src/pages/multi.astro b/test/src/pages/multi.astro
new file mode 100644
index 0000000..a07c8ec
--- /dev/null
+++ b/test/src/pages/multi.astro
@@ -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>
\ No newline at end of file