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

Add tooltips to thumbnails

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-09 16:18:13 -07:00
parent 9e82d6ae43
commit 3354c8c009
3 changed files with 69 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/src/components/image/EventThumbnail.tsx
View File

@ -2,6 +2,7 @@ import { baseUrl } from "@/api/baseUrl";
import { Event as FrigateEvent } from "@/types/event"; import { Event as FrigateEvent } from "@/types/event";
import { LuStar } from "react-icons/lu"; import { LuStar } from "react-icons/lu";
import TimeAgo from "../dynamic/TimeAgo"; import TimeAgo from "../dynamic/TimeAgo";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
type EventThumbnailProps = { type EventThumbnailProps = {
event: FrigateEvent; event: FrigateEvent;
@ -9,22 +10,35 @@ type EventThumbnailProps = {
}; };
export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) { export function EventThumbnail({ event, onFavorite }: EventThumbnailProps) {
return ( return (
<div <Tooltip>
className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4" <TooltipTrigger asChild>
style={{ <div
backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`, className="relative rounded bg-cover aspect-square h-24 bg-no-repeat bg-center mr-4"
}} style={{
> backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
<LuStar }}
className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer" >
onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)} <LuStar
fill={event.retain_indefinitely ? "currentColor" : "none"} className="absolute h-6 w-6 text-yellow-300 top-1 right-1 cursor-pointer"
/> onClick={(e: Event) => (onFavorite ? onFavorite(e, event) : null)}
<div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent"> fill={event.retain_indefinitely ? "currentColor" : "none"}
<div className="absolute left-1 bottom-0 text-xs text-white w-full"> />
<TimeAgo time={event.start_time * 1000} dense /> <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent">
<div className="absolute left-1 bottom-0 text-xs text-white w-full">
<TimeAgo time={event.start_time * 1000} dense />
</div>
</div>
</div> </div>
</div> </TooltipTrigger>
</div> <TooltipContent>
{`${event.label} ${
event.sub_label ? `(${event.sub_label})` : ""
} detected with score of ${(event.data.score * 100).toFixed(0)}% ${
event.data.sub_label_score
? `(${event.data.sub_label_score * 100}%)`
: ""
}`}
</TooltipContent>
</Tooltip>
); );
} }

25
web/src/pages/Live.tsx
View File

@ -1,6 +1,7 @@
import { EventThumbnail } from "@/components/image/EventThumbnail"; import { EventThumbnail } from "@/components/image/EventThumbnail";
import LivePlayer from "@/components/player/LivePlayer"; import LivePlayer from "@/components/player/LivePlayer";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Event as FrigateEvent } from "@/types/event"; import { Event as FrigateEvent } from "@/types/event";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import axios from "axios"; import axios from "axios";
@ -57,17 +58,19 @@ function Live() {
<> <>
{events && events.length > 0 && ( {events && events.length > 0 && (
<ScrollArea> <ScrollArea>
<div className="flex"> <TooltipProvider>
{events.map((event) => { <div className="flex">
return ( {events.map((event) => {
<EventThumbnail return (
key={event.id} <EventThumbnail
event={event} key={event.id}
onFavorite={onFavorite} event={event}
/> onFavorite={onFavorite}
); />
})} );
</div> })}
</div>
</TooltipProvider>
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
)} )}

47
web/src/types/event.ts
View File

@ -1,25 +1,26 @@
export interface Event { export interface Event {
id: string; id: string;
label: string; label: string;
sub_label?: string; sub_label?: string;
camera: string; camera: string;
start_time: number; start_time: number;
end_time?: number; end_time?: number;
false_positive: boolean; false_positive: boolean;
zones: string[]; zones: string[];
thumbnail: string; thumbnail: string;
has_clip: boolean; has_clip: boolean;
has_snapshot: boolean; has_snapshot: boolean;
retain_indefinitely: boolean; retain_indefinitely: boolean;
plus_id?: string; plus_id?: string;
model_hash?: string; model_hash?: string;
data: { data: {
top_score: number; top_score: number;
score: number; score: number;
region: number[]; sub_label_score?: number;
box: number[]; region: number[];
area: number; box: number[];
ratio: number; area: number;
type: "object" | "audio" | "manual"; ratio: number;
} type: "object" | "audio" | "manual";
};
} }