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/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) {
-        return;
+      if (!modifiers.down) {
+        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;
     },
   );