diff --git a/src/components/buttons/play/play.tsx b/src/components/buttons/play/play.tsx index 20960f7..877ac8a 100644 --- a/src/components/buttons/play/play.tsx +++ b/src/components/buttons/play/play.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; import { BiPause, BiPlay } from 'react-icons/bi/index'; import { useSoundStore } from '@/store'; @@ -15,21 +15,33 @@ export function PlayButton() { const showSnackbar = useSnackbar(); - const handleClick = () => { + const handleToggle = useCallback(() => { if (noSelected) return showSnackbar('Please first select a sound to play.'); toggle(); - }; + }, [showSnackbar, toggle, noSelected]); useEffect(() => { if (isPlaying && noSelected) pause(); }, [isPlaying, pause, noSelected]); + useEffect(() => { + const listener = (e: KeyboardEvent) => { + if (e.shiftKey && e.key === ' ') { + handleToggle(); + } + }; + + document.addEventListener('keydown', listener); + + return () => document.removeEventListener('keydown', listener); + }, [handleToggle]); + return (