From 57eb7f9246e1413c02c37c7b3a934667711bc41b Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 29 Nov 2024 17:45:36 -0500
Subject: [PATCH] Add YouTube to demo page

---
 test/src/components/Switcher.astro |  1 +
 test/src/pages/youtube.astro       | 51 ++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 test/src/pages/youtube.astro

diff --git a/test/src/components/Switcher.astro b/test/src/components/Switcher.astro
index 34c4dad..86e98b6 100644
--- a/test/src/components/Switcher.astro
+++ b/test/src/components/Switcher.astro
@@ -4,6 +4,7 @@
     <a href="/live">Live Stream</a>
     <a href="/milieu">Milieu Effect</a>
     <a href="/multi">Multiple Instances</a>
+    <a href="/youtube">YouTube</a>
 </div>
 
 <style lang="scss">
diff --git a/test/src/pages/youtube.astro b/test/src/pages/youtube.astro
new file mode 100644
index 0000000..a0a2d8d
--- /dev/null
+++ b/test/src/pages/youtube.astro
@@ -0,0 +1,51 @@
+---
+// Layout
+import Default from 'src/layouts/Default.astro'
+
+// Components
+import {Zorn} from '@minpluto/zorn'
+---
+
+<Default Page="/" Title="WING IT! - Blender Open Movie" Description="Created by Blender Studio">
+    <!-- Please run your own Invidious instance in production, with rotating proxy added -->
+	<Zorn
+		PlayerName="youtube_player"
+        YouTube
+        WatchId="u9lj-c29dxI"
+        Invidious="invidious.nerdvpn.de"
+        Audio
+	>
+	</Zorn>
+	<slot slot="info">
+        <p>The video above is from directly from <a href="https://www.youtube.com/watch?v=u9lj-c29dxI">youtube.com/watch?v=u9lj-c29dxI</a>. Playing at 1080p.</p>
+        <p>Zorn uses the Invidious URL parameters to fetch the Youtube video and audio.</p>
+        <p>You must add the "Audio" option for Zorn for audio to work correctly for higher quality videos.</p>
+        <p>For the URL parameters, the "itag" parameter is mainly use to fetch the correct quality you want for the video player. It uses 1080p by default if one is not set. </p>
+        <a href="https://docs.invidious.io/url-parameters/">Invidious URL Parameters</a>
+        <p>It is recommended, during production, to run your own Invidious instance with rotating proxy. Rotating the proxy should avoid blockage from YouTube, as YouTube heavily trying to shut down the Invidious project.</p>
+        <a href="https://docs.invidious.io/installation/">Setting up Invidious</a>
+        <p></p>
+        <a href="https://docs.invidious.io/ipv6-rotator/">Rotating your IPv6</a>
+        <br/>
+        <br/>
+	</slot>
+</Default>
+
+<style is:inline>a[href="/youtube"] {background: white !important;color: black !important;}</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