From 7c901b2bdc525d02b80a0c42eb2f81f766947ca3 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 10 Oct 2023 17:49:35 +0330
Subject: [PATCH] feat: add auto pause to play button

---
 src/components/play-button/play-button.tsx | 17 +++++++++++++++--
 src/store/sound/sound.state.ts             | 15 +++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/play-button/play-button.tsx b/src/components/play-button/play-button.tsx
index 121b669..fe5243c 100644
--- a/src/components/play-button/play-button.tsx
+++ b/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>
diff --git a/src/store/sound/sound.state.ts b/src/store/sound/sound.state.ts
index 3b2187a..3019c6d 100644
--- a/src/store/sound/sound.state.ts
+++ b/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 => {