diff --git a/src/components/buttons/play/play.tsx b/src/components/buttons/play/play.tsx
index f21af07..10d4ef2 100644
--- a/src/components/buttons/play/play.tsx
+++ b/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 = () => {
diff --git a/src/components/categories/categories.tsx b/src/components/categories/categories.tsx
index 64753cc..e36d683 100644
--- a/src/components/categories/categories.tsx
+++ b/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 (
-
-
-
-
-
- {!!favoriteSounds.length && (
- }
- id="favorites"
- title="Favorites"
- sounds={
- favoriteSounds as Array<{
- src: string;
- label: string;
- id: string;
- icon: React.ReactNode;
- }>
- }
- />
- )}
+
+
+
+
+ {!!favoriteSounds.length && (
+ }
+ id="favorites"
+ title="Favorites"
+ sounds={
+ favoriteSounds as Array<{
+ src: string;
+ label: string;
+ id: string;
+ icon: React.ReactNode;
+ }>
+ }
+ />
+ )}
- {categories.map(category => (
-
- ))}
-
-
-
-
+ {categories.map(category => (
+
+ ))}
+
+
+
);
}
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index 0bc1ce3..353f749 100644
--- a/src/components/sound/sound.tsx
+++ b/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);
diff --git a/src/contexts/play.tsx b/src/contexts/play.tsx
deleted file mode 100644
index 81032fb..0000000
--- a/src/contexts/play.tsx
+++ /dev/null
@@ -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 (
-
- {children}
-
- );
-}
diff --git a/src/store/sound/sound.actions.ts b/src/store/sound/sound.actions.ts
index 4aa7aed..e9a732c 100644
--- a/src/store/sound/sound.actions.ts
+++ b/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: {
diff --git a/src/store/sound/sound.state.ts b/src/store/sound/sound.state.ts
index 02b0ee9..2449056 100644
--- a/src/store/sound/sound.state.ts
+++ b/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);