Merge pull request #242 from Monadical-SAS/keyboard-shortcuts-for-main-branch

Implement hotkeys in main branch as requested by Adam

www/app/transcripts/recorder.tsx

@@ -13,6 +13,7 @@ import { Topic } from "./webSocketTypes";
 import { AudioWaveform } from "../api";
 import AudioInputsDropdown from "./audioInputsDropdown";
 import { Option } from "react-dropdown";
+import { useError } from "../(errors)/errorContext";
 
 type RecorderProps = {
   setStream?: React.Dispatch<React.SetStateAction<MediaStream | null>>;
@@ -47,6 +48,48 @@ export default function Recorder(props: RecorderProps) {
   const [activeTopic, setActiveTopic] = props.useActiveTopic;
   const topicsRef = useRef(props.topics);
   const [showDevices, setShowDevices] = useState(false);
+  const { setError } = useError();
+
+  // Function used to setup keyboard shortcuts for the streamdeck
+  const setupProjectorKeys = (): (() => void) => {
+    if (!record) return () => {};
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "~":
+          location.reload();
+          break;
+        case "!":
+          if (record.isRecording()) return;
+          handleRecClick();
+          break;
+        case "@":
+          if (!record.isRecording()) return;
+          handleRecClick();
+          break;
+        case "%":
+          setError(new Error("Error triggered by '%' shortcut"));
+          break;
+        case "^":
+          throw new Error("Unhandled Exception thrown by '^' shortcut");
+        case "(":
+          location.href = "/login";
+          break;
+        case ")":
+          location.href = "/logout";
+          break;
+        default:
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+
+    // Return the cleanup function
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  };
 
   useEffect(() => {
     if (waveformRef.current) {
@@ -148,7 +191,14 @@ export default function Recorder(props: RecorderProps) {
   };
 
   useEffect(() => {
-    if (record) {
+    if (!record) return;
+
+    return setupProjectorKeys();
+  }, [record, deviceId]);
+
+  useEffect(() => {
+    if (!record) return;
+
     return record.on("stopRecording", () => {
       const link = document.getElementById("download-recording");
       if (!link) return;
@@ -158,7 +208,6 @@ export default function Recorder(props: RecorderProps) {
       link.style.visibility = "visible";
       renderMarkers();
     });
-    }
   }, [record]);
 
   useEffect(() => {