From 56a0524853137cff98dda985a6a45772dc2adae9 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 18 Jun 2024 07:37:50 -0600
Subject: [PATCH] Refactor keybaord listener

---
 web/src/components/card/ExportCard.tsx      | 10 ++++--
 web/src/components/player/VideoControls.tsx | 34 +++++++++------------
 web/src/hooks/use-keyboard-listener.tsx     | 11 ++++---
 web/src/pages/Logs.tsx                      |  4 +--
 web/src/views/events/EventView.tsx          |  6 +++-
 web/src/views/live/LiveCameraView.tsx       |  6 ++--
 6 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index ce21113e7..95357956a 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -49,8 +49,14 @@ export default function ExportCard({
 
   useKeyboardListener(
     editName != undefined ? ["Enter"] : [],
-    (_, down, repeat) => {
-      if (down && !repeat && editName && editName.update.length > 0) {
+    (key, modifiers) => {
+      if (
+        key == "Enter" &&
+        modifiers.down &&
+        !modifiers.repeat &&
+        editName &&
+        editName.update.length > 0
+      ) {
         onRename(exportedRecording.id, editName.update);
         setEditName(undefined);
       }
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 8e86645e8..5adebdc7c 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -16,7 +16,9 @@ import {
   MdVolumeOff,
   MdVolumeUp,
 } from "react-icons/md";
-import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import useKeyboardListener, {
+  KeyModifiers,
+} from "@/hooks/use-keyboard-listener";
 import { VolumeSlider } from "../ui/slider";
 import FrigatePlusIcon from "../icons/FrigatePlusIcon";
 import {
@@ -137,42 +139,36 @@ export default function VideoControls({
   }, [volume, muted]);
 
   const onKeyboardShortcut = useCallback(
-    (key: string, down: boolean, repeat: boolean) => {
+    (key: string, modifiers: KeyModifiers) => {
+      if (!modifiers.down) {
+        return;
+      }
+
       switch (key) {
         case "ArrowDown":
-          if (down) {
-            onSeek(-1);
-          }
+          onSeek(-1);
           break;
         case "ArrowLeft":
-          if (down) {
-            onSeek(-10);
-          }
+          onSeek(-10);
           break;
         case "ArrowRight":
-          if (down) {
-            onSeek(10);
-          }
+          onSeek(10);
           break;
         case "ArrowUp":
-          if (down) {
-            onSeek(1);
-          }
+          onSeek(1);
           break;
         case "f":
-          if (toggleFullscreen && down && !repeat) {
+          if (toggleFullscreen && !modifiers.repeat) {
             toggleFullscreen();
           }
           break;
         case "m":
-          if (setMuted && down && !repeat && video) {
+          if (setMuted && !modifiers.repeat && video) {
             setMuted(!muted);
           }
           break;
         case " ":
-          if (down) {
-            onPlayPause(!isPlaying);
-          }
+          onPlayPause(!isPlaying);
           break;
       }
     },
diff --git a/web/src/hooks/use-keyboard-listener.tsx b/web/src/hooks/use-keyboard-listener.tsx
index 6bbcaa2e0..b2694f74c 100644
--- a/web/src/hooks/use-keyboard-listener.tsx
+++ b/web/src/hooks/use-keyboard-listener.tsx
@@ -1,11 +1,14 @@
 import { useCallback, useEffect } from "react";
 
+export type KeyModifiers = {
+  down: boolean;
+  repeat: boolean;
+  ctrl: boolean;
+};
+
 export default function useKeyboardListener(
   keys: string[],
-  listener: (
-    key: string,
-    modifiers: { down: boolean; repeat: boolean; ctrl: boolean },
-  ) => void,
+  listener: (key: string, modifiers: KeyModifiers) => void,
 ) {
   const keyDownListener = useCallback(
     (e: KeyboardEvent) => {
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index e01c897ef..0691cb635 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -231,8 +231,8 @@ function Logs() {
 
   useKeyboardListener(
     ["PageDown", "PageUp", "ArrowDown", "ArrowUp"],
-    (key, down, _) => {
-      if (!down) {
+    (key, modifiers) => {
+      if (!modifiers.down) {
         return;
       }
 
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 090de1866..ec92c00ad 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -598,7 +598,11 @@ function DetectionReview({
   // keyboard
 
   useKeyboardListener(["a"], (key, modifiers) => {
-    if (key == "a" && modifiers.down && modifiers.ctrl) {
+    if (modifiers.repeat || !modifiers.down) {
+      return;
+    }
+
+    if (key == "a" && modifiers.ctrl) {
       onSelectAllReviews();
     }
   });
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 5f43b4bc0..bee6077da 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -482,12 +482,12 @@ function PtzControlPanel({
 
   useKeyboardListener(
     ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "+", "-"],
-    (key, down, repeat) => {
-      if (repeat) {
+    (key, modifiers) => {
+      if (modifiers.repeat) {
         return;
       }
 
-      if (!down) {
+      if (!modifiers.down) {
         sendPtz("STOP");
         return;
       }