fix: more player stuff

src/lib/components/app/bottom-bar.svelte

@@ -2,6 +2,6 @@
   import MusicPlayer from "@/components/app/now-playing.svelte";
 </script>
 
-<div class="fixed bottom-5 left-2 right-2 z-50 flex items-center justify-between p-4 bg-white/10 backdrop-blur-lg rounded-xl shadow-lg">
+<div class="fixed bottom-5 left-2 right-2 z-50 flex items-center p-4 bg-white/10 backdrop-blur-lg rounded-xl shadow-lg">
   <MusicPlayer />
 </div>

src/lib/components/app/daemon.svelte

@@ -6,6 +6,35 @@
     // svelte-ignore non_reactive_update
     let audioElement: HTMLAudioElement;
 
+    // Create a shared function to toggle playback
+    function togglePlayback(play: boolean) {
+        if (!audioElement) return;
+        
+        if (play && state.hasInteracted) {
+            audioElement.play().catch(() => {
+                state.error = "Audio playback failed. Please interact with the page first.";
+                state.isPlaying = false;
+            });
+        } else {
+            audioElement.pause();
+        }
+    }
+
+    // Export this so it can be used by other components
+    function playAudio() {
+        togglePlayback(true);
+    }
+
+    function pauseAudio() {
+        togglePlayback(false);
+    }
+
+    // Make togglePlay available globally through state
+    state.togglePlay = () => {
+        state.isPlaying = !state.isPlaying;
+        togglePlayback(state.isPlaying);
+    };
+
     onMount(async () => {
         const data = await getGeneralData();
         if (data) {
@@ -55,31 +84,15 @@
 
     $effect(() => {
         if (!audioElement) return;
-
-        if (state.isPlaying && state.hasInteracted) {
-            audioElement.play().catch(() => {
-                state.error = "Audio playback failed. Please interact with the page first.";
-                state.isPlaying = false;
-            });
-        } else {
-            audioElement.pause();
-        }
-
-        if (state.currentTime > 0) {
-            audioElement.currentTime = state.currentTime;
-        }
+        togglePlayback(state.isPlaying);
     });
 </script>
 
 {#if !state.hasInteracted}
   <button class="flex flex-col h-screen w-full items-center justify-center space-y-2 cursor-pointer" onclick={() => {
     state.hasInteracted = true;
-    
-    if (state.isPlaying && audioElement) {
-        audioElement.play().catch(() => {
-            state.error = "Audio playback failed after interaction.";
-            state.isPlaying = false;
-        });
+    if (state.isPlaying) {
+      playAudio();
     }
   }}>
     <p>Click anywhere on the screen</p>
@@ -91,15 +104,15 @@
     bind:this={audioElement}
     src={`https://stream.chillhop.com/mp3/${state.currentSong!.fileId}`}
     autoplay
+    volume={state.volume}
     onended={() => {
         state.currentSong = null;
         state.currentTime = 0;
         state.isPlaying = false;
     }}
     ontimeupdate={() => {
-        const audio = document.querySelector("audio");
-        if (audio) {
-            state.currentTime = audio.currentTime;
+        if (audioElement) {
+            state.currentTime = audioElement.currentTime;
         }
     }}
     class="hidden"

src/lib/components/app/now-playing.svelte

@@ -5,11 +5,22 @@
   import Play from "@lucide/svelte/icons/play";
 
   function togglePlay() {
-    state.isPlaying = !state.isPlaying;
+    state.togglePlay();
   }
 </script>
 
-<Button size="icon" onclick={togglePlay} class="w-10 h-10 *:text-white">
+<img
+  src={state.currentSong?.image}
+  alt="Cover Art"
+  class="size-16 rounded-lg shadow-lg"
+/>
+
+<div class="flex flex-col ml-4">
+  <h2 class="text-lg font-semibold text-muted">{state.currentSong?.title}</h2>
+  <p class="text-sm text-muted">{state.currentSong?.artists}</p>
+</div>
+
+<Button size="icon" onclick={togglePlay} class="w-10 h-10 *:text-white ml-4">
   {#if state.isPlaying}
     <Pause />
   {:else}

src/lib/state.svelte.ts

@@ -19,4 +19,7 @@ export const state = $state({
     stations: [] as Station[],
     backgrounds: [] as Background[],
     atmospheres: [] as Atmosphere[],
+    
+    // in daemon.svelte
+    togglePlay: (() => {}) as () => void
 });