From e6b448732de94ade8900e3a8be2442bb7d0aafa4 Mon Sep 17 00:00:00 2001
From: ZhaiSoul <842607283@qq.com>
Date: Thu, 6 Nov 2025 14:47:27 +0000
Subject: [PATCH] refactor: add friendly zone names to timeline entries and
 clean up unused code

---
 .../components/overlay/detail/ObjectPath.tsx  | 25 +++++++-------
 web/src/components/settings/PolygonCanvas.tsx |  4 +++
 web/src/components/timeline/DetailStream.tsx  | 33 ++++++++++---------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/web/src/components/overlay/detail/ObjectPath.tsx b/web/src/components/overlay/detail/ObjectPath.tsx
index f160f092a..201a4d9b3 100644
--- a/web/src/components/overlay/detail/ObjectPath.tsx
+++ b/web/src/components/overlay/detail/ObjectPath.tsx
@@ -50,22 +50,23 @@ export function ObjectPath({
     if (!imgRef.current || !positions) return [];
     const imgRect = imgRef.current.getBoundingClientRect();
     return positions.map((pos) => {
-      if (config && pos.lifecycle_item?.data?.zones) {
-        pos.lifecycle_item = {
-          ...pos.lifecycle_item,
-          data: {
-            ...pos.lifecycle_item.data,
-            zones_friendly_names: pos.lifecycle_item.data.zones.map((zone) => {
-              return resolveZoneName(config, zone);
-            }),
-          },
-        };
-      }
       return {
         x: pos.x * imgRect.width,
         y: pos.y * imgRect.height,
         timestamp: pos.timestamp,
-        lifecycle_item: pos.lifecycle_item,
+        lifecycle_item: pos.lifecycle_item?.data?.zones
+          ? {
+              ...pos.lifecycle_item,
+              data: {
+                ...pos.lifecycle_item?.data,
+                zones_friendly_names: pos.lifecycle_item?.data.zones.map(
+                  (zone) => {
+                    return resolveZoneName(config, zone);
+                  },
+                ),
+              },
+            }
+          : pos.lifecycle_item,
       };
     });
   }, [imgRef, positions, config]);
diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index e2809d332..307393eae 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@@ -269,6 +269,10 @@ export function PolygonCanvas({
     const updatedPolygons = [...polygons];
     const activePolygon = updatedPolygons[activePolygonIndex];
 
+    if (!activePolygon) {
+      return;
+    }
+
     // add default points order for already completed polygons
     if (!activePolygon.pointsOrder && activePolygon.isFinished) {
       updatedPolygons[activePolygonIndex] = {
diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index 099ea234b..7fc7c423c 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -655,16 +655,6 @@ function LifecycleItem({
   const { t } = useTranslation("views/events");
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  item = {
-    ...item,
-    data: {
-      ...item.data,
-      zones_friendly_names: item?.data?.zones?.map((zone) => {
-        return resolveZoneName(config, zone);
-      }),
-    },
-  };
-
   const aspectRatio = useMemo(() => {
     if (!config || !item?.camera) {
       return 16 / 9;
@@ -806,17 +796,28 @@ function ObjectTimeline({
     },
   ]);
 
+  const { data: config } = useSWR<FrigateConfig>("config");
   const timeline = useMemo(() => {
     if (!fullTimeline) {
       return fullTimeline;
     }
 
-    return fullTimeline.filter(
-      (t) =>
-        t.timestamp >= review.start_time &&
-        (review.end_time == undefined || t.timestamp <= review.end_time),
-    );
-  }, [fullTimeline, review]);
+    return fullTimeline
+      .filter(
+        (t) =>
+          t.timestamp >= review.start_time &&
+          (review.end_time == undefined || t.timestamp <= review.end_time),
+      )
+      .map((event) => ({
+        ...event,
+        data: {
+          ...event.data,
+          zones_friendly_names: event.data?.zones?.map((zone) =>
+            resolveZoneName(config, zone),
+          ),
+        },
+      }));
+  }, [config, fullTimeline, review]);
 
   if (isValidating && (!timeline || timeline.length === 0)) {
     return <ActivityIndicator className="ml-2 size-3" />;