feat: add auto pause to play button

src/components/play-button/play-button.tsx

@@ -1,14 +1,27 @@
+import { useEffect } from 'react';
 import { BiPause, BiPlay } from 'react-icons/bi/index';
 
+import { useSoundStore } from '@/store';
 import { usePlay } from '@/contexts/play';
 
 import styles from './play-button.module.css';
 
 export function PlayButton() {
-  const { isPlaying, toggle } = usePlay();
+  const { isPlaying, pause, toggle } = usePlay();
+  const noSelected = useSoundStore(state => state.noSelected());
+
+  const handleClick = () => {
+    if (noSelected) return pause();
+
+    toggle();
+  };
+
+  useEffect(() => {
+    if (isPlaying && noSelected) pause();
+  }, [isPlaying, pause, noSelected]);
 
   return (
-    <button className={styles.playButton} onClick={toggle}>
+    <button className={styles.playButton} onClick={handleClick}>
       {isPlaying ? (
         <>
           <span>

src/store/sound/sound.state.ts

@@ -11,6 +11,7 @@ export interface SoundState {
       volume: number;
     };
   };
+  noSelected: () => boolean;
 }
 
 export const createState: StateCreator<
@@ -18,8 +19,18 @@ export const createState: StateCreator<
   [],
   [],
   SoundState
-> = () => {
-  const state: SoundState = { sounds: {} };
+> = (set, get) => {
+  const state: SoundState = {
+    noSelected() {
+      const { sounds } = get();
+      const keys = Object.keys(sounds);
+
+      return keys.every(key => !sounds[key].isSelected);
+    },
+
+    sounds: {},
+  };
+
   const { categories } = sounds;
 
   categories.forEach(category => {