nicer hotkeys library

components/demo/TeamVoiceLine.tsx

@@ -9,6 +9,8 @@ import { useCallback, useEffect, useState } from "react";
 import { KeyCode } from "../../globals/keycode";
 import toast from "react-hot-toast";
 
+import { GlobalHotKeys, HotKeys, KeySequence, KeyMap } from "react-hotkeys";
+
 let testFriends = [
   {
     name: "Liam",
@@ -78,7 +80,7 @@ function renderPulse(status: UserStatus) {
   }
 }
 
-export default function TeamVoiceLine(props: IVoiceDemoProps) {
+function TeamVoiceLine(props: IVoiceDemoProps) {
   const isVoiceLineTurn =
     props.demoStep == DemoStep.playIncomingMessage ||
     props.demoStep == DemoStep.hearReply ||
@@ -104,53 +106,37 @@ export default function TeamVoiceLine(props: IVoiceDemoProps) {
 
   const [isRecording, setIsRecording] = useState<boolean>(false);
 
-  const handleKeyUp = useCallback(
-    (event) => {
-      if (event.repeat) {
-        return;
-      }
-      console.log("on key up");
-      console.log(event.keyCode);
+  function startRecord(event) {
+    toast("listening");
 
-      if (isRecording && event.keyCode == KeyCode.R) {
-        setIsRecording(false);
-      }
+    setIsRecording(true);
+  }
+
+  function endRecording(event) {
+    toast.success("Paul heard it live!");
+
+    setIsRecording(false);
+  }
+
+  const keyMap: KeyMap = {
+    RECORD: "r",
+    STOP_RECORDING: {
+      name: "Stop recording",
+      sequence: "r",
+      action: "keyup",
     },
-    [isRecording]
-  );
-
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (event.repeat) {
-        return;
-      }
-      console.log(event.keyCode);
-
-      if (event.keyCode == KeyCode.R) {
-        setIsRecording(true);
-      }
-    },
-    [isRecording]
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("keyup", handleKeyUp);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("keyup", handleKeyUp);
-    };
-  }, [handleKeyDown, handleKeyUp]);
+  };
+  const handlers = { RECORD: startRecord, STOP_RECORDING: endRecording };
 
   return (
     <section
-      className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl ${
+      className={`p-5 flex w-80 flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-2xl translate-x-32 translate-y-20 z-10 backdrop-blur-xl transition-all duration-300 ${
         !isVoiceLineTurn ? "blur-sm" : ""
       }`}
-      tabIndex={10}
-      onKeyDown={(e) => console.log("yayayayay")}
     >
+      {/* keyboard shortcut handler */}
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
+
       <span className="flex flex-row justify-start items-center pb-5">
         <span className="flex flex-col">
           <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
@@ -256,3 +242,5 @@ export default function TeamVoiceLine(props: IVoiceDemoProps) {
     </section>
   );
 }
+
+export default TeamVoiceLine;

package-lock.json

@@ -17,6 +17,7 @@
         "react-dom": "17.0.2",
         "react-h5-audio-player": "^3.8.1",
         "react-hot-toast": "^2.2.0",
+        "react-hotkeys": "^2.0.0",
         "react-icons": "^4.3.1",
         "react-moment": "^1.1.1",
         "uuid": "^8.3.2"
@@ -7833,6 +7834,17 @@
         "csstype": "^2.6.2"
       }
     },
+    "node_modules/react-hotkeys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
+      "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
+      "dependencies": {
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
@@ -15280,6 +15292,14 @@
         }
       }
     },
+    "react-hotkeys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
+      "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",
+      "requires": {
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-icons": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-dom": "17.0.2",
     "react-h5-audio-player": "^3.8.1",
     "react-hot-toast": "^2.2.0",
+    "react-hotkeys": "^2.0.0",
     "react-icons": "^4.3.1",
     "react-moment": "^1.1.1",
     "uuid": "^8.3.2"