diff --git a/web/src/components/overlay/detail/ObjectLifecycle.tsx b/web/src/components/overlay/detail/ObjectLifecycle.tsx index 11e39fc32..f1dcbe313 100644 --- a/web/src/components/overlay/detail/ObjectLifecycle.tsx +++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx @@ -41,7 +41,7 @@ import { ContextMenuItem, ContextMenuTrigger, } from "@/components/ui/context-menu"; -import { useNavigate } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import { ObjectPath } from "./ObjectPath"; import { getLifecycleItemDescription } from "@/utils/lifecycleUtil"; import { IoPlayCircleOutline } from "react-icons/io5"; @@ -295,10 +295,10 @@ export default function ObjectLifecycle({ timezone: config.ui.timezone, date_format: config.ui.time_format == "24hour" - ? t("time.formattedTimestampHourMinuteSecond.24hour", { + ? t("time.formattedTimestamp.24hour", { ns: "common", }) - : t("time.formattedTimestampHourMinuteSecond.12hour", { + : t("time.formattedTimestamp.12hour", { ns: "common", }), time_style: "medium", @@ -311,10 +311,10 @@ export default function ObjectLifecycle({ timezone: config.ui.timezone, date_format: config.ui.time_format == "24hour" - ? t("time.formattedTimestampHourMinuteSecond.24hour", { + ? t("time.formattedTimestamp.24hour", { ns: "common", }) - : t("time.formattedTimestampHourMinuteSecond.12hour", { + : t("time.formattedTimestamp.12hour", { ns: "common", }), time_style: "medium", @@ -418,6 +418,7 @@ export default function ObjectLifecycle({ return (
+ {!fullscreen && (
@@ -838,12 +844,17 @@ function LifecycleIconRow({ />
-
+
-
{getLifecycleItemDescription(item)}
-
+
+
+ + {getLifecycleItemDescription(item)} + +
+
{t("objectLifecycle.lifecycleItemDesc.header.ratio")} @@ -902,8 +913,9 @@ function LifecycleIconRow({ )}
- -
{formattedEventTimestamp}
+
+
+
{formattedEventTimestamp}
diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx index 848c47486..ee60a566d 100644 --- a/web/src/components/timeline/DetailStream.tsx +++ b/web/src/components/timeline/DetailStream.tsx @@ -23,6 +23,7 @@ import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog import { cn } from "@/lib/utils"; import { resolveZoneName } from "@/hooks/use-zone-friendly-name"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; +import { Link } from "react-router-dom"; type DetailStreamProps = { reviewItems?: ReviewSegment[]; @@ -500,15 +501,22 @@ function EventList({ }} role="button" > - {label} - {event.data?.recognized_license_plate && ( - <> - ·{" "} - - {event.data.recognized_license_plate} - - - )} +
+ {label} + {event.data?.recognized_license_plate && ( + <> + · +
+ + {event.data.recognized_license_plate} + +
+ + )} +
@@ -620,10 +628,11 @@ function LifecycleItem({ )} />
-
+ +
-
+
{getLifecycleItemDescription(item)}
@@ -643,7 +652,9 @@ function LifecycleItem({ {areaPx !== undefined && areaPct !== undefined ? ( - {areaPx} {t("pixels", { ns: "common" })} · {areaPct}% + {areaPx} {t("pixels", { ns: "common" })}{" "} + ·{" "} + {areaPct}% ) : ( N/A @@ -653,7 +664,10 @@ function LifecycleItem({
-
{formattedEventTimestamp}
+
+ +
+
{formattedEventTimestamp}
); diff --git a/web/src/context/detail-stream-context.tsx b/web/src/context/detail-stream-context.tsx index aa7b2478b..a148833e7 100644 --- a/web/src/context/detail-stream-context.tsx +++ b/web/src/context/detail-stream-context.tsx @@ -58,6 +58,11 @@ export function DetailStreamProvider({ setAnnotationOffset(cfgOffset); }, [config, camera]); + // Clear selected objects when exiting detail mode or changing cameras + useEffect(() => { + setSelectedObjectIds([]); + }, [isDetailMode, camera]); + const value: DetailStreamContextType = { selectedObjectIds, currentTime,