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);