feat: add auto play on select

remvze · Oct 7, 2023 · 17d1b23 · 17d1b23
1 parent 856b3e6
commit 17d1b23
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
@@ -13,7 +13,7 @@ interface SoundProps {
 }
 
 export function Sound({ label, src }: SoundProps) {
-  const { isPlaying } = usePlay();
+  const { isPlaying, play } = usePlay();
   const [isSelected, setIsSelected] = useLocalStorage(
     `${label}-is-selected`,
     false,
@@ -30,11 +30,22 @@ export function Sound({ label, src }: SoundProps) {
     }
   }, [isSelected, sound, isPlaying]);
 
-  const toggle = useCallback(() => {
-    setIsSelected(prev => !prev);
+  const select = useCallback(() => {
+    setIsSelected(true);
+    play();
+  }, [setIsSelected, play]);
+
+  const unselect = useCallback(() => {
+    setIsSelected(false);
     setVolume(0.5);
   }, [setIsSelected, setVolume]);
 
+  const toggle = useCallback(() => {
+    if (isSelected) return unselect();
+
+    select();
+  }, [isSelected, unselect, select]);
+
   return (
     <div
       className={cn(styles.sound, isSelected && styles.selected)}

diff --git a/src/contexts/play.tsx b/src/contexts/play.tsx
@@ -7,7 +7,12 @@ export const PlayContext = createContext({
   toggle: () => {},
 });
 
-export const usePlay = () => useContext(PlayContext);
+export const usePlay = (): {
+  isPlaying: boolean;
+  pause: () => void;
+  play: () => void;
+  toggle: () => void;
+} => useContext(PlayContext);
 
 interface PlayProviderProps {
   children: React.ReactNode;
@@ -18,10 +23,10 @@ export function PlayProvider({ children }: PlayProviderProps) {
 
   const play = useCallback(() => setIsPlaying(true), []);
   const pause = useCallback(() => setIsPlaying(false), []);
-  const toggle = useCallback(
-    () => (isPlaying ? pause() : play()),
-    [isPlaying, play, pause],
-  );
+  const toggle = useCallback(() => {
+    if (isPlaying) pause();
+    else play();
+  }, [isPlaying, play, pause]);
 
   return (
     <PlayContext.Provider value={{ isPlaying, pause, play, toggle }}>