refactor: reduce dependency

src/components/app/app.tsx

@@ -16,11 +16,13 @@ import { SnackbarProvider } from '@/contexts/snackbar';
 import { sounds } from '@/data/sounds';
 
 import type { Sound } from '@/data/types';
+import { subscribe } from '@/lib/event';
 
 export function App() {
   const categories = useMemo(() => sounds.categories, []);
 
   const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+  const pause = useSoundStore(state => state.pause);
 
   const favoriteSounds = useMemo(() => {
     const favoriteSounds = categories
@@ -52,6 +54,16 @@ export function App() {
     return () => document.removeEventListener('visibilitychange', onChange);
   }, []);
 
+  useEffect(() => {
+    const unsubscribe = subscribe('fadeOut', (e: { duration: number }) => {
+      setTimeout(() => {
+        pause();
+      }, e.duration);
+    });
+
+    return unsubscribe;
+  }, [pause]);
+
   const allCategories = useMemo(() => {
     const favorites = [];
 

src/components/modals/sleep-timer/sleep-timer.tsx

@@ -58,7 +58,7 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
     if (timeLeft === 0) {
       setRunning(false);
       // pause();
-      dispatch('fadeOut', { duration: 5000 });
+      dispatch('fadeOut', { duration: 1000 });
 
       setTimeSpent(0);
 

src/hooks/use-sound.ts

@@ -1,16 +1,14 @@
 import { useMemo, useEffect, useCallback, useState } from 'react';
 import { Howl } from 'howler';
 
-import { useSoundStore, useLoadingStore } from '@/store';
+import { useLoadingStore } from '@/store';
 import { subscribe } from '@/lib/event';
 import { useSSR } from './use-ssr';
 
 export function useSound(
   src: string,
   options: { loop?: boolean; volume?: number } = {},
 ) {
-  const pauseAll = useSoundStore(state => state.pause);
-
   const [hasLoaded, setHasLoaded] = useState(false);
   const isLoading = useLoadingStore(state => state.loaders[src]);
   const setIsLoading = useLoadingStore(state => state.set);
@@ -70,12 +68,11 @@ export function useSound(
       sound?.fade(sound.volume(), 0, duration);
 
       setTimeout(() => {
-        pauseAll();
-
+        pause();
         sound?.volume(options.volume || 0.5);
       }, duration);
     },
-    [options.volume, sound, pauseAll],
+    [options.volume, sound, pause],
   );
 
   useEffect(() => {