Add object lifecycle to explore dialog

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { ObjectLifecycleSequence } from "@/types/timeline";
 import Heading from "@/components/ui/heading";
-import { ReviewDetailPaneType, ReviewSegment } from "@/types/review";
+import { ReviewDetailPaneType } from "@/types/review";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { getIconForLabel } from "@/utils/iconUtil";
@@ -47,14 +47,16 @@ import { AnnotationSettingsPane } from "./AnnotationSettingsPane";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type ObjectLifecycleProps = {
-  review: ReviewSegment;
+  className?: string;
   event: Event;
+  showBack?: boolean;
   setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
 };
 
 export default function ObjectLifecycle({
-  review,
+  className,
   event,
+  showBack = true,
   setPane,
 }: ObjectLifecycleProps) {
   const { data: eventSequence } = useSWR<ObjectLifecycleSequence[]>([
@@ -78,13 +80,13 @@ export default function ObjectLifecycle({
   const getZoneColor = useCallback(
     (zoneName: string) => {
       const zoneColor =
-        config?.cameras?.[review.camera]?.zones?.[zoneName]?.color;
+        config?.cameras?.[event.camera]?.zones?.[zoneName]?.color;
       if (zoneColor) {
         const reversed = [...zoneColor].reverse();
         return reversed;
       }
     },
-    [config, review],
+    [config, event],
   );
 
   const getZonePolygon = useCallback(
@@ -93,7 +95,7 @@ export default function ObjectLifecycle({
         return;
       }
       const zonePoints =
-        config?.cameras[review.camera].zones[zoneName].coordinates;
+        config?.cameras[event.camera].zones[zoneName].coordinates;
       const imgElement = imgRef.current;
       const imgRect = imgElement.getBoundingClientRect();
 
@@ -110,7 +112,7 @@ export default function ObjectLifecycle({
         }, [] as number[])
         .join(",");
     },
-    [config, imgRef, review],
+    [config, imgRef, event],
   );
 
   const [boxStyle, setBoxStyle] = useState<React.CSSProperties | null>(null);
@@ -224,17 +226,19 @@ export default function ObjectLifecycle({
   }
 
   return (
-    <>
+    <div className={className}>
-      <div className={cn("flex items-center gap-2")}>
+      {showBack && (
-        <Button
+        <div className={cn("flex items-center gap-2")}>
-          className="flex items-center gap-2.5 rounded-lg"
+          <Button
-          size="sm"
+            className="flex items-center gap-2.5 rounded-lg"
-          onClick={() => setPane("overview")}
+            size="sm"
-        >
+            onClick={() => setPane("overview")}
-          <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+          >
-          {isDesktop && <div className="text-primary">Back</div>}
+            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-        </Button>
+            {isDesktop && <div className="text-primary">Back</div>}
-      </div>
+          </Button>
+        </div>
+      )}
 
       <div className="relative mx-auto">
         <ImageLoadingIndicator
@@ -513,7 +517,7 @@ export default function ObjectLifecycle({
           <CarouselNext />
         </Carousel>
       </div>
-    </>
+    </div>
   );
 }
 

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -214,11 +214,7 @@ export default function ReviewDetailDialog({
 
           {pane == "details" && selectedEvent && (
             <div className="scrollbar-container overflow-x-none mt-0 flex size-full flex-col gap-2 overflow-y-auto overflow-x-hidden">
-              <ObjectLifecycle
+              <ObjectLifecycle event={selectedEvent} setPane={setPane} />
-                review={review}
-                event={selectedEvent}
-                setPane={setPane}
-              />
             </div>
           )}
         </Content>

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -36,8 +36,15 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import { FaRegListAlt, FaVideo } from "react-icons/fa";
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
+import { FaRotate } from "react-icons/fa6";
+import ObjectLifecycle from "./ObjectLifecycle";
 
-const SEARCH_TABS = ["details", "frigate+", "video"] as const;
+const SEARCH_TABS = [
+  "details",
+  "frigate+",
+  "video",
+  "object lifecycle",
+] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];
 
 type SearchDetailDialogProps = {
@@ -104,7 +111,7 @@ export default function SearchDetailDialog({
       <Content
         className={
           isDesktop
-            ? "sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-7xl"
+            ? "sm:max-w-xl md:max-w-xl lg:max-w-2xl xl:max-w-5xl"
             : "max-h-[75dvh] overflow-hidden px-2 pb-4"
         }
       >
@@ -138,6 +145,9 @@ export default function SearchDetailDialog({
                   {item == "details" && <FaRegListAlt className="size-4" />}
                   {item == "frigate+" && <FrigatePlusIcon className="size-4" />}
                   {item == "video" && <FaVideo className="size-4" />}
+                  {item == "object lifecycle" && (
+                    <FaRotate className="size-4" />
+                  )}
                   <div className="capitalize">{item}</div>
                 </ToggleGroupItem>
               ))}
@@ -164,6 +174,14 @@ export default function SearchDetailDialog({
           />
         )}
         {page == "video" && <VideoTab search={search} config={config} />}
+        {page == "object lifecycle" && (
+          <ObjectLifecycle
+            className="w-full"
+            event={search as unknown as Event}
+            showBack={false}
+            setPane={() => {}}
+          />
+        )}
       </Content>
     </Overlay>
   );