From 9362aef9f5172f67ab1e9c0fab07e30392f4563b Mon Sep 17 00:00:00 2001
From: Koper <andreas@monadical.com>
Date: Mon, 25 Sep 2023 15:38:00 +0100
Subject: [PATCH] Implement hotkeys in main branch as requested by Adam

---
 www/app/transcripts/recorder.tsx | 69 +++++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 10 deletions(-)

diff --git a/www/app/transcripts/recorder.tsx b/www/app/transcripts/recorder.tsx
index c91aca49..f5b1abca 100644
--- a/www/app/transcripts/recorder.tsx
+++ b/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,17 +191,23 @@ export default function Recorder(props: RecorderProps) {
   };
 
   useEffect(() => {
-    if (record) {
-      return record.on("stopRecording", () => {
-        const link = document.getElementById("download-recording");
-        if (!link) return;
+    if (!record) return;
 
-        link.setAttribute("href", record.getRecordedUrl());
-        link.setAttribute("download", "reflector-recording.webm");
-        link.style.visibility = "visible";
-        renderMarkers();
-      });
-    }
+    return setupProjectorKeys();
+  }, [record, deviceId]);
+
+  useEffect(() => {
+    if (!record) return;
+
+    return record.on("stopRecording", () => {
+      const link = document.getElementById("download-recording");
+      if (!link) return;
+
+      link.setAttribute("href", record.getRecordedUrl());
+      link.setAttribute("download", "reflector-recording.webm");
+      link.style.visibility = "visible";
+      renderMarkers();
+    });
   }, [record]);
 
   useEffect(() => {