feat: base atmospheres

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

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>

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>

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}

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>