Refactor prevent default to not require separate input

2026-04-15 19:42:08 +03:00 · 2025-10-02 06:59:47 -06:00 · 2025-10-02 06:59:47 -06:00 · 1f463e7e5d
commit 1f463e7e5d
parent f9db12e119
17 changed files with 88 additions and 56 deletions
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@ -70,7 +70,10 @@ export default function ExportCard({
        (editName.update?.length ?? 0) > 0
      ) {
        submitRename();
+        return true;
      }
+
+      return false;
    },
  );

--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@ -109,6 +109,7 @@ export default function ReviewCard({

  useKeyboardListener(["Shift"], (_, modifiers) => {
    bypassDialogRef.current = modifiers.shift;
+    return false;
  });

  const handleDelete = useCallback(() => {
--- a/web/src/components/filter/ReviewActionGroup.tsx
+++ b/web/src/components/filter/ReviewActionGroup.tsx
@ -75,6 +75,7 @@ export default function ReviewActionGroup({

  useKeyboardListener(["Shift"], (_, modifiers) => {
    setBypassDialog(modifiers.shift);
+    return false;
  });

  const handleDelete = useCallback(() => {
--- a/web/src/components/filter/SearchActionGroup.tsx
+++ b/web/src/components/filter/SearchActionGroup.tsx
@ -62,6 +62,7 @@ export default function SearchActionGroup({

  useKeyboardListener(["Shift"], (_, modifiers) => {
    setBypassDialog(modifiers.shift);
+    return false;
  });

  const handleDelete = useCallback(() => {
--- a/web/src/components/overlay/PtzControlPanel.tsx
+++ b/web/src/components/overlay/PtzControlPanel.tsx
@ -83,7 +83,7 @@ export default function PtzControlPanel({
    ],
    (key, modifiers) => {
      if (modifiers.repeat || !key) {
-        return;
+        return true;
      }

      if (["1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key)) {
@ -95,34 +95,36 @@ export default function PtzControlPanel({
        ) {
          sendPtz(`preset_${ptz.presets[presetNumber - 1]}`);
        }
-        return;
+        return true;
      }

      if (!modifiers.down) {
        sendPtz("STOP");
-        return;
+        return true;
      }

      switch (key) {
        case "ArrowLeft":
          sendPtz("MOVE_LEFT");
-          break;
+          return true;
        case "ArrowRight":
          sendPtz("MOVE_RIGHT");
-          break;
+          return true;
        case "ArrowUp":
          sendPtz("MOVE_UP");
-          break;
+          return true;
        case "ArrowDown":
          sendPtz("MOVE_DOWN");
-          break;
+          return true;
        case "+":
          sendPtz(modifiers.shift ? "FOCUS_IN" : "ZOOM_IN");
-          break;
+          return true;
        case "-":
          sendPtz(modifiers.shift ? "FOCUS_OUT" : "ZOOM_OUT");
-          break;
+          return true;
      }
+
+      return false;
    },
  );

--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@ -175,6 +175,8 @@ export default function ReviewDetailDialog({
    if (key == "Esc" && modifiers.down && !modifiers.repeat) {
      setIsOpen(false);
    }
+
+    return true;
  });

  const Overlay = isDesktop ? Sheet : MobilePage;
--- a/web/src/components/player/GenericVideoPlayer.tsx
+++ b/web/src/components/player/GenericVideoPlayer.tsx
@ -60,7 +60,7 @@ export function GenericVideoPlayer({
    ["ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", " ", "f", "m"],
    (key, modifiers) => {
      if (!modifiers.down || modifiers.repeat) {
-        return;
+        return true;
      }

      switch (key) {
@ -92,6 +92,8 @@ export function GenericVideoPlayer({
          }
          break;
      }
+
+      return true;
    },
  );

--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@ -144,7 +144,7 @@ export default function VideoControls({
  const onKeyboardShortcut = useCallback(
    (key: string | null, modifiers: KeyModifiers) => {
      if (!modifiers.down) {
-        return;
+        return true;
      }

      switch (key) {
@ -174,6 +174,8 @@ export default function VideoControls({
          onPlayPause(!isPlaying);
          break;
      }
+
+      return true;
    },
    // only update when preview only changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
--- a/web/src/hooks/use-keyboard-listener.tsx
+++ b/web/src/hooks/use-keyboard-listener.tsx
@ -9,8 +9,7 @@ export type KeyModifiers = {

 export default function useKeyboardListener(
  keys: string[],
-  listener: (key: string | null, modifiers: KeyModifiers) => void,
-  preventDefault: boolean = true,
+  listener: (key: string | null, modifiers: KeyModifiers) => boolean,
 ) {
  const keyDownListener = useCallback(
    (e: KeyboardEvent) => {
@ -27,13 +26,13 @@ export default function useKeyboardListener(
      };

      if (keys.includes(e.key)) {
+        const preventDefault = listener(e.key, modifiers);
        if (preventDefault) e.preventDefault();
-        listener(e.key, modifiers);
      } else if (e.key === "Shift" || e.key === "Control" || e.key === "Meta") {
        listener(null, modifiers);
      }
    },
-    [keys, listener, preventDefault],
+    [keys, listener],
  );

  const keyUpListener = useCallback(
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@ -117,7 +117,7 @@ function Exports() {
    ["ArrowDown", "ArrowUp", "PageDown", "PageUp"],
    (key, modifiers) => {
      if (!modifiers.down) {
-        return;
+        return true;
      }

      switch (key) {
@ -146,6 +146,8 @@ function Exports() {
          });
          break;
      }
+
+      return true;
    },
  );

--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@ -117,8 +117,6 @@ export default function FaceLibrary() {
  const [addFace, setAddFace] = useState(false);

  // input focus for keyboard shortcuts
-  const [inputFocused, setInputFocused] = useState(false);
-
  const onUploadImage = useCallback(
    (file: File) => {
      const formData = new FormData();
@ -275,7 +273,7 @@ export default function FaceLibrary() {
    ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
    (key, modifiers) => {
      if (!modifiers.down) {
-        return;
+        return true;
      }

      switch (key) {
@ -288,23 +286,25 @@ export default function FaceLibrary() {
                ...(pageToggle === "train" ? trainImages : faceImages),
              ]);
            }
+
+            return true;
          }
          break;
        case "Escape":
          setSelectedFaces([]);
-          break;
+          return true;
        case "ArrowDown":
          contentRef.current?.scrollBy({
            top: 100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "ArrowUp":
          contentRef.current?.scrollBy({
            top: -100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageDown":
          contentRef.current?.scrollBy({
            top: contentRef.current.clientHeight / 2,
@ -316,10 +316,11 @@ export default function FaceLibrary() {
            top: -contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
      }
+
+      return false;
    },
-    !inputFocused,
  );

  useEffect(() => {
@ -446,7 +447,6 @@ export default function FaceLibrary() {
            selectedFaces={selectedFaces}
            onClickFaces={onClickFaces}
            onRefresh={refreshFaces}
-            setInputFocused={setInputFocused}
          />
        ) : (
          <FaceGrid
@ -649,7 +649,6 @@ type TrainingGridProps = {
  selectedFaces: string[];
  onClickFaces: (images: string[], ctrl: boolean) => void;
  onRefresh: () => void;
-  setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };
 function TrainingGrid({
  config,
@ -659,7 +658,6 @@ function TrainingGrid({
  selectedFaces,
  onClickFaces,
  onRefresh,
-  setInputFocused,
 }: TrainingGridProps) {
  const { t } = useTranslation(["views/faceLibrary"]);

@ -734,7 +732,7 @@ function TrainingGrid({
        setSimilarity={undefined}
        setSearchPage={setDialogTab}
        setSearch={(search) => setSelectedEvent(search as unknown as Event)}
-        setInputFocused={setInputFocused}
+        setInputFocused={() => {}}
      />

      <div
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@ -56,14 +56,16 @@ function Live() {

  useKeyboardListener(["f"], (key, modifiers) => {
    if (!modifiers.down) {
-      return;
+      return true;
    }

    switch (key) {
      case "f":
        toggleFullscreen();
-        break;
+        return true;
    }
+
+    return false;
  });

  // document title
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@ -337,7 +337,7 @@ function Logs() {
    ["PageDown", "PageUp", "ArrowDown", "ArrowUp"],
    (key, modifiers) => {
      if (!key || !modifiers.down || !lazyLogWrapperRef.current) {
-        return;
+        return true;
      }

      const container =
@ -346,7 +346,7 @@ function Logs() {
      const logLineHeight = container?.querySelector(".log-line")?.clientHeight;

      if (!logLineHeight) {
-        return;
+        return true;
      }

      const scrollAmount = key.includes("Page")
@ -354,6 +354,7 @@ function Logs() {
        : logLineHeight;
      const direction = key.includes("Down") ? 1 : -1;
      container?.scrollBy({ top: scrollAmount * direction });
+      return true;
    },
  );

--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@ -237,13 +237,13 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
  useKeyboardListener(
    ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
    (key, modifiers) => {
-      if (modifiers.repeat || !modifiers.down) {
-        return;
+      if (!modifiers.down) {
+        return true;
      }

      switch (key) {
        case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
            if (selectedImages.length) {
              setSelectedImages([]);
            } else {
@ -253,36 +253,39 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
                  : dataset?.[pageToggle] || []),
              ]);
            }
+            return true;
          }
          break;
        case "Escape":
          setSelectedImages([]);
-          break;
+          return true;
        case "ArrowDown":
          contentRef.current?.scrollBy({
            top: 100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "ArrowUp":
          contentRef.current?.scrollBy({
            top: -100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageDown":
          contentRef.current?.scrollBy({
            top: contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageUp":
          contentRef.current?.scrollBy({
            top: -contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
      }
+
+      return false;
    },
  );

--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -654,13 +654,14 @@ function DetectionReview({
    ["a", "r", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
    (key, modifiers) => {
      if (!modifiers.down) {
-        return;
+        return true;
      }

      switch (key) {
        case "a":
          if (modifiers.ctrl && !modifiers.repeat) {
            onSelectAllReviews();
+            return true;
          }
          break;
        case "r":
@ -673,32 +674,34 @@ function DetectionReview({
            });
            setSelectedReviews([]);
          }
-          break;
+          return true;
        case "ArrowDown":
          contentRef.current?.scrollBy({
            top: 100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "ArrowUp":
          contentRef.current?.scrollBy({
            top: -100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageDown":
          contentRef.current?.scrollBy({
            top: contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageUp":
          contentRef.current?.scrollBy({
            top: -contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
      }
+
+      return false;
    },
  );

--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@ -309,21 +309,25 @@ export default function LiveCameraView({

  useKeyboardListener(["m"], (key, modifiers) => {
    if (!modifiers.down) {
-      return;
+      return true;
    }

    switch (key) {
      case "m":
        if (supportsAudioOutput) {
          setAudio(!audio);
+          return true;
        }
        break;
      case "t":
        if (supports2WayTalk) {
          setMic(!mic);
+          return true;
        }
        break;
    }
+
+    return false;
  });

  // layout state
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -308,14 +308,19 @@ export default function SearchView({

  const onKeyboardShortcut = useCallback(
    (key: string | null, modifiers: KeyModifiers) => {
-      if (!modifiers.down || !uniqueResults || inputFocused) {
-        return;
+      if (inputFocused) {
+        return false;
+      }
+
+      if (!modifiers.down || !uniqueResults) {
+        return true;
      }

      switch (key) {
        case "a":
          if (modifiers.ctrl && !modifiers.repeat) {
            onSelectAllObjects();
+            return true;
          }
          break;
        case "ArrowLeft":
@ -334,7 +339,7 @@ export default function SearchView({

            setSearchDetail(uniqueResults[newIndex]);
          }
-          break;
+          return true;
        case "ArrowRight":
          if (uniqueResults.length > 0) {
            const currentIndex = searchDetail
@ -350,32 +355,34 @@ export default function SearchView({

            setSearchDetail(uniqueResults[newIndex]);
          }
-          break;
+          return true;
        case "ArrowDown":
          contentRef.current?.scrollBy({
            top: 100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "ArrowUp":
          contentRef.current?.scrollBy({
            top: -100,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageDown":
          contentRef.current?.scrollBy({
            top: contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
        case "PageUp":
          contentRef.current?.scrollBy({
            top: -contentRef.current.clientHeight / 2,
            behavior: "smooth",
          });
-          break;
+          return true;
      }
+
+      return false;
    },
    [uniqueResults, inputFocused, onSelectAllObjects, searchDetail],
  );
@ -391,7 +398,6 @@ export default function SearchView({
      "PageUp",
    ],
    onKeyboardShortcut,
-    !inputFocused,
  );

  // scroll into view