refactor: remove seperate playing context

src/components/buttons/play/play.tsx

@@ -3,13 +3,14 @@ import { BiPause, BiPlay } from 'react-icons/bi/index';
 import { motion } from 'framer-motion';
 
 import { useSoundStore } from '@/store';
-import { usePlay } from '@/contexts/play';
 import { cn } from '@/helpers/styles';
 
 import styles from './play.module.css';
 
 export function PlayButton() {
-  const { isPlaying, pause, toggle } = usePlay();
+  const isPlaying = useSoundStore(state => state.isPlaying);
+  const pause = useSoundStore(state => state.pause);
+  const toggle = useSoundStore(state => state.togglePlay);
   const noSelected = useSoundStore(state => state.noSelected());
 
   const handleClick = () => {

src/components/categories/categories.tsx

@@ -9,7 +9,6 @@ import { Container } from '@/components/container';
 import { StoreConsumer } from '../store-consumer';
 import { Category } from '@/components/category';
 import { Buttons } from '@/components/buttons';
-import { PlayProvider } from '@/contexts/play';
 
 import { sounds } from '@/data/sounds';
 
@@ -34,35 +33,33 @@ export function Categories() {
 
   return (
     <StoreConsumer>
-      <PlayProvider>
+      <Container>
-        <Container>
+        <Buttons />
-          <Buttons />
+        <div>
-          <div>
+          <AnimatePresence initial={false}>
-            <AnimatePresence initial={false}>
+            {!!favoriteSounds.length && (
-              {!!favoriteSounds.length && (
+              <Category
-                <Category
+                functional={false}
-                  functional={false}
+                icon={<BiSolidHeart />}
-                  icon={<BiSolidHeart />}
+                id="favorites"
-                  id="favorites"
+                title="Favorites"
-                  title="Favorites"
+                sounds={
-                  sounds={
+                  favoriteSounds as Array<{
-                    favoriteSounds as Array<{
+                    src: string;
-                      src: string;
+                    label: string;
-                      label: string;
+                    id: string;
-                      id: string;
+                    icon: React.ReactNode;
-                      icon: React.ReactNode;
+                  }>
-                    }>
+                }
-                  }
+              />
-                />
+            )}
-              )}
 
-              {categories.map(category => (
+            {categories.map(category => (
-                <Category {...category} key={category.id} />
+              <Category {...category} key={category.id} />
-              ))}
+            ))}
-            </AnimatePresence>
+          </AnimatePresence>
-          </div>
+        </div>
-        </Container>
+      </Container>
-      </PlayProvider>
     </StoreConsumer>
   );
 }

src/components/sound/sound.tsx

@@ -5,7 +5,6 @@ import { Like } from './like';
 
 import { useSound } from '@/hooks/use-sound';
 import { useSoundStore } from '@/store';
-import { usePlay } from '@/contexts/play';
 import { cn } from '@/helpers/styles';
 
 import styles from './sound.module.css';
@@ -31,8 +30,8 @@ export function Sound({
   src,
   unselectHidden,
 }: SoundProps) {
-  const { isPlaying, play } = usePlay();
+  const isPlaying = useSoundStore(state => state.isPlaying);
-
+  const play = useSoundStore(state => state.play);
   const select = useSoundStore(state => state.select);
   const unselect = useSoundStore(state => state.unselect);
   const setVolume = useSoundStore(state => state.setVolume);

src/contexts/play.tsx

@@ -1,36 +0,0 @@
-import { createContext, useContext, useState, useCallback } from 'react';
-
-export const PlayContext = createContext({
-  isPlaying: false,
-  pause: () => {},
-  play: () => {},
-  toggle: () => {},
-});
-
-export const usePlay = (): {
-  isPlaying: boolean;
-  pause: () => void;
-  play: () => void;
-  toggle: () => void;
-} => useContext(PlayContext);
-
-interface PlayProviderProps {
-  children: React.ReactNode;
-}
-
-export function PlayProvider({ children }: PlayProviderProps) {
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const play = useCallback(() => setIsPlaying(true), []);
-  const pause = useCallback(() => setIsPlaying(false), []);
-  const toggle = useCallback(() => {
-    if (isPlaying) pause();
-    else play();
-  }, [isPlaying, play, pause]);
-
-  return (
-    <PlayContext.Provider value={{ isPlaying, pause, play, toggle }}>
-      {children}
-    </PlayContext.Provider>
-  );
-}

src/store/sound/sound.actions.ts

@@ -9,6 +9,9 @@ export interface SoundActions {
   unselectAll: (pushToHistory?: boolean) => void;
   restoreHistory: () => void;
   toggleFavorite: (id: string) => void;
+  pause: () => void;
+  play: () => void;
+  togglePlay: () => void;
 }
 
 export const createActions: StateCreator<
@@ -18,6 +21,14 @@ export const createActions: StateCreator<
   SoundActions
 > = (set, get) => {
   return {
+    pause() {
+      set({ isPlaying: false });
+    },
+
+    play() {
+      set({ isPlaying: true });
+    },
+
     restoreHistory() {
       const history = get().history;
 
@@ -57,6 +68,10 @@ export const createActions: StateCreator<
       });
     },
 
+    togglePlay() {
+      set({ isPlaying: !get().isPlaying });
+    },
+
     unselect(id) {
       set({
         sounds: {

src/store/sound/sound.state.ts

@@ -5,6 +5,7 @@ import type { SoundActions } from './sound.actions';
 import { sounds } from '@/data/sounds';
 
 export interface SoundState {
+  isPlaying: boolean;
   sounds: {
     [id: string]: {
       isSelected: boolean;
@@ -38,6 +39,7 @@ export const createState: StateCreator<
       return favorites;
     },
     history: null,
+    isPlaying: false,
     noSelected() {
       const { sounds } = get();
       const keys = Object.keys(sounds);