Make keyboard shortcuts consistent (#20326)

* Make keyboard shortcuts consistent

* Cleanup

* Refactor prevent default to not require separate input

* Fix

* Implement escape for reviews

* Implement escape for explore

* Send content ref to get page changes for free

web/src/components/card/ExportCard.tsx

@@ -70,7 +70,10 @@ export default function ExportCard({
         (editName.update?.length ?? 0) > 0
       ) {
         submitRename();
+        return true;
       }
+
+      return false;
     },
   );
 

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(() => {

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(() => {

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(() => {

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;
     },
   );
 

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;

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;
     },
   );
 

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

web/src/hooks/use-keyboard-listener.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { MutableRefObject, useCallback, useEffect, useMemo } from "react";
 
 export type KeyModifiers = {
   down: boolean;
@@ -9,9 +9,17 @@ export type KeyModifiers = {
 
 export default function useKeyboardListener(
   keys: string[],
-  listener: (key: string | null, modifiers: KeyModifiers) => void,
+  listener?: (key: string | null, modifiers: KeyModifiers) => boolean,
-  preventDefault: boolean = true,
+  contentRef?: MutableRefObject<HTMLDivElement | null>,
 ) {
+  const pageKeys = useMemo(
+    () =>
+      contentRef != undefined
+        ? ["ArrowDown", "ArrowUp", "PageDown", "PageUp"]
+        : [],
+    [contentRef],
+  );
+
   const keyDownListener = useCallback(
     (e: KeyboardEvent) => {
       // @ts-expect-error we know this field exists
@@ -26,14 +34,44 @@ export default function useKeyboardListener(
         shift: e.shiftKey,
       };
 
-      if (keys.includes(e.key)) {
+      if (contentRef && pageKeys.includes(e.key)) {
+        switch (e.key) {
+          case "ArrowDown":
+            contentRef.current?.scrollBy({
+              top: 100,
+              behavior: "smooth",
+            });
+            break;
+          case "ArrowUp":
+            contentRef.current?.scrollBy({
+              top: -100,
+              behavior: "smooth",
+            });
+            break;
+          case "PageDown":
+            contentRef.current?.scrollBy({
+              top: contentRef.current.clientHeight / 2,
+              behavior: "smooth",
+            });
+            break;
+          case "PageUp":
+            contentRef.current?.scrollBy({
+              top: -contentRef.current.clientHeight / 2,
+              behavior: "smooth",
+            });
+            break;
+        }
+      } else if (keys.includes(e.key) && listener) {
+        const preventDefault = listener(e.key, modifiers);
         if (preventDefault) e.preventDefault();
-        listener(e.key, modifiers);
+      } else if (
-      } else if (e.key === "Shift" || e.key === "Control" || e.key === "Meta") {
+        listener &&
+        (e.key === "Shift" || e.key === "Control" || e.key === "Meta")
+      ) {
         listener(null, modifiers);
       }
     },
-    [keys, listener, preventDefault],
+    [keys, pageKeys, listener, contentRef],
   );
 
   const keyUpListener = useCallback(
@@ -49,10 +87,13 @@ export default function useKeyboardListener(
         shift: false,
       };
 
-      if (keys.includes(e.key)) {
+      if (listener && keys.includes(e.key)) {
-        e.preventDefault();
+        const preventDefault = listener(e.key, modifiers);
-        listener(e.key, modifiers);
+        if (preventDefault) e.preventDefault();
-      } else if (e.key === "Shift" || e.key === "Control" || e.key === "Meta") {
+      } else if (
+        listener &&
+        (e.key === "Shift" || e.key === "Control" || e.key === "Meta")
+      ) {
         listener(null, modifiers);
       }
     },

web/src/pages/Exports.tsx

@@ -13,12 +13,13 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 
@@ -109,6 +110,11 @@ function Exports() {
     [mutate, t],
   );
 
+  // Keyboard Listener
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  useKeyboardListener([], undefined, contentRef);
+
   return (
     <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
       <Toaster closeButton={true} />
@@ -194,7 +200,10 @@ function Exports() {
 
       <div className="w-full overflow-hidden">
         {exports && filteredExports && filteredExports.length > 0 ? (
-          <div className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <div
+            ref={contentRef}
+            className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+          >
             {Object.values(exports).map((item) => (
               <ExportCard
                 key={item.name}

web/src/pages/FaceLibrary.tsx

@@ -46,7 +46,14 @@ import { FaceLibraryData, RecognizedFaceData } from "@/types/face";
 import { FaceRecognitionConfig, FrigateConfig } from "@/types/frigateConfig";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import axios from "axios";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import {
@@ -110,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();
@@ -263,16 +268,17 @@ export default function FaceLibrary() {
 
   // keyboard
 
+  const contentRef = useRef<HTMLDivElement | null>(null);
   useKeyboardListener(
     ["a", "Escape"],
     (key, modifiers) => {
-      if (modifiers.repeat || !modifiers.down) {
+      if (!modifiers.down) {
-        return;
+        return true;
       }
 
       switch (key) {
         case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
             if (selectedFaces.length) {
               setSelectedFaces([]);
             } else {
@@ -280,14 +286,18 @@ export default function FaceLibrary() {
                 ...(pageToggle === "train" ? trainImages : faceImages),
               ]);
             }
+
+            return true;
           }
           break;
         case "Escape":
           setSelectedFaces([]);
-          break;
+          return true;
       }
+
+      return false;
     },
-    !inputFocused,
+    contentRef,
   );
 
   useEffect(() => {
@@ -408,15 +418,16 @@ export default function FaceLibrary() {
         (pageToggle == "train" ? (
           <TrainingGrid
             config={config}
+            contentRef={contentRef}
             attemptImages={trainImages}
             faceNames={faces}
             selectedFaces={selectedFaces}
             onClickFaces={onClickFaces}
             onRefresh={refreshFaces}
-            setInputFocused={setInputFocused}
           />
         ) : (
           <FaceGrid
+            contentRef={contentRef}
             faceImages={faceImages}
             pageToggle={pageToggle}
             selectedFaces={selectedFaces}
@@ -609,21 +620,21 @@ function LibrarySelector({
 
 type TrainingGridProps = {
   config: FrigateConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   attemptImages: string[];
   faceNames: string[];
   selectedFaces: string[];
   onClickFaces: (images: string[], ctrl: boolean) => void;
   onRefresh: () => void;
-  setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };
 function TrainingGrid({
   config,
+  contentRef,
   attemptImages,
   faceNames,
   selectedFaces,
   onClickFaces,
   onRefresh,
-  setInputFocused,
 }: TrainingGridProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
 
@@ -698,10 +709,13 @@ function TrainingGrid({
         setSimilarity={undefined}
         setSearchPage={setDialogTab}
         setSearch={(search) => setSelectedEvent(search as unknown as Event)}
-        setInputFocused={setInputFocused}
+        setInputFocused={() => {}}
       />
 
-      <div className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1">
+      <div
+        ref={contentRef}
+        className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
+      >
         {Object.entries(faceGroups).map(([key, group]) => {
           const event = events?.find((ev) => ev.id == key);
           return (
@@ -1039,6 +1053,7 @@ function FaceAttempt({
 }
 
 type FaceGridProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   faceImages: string[];
   pageToggle: string;
   selectedFaces: string[];
@@ -1046,6 +1061,7 @@ type FaceGridProps = {
   onDelete: (name: string, ids: string[]) => void;
 };
 function FaceGrid({
+  contentRef,
   faceImages,
   pageToggle,
   selectedFaces,
@@ -1070,6 +1086,7 @@ function FaceGrid({
 
   return (
     <div
+      ref={contentRef}
       className={cn(
         "scrollbar-container gap-2 overflow-y-scroll p-1",
         isDesktop ? "flex flex-wrap" : "grid grid-cols-2 md:grid-cols-4",

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

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;
     },
   );
 

web/src/views/classification/ModelTrainingView.tsx

@@ -37,7 +37,14 @@ import { cn } from "@/lib/utils";
 import { CustomClassificationModelConfig } from "@/types/frigateConfig";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import axios from "axios";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { LuPencil, LuTrash2 } from "react-icons/lu";
@@ -226,30 +233,38 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
 
   // keyboard
 
-  useKeyboardListener(["a", "Escape"], (key, modifiers) => {
+  const contentRef = useRef<HTMLDivElement | null>(null);
-    if (modifiers.repeat || !modifiers.down) {
+  useKeyboardListener(
-      return;
+    ["a", "Escape"],
-    }
+    (key, modifiers) => {
+      if (!modifiers.down) {
+        return true;
+      }
 
-    switch (key) {
+      switch (key) {
-      case "a":
+        case "a":
-        if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
-          if (selectedImages.length) {
+            if (selectedImages.length) {
-            setSelectedImages([]);
+              setSelectedImages([]);
-          } else {
+            } else {
-            setSelectedImages([
+              setSelectedImages([
-              ...(pageToggle === "train"
+                ...(pageToggle === "train"
-                ? trainImages || []
+                  ? trainImages || []
-                : dataset?.[pageToggle] || []),
+                  : dataset?.[pageToggle] || []),
-            ]);
+              ]);
+            }
+            return true;
           }
-        }
+          break;
-        break;
+        case "Escape":
-      case "Escape":
+          setSelectedImages([]);
-        setSelectedImages([]);
+          return true;
-        break;
+      }
-    }
+
-  });
+      return false;
+    },
+    contentRef,
+  );
 
   useEffect(() => {
     setSelectedImages([]);
@@ -370,6 +385,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
       {pageToggle == "train" ? (
         <TrainGrid
           model={model}
+          contentRef={contentRef}
           classes={Object.keys(dataset || {})}
           trainImages={trainImages || []}
           trainFilter={trainFilter}
@@ -380,6 +396,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
         />
       ) : (
         <DatasetGrid
+          contentRef={contentRef}
           modelName={model.name}
           categoryName={pageToggle}
           images={dataset?.[pageToggle] || []}
@@ -579,6 +596,7 @@ function LibrarySelector({
 }
 
 type DatasetGridProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   modelName: string;
   categoryName: string;
   images: string[];
@@ -587,6 +605,7 @@ type DatasetGridProps = {
   onDelete: (ids: string[]) => void;
 };
 function DatasetGrid({
+  contentRef,
   modelName,
   categoryName,
   images,
@@ -602,7 +621,10 @@ function DatasetGrid({
   );
 
   return (
-    <div className="flex flex-wrap gap-2 overflow-y-auto p-2">
+    <div
+      ref={contentRef}
+      className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2"
+    >
       {classData.map((image) => (
         <div
           className={cn(
@@ -658,6 +680,7 @@ function DatasetGrid({
 
 type TrainGridProps = {
   model: CustomClassificationModelConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
   classes: string[];
   trainImages: string[];
   trainFilter?: TrainFilter;
@@ -668,6 +691,7 @@ type TrainGridProps = {
 };
 function TrainGrid({
   model,
+  contentRef,
   classes,
   trainImages,
   trainFilter,
@@ -726,8 +750,9 @@ function TrainGrid({
 
   return (
     <div
+      ref={contentRef}
       className={cn(
-        "flex flex-wrap gap-2 overflow-y-auto p-2",
+        "scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2",
         isMobile && "justify-center",
       )}
     >

web/src/views/events/EventView.tsx

@@ -650,42 +650,41 @@ function DetectionReview({
 
   // keyboard
 
-  useKeyboardListener(["a", "r", "PageDown", "PageUp"], (key, modifiers) => {
+  useKeyboardListener(
-    if (modifiers.repeat || !modifiers.down) {
+    ["a", "r", "Escape"],
-      return;
+    (key, modifiers) => {
-    }
+      if (!modifiers.down) {
+        return true;
+      }
 
-    switch (key) {
+      switch (key) {
-      case "a":
+        case "a":
-        if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
-          onSelectAllReviews();
+            onSelectAllReviews();
-        }
+            return true;
-        break;
+          }
-      case "r":
+          break;
-        if (selectedReviews.length > 0) {
+        case "r":
-          currentItems?.forEach((item) => {
+          if (selectedReviews.length > 0 && !modifiers.repeat) {
-            if (selectedReviews.includes(item.id)) {
+            currentItems?.forEach((item) => {
-              item.has_been_reviewed = true;
+              if (selectedReviews.includes(item.id)) {
-              markItemAsReviewed(item);
+                item.has_been_reviewed = true;
-            }
+                markItemAsReviewed(item);
-          });
+              }
+            });
+            setSelectedReviews([]);
+            return true;
+          }
+          break;
+        case "Escape":
           setSelectedReviews([]);
-        }
+          return true;
-        break;
+      }
-      case "PageDown":
+
-        contentRef.current?.scrollBy({
+      return false;
-          top: contentRef.current.clientHeight / 2,
+    },
-          behavior: "smooth",
+    contentRef,
-        });
+  );
-        break;
-      case "PageUp":
-        contentRef.current?.scrollBy({
-          top: -contentRef.current.clientHeight / 2,
-          behavior: "smooth",
-        });
-        break;
-    }
-  });
 
   return (
     <>

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

web/src/views/search/SearchView.tsx

@@ -308,16 +308,24 @@ export default function SearchView({
 
   const onKeyboardShortcut = useCallback(
     (key: string | null, modifiers: KeyModifiers) => {
-      if (!modifiers.down || !uniqueResults || inputFocused) {
+      if (inputFocused) {
-        return;
+        return false;
+      }
+
+      if (!modifiers.down || !uniqueResults) {
+        return true;
       }
 
       switch (key) {
         case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
             onSelectAllObjects();
+            return true;
           }
           break;
+        case "Escape":
+          setSelectedObjects([]);
+          return true;
         case "ArrowLeft":
           if (uniqueResults.length > 0) {
             const currentIndex = searchDetail
@@ -334,8 +342,7 @@ export default function SearchView({
 
             setSearchDetail(uniqueResults[newIndex]);
           }
-          break;
+          return true;
-
         case "ArrowRight":
           if (uniqueResults.length > 0) {
             const currentIndex = searchDetail
@@ -351,28 +358,18 @@ export default function SearchView({
 
             setSearchDetail(uniqueResults[newIndex]);
           }
-          break;
+          return true;
-        case "PageDown":
-          contentRef.current?.scrollBy({
-            top: contentRef.current.clientHeight / 2,
-            behavior: "smooth",
-          });
-          break;
-        case "PageUp":
-          contentRef.current?.scrollBy({
-            top: -contentRef.current.clientHeight / 2,
-            behavior: "smooth",
-          });
-          break;
       }
+
+      return false;
     },
     [uniqueResults, inputFocused, onSelectAllObjects, searchDetail],
   );
 
   useKeyboardListener(
-    ["a", "ArrowLeft", "ArrowRight", "PageDown", "PageUp"],
+    ["a", "Escape", "ArrowLeft", "ArrowRight"],
     onKeyboardShortcut,
-    !inputFocused,
+    contentRef,
   );
 
   // scroll into view

web/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
-const proxyHost = process.env.PROXY_HOST || "localhost:5000";
+const proxyHost = process.env.PROXY_HOST || "192.168.50.106:5002";
 
 // https://vitejs.dev/config/
 export default defineConfig({