Add YouTube support

package.json

@@ -15,7 +15,7 @@
     "live-streaming"
   ],
   "type": "module",
-  "version": "0.4.63",
+  "version": "0.4.65",
   "exports": {
     ".": "./index.ts"
   },
@@ -30,7 +30,7 @@
     "astro": "^4.14.2"
   },
   "scripts": {
-    "npm:publish": "npm publish --registry https://npm.sudovanilla.org/",
+    "publish": "npm publish && npm publish --registry https://npm.sudovanilla.org/",
     "test": "cd test/ && bun start"
   }
 }

src/Player.astro

@@ -11,6 +11,11 @@ const {
     VideoAttributes,
     AudioAttributes,
 
+    YouTube = false,
+    YouTubeQuality = '137',
+    Invidious,
+    WatchId,
+
     Milieu,
     MilieuMode = "Default",
     MilieuSpeed = "2000",
@@ -29,14 +34,27 @@ import Controller from './Controls/Controller.astro'
 import Seek from './Controls/Seek.astro'
 import Sync from './Controls/Sync.astro'
 
+// YouTube
+if (YouTube === true) {
+    // 8K = 272
+    // 4K = 315
+    // 1080p = 137
+    // 720p = 302
+    // Dash Audio = 251
+    var YTVideo = 'https://' + Invidious +'/latest_version?id=' + WatchId + '&itag=' + YouTubeQuality
+    var YTAudio = 'https://' + Invidious +'/latest_version?id=' + WatchId + '&itag=251'
+} else if (YouTube === false) {
+    null
+}
+
 // Icons and Styles
 import './Styles/Index.scss'
 import './Styles/Iconoir.css'
 ---
 
 <div class="video-container" id={"zorn-player-" + PlayerName}>
-    <video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
-    {Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
+    <video class="main-video" {VideoAttributes} disableremoteplayback src={YouTube ? YTVideo : Video} poster={Poster} preload="auto"></video>
+    {Audio ? <audio class="main-audio"><source {AudioAttributes} src={YouTube ? YTAudio : Audio} type="audio/mp3"/></audio> : null }
     {Audio ? <Sync PlayerName={PlayerName}/> : null }
     {Milieu ?
         <MilieuEffect

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">

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>