diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx index d0b0846..cd8b769 100644 --- a/src/components/sound/sound.tsx +++ b/src/components/sound/sound.tsx @@ -13,7 +13,7 @@ interface SoundProps { } export function Sound({ label, src }: SoundProps) { - const { isPlaying } = usePlay(); + const { isPlaying, play } = usePlay(); const [isSelected, setIsSelected] = useLocalStorage( `${label}-is-selected`, false, @@ -30,11 +30,22 @@ export function Sound({ label, src }: SoundProps) { } }, [isSelected, sound, isPlaying]); - const toggle = useCallback(() => { - setIsSelected(prev => !prev); + const select = useCallback(() => { + setIsSelected(true); + play(); + }, [setIsSelected, play]); + + const unselect = useCallback(() => { + setIsSelected(false); setVolume(0.5); }, [setIsSelected, setVolume]); + const toggle = useCallback(() => { + if (isSelected) return unselect(); + + select(); + }, [isSelected, unselect, select]); + return (
{}, }); -export const usePlay = () => useContext(PlayContext); +export const usePlay = (): { + isPlaying: boolean; + pause: () => void; + play: () => void; + toggle: () => void; +} => useContext(PlayContext); interface PlayProviderProps { children: React.ReactNode; @@ -18,10 +23,10 @@ export function PlayProvider({ children }: PlayProviderProps) { const play = useCallback(() => setIsPlaying(true), []); const pause = useCallback(() => setIsPlaying(false), []); - const toggle = useCallback( - () => (isPlaying ? pause() : play()), - [isPlaying, play, pause], - ); + const toggle = useCallback(() => { + if (isPlaying) pause(); + else play(); + }, [isPlaying, play, pause]); return (