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,