administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-16 12:02:09 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Make keyboard shortcuts consistent

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-02 06:27:28 -06:00
parent 85ace6a6be
commit 1b36f0cbf5
6 changed files with 233 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
docs/docs/guides/training_a_classification_model.py Normal file
View File

47
web/src/pages/Exports.tsx
View File

@ -13,12 +13,13 @@ import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { useSearchEffect } from "@/hooks/use-overlay-state"; import { useSearchEffect } from "@/hooks/use-overlay-state";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { DeleteClipType, Export } from "@/types/export"; import { DeleteClipType, Export } from "@/types/export";
import axios from "axios"; 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 { isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -109,6 +110,45 @@ function Exports() {
[mutate, t], [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 ( return (
<div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2"> <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
<Toaster closeButton={true} /> <Toaster closeButton={true} />
@ -194,7 +234,10 @@ function Exports() {
<div className="w-full overflow-hidden"> <div className="w-full overflow-hidden">
{exports && filteredExports && filteredExports.length > 0 ? ( {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) => ( {Object.values(exports).map((item) => (
<ExportCard <ExportCard
key={item.name} key={item.name}

52
web/src/pages/FaceLibrary.tsx
View File

@ -46,7 +46,14 @@ import { FaceLibraryData, RecognizedFaceData } from "@/types/face";
import { FaceRecognitionConfig, FrigateConfig } from "@/types/frigateConfig"; import { FaceRecognitionConfig, FrigateConfig } from "@/types/frigateConfig";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import axios from "axios"; 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 { isDesktop, isMobile } from "react-device-detect";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { import {
@ -263,16 +270,17 @@ export default function FaceLibrary() {
// keyboard // keyboard
const contentRef = useRef<HTMLDivElement | null>(null);
useKeyboardListener( useKeyboardListener(
["a", "Escape"], ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
(key, modifiers) => { (key, modifiers) => {
if (modifiers.repeat || !modifiers.down) { if (!modifiers.down) {
return; return;
} }
switch (key) { switch (key) {
case "a": case "a":
if (modifiers.ctrl) { if (modifiers.ctrl && !modifiers.repeat) {
if (selectedFaces.length) { if (selectedFaces.length) {
setSelectedFaces([]); setSelectedFaces([]);
} else { } else {
@ -285,6 +293,30 @@ export default function FaceLibrary() {
case "Escape": case "Escape":
setSelectedFaces([]); setSelectedFaces([]);
break; 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, !inputFocused,
@ -408,6 +440,7 @@ export default function FaceLibrary() {
(pageToggle == "train" ? ( (pageToggle == "train" ? (
<TrainingGrid <TrainingGrid
config={config} config={config}
contentRef={contentRef}
attemptImages={trainImages} attemptImages={trainImages}
faceNames={faces} faceNames={faces}
selectedFaces={selectedFaces} selectedFaces={selectedFaces}
@ -417,6 +450,7 @@ export default function FaceLibrary() {
/> />
) : ( ) : (
<FaceGrid <FaceGrid
contentRef={contentRef}
faceImages={faceImages} faceImages={faceImages}
pageToggle={pageToggle} pageToggle={pageToggle}
selectedFaces={selectedFaces} selectedFaces={selectedFaces}
@ -609,6 +643,7 @@ function LibrarySelector({
type TrainingGridProps = { type TrainingGridProps = {
config: FrigateConfig; config: FrigateConfig;
contentRef: MutableRefObject<HTMLDivElement | null>;
attemptImages: string[]; attemptImages: string[];
faceNames: string[]; faceNames: string[];
selectedFaces: string[]; selectedFaces: string[];
@ -618,6 +653,7 @@ type TrainingGridProps = {
}; };
function TrainingGrid({ function TrainingGrid({
config, config,
contentRef,
attemptImages, attemptImages,
faceNames, faceNames,
selectedFaces, selectedFaces,
@ -701,7 +737,10 @@ function TrainingGrid({
setInputFocused={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]) => { {Object.entries(faceGroups).map(([key, group]) => {
const event = events?.find((ev) => ev.id == key); const event = events?.find((ev) => ev.id == key);
return ( return (
@ -1039,6 +1078,7 @@ function FaceAttempt({
} }
type FaceGridProps = { type FaceGridProps = {
contentRef: MutableRefObject<HTMLDivElement | null>;
faceImages: string[]; faceImages: string[];
pageToggle: string; pageToggle: string;
selectedFaces: string[]; selectedFaces: string[];
@ -1046,6 +1086,7 @@ type FaceGridProps = {
onDelete: (name: string, ids: string[]) => void; onDelete: (name: string, ids: string[]) => void;
}; };
function FaceGrid({ function FaceGrid({
contentRef,
faceImages, faceImages,
pageToggle, pageToggle,
selectedFaces, selectedFaces,
@ -1070,6 +1111,7 @@ function FaceGrid({
return ( return (
<div <div
ref={contentRef}
className={cn( className={cn(
"scrollbar-container gap-2 overflow-y-scroll p-1", "scrollbar-container gap-2 overflow-y-scroll p-1",
isDesktop ? "flex flex-wrap" : "grid grid-cols-2 md:grid-cols-4", isDesktop ? "flex flex-wrap" : "grid grid-cols-2 md:grid-cols-4",

95
web/src/views/classification/ModelTrainingView.tsx
View File

@ -37,7 +37,14 @@ import { cn } from "@/lib/utils";
import { CustomClassificationModelConfig } from "@/types/frigateConfig"; import { CustomClassificationModelConfig } from "@/types/frigateConfig";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import axios from "axios"; 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 { isDesktop, isMobile } from "react-device-detect";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { LuPencil, LuTrash2 } from "react-icons/lu"; import { LuPencil, LuTrash2 } from "react-icons/lu";
@ -226,30 +233,58 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
// keyboard // keyboard
useKeyboardListener(["a", "Escape"], (key, modifiers) => { const contentRef = useRef<HTMLDivElement | null>(null);
if (modifiers.repeat || !modifiers.down) { useKeyboardListener(
return; ["a", "Escape", "ArrowDown", "ArrowUp", "PageDown", "PageUp"],
} (key, modifiers) => {
if (modifiers.repeat || !modifiers.down) {
return;
}
switch (key) { switch (key) {
case "a": case "a":
if (modifiers.ctrl) { if (modifiers.ctrl) {
if (selectedImages.length) { if (selectedImages.length) {
setSelectedImages([]); setSelectedImages([]);
} else { } else {
setSelectedImages([ setSelectedImages([
...(pageToggle === "train" ...(pageToggle === "train"
? trainImages || [] ? trainImages || []
: dataset?.[pageToggle] || []), : dataset?.[pageToggle] || []),
]); ]);
}
} }
} break;
break; case "Escape":
case "Escape": setSelectedImages([]);
setSelectedImages([]); break;
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(() => { useEffect(() => {
setSelectedImages([]); setSelectedImages([]);
@ -370,6 +405,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
{pageToggle == "train" ? ( {pageToggle == "train" ? (
<TrainGrid <TrainGrid
model={model} model={model}
contentRef={contentRef}
classes={Object.keys(dataset || {})} classes={Object.keys(dataset || {})}
trainImages={trainImages || []} trainImages={trainImages || []}
trainFilter={trainFilter} trainFilter={trainFilter}
@ -380,6 +416,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
/> />
) : ( ) : (
<DatasetGrid <DatasetGrid
contentRef={contentRef}
modelName={model.name} modelName={model.name}
categoryName={pageToggle} categoryName={pageToggle}
images={dataset?.[pageToggle] || []} images={dataset?.[pageToggle] || []}
@ -579,6 +616,7 @@ function LibrarySelector({
} }
type DatasetGridProps = { type DatasetGridProps = {
contentRef: MutableRefObject<HTMLDivElement | null>;
modelName: string; modelName: string;
categoryName: string; categoryName: string;
images: string[]; images: string[];
@ -587,6 +625,7 @@ type DatasetGridProps = {
onDelete: (ids: string[]) => void; onDelete: (ids: string[]) => void;
}; };
function DatasetGrid({ function DatasetGrid({
contentRef,
modelName, modelName,
categoryName, categoryName,
images, images,
@ -602,7 +641,10 @@ function DatasetGrid({
); );
return ( 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) => ( {classData.map((image) => (
<div <div
className={cn( className={cn(
@ -658,6 +700,7 @@ function DatasetGrid({
type TrainGridProps = { type TrainGridProps = {
model: CustomClassificationModelConfig; model: CustomClassificationModelConfig;
contentRef: MutableRefObject<HTMLDivElement | null>;
classes: string[]; classes: string[];
trainImages: string[]; trainImages: string[];
trainFilter?: TrainFilter; trainFilter?: TrainFilter;
@ -668,6 +711,7 @@ type TrainGridProps = {
}; };
function TrainGrid({ function TrainGrid({
model, model,
contentRef,
classes, classes,
trainImages, trainImages,
trainFilter, trainFilter,
@ -726,8 +770,9 @@ function TrainGrid({
return ( return (
<div <div
ref={contentRef}
className={cn( 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", isMobile && "justify-center",
)} )}
> >

83
web/src/views/events/EventView.tsx
View File

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

25
web/src/views/search/SearchView.tsx
View File

@ -314,7 +314,7 @@ export default function SearchView({
switch (key) { switch (key) {
case "a": case "a":
if (modifiers.ctrl) { if (modifiers.ctrl && !modifiers.repeat) {
onSelectAllObjects(); onSelectAllObjects();
} }
break; break;
@ -335,7 +335,6 @@ export default function SearchView({
setSearchDetail(uniqueResults[newIndex]); setSearchDetail(uniqueResults[newIndex]);
} }
break; break;
case "ArrowRight": case "ArrowRight":
if (uniqueResults.length > 0) { if (uniqueResults.length > 0) {
const currentIndex = searchDetail const currentIndex = searchDetail
@ -352,6 +351,18 @@ export default function SearchView({
setSearchDetail(uniqueResults[newIndex]); setSearchDetail(uniqueResults[newIndex]);
} }
break; break;
case "ArrowDown":
contentRef.current?.scrollBy({
top: 100,
behavior: "smooth",
});
break;
case "ArrowUp":
contentRef.current?.scrollBy({
top: -100,
behavior: "smooth",
});
break;
case "PageDown": case "PageDown":
contentRef.current?.scrollBy({ contentRef.current?.scrollBy({
top: contentRef.current.clientHeight / 2, top: contentRef.current.clientHeight / 2,
@ -370,7 +381,15 @@ export default function SearchView({
); );
useKeyboardListener( useKeyboardListener(
["a", "ArrowLeft", "ArrowRight", "PageDown", "PageUp"], [
"a",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"ArrowUp",
"PageDown",
"PageUp",
],
onKeyboardShortcut, onKeyboardShortcut,
!inputFocused, !inputFocused,
); );