From c893e2a6adc68bdd40f8e5dd1e2b3ab6642a0145 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 30 Apr 2024 18:00:19 +0330
Subject: [PATCH] refactor: reduce dependency

---
 src/components/app/app.tsx                        | 12 ++++++++++++
 src/components/modals/sleep-timer/sleep-timer.tsx |  2 +-
 src/hooks/use-sound.ts                            |  9 +++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index dbc5fdf..abe0d91 100644
--- a/src/components/app/app.tsx
+++ b/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 = [];
 
diff --git a/src/components/modals/sleep-timer/sleep-timer.tsx b/src/components/modals/sleep-timer/sleep-timer.tsx
index d590864..22d64fa 100644
--- a/src/components/modals/sleep-timer/sleep-timer.tsx
+++ b/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);
 
diff --git a/src/hooks/use-sound.ts b/src/hooks/use-sound.ts
index ba8761e..135b6e1 100644
--- a/src/hooks/use-sound.ts
+++ b/src/hooks/use-sound.ts
@@ -1,7 +1,7 @@
 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';
 
@@ -9,8 +9,6 @@ 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(() => {