administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-18 02:56:44 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'dev' into dev-zone-friendly-name

Browse Source
This commit is contained in:
GuoQing Liu 2025-10-26 21:14:55 +08:00 committed by GitHub
commit 8b5e86bbf2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 58 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/overlay/detail/ObjectLifecycle.tsx
View File

@ -41,7 +41,7 @@ import {
ContextMenuItem, ContextMenuItem,
ContextMenuTrigger, ContextMenuTrigger,
} from "@/components/ui/context-menu"; } from "@/components/ui/context-menu";
import { useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { ObjectPath } from "./ObjectPath"; import { ObjectPath } from "./ObjectPath";
import { getLifecycleItemDescription } from "@/utils/lifecycleUtil"; import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
import { IoPlayCircleOutline } from "react-icons/io5"; import { IoPlayCircleOutline } from "react-icons/io5";
@ -295,10 +295,10 @@ export default function ObjectLifecycle({
timezone: config.ui.timezone, timezone: config.ui.timezone,
date_format: date_format:
config.ui.time_format == "24hour" config.ui.time_format == "24hour"
? t("time.formattedTimestampHourMinuteSecond.24hour", { ? t("time.formattedTimestamp.24hour", {
ns: "common", ns: "common",
}) })
: t("time.formattedTimestampHourMinuteSecond.12hour", { : t("time.formattedTimestamp.12hour", {
ns: "common", ns: "common",
}), }),
time_style: "medium", time_style: "medium",
@ -311,10 +311,10 @@ export default function ObjectLifecycle({
timezone: config.ui.timezone, timezone: config.ui.timezone,
date_format: date_format:
config.ui.time_format == "24hour" config.ui.time_format == "24hour"
? t("time.formattedTimestampHourMinuteSecond.24hour", { ? t("time.formattedTimestamp.24hour", {
ns: "common", ns: "common",
}) })
: t("time.formattedTimestampHourMinuteSecond.12hour", { : t("time.formattedTimestamp.12hour", {
ns: "common", ns: "common",
}), }),
time_style: "medium", time_style: "medium",
@ -418,6 +418,7 @@ export default function ObjectLifecycle({
return ( return (
<div className={className}> <div className={className}>
<span tabIndex={0} className="sr-only" />
{!fullscreen && ( {!fullscreen && (
<div className={cn("flex items-center gap-2")}> <div className={cn("flex items-center gap-2")}>
<Button <Button
@ -655,10 +656,15 @@ export default function ObjectLifecycle({
</span> </span>
{event.data?.recognized_license_plate && ( {event.data?.recognized_license_plate && (
<> <>
·{" "} <span className="text-secondary-foreground">·</span>
<span className="text-sm text-secondary-foreground"> <div className="text-sm text-secondary-foreground">
{event.data.recognized_license_plate} <Link
</span> to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
className="text-sm"
>
{event.data.recognized_license_plate}
</Link>
</div>
</> </>
)} )}
</div> </div>
@ -838,12 +844,17 @@ function LifecycleIconRow({
/> />
</div> </div>
<div className="flex w-full flex-row justify-between"> <div className="ml-2 flex w-full min-w-0 flex-1">
<div className="flex flex-col"> <div className="flex flex-col">
<Trans>
<div>{getLifecycleItemDescription(item)}</div> <div>{getLifecycleItemDescription(item)}</div>
</Trans>
<div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-secondary-foreground md:gap-5"> <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-secondary-foreground md:gap-5">
<div className="text-md flex items-start break-words text-left">
<Trans>
{getLifecycleItemDescription(item)}
</Trans>
</div>
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-secondary-foreground md:gap-5">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="text-primary-variant"> <span className="text-primary-variant">
{t("objectLifecycle.lifecycleItemDesc.header.ratio")} {t("objectLifecycle.lifecycleItemDesc.header.ratio")}
@ -902,8 +913,9 @@ function LifecycleIconRow({
)} )}
</div> </div>
</div> </div>
</div>
<div className={cn("p-1 text-sm")}>{formattedEventTimestamp}</div> <div className="ml-3 flex-shrink-0 px-1 text-right text-xs text-primary-variant">
<div className="whitespace-nowrap">{formattedEventTimestamp}</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -23,6 +23,7 @@ import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { resolveZoneName } from "@/hooks/use-zone-friendly-name"; import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { Link } from "react-router-dom";
type DetailStreamProps = { type DetailStreamProps = {
reviewItems?: ReviewSegment[]; reviewItems?: ReviewSegment[];
@ -500,15 +501,22 @@ function EventList({
}} }}
role="button" role="button"
> >
<span className="capitalize">{label}</span> <div className="flex gap-2">
{event.data?.recognized_license_plate && ( <span className="capitalize">{label}</span>
<> {event.data?.recognized_license_plate && (
·{" "} <>
<span className="text-sm text-secondary-foreground"> <span className="text-secondary-foreground">·</span>
{event.data.recognized_license_plate} <div className="text-sm text-secondary-foreground">
</span> <Link
</> to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
)} className="text-sm"
>
{event.data.recognized_license_plate}
</Link>
</div>
</>
)}
</div>
</div> </div>
</div> </div>
<div className="mr-2 flex flex-row justify-end"> <div className="mr-2 flex flex-row justify-end">
@ -620,10 +628,11 @@ function LifecycleItem({
)} )}
/> />
</div> </div>
<div className="flex w-full flex-row justify-between">
<div className="ml-0.5 flex min-w-0 flex-1">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<div className="flex items-start text-left"> <div className="flex items-start break-words text-left">
<Trans>{getLifecycleItemDescription(item)}</Trans> <Trans>{getLifecycleItemDescription(item)}</Trans>
</div> </div>
</TooltipTrigger> </TooltipTrigger>
@ -643,7 +652,9 @@ function LifecycleItem({
</span> </span>
{areaPx !== undefined && areaPct !== undefined ? ( {areaPx !== undefined && areaPct !== undefined ? (
<span className="font-medium text-foreground"> <span className="font-medium text-foreground">
{areaPx} {t("pixels", { ns: "common" })} · {areaPct}% {areaPx} {t("pixels", { ns: "common" })}{" "}
<span className="text-secondary-foreground">·</span>{" "}
{areaPct}%
</span> </span>
) : ( ) : (
<span>N/A</span> <span>N/A</span>
@ -653,7 +664,10 @@ function LifecycleItem({
</div> </div>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
<div className={cn("p-1 text-xs")}>{formattedEventTimestamp}</div> </div>
<div className="ml-3 flex-shrink-0 px-1 text-right text-xs text-primary-variant">
<div className="whitespace-nowrap">{formattedEventTimestamp}</div>
</div> </div>
</div> </div>
); );

5
web/src/context/detail-stream-context.tsx
View File

@ -58,6 +58,11 @@ export function DetailStreamProvider({
setAnnotationOffset(cfgOffset); setAnnotationOffset(cfgOffset);
}, [config, camera]); }, [config, camera]);
// Clear selected objects when exiting detail mode or changing cameras
useEffect(() => {
setSelectedObjectIds([]);
}, [isDetailMode, camera]);
const value: DetailStreamContextType = { const value: DetailStreamContextType = {
selectedObjectIds, selectedObjectIds,
currentTime, currentTime,