From 41682d9ccafe1749dc02629a8cd58ede647061ad Mon Sep 17 00:00:00 2001
From: Tann2019 <tan2019mail1@gmail.com>
Date: Tue, 22 Apr 2025 20:12:46 -0600
Subject: [PATCH] Local Storage, ScrollBar, and Pause Background on pause

---
 src/app.css                                   | 30 +++++++++++++++++++
 src/lib/components/app/bg-dropdown.svelte     |  4 ++-
 src/lib/components/app/bg-image.svelte        |  7 +++++
 src/lib/components/app/daemon.svelte          | 25 ++++++++++++++--
 .../components/app/station-dropdown.svelte    |  2 ++
 src/lib/state.svelte.ts                       |  1 +
 6 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index a1a975a..617e607 100644
--- a/src/app.css
+++ b/src/app.css
@@ -97,3 +97,33 @@
   color: var(--text-color);
   text-shadow: var(--text-shadow);
 }
+
+@layer utilities {
+  @-moz-document url-prefix() {
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: var(--glass-border) transparent;
+    }
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--glass-border);
+    border-radius: 20px;
+  }
+  
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--thicker-glass-border);
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-button {
+    width: 0px;
+  }
+}
diff --git a/src/lib/components/app/bg-dropdown.svelte b/src/lib/components/app/bg-dropdown.svelte
index 1b8e1c5..86d4e3f 100644
--- a/src/lib/components/app/bg-dropdown.svelte
+++ b/src/lib/components/app/bg-dropdown.svelte
@@ -7,6 +7,8 @@
   let selectedBackgroundId = $state(appState.currentBackgroundId!.toString());
   $effect(() => {
     appState.currentBackgroundId = selectedBackgroundId;
+    window.localStorage.setItem('backgroundId', selectedBackgroundId);
+    console.log('Background changed to:', selectedBackgroundId);
   })
 </script>
 
@@ -15,7 +17,7 @@
     <Image />
   </DropdownMenu.Trigger>
   <DropdownMenu.Content
-    class="max-h-[50vh] overflow-y-auto"
+    class="max-h-[50vh] overflow-y-auto custom-scrollbar"
   >
     <DropdownMenu.Group>
       <DropdownMenu.GroupHeading>Select background</DropdownMenu.GroupHeading>
diff --git a/src/lib/components/app/bg-image.svelte b/src/lib/components/app/bg-image.svelte
index 2149bac..da5519c 100644
--- a/src/lib/components/app/bg-image.svelte
+++ b/src/lib/components/app/bg-image.svelte
@@ -2,6 +2,13 @@
   import { state as appState } from '@/state.svelte';
 
   let video: HTMLVideoElement | null = null;
+  
+  $effect(() => {
+    if (video) {
+      (appState as any).backgroundElement = video;
+    }
+  });
+
   $effect(() => {
     const backgroundId = appState.currentBackgroundId;
     if (backgroundId && video) {
diff --git a/src/lib/components/app/daemon.svelte b/src/lib/components/app/daemon.svelte
index 67040f1..e7ce721 100644
--- a/src/lib/components/app/daemon.svelte
+++ b/src/lib/components/app/daemon.svelte
@@ -10,6 +10,14 @@
   function togglePlayback(play: boolean) {
     if (!audioElement) return;
 
+    if (appState.backgroundElement) {
+      if (play) {
+        (appState.backgroundElement as HTMLVideoElement).play().catch(e => console.error('Error playing background video:', e));
+      } else {
+        (appState.backgroundElement as HTMLVideoElement).pause();
+      }
+    }
+
     if (play && appState.hasInteracted) {
       audioElement.currentTime = appState.currentTime;
       audioElement.play().catch(() => {
@@ -96,12 +104,23 @@
       appState.volume = parseFloat(storedVolume);
     }
 
-    if (data.stations.length > 0 && appState.currentStation === null) {
+    if (data.stations.length > 0) {
+      const storedStationId = window.localStorage.getItem('StationId');
+      if (storedStationId && data.stations.some(station => station.id.toString() === storedStationId)) {
+      appState.currentStation = parseInt(storedStationId, 10);
+      } else {
       appState.currentStation = data.stations[0].id;
+      }
+      console.log('Current station ID:', appState.currentStation);
     }
-    if (appState.backgrounds.length > 0 && appState.currentBackgroundId === null) {
+    if (appState.backgrounds.length > 0) {
+      const storedBackgroundId = window.localStorage.getItem('backgroundId');
+      if (storedBackgroundId && appState.backgrounds.some(bg => bg.id === storedBackgroundId)) {
+      appState.currentBackgroundId = storedBackgroundId;
+      } else {
       appState.currentBackgroundId = appState.backgrounds[0].id;
-      console.log('asdf', appState.currentBackgroundId);
+      }
+      console.log('Current background ID:', appState.currentBackgroundId);
     } else {
       appState.error = 'Failed to load initial data (empty response).';
     }
diff --git a/src/lib/components/app/station-dropdown.svelte b/src/lib/components/app/station-dropdown.svelte
index 23a7af4..af4c116 100644
--- a/src/lib/components/app/station-dropdown.svelte
+++ b/src/lib/components/app/station-dropdown.svelte
@@ -8,6 +8,8 @@
   $effect(() => {
     if (selectedStationId) {
       appState.currentStation = parseInt(selectedStationId);
+      window.localStorage.setItem('StationId', selectedStationId);
+      console.log('Station changed to:', selectedStationId);
     }
   });
 </script>
diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts
index bc9ca40..8b1920d 100644
--- a/src/lib/state.svelte.ts
+++ b/src/lib/state.svelte.ts
@@ -9,6 +9,7 @@ export const state = $state({
   volume: 0.5,
   isMuted: false,
   currentBackgroundId: null as string | null,
+  backgroundElement: null,
   activeAtmospheres: {} as Record<string, number>, // { atmosphereId: volume (0-100) }
   isLoading: true,
   error: null as string | null,