chore: use mobile atmospheres

src/lib/components/app/atmospheres.svelte

@@ -20,6 +20,7 @@
   function getVolumeValue(name: string) {
     return appState.activeAtmospheres[name] || 0;
   }
+  console.log(appState.atmospheres)
 </script>
 
 <DropdownMenu.Root>

src/lib/components/app/daemon.svelte

@@ -2,10 +2,12 @@
   import { state as appState } from '@/state.svelte';
   import { getGeneralData, getStationSongs } from '@/utils';
   import { onMount } from 'svelte';
+  import { useIsMobile } from '@/isMobile.svelte';
 
   // svelte-ignore non_reactive_update
   let audioElement: HTMLAudioElement;
   let isTransitioning = $state(false);
+  let isMobile = useIsMobile();
 
   function togglePlayback(play: boolean) {
     if (!audioElement) return;
@@ -204,7 +206,7 @@
 
 {#each Object.entries(appState.activeAtmospheres) as [name, volume]}
   <audio
-    src={`https://chill1.b-cdn.net/audio/v4/desktop/${name}.mp3`}
+    src={isMobile ? appState.atmospheres.find(atm => atm.name === name)?.urlMobile : appState.atmospheres.find(atm => atm.name === name)?.url}
     class="hidden"
     id={name}
     volume={volume}

src/lib/isMobile.svelte.ts

@@ -0,0 +1,20 @@
+import { readable } from 'svelte/store';
+import { browser } from '$app/environment';
+export function useIsMobile(mobileWidth = 768) {
+  return readable(false, (set) => {
+    if (!browser) return;
+    
+    const checkIsMobile = () => {
+      const isMobile = window.innerWidth < mobileWidth;
+      set(isMobile);
+    };
+    
+    checkIsMobile();
+    
+    window.addEventListener('resize', checkIsMobile);
+    
+    return () => {
+      window.removeEventListener('resize', checkIsMobile);
+    };
+  });
+}