feat: add keyboard shortcut for play button

remvze · Apr 26, 2024 · d3a2a12 · d3a2a12
1 parent ebb35de
commit d3a2a12
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git 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 (
     <button
       aria-disabled={noSelected}
       className={cn(styles.playButton, noSelected && styles.disabled)}
-      onClick={handleClick}
+      onClick={handleToggle}
     >
       {isPlaying ? (
         <>

diff --git a/src/components/toolbox/notepad/notepad.tsx b/src/components/toolbox/notepad/notepad.tsx
@@ -71,6 +71,7 @@ export function Notepad({ onClose, show }: NotepadProps) {
         ref={textareaRef}
         value={note}
         onChange={e => write(e.target.value)}
+        onKeyDown={e => e.stopPropagation()}
       />
 
       <p className={styles.counter}>