administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Show review title in review card

Browse Source
This commit is contained in:
Nicolas Mowen 2025-11-05 08:33:40 -07:00
parent c25d5f431f
commit 4719bff854
3 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/components/card/ReviewCard.tsx
View File

@ -38,6 +38,7 @@ import { Button, buttonVariants } from "../ui/button";
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { LuCircle } from "react-icons/lu"; import { LuCircle } from "react-icons/lu";
import { MdAutoAwesome } from "react-icons/md";
type ReviewCardProps = { type ReviewCardProps = {
event: ReviewSegment; event: ReviewSegment;
@ -164,29 +165,33 @@ export default function ReviewCard({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="flex items-center justify-evenly gap-1"> <div className="flex items-center gap-2">
<> <LuCircle
<LuCircle className={cn(
className={cn( "size-2",
"size-2", event.severity == "alert"
event.severity == "alert" ? "fill-severity_alert text-severity_alert"
? "fill-severity_alert text-severity_alert" : "fill-severity_detection text-severity_detection",
: "fill-severity_detection text-severity_detection", )}
)} />
/> <div className="flex items-center gap-1">
{event.data.objects.map((object) => { {event.data.objects.map((object, idx) => (
return getIconForLabel( <div
object, key={`${object}-${idx}`}
"size-3 text-primary dark:text-white", className="rounded-full bg-muted-foreground p-1"
); >
})} {getIconForLabel(object, "size-3 text-white")}
{event.data.audio.map((audio) => { </div>
return getIconForLabel( ))}
audio, {event.data.audio.map((audio, idx) => (
"size-3 text-primary dark:text-white", <div
); key={`${audio}-${idx}`}
})} className="rounded-full bg-muted-foreground p-1"
</> >
{getIconForLabel(audio, "size-3 text-white")}
</div>
))}
</div>
<div className="font-extra-light text-xs">{formattedDate}</div> <div className="font-extra-light text-xs">{formattedDate}</div>
</div> </div>
</TooltipTrigger> </TooltipTrigger>
@ -213,6 +218,14 @@ export default function ReviewCard({
dense dense
/> />
</div> </div>
{event.data.metadata?.title && (
<div className="flex items-center gap-1.5 rounded bg-secondary/50">
<MdAutoAwesome className="size-3 shrink-0 text-primary" />
<span className="truncate text-xs text-primary">
{event.data.metadata.title}
</span>
</div>
)}
</div> </div>
); );

6
web/src/components/timeline/DetailStream.tsx
View File

@ -22,6 +22,7 @@ import {
LuChevronRight, LuChevronRight,
LuSettings, LuSettings,
} from "react-icons/lu"; } from "react-icons/lu";
import { MdAutoAwesome } from "react-icons/md";
import { getTranslatedLabel } from "@/utils/i18n"; import { getTranslatedLabel } from "@/utils/i18n";
import EventMenu from "@/components/timeline/EventMenu"; import EventMenu from "@/components/timeline/EventMenu";
import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog"; import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
@ -410,8 +411,9 @@ function ReviewGroup({
</div> </div>
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
{review.data.metadata?.title && ( {review.data.metadata?.title && (
<div className="mb-1 text-sm text-primary-variant"> <div className="mb-1 flex items-center gap-1 text-sm text-primary-variant">
{review.data.metadata.title} <MdAutoAwesome className="size-3 shrink-0" />
<span className="truncate">{review.data.metadata.title}</span>
</div> </div>
)} )}
<div className="flex flex-row items-center gap-1.5"> <div className="flex flex-row items-center gap-1.5">

2
web/src/views/recording/RecordingView.tsx
View File

@ -974,7 +974,7 @@ function Timeline({
? "w-[100px] flex-shrink-0" ? "w-[100px] flex-shrink-0"
: timelineType == "detail" : timelineType == "detail"
? "min-w-[20rem] max-w-[30%] flex-shrink-0 flex-grow-0 basis-[30rem] md:min-w-[20rem] md:max-w-[25%] lg:min-w-[30rem] lg:max-w-[33%]" ? "min-w-[20rem] max-w-[30%] flex-shrink-0 flex-grow-0 basis-[30rem] md:min-w-[20rem] md:max-w-[25%] lg:min-w-[30rem] lg:max-w-[33%]"
: "w-60 flex-shrink-0", : "w-80 flex-shrink-0",
) )
: cn( : cn(
timelineType == "timeline" timelineType == "timeline"