From bd95cc113ce7048efb19bff7b3fe1d3221a8f5d5 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Fri, 25 Apr 2025 17:16:10 +0200
Subject: [PATCH 1/3] feat: base atmospheres

---
 README.md                                 |  2 +-
 src/lib/components/app/atmospheres.svelte | 39 +++++++++++++++++++++++
 src/lib/components/app/bottom-bar.svelte  |  2 ++
 src/lib/components/app/daemon.svelte      | 11 +++++++
 src/lib/components/app/now-playing.svelte |  6 ++--
 5 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/app/atmospheres.svelte

diff --git a/README.md b/README.md
index 798a28a..007d4fd 100644
--- a/README.md
+++ b/README.md
@@ -7,9 +7,9 @@ The ultimate lofi player. Uses music from [Chillhop](https://chillhop.com/).
 - [x] Play music
 - [x] Change stations
 - [x] Change backgrounds
+- [ ] Background sounds
 - [ ] Pomodoro timers
 - [ ] Volume control
-- [ ] Background sounds
 - [ ] Links to Spotify
 - [ ] Alarm(?)
 - [ ] Sleep timer
\ No newline at end of file
diff --git a/src/lib/components/app/atmospheres.svelte b/src/lib/components/app/atmospheres.svelte
new file mode 100644
index 0000000..141e48d
--- /dev/null
+++ b/src/lib/components/app/atmospheres.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  // *atmospheres* sounds corny but cool i guess :sob:
+  // TODO: make max volume configurable
+  import * as Popover from '$lib/components/ui/popover/index.js';
+  import { Button } from '../ui/button';
+  import AudioLines from '@lucide/svelte/icons/audio-lines';
+  import { state as appState } from '@/state.svelte';
+  import Slider from '../ui/slider/slider.svelte';
+  console.log(appState.atmospheres)
+
+  function sliderChange(name: string, volume: number) {
+    if (appState.activeAtmospheres.hasOwnProperty(name) && volume === 0) {
+      delete appState.activeAtmospheres[name];
+    } else {
+      appState.activeAtmospheres[name] = volume;
+    }
+  }
+</script>
+
+<Popover.Root>
+  <Popover.Trigger><Button size="icon"><AudioLines /></Button></Popover.Trigger>
+  <Popover.Content>
+    <h3 class="text-sm font-semibold">Atmospheres</h3>
+    {#each appState.atmospheres as atmosphere}
+      <div class="flex items-center space-x-2">
+        <Slider
+          type="single"
+          max={0.25}
+          step={0.01}
+          class="w-32"
+          onValueChange={(value) => {
+            sliderChange(atmosphere.name, value);
+          }}
+        />
+        <label for={atmosphere.id}>{atmosphere.name}</label>
+      </div>
+    {/each}
+  </Popover.Content>
+</Popover.Root>
diff --git a/src/lib/components/app/bottom-bar.svelte b/src/lib/components/app/bottom-bar.svelte
index 672ee3f..fbebb3c 100644
--- a/src/lib/components/app/bottom-bar.svelte
+++ b/src/lib/components/app/bottom-bar.svelte
@@ -2,6 +2,7 @@
   import BgDropdown from '@/components/app/bg-dropdown.svelte';
   import Disclaimer from '@/components/app/disclaimer.svelte';
   import MusicPlayer from '@/components/app/now-playing.svelte';
+  import Sounds from '@/components/app/atmospheres.svelte';
   import StationDropdown from '@/components/app/station-dropdown.svelte';
 </script>
 
@@ -14,6 +15,7 @@
   <div class="flex gap-4 mt-3 sm:mt-0">
     <StationDropdown />
     <BgDropdown />
+    <Sounds />
     <Disclaimer />
   </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/components/app/daemon.svelte b/src/lib/components/app/daemon.svelte
index 67040f1..9f9e589 100644
--- a/src/lib/components/app/daemon.svelte
+++ b/src/lib/components/app/daemon.svelte
@@ -204,3 +204,14 @@
     class="hidden"
   ></audio>
 {/if}
+
+{#each Object.entries(appState.activeAtmospheres) as [name, volume]}
+  <audio
+    src={`https://chill1.b-cdn.net/audio/v4/desktop/${name}.mp3`}
+    class="hidden"
+    id={name}
+    volume={volume}
+    loop
+    autoplay
+  ></audio>
+{/each}
\ No newline at end of file
diff --git a/src/lib/components/app/now-playing.svelte b/src/lib/components/app/now-playing.svelte
index 9849029..1ace7ae 100644
--- a/src/lib/components/app/now-playing.svelte
+++ b/src/lib/components/app/now-playing.svelte
@@ -17,7 +17,7 @@
     <p class="text-sm">{state.currentSong?.artists}</p>
   </div>
   <div class="flex-1"></div>
-  <div class="gap-4">
+  <div class="gap-4 flex">
     <Button size="icon" onclick={togglePlay} class="size-10 md:ml-4">
       {#if state.isPlaying}
         <Pause />
@@ -25,6 +25,8 @@
         <Play />
       {/if}
     </Button>
-    <Volume />
+    <div class="hidden sm:block">
+      <Volume />
+    </div>
   </div>
 </div>
\ No newline at end of file

From 2dea598af2b674091a22e0ebe9bdd509b58c7230 Mon Sep 17 00:00:00 2001
From: SrIzan10 <66965250+SrIzan10@users.noreply.github.com>
Date: Fri, 25 Apr 2025 18:39:16 +0000
Subject: [PATCH 2/3] feat: atmospheres redesign

---
 src/lib/components/app/atmospheres.svelte     | 82 +++++++++++++------
 src/lib/components/app/daemon.svelte          |  6 +-
 .../ui/popover/popover-content.svelte         |  9 +-
 3 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/app/atmospheres.svelte b/src/lib/components/app/atmospheres.svelte
index 141e48d..34187ec 100644
--- a/src/lib/components/app/atmospheres.svelte
+++ b/src/lib/components/app/atmospheres.svelte
@@ -1,39 +1,69 @@
 <script lang="ts">
-  // *atmospheres* sounds corny but cool i guess :sob:
-  // TODO: make max volume configurable
-  import * as Popover from '$lib/components/ui/popover/index.js';
-  import { Button } from '../ui/button';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+  import { buttonVariants } from '$lib/components/ui/button/index.js';
   import AudioLines from '@lucide/svelte/icons/audio-lines';
   import { state as appState } from '@/state.svelte';
-  import Slider from '../ui/slider/slider.svelte';
-  console.log(appState.atmospheres)
+  import { Slider } from '../ui/slider/index.js';
+  import VolumeX from '@lucide/svelte/icons/volume-x';
+  import VolumeZero from '@lucide/svelte/icons/volume';
+  import VolumeOne from '@lucide/svelte/icons/volume-1';
+  import VolumeTwo from '@lucide/svelte/icons/volume-2';
 
   function sliderChange(name: string, volume: number) {
-    if (appState.activeAtmospheres.hasOwnProperty(name) && volume === 0) {
+    if (volume === 0) {
       delete appState.activeAtmospheres[name];
     } else {
       appState.activeAtmospheres[name] = volume;
     }
   }
+
+  function getVolumeValue(name: string) {
+    return appState.activeAtmospheres[name] || 0;
+  }
 </script>
 
-<Popover.Root>
-  <Popover.Trigger><Button size="icon"><AudioLines /></Button></Popover.Trigger>
-  <Popover.Content>
-    <h3 class="text-sm font-semibold">Atmospheres</h3>
-    {#each appState.atmospheres as atmosphere}
-      <div class="flex items-center space-x-2">
-        <Slider
-          type="single"
-          max={0.25}
-          step={0.01}
-          class="w-32"
-          onValueChange={(value) => {
-            sliderChange(atmosphere.name, value);
-          }}
-        />
-        <label for={atmosphere.id}>{atmosphere.name}</label>
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger class={buttonVariants({ variant: 'default', size: 'icon' })}>
+    <AudioLines />
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content class="w-56 max-h-[50vh] overflow-y-auto">
+    <DropdownMenu.Group>
+      <DropdownMenu.GroupHeading>Atmospheres</DropdownMenu.GroupHeading>
+      <DropdownMenu.Separator />
+      <div class="grid gap-4">
+        {#each appState.atmospheres as atmosphere}
+          <div class="p-2 rounded-md hover:bg-white/5 transition-colors">
+            <div class="flex items-center justify-between mb-1">
+              <label for={atmosphere.id} class="text-sm font-medium">{atmosphere.name}</label>
+              <span class="text-xs opacity-70">
+                {#if getVolumeValue(atmosphere.name) > 0}
+                  {#if getVolumeValue(atmosphere.name) > 0 && getVolumeValue(atmosphere.name) <= 0.4}
+                    <VolumeZero class="inline size-3 mr-1" />
+                  {:else if getVolumeValue(atmosphere.name) > 0.4 && getVolumeValue(atmosphere.name) <= 0.8}
+                    <VolumeOne class="inline size-3 mr-1" />
+                  {:else}
+                    <VolumeTwo class="inline size-3 mr-1" />
+                  {/if}
+                  {Math.round(getVolumeValue(atmosphere.name) * 100)}%
+                {:else}
+                  <VolumeX class="inline size-3 mr-1" />
+                  Off
+                {/if}
+              </span>
+            </div>
+            <Slider
+              type="single"
+              value={getVolumeValue(atmosphere.name)}
+              id={atmosphere.id}
+              max={1}
+              step={0.01}
+              onValueChange={(value) => {
+                sliderChange(atmosphere.name, value);
+              }}
+            />
+          </div>
+        {/each}
       </div>
-    {/each}
-  </Popover.Content>
-</Popover.Root>
+    </DropdownMenu.Group>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/src/lib/components/app/daemon.svelte b/src/lib/components/app/daemon.svelte
index 9f9e589..ce9ac42 100644
--- a/src/lib/components/app/daemon.svelte
+++ b/src/lib/components/app/daemon.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { state as appState } from '@/state.svelte';
-  import { getGeneralData, getStationSongs, setSongTime } from '@/utils';
+  import { getGeneralData, getStationSongs } from '@/utils';
   import { onMount } from 'svelte';
 
   // svelte-ignore non_reactive_update
@@ -120,8 +120,6 @@
       appState.error = 'No songs available.';
     }
 
-    setSongTime()
-
     appState.isLoading = false;
 
     if ('mediaSession' in navigator) {
@@ -171,7 +169,6 @@
           appState.songQueue = songs;
           appState.currentSong = appState.songQueue[0];
           appState.duration = appState.currentSong.duration;
-          setSongTime();
           setMediaSession();
         } else {
           appState.error = 'Failed to load songs.';
@@ -213,5 +210,6 @@
     volume={volume}
     loop
     autoplay
+    preload="none"
   ></audio>
 {/each}
\ No newline at end of file
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
index c2f4833..c919016 100644
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -20,10 +20,11 @@
 		{align}
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
-      "bg-[var(--glass-bg)] transition hover:bg-[var(--glass-hover)] border-[var(--glass-border)]",
-			className
-		)}
+      'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none',
+      'bg-white/10 backdrop-blur-md transition hover:bg-white/15 text-foreground border border-white/20 shadow-lg',
+      className
+    )}
 		{...restProps}
 	/>
 </PopoverPrimitive.Portal>

From 4dcd9e692b0150697b6b4d861276635b6819f0c7 Mon Sep 17 00:00:00 2001
From: SrIzan10 <66965250+SrIzan10@users.noreply.github.com>
Date: Fri, 25 Apr 2025 19:30:10 +0000
Subject: [PATCH 3/3] chore: use mobile atmospheres

---
 src/lib/components/app/atmospheres.svelte |  1 +
 src/lib/components/app/daemon.svelte      |  4 +++-
 src/lib/isMobile.svelte.ts                | 20 ++++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/isMobile.svelte.ts

diff --git a/src/lib/components/app/atmospheres.svelte b/src/lib/components/app/atmospheres.svelte
index 34187ec..f0d05ce 100644
--- a/src/lib/components/app/atmospheres.svelte
+++ b/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>
diff --git a/src/lib/components/app/daemon.svelte b/src/lib/components/app/daemon.svelte
index ce9ac42..8b745da 100644
--- a/src/lib/components/app/daemon.svelte
+++ b/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}
diff --git a/src/lib/isMobile.svelte.ts b/src/lib/isMobile.svelte.ts
new file mode 100644
index 0000000..39942ac
--- /dev/null
+++ b/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);
+    };
+  });
+}
\ No newline at end of file