administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-08 06:25:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add right click as well

Browse Source
This commit is contained in:
Nicolas Mowen 2025-03-18 07:52:19 -06:00
parent 91f273e8db
commit 6388a72220
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import useContextMenu from "@/hooks/use-contextmenu";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import useOptimisticState from "@/hooks/use-optimistic-state"; import useOptimisticState from "@/hooks/use-optimistic-state";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -374,6 +375,16 @@ function FaceAttempt({
}; };
}, [image]); }, [image]);
// interaction
const imgRef = useRef<HTMLImageElement | null>(null);
useContextMenu(imgRef, () => {
onClick(true);
});
// api calls
const onTrainAttempt = useCallback( const onTrainAttempt = useCallback(
(trainName: string) => { (trainName: string) => {
axios axios
@ -429,10 +440,14 @@ function FaceAttempt({
? "shadow-selected outline-selected" ? "shadow-selected outline-selected"
: "outline-transparent duration-500", : "outline-transparent duration-500",
)} )}
onClick={(e) => onClick(e.metaKey || e.ctrlKey)}
> >
<div className="relative w-full overflow-hidden rounded-t-lg border border-t-0 *:text-card-foreground"> <div className="relative w-full overflow-hidden rounded-t-lg border border-t-0 *:text-card-foreground">
<img className="size-44" src={`${baseUrl}clips/faces/train/${image}`} /> <img
ref={imgRef}
className="size-44"
src={`${baseUrl}clips/faces/train/${image}`}
onClick={(e) => onClick(e.metaKey || e.ctrlKey)}
/>
<div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white"> <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
<TimeAgo className="text-white" time={data.timestamp * 1000} dense /> <TimeAgo className="text-white" time={data.timestamp * 1000} dense />
</div> </div>