Make keyboard shortcuts consistent

2026-04-15 19:42:08 +03:00 · 2025-10-02 06:27:28 -06:00 · 2025-10-02 06:27:28 -06:00 · 1b36f0cbf5
commit 1b36f0cbf5
parent 85ace6a6be
6 changed files with 233 additions and 69 deletions
--- a/docs/docs/guides/training_a_classification_model.py
+++ b/docs/docs/guides/training_a_classification_model.py
--- a/web/src/pages/Exports.tsx
+++ b/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,45 @@ function Exports() {
    [mutate, t],
  );

+  // Keyboard Listener
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  useKeyboardListener(
+    ["ArrowDown", "ArrowUp", "PageDown", "PageUp"],
+    (key, modifiers) => {
+      if (!modifiers.down) {
+        return;
+      }
+
+      switch (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;
+      }
+    },
+  );
+
  return (
    <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
      <Toaster closeButton={true} />
@ -194,7 +234,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}
--- a/web/src/pages/FaceLibrary.tsx
+++ b/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 {
@ -263,16 +270,17 @@ export default function FaceLibrary() {

  // keyboard

+  const contentRef = useRef<HTMLDivElement | null>(null);
  useKeyboardListener(
-    ["a", "Escape"],
+    ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
    (key, modifiers) => {
-      if (modifiers.repeat || !modifiers.down) {
+      if (!modifiers.down) {
        return;
      }

      switch (key) {
        case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
            if (selectedFaces.length) {
              setSelectedFaces([]);
            } else {
@ -285,6 +293,30 @@ export default function FaceLibrary() {
        case "Escape":
          setSelectedFaces([]);
          break;
+        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;
      }
    },
    !inputFocused,
@ -408,6 +440,7 @@ export default function FaceLibrary() {
        (pageToggle == "train" ? (
          <TrainingGrid
            config={config}
+            contentRef={contentRef}
            attemptImages={trainImages}
            faceNames={faces}
            selectedFaces={selectedFaces}
@ -417,6 +450,7 @@ export default function FaceLibrary() {
          />
        ) : (
          <FaceGrid
+            contentRef={contentRef}
            faceImages={faceImages}
            pageToggle={pageToggle}
            selectedFaces={selectedFaces}
@ -609,6 +643,7 @@ function LibrarySelector({

 type TrainingGridProps = {
  config: FrigateConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
  attemptImages: string[];
  faceNames: string[];
  selectedFaces: string[];
@ -618,6 +653,7 @@ type TrainingGridProps = {
 };
 function TrainingGrid({
  config,
+  contentRef,
  attemptImages,
  faceNames,
  selectedFaces,
@ -701,7 +737,10 @@ function TrainingGrid({
        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 +1078,7 @@ function FaceAttempt({
 }

 type FaceGridProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
  faceImages: string[];
  pageToggle: string;
  selectedFaces: string[];
@ -1046,6 +1086,7 @@ type FaceGridProps = {
  onDelete: (name: string, ids: string[]) => void;
 };
 function FaceGrid({
+  contentRef,
  faceImages,
  pageToggle,
  selectedFaces,
@ -1070,6 +1111,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",
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/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,58 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {

  // keyboard

-  useKeyboardListener(["a", "Escape"], (key, modifiers) => {
-    if (modifiers.repeat || !modifiers.down) {
-      return;
-    }
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  useKeyboardListener(
+    ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
+    (key, modifiers) => {
+      if (modifiers.repeat || !modifiers.down) {
+        return;
+      }

-    switch (key) {
-      case "a":
-        if (modifiers.ctrl) {
-          if (selectedImages.length) {
-            setSelectedImages([]);
-          } else {
-            setSelectedImages([
-              ...(pageToggle === "train"
-                ? trainImages || []
-                : dataset?.[pageToggle] || []),
-            ]);
+      switch (key) {
+        case "a":
+          if (modifiers.ctrl) {
+            if (selectedImages.length) {
+              setSelectedImages([]);
+            } else {
+              setSelectedImages([
+                ...(pageToggle === "train"
+                  ? trainImages || []
+                  : dataset?.[pageToggle] || []),
+              ]);
+            }
          }
-        }
-        break;
-      case "Escape":
-        setSelectedImages([]);
-        break;
-    }
-  });
+          break;
+        case "Escape":
+          setSelectedImages([]);
+          break;
+        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;
+      }
+    },
+  );

  useEffect(() => {
    setSelectedImages([]);
@ -370,6 +405,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
      {pageToggle == "train" ? (
        <TrainGrid
          model={model}
+          contentRef={contentRef}
          classes={Object.keys(dataset || {})}
          trainImages={trainImages || []}
          trainFilter={trainFilter}
@ -380,6 +416,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
        />
      ) : (
        <DatasetGrid
+          contentRef={contentRef}
          modelName={model.name}
          categoryName={pageToggle}
          images={dataset?.[pageToggle] || []}
@ -579,6 +616,7 @@ function LibrarySelector({
 }

 type DatasetGridProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
  modelName: string;
  categoryName: string;
  images: string[];
@ -587,6 +625,7 @@ type DatasetGridProps = {
  onDelete: (ids: string[]) => void;
 };
 function DatasetGrid({
+  contentRef,
  modelName,
  categoryName,
  images,
@ -602,7 +641,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 +700,7 @@ function DatasetGrid({

 type TrainGridProps = {
  model: CustomClassificationModelConfig;
+  contentRef: MutableRefObject<HTMLDivElement | null>;
  classes: string[];
  trainImages: string[];
  trainFilter?: TrainFilter;
@ -668,6 +711,7 @@ type TrainGridProps = {
 };
 function TrainGrid({
  model,
+  contentRef,
  classes,
  trainImages,
  trainFilter,
@ -726,8 +770,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",
      )}
    >
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@ -650,42 +650,57 @@ function DetectionReview({

  // keyboard

-  useKeyboardListener(["a", "r", "PageDown", "PageUp"], (key, modifiers) => {
-    if (modifiers.repeat || !modifiers.down) {
-      return;
-    }
+  useKeyboardListener(
+    ["a", "r", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
+    (key, modifiers) => {
+      if (!modifiers.down) {
+        return;
+      }

-    switch (key) {
-      case "a":
-        if (modifiers.ctrl) {
-          onSelectAllReviews();
-        }
-        break;
-      case "r":
-        if (selectedReviews.length > 0) {
-          currentItems?.forEach((item) => {
-            if (selectedReviews.includes(item.id)) {
-              item.has_been_reviewed = true;
-              markItemAsReviewed(item);
-            }
+      switch (key) {
+        case "a":
+          if (modifiers.ctrl && !modifiers.repeat) {
+            onSelectAllReviews();
+          }
+          break;
+        case "r":
+          if (selectedReviews.length > 0 && !modifiers.repeat) {
+            currentItems?.forEach((item) => {
+              if (selectedReviews.includes(item.id)) {
+                item.has_been_reviewed = true;
+                markItemAsReviewed(item);
+              }
+            });
+            setSelectedReviews([]);
+          }
+          break;
+        case "ArrowDown":
+          contentRef.current?.scrollBy({
+            top: 100,
+            behavior: "smooth",
          });
-          setSelectedReviews([]);
-        }
-        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;
-    }
-  });
+          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;
+      }
+    },
+  );

  return (
    <>
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -314,7 +314,7 @@ export default function SearchView({

      switch (key) {
        case "a":
-          if (modifiers.ctrl) {
+          if (modifiers.ctrl && !modifiers.repeat) {
            onSelectAllObjects();
          }
          break;
@ -335,7 +335,6 @@ export default function SearchView({
            setSearchDetail(uniqueResults[newIndex]);
          }
          break;
-
        case "ArrowRight":
          if (uniqueResults.length > 0) {
            const currentIndex = searchDetail
@ -352,6 +351,18 @@ export default function SearchView({
            setSearchDetail(uniqueResults[newIndex]);
          }
          break;
+        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,
@ -370,7 +381,15 @@ export default function SearchView({
  );

  useKeyboardListener(
-    ["a", "ArrowLeft", "ArrowRight", "PageDown", "PageUp"],
+    [
+      "a",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "PageDown",
+      "PageUp",
+    ],
    onKeyboardShortcut,
    !inputFocused,
  );