From 922e65065e5482674a47496a592df202f9be5dec Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sat, 2 Nov 2024 21:07:23 -0400
Subject: [PATCH] Dedicated Milieu demo

---
 test/src/pages/index.astro               |  1 +
 test/src/pages/live.astro                |  3 +-
 test/src/pages/milieu.astro              | 75 ++++++++++++++++++++++++
 test/src/pages/with-separate-audio.astro |  1 +
 4 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 test/src/pages/milieu.astro

diff --git a/test/src/pages/index.astro b/test/src/pages/index.astro
index 23566bf..a54fbe8 100644
--- a/test/src/pages/index.astro
+++ b/test/src/pages/index.astro
@@ -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 {
diff --git a/test/src/pages/live.astro b/test/src/pages/live.astro
index 08fb03c..de7ff2c 100644
--- a/test/src/pages/live.astro
+++ b/test/src/pages/live.astro
@@ -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>
\ No newline at end of file
+<a href="/with-separate-audio">View with separated audio</a>
+<a href="/milieu">Milieu effect</a>
\ No newline at end of file
diff --git a/test/src/pages/milieu.astro b/test/src/pages/milieu.astro
new file mode 100644
index 0000000..2e224e9
--- /dev/null
+++ b/test/src/pages/milieu.astro
@@ -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>
\ No newline at end of file
diff --git a/test/src/pages/with-separate-audio.astro b/test/src/pages/with-separate-audio.astro
index 0d88d98..1fb7c56 100644
--- a/test/src/pages/with-separate-audio.astro
+++ b/test/src/pages/with-separate-audio.astro
@@ -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 {