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] 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