From bc1262d87ef3d7baeef939781c8b4c4c7c8c8d0f Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 4 Nov 2024 19:54:01 -0500
Subject: [PATCH] Create `PlayerName` option to identify specific Zorn players

---
 src/Controls/Controller.astro | 97 +++++++++++++++++------------------
 src/Controls/Seek.astro       | 24 +++++----
 src/Controls/Sync.astro       | 12 +++--
 src/Player.astro              | 28 +++++-----
 4 files changed, 84 insertions(+), 77 deletions(-)

diff --git a/src/Controls/Controller.astro b/src/Controls/Controller.astro
index 34aef98..04b8c4d 100644
--- a/src/Controls/Controller.astro
+++ b/src/Controls/Controller.astro
@@ -1,4 +1,10 @@
-<script is:inline>
+---
+const {
+  PlayerName
+} = Astro.props
+---
+
+<script define:vars={{PlayerName}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -24,9 +30,9 @@
  * for the JavaScript code in this page.
  *
  */
-var VideoContainer = document.querySelector('.video-container')
-var VideoControls = document.querySelector('.video-controls')
-var Player = document.querySelector('video')
+var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
+var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
+var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
 
 // Icons
 var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
@@ -41,35 +47,35 @@ var ExitFullscreenIcon = exit_fullscreen_solid_default
 
 // Fullscreen
 function Fullscreen() {
-  const Button_Fullscreen = document.getElementById("vc-fullscreen");
+  const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
   function Toggle_Fullscreen() {
     if (document.fullscreenElement) {
-      document.querySelector('.vc-top').style.opacity = '0'
-      document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
-      document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '12px'
-      document.querySelector('.video-container .video-controls').style.bottom = '4px'
-      document.querySelector('.video-container .video-controls').style.height = 'calc(100% - 28px)'
+      document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '12px'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '4px'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = 'calc(100% - 28px)'
       document.exitFullscreen();
     } else if (document.webkitFullscreenElement) {
-      document.querySelector('.vc-top').style.opacity = '0'
-      document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
-      document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '12px'
-      document.querySelector('.video-container .video-controls').style.bottom = '4px'
-      document.querySelector('.video-container .video-controls').style.height = 'calc(100% - 28px)'
+      document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '12px'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '4px'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = 'calc(100% - 28px)'
       document.webkitExitFullscreen();
     } else if (VideoContainer.webkitRequestFullscreen) {
-      document.querySelector('.vc-top').style.opacity = '1'
-      document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
-      document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '0'
-      document.querySelector('.video-container .video-controls').style.bottom = '0px'
-      document.querySelector('.video-container .video-controls').style.height = '100%'
+      document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '0'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '0px'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = '100%'
       VideoContainer.webkitRequestFullscreen();
     } else {
-      document.querySelector('.vc-top').style.opacity = '1'
-      document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
-      document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '0'
-      document.querySelector('.video-container .video-controls').style.bottom = '0px'
-      document.querySelector('.video-container .video-controls').style.height = '100%'
+      document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '0'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '0px'
+      document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = '100%'
       VideoContainer.requestFullscreen();
     }
     Update_FullscreenButton()
@@ -90,20 +96,9 @@ function Fullscreen() {
   });
 }
 
-
-function Update_PlayPauseButton() {
-    if (Player.paused) {
-      Button_PlayPause.setAttribute("data-title", "Play (K)");
-      Button_PlayPause.innerHTML = `${PlayIcon}`;
-    } else {
-      Button_PlayPause.setAttribute("data-title", "Pause (K)");
-      Button_PlayPause.innerHTML = `${PauseIcon}`;
-    }
-  }
-
 // Play/Pause
 function PlayPause() {
-  const Button_PlayPause = document.querySelector(".video-controls #vc-playpause");
+  const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause");
   Button_PlayPause.addEventListener("click", Toggle_PlayPause);
   Player.addEventListener("click", Toggle_PlayPause);
   Player.addEventListener("play", Update_PlayPauseButton);
@@ -128,8 +123,8 @@ function PlayPause() {
 
 // Skip Around
 function SkipAround() {
-  const Button_SkipBack = document.querySelector(".video-controls #vc-backwards");
-  const Button_SkipForth = document.querySelector(".video-controls #vc-forwards");
+  const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards");
+  const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards");
   Button_SkipBack.addEventListener("click", Toggle_SkipBack);
   Button_SkipForth.addEventListener("click", Toggle_SkipForth);
   function Toggle_SkipBack() {
@@ -149,11 +144,11 @@ function AutoToggleControls() {
     if (Player.paused) {
       return;
     } else {
-      document.querySelector(".video-controls").classList.add("hide");
+      document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.add("hide");
     }
   }
   function Show_Controls2() {
-    document.querySelector(".video-controls").classList.remove("hide");
+    document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.remove("hide");
   }
   VideoControls.addEventListener("mouseenter", Show_Controls2);
   VideoControls.addEventListener("mouseleave", Hide_Controls2);
@@ -249,21 +244,21 @@ function KeyboardShortcuts(events) {
 // If Media Ends, fade main controls and show a "Replay" button
 function PlayAgain() {
   Player.onended = (event) => {
-    document.querySelector('.vc-start').style.opacity = '0'
-    document.querySelector('.vc-start').style.pointerEvents = 'none'
-    document.querySelector('.vc-center').style.opacity = '0'
-    document.querySelector('.vc-center').style.pointerEvents = 'none'
-    document.querySelector('#vc-playagain').style.display = 'inherit'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '0'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'none'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '0'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.pointerEvents = 'none'
+    document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
   }
   document.querySelector('#vc-playagain').onclick = PlayItAgain
 }
 
 function PlayItAgain() {
-    document.querySelector('.vc-start').style.opacity = '1'
-    document.querySelector('.vc-start').style.pointerEvents = 'all'
-    document.querySelector('.vc-center').style.opacity = '1'
-    document.querySelector('.vc-center').style.pointerEvents = 'all'
-    document.querySelector('#vc-playagain').style.display = 'none'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
+    document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.pointerEvents = 'all'
+    document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'none'
 
     Player.pause();
     Player.currentTime = '0';
diff --git a/src/Controls/Seek.astro b/src/Controls/Seek.astro
index 02e33dc..d4fd663 100644
--- a/src/Controls/Seek.astro
+++ b/src/Controls/Seek.astro
@@ -1,4 +1,10 @@
-<script is:inline>
+---
+const {
+  PlayerName
+} = Astro.props
+---
+
+<script define:vars={{PlayerName}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -25,9 +31,9 @@
  *
  */
 function Seek() {
-    var Player = document.querySelector('video')
-    const timeElapsed = document.getElementById("current")
-    const duration = document.getElementById("duration")
+    var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
+    const timeElapsed = document.querySelector('#zorn-player-' + PlayerName + ' #current')
+    const duration = document.querySelector('#zorn-player-' + PlayerName + ' #duration')
     function formatTime(timeInSeconds) {
         const result = new Date(timeInSeconds * 1e3)
             .toISOString()
@@ -56,8 +62,8 @@ function Seek() {
         )
     }
     Player.addEventListener("timeupdate", updateTimeElapsed)
-    const progressBar = document.querySelector(".vc-progress-bar")
-    const seek = document.getElementById("seek")
+    const progressBar = document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar')
+    const seek = document.querySelector('#zorn-player-' + PlayerName + ' #seek')
     function initializeVideo() {
         const videoDuration = Math.round(Player.duration)
         seek.setAttribute("max", videoDuration)
@@ -71,10 +77,10 @@ function Seek() {
     }
     function updateProgress() {
         seek.value = Math.floor(Player.currentTime)
-        document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
+        document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
     }
     Player.addEventListener("timeupdate", updateProgress)
-    const seekTooltip = document.getElementById("seek-tooltip")
+    const seekTooltip = document.querySelector('#zorn-player-' + PlayerName + ' #seek-tooltip')
     function updateSeekTooltip(event) {
         const skipTo = Math.round(
             (event.offsetX / event.target.clientWidth) *
@@ -86,7 +92,7 @@ function Seek() {
         const rect = Player.getBoundingClientRect()
         seekTooltip.style.left = `${event.pageX - rect.left}px`
         seekTooltip.style.opacity = '1'
-        document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
+        document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
         seek.addEventListener('mouseleave', () => {
             seekTooltip.style.opacity = '0'
         })
diff --git a/src/Controls/Sync.astro b/src/Controls/Sync.astro
index 023f48e..fcf3581 100644
--- a/src/Controls/Sync.astro
+++ b/src/Controls/Sync.astro
@@ -1,4 +1,10 @@
-<script is:inline>
+---
+const {
+  PlayerName
+} = Astro.props
+---
+
+<script define:vars={{PlayerName}}>
 /**
  * @licstart  The following is the entire license notice for the 
  *  JavaScript code in this page.
@@ -27,8 +33,8 @@
  */
 // https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84
 // Find elements
-var SyncVideo = document.querySelector(".main-video")
-var SyncAudio = document.querySelector(".main-audio")
+var SyncVideo = document.querySelector("#zorn-player-" + PlayerName + " .main-video")
+var SyncAudio = document.querySelector("#zorn-player-" + PlayerName + " .main-audio")
 
 // Object for synchronization of multiple media/sources
 if (typeof window.MediaController === "function") {
diff --git a/src/Player.astro b/src/Player.astro
index e5df341..dd1e1a9 100644
--- a/src/Player.astro
+++ b/src/Player.astro
@@ -1,6 +1,7 @@
 ---
 // Properties
 const {
+    PlayerName,
     Poster,
     Video,
     Audio,
@@ -23,35 +24,34 @@ import './Index.scss'
 import { Settings } from '@iconoir/vue'
 ---
 
-<div class="video-container">
+<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 }
-    {Audio ? <Sync/> : null }
+    {Audio ? <Sync PlayerName={PlayerName}/> : null }
     {Milieu ? <MilieuEffect/> : null }
     {SettingsMenu ?
-        <Controls Live={Live}>
+        <Controls PlayerName={PlayerName} Live={Live}>
             <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
             <slot/>
         </Controls>
         :
-        <Controls Live={Live}/>
+        <Controls PlayerName={PlayerName} Live={Live}/>
     }
-    <Controller/>
-    <Seek/>
+    <Controller PlayerName={PlayerName}/>
+    <Seek PlayerName={PlayerName}/>
 </div>
 
 <!-- Needs control the correct source -->
 {Audio ?
-    <script is:inline>
-        var ZornAudioSource = document.querySelector('.video-container audio')
-        var VolumeRange = document.querySelector('.vc-volume-controller-input input')
+    <script define:vars={{PlayerName}}>
+        var ZornAudioSource = document.querySelector('#zorn-player-' + PlayerName + ' audio')
+        var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
         VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
     </script>
     :
-    <script is:inline>
-        var Player = document.querySelector('.video-container video')
-        var VolumeRange = document.querySelector('.vc-volume-controller-input input')
+    <script define:vars={{PlayerName}}>
+        var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
+        var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
         VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
     </script>
-}
-
+}
\ No newline at end of file