Automatically fetch currently playing song, fallback to first song in playqueue

src/routes/+page.svelte

@@ -14,6 +14,7 @@
 
 
     let source: HTMLAudioElement = $state();
+    let title = $state("");
     let isPaused = $state(true);
     let volume = $state(0.2);
     let progress = $state(0);
@@ -29,6 +30,23 @@
         }
     }
 
+    async function fetchNowPlaying() {
+        const data = await OpenSubsonic.get("getNowPlaying");
+        let foundInNowPlaying = false;
+        if (data && data.nowPlaying.entry) {
+            data.nowPlaying.entry.forEach((entry) => {
+                if (entry.username == OpenSubsonic.username) {
+                    title = entry.title;
+                    newSong(entry);
+                    foundInNowPlaying = true;
+                }
+            })
+        }
+        if (!foundInNowPlaying && queue.length != 0) {
+            newSong(queue[0])
+        }
+    }
+
     async function saveQueue() {
         let songs = [];
 
@@ -127,7 +145,9 @@
     }
 
     onMount(() => {
-        fetchQueue();
+        fetchQueue().then(() => {
+            fetchNowPlaying();
+        });
         source = new Audio();
     })
 </script>
@@ -145,6 +165,7 @@
 </div>
 <div class="border border-2 min-h-24 h-24">
     <div class="flex flex-row gap-2">
+        <p class="border p-2">Song: {title}</p>
         <p class="border p-2">Volume: {volume}</p>
         <p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p>
         <p class="border p-2">{progressPercent().toFixed(2)}%</p>