From b222ad31e04b58f06141e59f51194fa1c6bcc034 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 1 Nov 2025 09:04:34 -0500
Subject: [PATCH] remove

---
 .../overlay/detail/TrackingDetails.tsx.bak    | 1023 -----------------
 1 file changed, 1023 deletions(-)
 delete mode 100644 web/src/components/overlay/detail/TrackingDetails.tsx.bak

diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx.bak b/web/src/components/overlay/detail/TrackingDetails.tsx.bak
deleted file mode 100644
index 06d0f5017..000000000
--- a/web/src/components/overlay/detail/TrackingDetails.tsx.bak
+++ /dev/null
@@ -1,1023 +0,0 @@
-import useSWR from "swr";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Event } from "@/types/event";
-import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { Button } from "@/components/ui/button";
-import { TrackingDetailsSequence } from "@/types/timeline";
-import Heading from "@/components/ui/heading";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import { getIconForLabel } from "@/utils/iconUtil";
-import {
-  LuCircle,
-  LuCircleDot,
-  LuEar,
-  LuPlay,
-  LuSettings,
-  LuTruck,
-} from "react-icons/lu";
-import { IoMdExit } from "react-icons/io";
-import {
-  MdFaceUnlock,
-  MdOutlineLocationOn,
-  MdOutlinePictureInPictureAlt,
-} from "react-icons/md";
-import { cn } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { AnnotationSettingsPane } from "./AnnotationSettingsPane";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
-import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
-import { baseUrl } from "@/api/baseUrl";
-import { REVIEW_PADDING } from "@/types/review";
-import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-} from "@/components/ui/dropdown-menu";
-import { Link, useNavigate } from "react-router-dom";
-import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
-import { IoPlayCircleOutline } from "react-icons/io5";
-import { useTranslation } from "react-i18next";
-import { getTranslatedLabel } from "@/utils/i18n";
-import { Badge } from "@/components/ui/badge";
-import { HiDotsHorizontal } from "react-icons/hi";
-import axios from "axios";
-import { toast } from "sonner";
-import { DetailStreamProvider, useDetailStream } from "@/context/detail-stream-context";
-
-type TrackingDetailsProps = {
-  className?: string;
-  event: Event;
-  fullscreen?: boolean;
-  showImage?: boolean;
-  showLifecycle?: boolean;
-  timeIndex?: number;
-  setTimeIndex?: (index: number) => void;
-};
-
-// Wrapper component that provides DetailStreamContext
-export default function TrackingDetails(props: TrackingDetailsProps) {
-  const [currentTime, setCurrentTime] = useState(props.event.start_time ?? 0);
-  
-  return (
-    <DetailStreamProvider
-      isDetailMode={true}
-      currentTime={currentTime}
-      camera={props.event.camera}
-    >
-      <TrackingDetailsInner {...props} onTimeUpdate={setCurrentTime} />
-    </DetailStreamProvider>
-  );
-}
-
-// Inner component with access to DetailStreamContext
-function TrackingDetailsInner({
-  className,
-  event,
-  showImage = true,
-  showLifecycle = false,
-  timeIndex: propTimeIndex,
-  setTimeIndex: propSetTimeIndex,
-  onTimeUpdate,
-}: TrackingDetailsProps & { onTimeUpdate: (time: number) => void }) {
-  const { t } = useTranslation(["views/explore"]);
-  const { setSelectedObjectIds, annotationOffset: contextAnnotationOffset, setAnnotationOffset: setContextAnnotationOffset } = useDetailStream();
-
-  const { data: eventSequence } = useSWR<TrackingDetailsSequence[]>([
-    "timeline",
-    {
-      source_id: event.id,
-    },
-  ]);
-
-  const { data: config } = useSWR<FrigateConfig>("config");
-
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [selectedZone, setSelectedZone] = useState("");
-  const [lifecycleZones, setLifecycleZones] = useState<string[]>([]);
-  const [showControls, setShowControls] = useState(false);
-  const [showZones, setShowZones] = useState(true);
-
-  const aspectRatio = useMemo(() => {
-    if (!config) {
-      return 16 / 9;
-    }
-
-    return (
-      config.cameras[event.camera].detect.width /
-      config.cameras[event.camera].detect.height
-    );
-  }, [config, event]);
-
-  const label = event.sub_label
-    ? event.sub_label
-    : getTranslatedLabel(event.label);
-
-  const getZoneColor = useCallback(
-    (zoneName: string) => {
-      const zoneColor =
-        config?.cameras?.[event.camera]?.zones?.[zoneName]?.color;
-      if (zoneColor) {
-        const reversed = [...zoneColor].reverse();
-        return reversed;
-      }
-    },
-    [config, event],
-  );
-
-  const getObjectColor = useCallback(
-    (label: string) => {
-      const objectColor = config?.model?.colormap[label];
-      if (objectColor) {
-        const reversed = [...objectColor].reverse();
-        return reversed;
-      }
-    },
-    [config],
-  );
-
-  const getZonePolygon = useCallback(
-    (zoneName: string) => {
-      if (!videoRef.current || !config) {
-        return;
-      }
-      const zonePoints =
-        config?.cameras[event.camera].zones[zoneName].coordinates;
-      const videoElement = videoRef.current;
-      const videoWidth = videoElement.videoWidth;
-      const videoHeight = videoElement.videoHeight;
-
-      if (!videoWidth || !videoHeight) {
-        return;
-      }
-
-      return zonePoints
-        .split(",")
-        .map(Number.parseFloat)
-        .reduce((acc, value, index) => {
-          const isXCoordinate = index % 2 === 0;
-          const coordinate = isXCoordinate
-            ? value * videoWidth
-            : value * videoHeight;
-          acc.push(coordinate);
-          return acc;
-        }, [] as number[])
-        .join(",");
-    },
-    [config, event],
-  );
-
-  const [boxStyle, setBoxStyle] = useState<React.CSSProperties | null>(null);
-  const [attributeBoxStyle, setAttributeBoxStyle] =
-    useState<React.CSSProperties | null>(null);
-
-  const configAnnotationOffset = useMemo(() => {
-    if (!config) {
-      return 0;
-    }
-
-    return config.cameras[event.camera]?.detect?.annotation_offset || 0;
-  }, [config, event]);
-
-  const [annotationOffset, setAnnotationOffset] = useState<number>(
-    configAnnotationOffset,
-  );
-
-  const savedPathPoints = useMemo(() => {
-    return (
-      event.data.path_data?.map(([coords, timestamp]: [number[], number]) => ({
-        x: coords[0],
-        y: coords[1],
-        timestamp,
-        lifecycle_item: undefined,
-      })) || []
-    );
-  }, [event.data.path_data]);
-
-  const eventSequencePoints = useMemo(() => {
-    return (
-      eventSequence
-        ?.filter((event) => event.data.box !== undefined)
-        .map((event) => {
-          const [left, top, width, height] = event.data.box!;
-
-          return {
-            x: left + width / 2, // Center x-coordinate
-            y: top + height, // Bottom y-coordinate
-            timestamp: event.timestamp,
-            lifecycle_item: event,
-          };
-        }) || []
-    );
-  }, [eventSequence]);
-
-  // final object path with timeline points included
-  const pathPoints = useMemo(() => {
-    // don't display a path if we don't have any saved path points
-    if (
-      savedPathPoints.length === 0 ||
-      config?.cameras[event.camera]?.onvif.autotracking.enabled_in_config
-    )
-      return [];
-    return [...savedPathPoints, ...eventSequencePoints].sort(
-      (a, b) => a.timestamp - b.timestamp,
-    );
-  }, [savedPathPoints, eventSequencePoints, config, event]);
-
-  const [localTimeIndex, setLocalTimeIndex] = useState<number>(0);
-
-  const timeIndex =
-    propTimeIndex !== undefined ? propTimeIndex : localTimeIndex;
-  const setTimeIndex = propSetTimeIndex || setLocalTimeIndex;
-
-  const handleSetBox = useCallback(
-    (box: number[], attrBox: number[] | undefined) => {
-      if (videoRef.current && Array.isArray(box) && box.length === 4) {
-        const videoElement = videoRef.current;
-        const videoWidth = videoElement.videoWidth;
-        const videoHeight = videoElement.videoHeight;
-
-        if (!videoWidth || !videoHeight || !displayWidth || !displayHeight) {
-          return;
-        }
-
-        const style = {
-          left: `${box[0] * displayWidth}px`,
-          top: `${box[1] * displayHeight}px`,
-          width: `${box[2] * displayWidth}px`,
-          height: `${box[3] * displayHeight}px`,
-          borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
-        };
-
-        if (attrBox) {
-          const attrStyle = {
-            left: `${attrBox[0] * displayWidth}px`,
-            top: `${attrBox[1] * displayHeight}px`,
-            width: `${attrBox[2] * displayWidth}px`,
-            height: `${attrBox[3] * displayHeight}px`,
-            borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
-          };
-          setAttributeBoxStyle(attrStyle);
-        } else {
-          setAttributeBoxStyle(null);
-        }
-
-        setBoxStyle(style);
-      }
-    },
-    [event, getObjectColor, displayWidth, displayHeight],
-  );
-
-  // carousels
-
-  // Selected lifecycle item index; -1 when viewing a path-only point
-
-  const handlePathPointClick = useCallback(
-    (index: number) => {
-      if (!eventSequence) return;
-      const sequenceIndex = eventSequence.findIndex(
-        (item) => item.timestamp === pathPoints[index].timestamp,
-      );
-      if (sequenceIndex !== -1) {
-        setTimeIndex(eventSequence[sequenceIndex].timestamp);
-        handleSetBox(
-          eventSequence[sequenceIndex]?.data.box ?? [],
-          eventSequence[sequenceIndex]?.data?.attribute_box,
-        );
-        setLifecycleZones(eventSequence[sequenceIndex]?.data.zones);
-      } else {
-        // click on a normal path point, not a lifecycle point
-        setTimeIndex(pathPoints[index].timestamp);
-        setBoxStyle(null);
-        setLifecycleZones([]);
-      }
-    },
-    [eventSequence, pathPoints, handleSetBox, setTimeIndex],
-  );
-
-  const formattedStart = config
-    ? formatUnixTimestampToDateTime(event.start_time ?? 0, {
-        timezone: config.ui.timezone,
-        date_format:
-          config.ui.time_format == "24hour"
-            ? t("time.formattedTimestamp.24hour", {
-                ns: "common",
-              })
-            : t("time.formattedTimestamp.12hour", {
-                ns: "common",
-              }),
-        time_style: "medium",
-        date_style: "medium",
-      })
-    : "";
-
-  const formattedEnd = config
-    ? formatUnixTimestampToDateTime(event.end_time ?? 0, {
-        timezone: config.ui.timezone,
-        date_format:
-          config.ui.time_format == "24hour"
-            ? t("time.formattedTimestamp.24hour", {
-                ns: "common",
-              })
-            : t("time.formattedTimestamp.12hour", {
-                ns: "common",
-              }),
-        time_style: "medium",
-        date_style: "medium",
-      })
-    : "";
-
-  useEffect(() => {
-    if (!eventSequence || eventSequence.length === 0) return;
-    // If timeIndex hasn't been set to a non-zero value, prefer the first lifecycle timestamp
-    if (timeIndex == null || timeIndex === 0) {
-      setTimeIndex(eventSequence[0].timestamp);
-      handleSetBox(
-        eventSequence[0]?.data.box ?? [],
-        eventSequence[0]?.data?.attribute_box,
-      );
-      setLifecycleZones(eventSequence[0]?.data.zones);
-    }
-  }, [eventSequence, timeIndex, handleSetBox, setTimeIndex]);
-
-  // When timeIndex changes, sync the box/zones to matching lifecycle, else clear
-  useEffect(() => {
-    if (!eventSequence || propTimeIndex == null) return;
-    const idx = eventSequence.findIndex((i) => i.timestamp === propTimeIndex);
-    if (idx !== -1) {
-      handleSetBox(
-        eventSequence[idx]?.data.box ?? [],
-        eventSequence[idx]?.data?.attribute_box,
-      );
-      setLifecycleZones(eventSequence[idx]?.data.zones);
-    } else {
-      // Non-lifecycle point (e.g., saved path point)
-      setBoxStyle(null);
-      setLifecycleZones([]);
-    }
-  }, [propTimeIndex, eventSequence, handleSetBox]);
-
-  const selectedIndex = useMemo(() => {
-    if (!eventSequence || eventSequence.length === 0) return 0;
-    const idx = eventSequence.findIndex((i) => i.timestamp === timeIndex);
-    return idx === -1 ? 0 : idx;
-  }, [eventSequence, timeIndex]);
-
-  // Calculate how far down the blue line should extend based on timeIndex
-  const calculateLineHeight = () => {
-    if (!eventSequence || eventSequence.length === 0) return 0;
-
-    const currentTime = timeIndex ?? 0;
-
-    // Find which events have been passed
-    let lastPassedIndex = -1;
-    for (let i = 0; i < eventSequence.length; i++) {
-      if (currentTime >= (eventSequence[i].timestamp ?? 0)) {
-        lastPassedIndex = i;
-      } else {
-        break;
-      }
-    }
-
-    // No events passed yet
-    if (lastPassedIndex < 0) return 0;
-
-    // All events passed
-    if (lastPassedIndex >= eventSequence.length - 1) return 100;
-
-    // Calculate percentage based on item position, not time
-    // Each item occupies an equal visual space regardless of time gaps
-    const itemPercentage = 100 / (eventSequence.length - 1);
-
-    // Find progress between current and next event for smooth transition
-    const currentEvent = eventSequence[lastPassedIndex];
-    const nextEvent = eventSequence[lastPassedIndex + 1];
-    const currentTimestamp = currentEvent.timestamp ?? 0;
-    const nextTimestamp = nextEvent.timestamp ?? 0;
-
-    // Calculate interpolation between the two events
-    const timeBetween = nextTimestamp - currentTimestamp;
-    const timeElapsed = currentTime - currentTimestamp;
-    const interpolation = timeBetween > 0 ? timeElapsed / timeBetween : 0;
-
-    // Base position plus interpolated progress to next item
-    return Math.min(
-      100,
-      lastPassedIndex * itemPercentage + interpolation * itemPercentage,
-    );
-  };
-
-  const blueLineHeight = calculateLineHeight();
-
-  const videoSource = useMemo(() => {
-    const startTime = event.start_time - REVIEW_PADDING;
-    const endTime = (event.end_time ?? Date.now() / 1000) + REVIEW_PADDING;
-    return `${baseUrl}vod/${event.camera}/start/${startTime}/end/${endTime}/index.m3u8`;
-  }, [event]);
-
-  // Determine camera aspect ratio category
-  const cameraAspect = useMemo(() => {
-    if (!aspectRatio) {
-      return "normal";
-    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
-      return "wide";
-    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
-      return "tall";
-    } else {
-      return "normal";
-    }
-  }, [aspectRatio]);
-
-  // Apply appropriate classes based on aspect ratio
-  const containerClasses = useMemo(() => {
-    if (cameraAspect === "wide") {
-      return "w-full aspect-wide overflow-hidden";
-    } else if (cameraAspect === "tall") {
-      return "h-full aspect-tall overflow-hidden";
-    } else {
-      return "w-full aspect-video overflow-hidden";
-    }
-  }, [cameraAspect]);
-
-  // Check if video metadata has loaded
-  const [videoReady, setVideoReady] = useState(false);
-
-  useEffect(() => {
-    const checkVideoReady = () => {
-      const isReady =
-        videoRef.current?.readyState !== undefined &&
-        videoRef.current.readyState >= HTMLMediaElement.HAVE_METADATA;
-      setVideoReady(isReady);
-
-      if (videoRef.current) {
-        console.log(
-          "Video dimensions:",
-          videoRef.current.clientWidth,
-          videoRef.current.clientHeight,
-        );
-        setDisplayWidth(videoRef.current.clientWidth);
-        setDisplayHeight(videoRef.current.clientHeight);
-      }
-    };
-
-    const video = videoRef.current;
-    if (video) {
-      // Check immediately
-      checkVideoReady();
-
-      // Listen for metadata load
-      video.addEventListener("loadedmetadata", checkVideoReady);
-
-      return () => {
-        video.removeEventListener("loadedmetadata", checkVideoReady);
-      };
-    }
-  }, [videoRef.current]);
-
-  // Seek video to specific time (relative to event start)
-  useEffect(() => {
-    if (videoRef.current && propTimeIndex !== undefined) {
-      const relativeTime =
-        propTimeIndex -
-        event.start_time +
-        REVIEW_PADDING +
-        annotationOffset / 1000;
-      if (relativeTime >= 0) {
-        videoRef.current.currentTime = relativeTime;
-      }
-    }
-  }, [propTimeIndex, event.start_time, annotationOffset]);
-
-  if (!config) {
-    return <ActivityIndicator />;
-  }
-
-  return (
-    <div
-      className={cn(
-        "",
-        containerClasses,
-        className,
-        cameraAspect == "tall" && "max-h-[70dvh]",
-      )}
-    >
-      <span tabIndex={0} className="sr-only" />
-
-      {showImage && (
-        <div className={cn("size-full")}>
-          <GenericVideoPlayer source={videoSource} videoRef={videoRef}>
-            <div className="pointer-events-none absolute inset-0">
-              {showZones &&
-                videoRef.current &&
-                videoReady &&
-                lifecycleZones?.map((zone) => {
-                  return (
-                    <div
-                      key={zone}
-                      className="absolute inset-0 flex items-center justify-center"
-                      style={{
-                        width: displayWidth,
-                        height: displayHeight,
-                      }}
-                    >
-                      <svg
-                        viewBox={`0 0 ${displayWidth} ${displayHeight}`}
-                        className="absolute inset-0"
-                        style={{
-                          width: displayWidth,
-                          height: displayHeight,
-                        }}
-                      >
-                        <polygon
-                          points={getZonePolygon(zone)}
-                          className="fill-none stroke-2"
-                          style={{
-                            stroke: `rgb(${getZoneColor(zone)?.join(",")})`,
-                            fill:
-                              selectedZone == zone
-                                ? `rgba(${getZoneColor(zone)?.join(",")}, 0.5)`
-                                : `rgba(${getZoneColor(zone)?.join(",")}, 0.3)`,
-                            strokeWidth: selectedZone == zone ? 4 : 2,
-                          }}
-                        />
-                      </svg>
-                    </div>
-                  );
-                })}
-
-              {boxStyle && videoReady && (
-                <div className="absolute border-2" style={boxStyle}>
-                  <div className="absolute bottom-[-3px] left-1/2 h-[5px] w-[5px] -translate-x-1/2 transform bg-yellow-500" />
-                </div>
-              )}
-
-              {/* Attribute box overlay */}
-              {attributeBoxStyle && videoReady && (
-                <div className="absolute border-2" style={attributeBoxStyle} />
-              )}
-
-              {/* Path overlay */}
-              {videoRef.current &&
-                videoReady &&
-                pathPoints &&
-                pathPoints.length > 0 && (
-                  <div
-                    className="absolute inset-0 flex items-center justify-center"
-                    style={{
-                      width: displayWidth,
-                      height: displayHeight,
-                    }}
-                  >
-                    <svg
-                      viewBox={`0 0 ${displayWidth} ${displayHeight}`}
-                      className="absolute inset-0"
-                      style={{
-                        width: displayWidth,
-                        height: displayHeight,
-                      }}
-                    >
-                      <ObjectPath
-                        positions={pathPoints}
-                        color={getObjectColor(event.label)}
-                        width={2}
-                        imgRef={videoRef}
-                        onPointClick={handlePathPointClick}
-                        videoWidth={displayWidth}
-                        videoHeight={displayHeight}
-                      />
-                    </svg>
-                  </div>
-                )}
-            </div>
-          </GenericVideoPlayer>
-        </div>
-      )}
-
-      {showLifecycle && (
-        <>
-          <div className="mt-3 flex flex-row items-center justify-between">
-            <Heading as="h4">{t("trackingDetails.title")}</Heading>
-
-            <div className="flex flex-row gap-2">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant={showControls ? "select" : "default"}
-                    className="size-7 p-1.5"
-                    aria-label={t("trackingDetails.adjustAnnotationSettings")}
-                  >
-                    <LuSettings
-                      className="size-5"
-                      onClick={() => setShowControls(!showControls)}
-                    />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipPortal>
-                  <TooltipContent>
-                    {t("trackingDetails.adjustAnnotationSettings")}
-                  </TooltipContent>
-                </TooltipPortal>
-              </Tooltip>
-            </div>
-          </div>
-
-          <div className="flex flex-row items-center justify-between">
-            <div className="mb-2 text-sm text-muted-foreground">
-              {t("trackingDetails.scrollViewTips")}
-            </div>
-            <div className="min-w-20 text-right text-sm text-muted-foreground">
-              {t("trackingDetails.count", {
-                first: selectedIndex + 1,
-                second: eventSequence?.length ?? 0,
-              })}
-            </div>
-          </div>
-          {config?.cameras[event.camera]?.onvif.autotracking
-            .enabled_in_config && (
-            <div className="-mt-2 mb-2 text-sm text-danger">
-              {t("trackingDetails.autoTrackingTips")}
-            </div>
-          )}
-          {showControls && (
-            <AnnotationSettingsPane
-              event={event}
-              showZones={showZones}
-              setShowZones={setShowZones}
-              annotationOffset={annotationOffset}
-              setAnnotationOffset={setAnnotationOffset}
-            />
-          )}
-
-          <div className="mt-4">
-            <div
-              className={cn(
-                "rounded-md bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500",
-              )}
-            >
-              <div className="flex w-full items-center justify-between">
-                <div
-                  className="flex items-center gap-2 font-medium"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setTimeIndex(event.start_time ?? 0);
-                  }}
-                  role="button"
-                >
-                  <div
-                    className={cn(
-                      "relative ml-2 rounded-full bg-muted-foreground p-2",
-                    )}
-                  >
-                    {getIconForLabel(
-                      event.sub_label ? event.label + "-verified" : event.label,
-                      "size-4 text-white",
-                    )}
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="capitalize">{label}</span>
-                    <span className="text-secondary-foreground">
-                      {formattedStart ?? ""} - {formattedEnd ?? ""}
-                    </span>
-                    {event.data?.recognized_license_plate && (
-                      <>
-                        <span className="text-secondary-foreground">·</span>
-                        <div className="text-sm text-secondary-foreground">
-                          <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 className="mt-2">
-                {!eventSequence ? (
-                  <ActivityIndicator className="size-2" size={2} />
-                ) : eventSequence.length === 0 ? (
-                  <div className="py-2 text-muted-foreground">
-                    {t("detail.noObjectDetailData", { ns: "views/events" })}
-                  </div>
-                ) : (
-                  <div className="-pb-2 relative mx-2">
-                    <div className="absolute -top-2 bottom-8 left-4 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" />
-                    <div
-                      className="absolute left-4 top-2 z-[5] max-h-[calc(100%-3rem)] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
-                      style={{ height: `${blueLineHeight}%` }}
-                    />
-                    <div className="space-y-2">
-                      {eventSequence.map((item, idx) => {
-                        const isActive =
-                          Math.abs(
-                            (propTimeIndex ?? 0) - (item.timestamp ?? 0),
-                          ) <= 0.5;
-                        const formattedEventTimestamp = config
-                          ? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
-                              timezone: config.ui.timezone,
-                              date_format:
-                                config.ui.time_format == "24hour"
-                                  ? t(
-                                      "time.formattedTimestampHourMinuteSecond.24hour",
-                                      { ns: "common" },
-                                    )
-                                  : t(
-                                      "time.formattedTimestampHourMinuteSecond.12hour",
-                                      { ns: "common" },
-                                    ),
-                              time_style: "medium",
-                              date_style: "medium",
-                            })
-                          : "";
-
-                        const ratio =
-                          Array.isArray(item.data.box) &&
-                          item.data.box.length >= 4
-                            ? (
-                                aspectRatio *
-                                (item.data.box[2] / item.data.box[3])
-                              ).toFixed(2)
-                            : "N/A";
-                        const areaPx =
-                          Array.isArray(item.data.box) &&
-                          item.data.box.length >= 4
-                            ? Math.round(
-                                (config.cameras[event.camera]?.detect?.width ??
-                                  0) *
-                                  (config.cameras[event.camera]?.detect
-                                    ?.height ?? 0) *
-                                  (item.data.box[2] * item.data.box[3]),
-                              )
-                            : undefined;
-                        const areaPct =
-                          Array.isArray(item.data.box) &&
-                          item.data.box.length >= 4
-                            ? (item.data.box[2] * item.data.box[3]).toFixed(4)
-                            : undefined;
-
-                        return (
-                          <LifecycleIconRow
-                            key={`${item.timestamp}-${item.source_id ?? ""}-${idx}`}
-                            item={item}
-                            isActive={isActive}
-                            formattedEventTimestamp={formattedEventTimestamp}
-                            ratio={ratio}
-                            areaPx={areaPx}
-                            areaPct={areaPct}
-                            onClick={() => {
-                              setTimeIndex(item.timestamp ?? 0);
-                              handleSetBox(
-                                item.data.box ?? [],
-                                item.data.attribute_box,
-                              );
-                              setLifecycleZones(item.data.zones);
-                              setSelectedZone("");
-                            }}
-                            setSelectedZone={setSelectedZone}
-                            getZoneColor={getZoneColor}
-                          />
-                        );
-                      })}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-type GetTimelineIconParams = {
-  lifecycleItem: TrackingDetailsSequence;
-  className?: string;
-};
-
-export function LifecycleIcon({
-  lifecycleItem,
-  className,
-}: GetTimelineIconParams) {
-  switch (lifecycleItem.class_type) {
-    case "visible":
-      return <LuPlay className={cn(className)} />;
-    case "gone":
-      return <IoMdExit className={cn(className)} />;
-    case "active":
-      return <IoPlayCircleOutline className={cn(className)} />;
-    case "stationary":
-      return <LuCircle className={cn(className)} />;
-    case "entered_zone":
-      return <MdOutlineLocationOn className={cn(className)} />;
-    case "attribute":
-      switch (lifecycleItem.data?.attribute) {
-        case "face":
-          return <MdFaceUnlock className={cn(className)} />;
-        case "license_plate":
-          return <MdOutlinePictureInPictureAlt className={cn(className)} />;
-        default:
-          return <LuTruck className={cn(className)} />;
-      }
-    case "heard":
-      return <LuEar className={cn(className)} />;
-    case "external":
-      return <LuCircleDot className={cn(className)} />;
-    default:
-      return null;
-  }
-}
-
-type LifecycleIconRowProps = {
-  item: TrackingDetailsSequence;
-  isActive?: boolean;
-  formattedEventTimestamp: string;
-  ratio: string;
-  areaPx?: number;
-  areaPct?: string;
-  onClick: () => void;
-  setSelectedZone: (z: string) => void;
-  getZoneColor: (zoneName: string) => number[] | undefined;
-};
-
-function LifecycleIconRow({
-  item,
-  isActive,
-  formattedEventTimestamp,
-  ratio,
-  areaPx,
-  areaPct,
-  onClick,
-  setSelectedZone,
-  getZoneColor,
-}: LifecycleIconRowProps) {
-  const { t } = useTranslation(["views/explore", "components/player"]);
-  const { data: config } = useSWR<FrigateConfig>("config");
-  const [isOpen, setIsOpen] = useState(false);
-
-  const navigate = useNavigate();
-
-  return (
-    <div
-      role="button"
-      onClick={onClick}
-      className={cn(
-        "rounded-md p-2 text-sm text-primary-variant",
-        isActive && "bg-secondary-highlight font-semibold text-primary",
-        !isActive && "duration-500",
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <div className="relative flex size-4 items-center justify-center">
-          <LuCircle
-            className={cn(
-              "relative z-10 ml-[1px] size-2.5 fill-secondary-foreground stroke-none",
-              isActive && "fill-selected duration-300",
-            )}
-          />
-        </div>
-
-        <div className="ml-2 flex w-full min-w-0 flex-1">
-          <div className="flex flex-col">
-            <div className="text-md flex items-start break-words text-left">
-              {getLifecycleItemDescription(item)}
-            </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">
-                <span className="text-primary-variant">
-                  {t("trackingDetails.lifecycleItemDesc.header.ratio")}
-                </span>
-                <span className="font-medium text-primary">{ratio}</span>
-              </div>
-              <div className="flex items-center gap-1">
-                <span className="text-primary-variant">
-                  {t("trackingDetails.lifecycleItemDesc.header.area")}
-                </span>
-                {areaPx !== undefined && areaPct !== undefined ? (
-                  <span className="font-medium text-primary">
-                    {t("information.pixels", { ns: "common", area: areaPx })} ·{" "}
-                    {areaPct}%
-                  </span>
-                ) : (
-                  <span>N/A</span>
-                )}
-              </div>
-
-              {item.data?.zones && item.data.zones.length > 0 && (
-                <div className="flex flex-wrap items-center gap-2">
-                  {item.data.zones.map((zone, zidx) => {
-                    const color = getZoneColor(zone)?.join(",") ?? "0,0,0";
-                    return (
-                      <Badge
-                        key={`${zone}-${zidx}`}
-                        variant="outline"
-                        className="inline-flex cursor-pointer items-center gap-2"
-                        onClick={(e: React.MouseEvent) => {
-                          e.stopPropagation();
-                          setSelectedZone(zone);
-                        }}
-                        style={{
-                          borderColor: `rgba(${color}, 0.6)`,
-                          background: `rgba(${color}, 0.08)`,
-                        }}
-                      >
-                        <span
-                          className="size-1 rounded-full"
-                          style={{
-                            display: "inline-block",
-                            width: 10,
-                            height: 10,
-                            backgroundColor: `rgb(${color})`,
-                          }}
-                        />
-                        <span className="smart-capitalize">
-                          {zone.replaceAll("_", " ")}
-                        </span>
-                      </Badge>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className="ml-3 flex-shrink-0 px-1 text-right text-xs text-primary-variant">
-          <div className="flex flex-row items-center gap-3">
-            <div className="whitespace-nowrap">{formattedEventTimestamp}</div>
-            {(config?.plus?.enabled || item.data.box) && (
-              <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-                <DropdownMenuTrigger>
-                  <div className="rounded p-1 pr-2" role="button">
-                    <HiDotsHorizontal className="size-4 text-muted-foreground" />
-                  </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuContent>
-                    {config?.plus?.enabled && (
-                      <DropdownMenuItem
-                        className="cursor-pointer"
-                        onSelect={async () => {
-                          const resp = await axios.post(
-                            `/${item.camera}/plus/${item.timestamp}`,
-                          );
-
-                          if (resp && resp.status == 200) {
-                            toast.success(
-                              t("toast.success.submittedFrigatePlus", {
-                                ns: "components/player",
-                              }),
-                              {
-                                position: "top-center",
-                              },
-                            );
-                          } else {
-                            toast.success(
-                              t("toast.error.submitFrigatePlusFailed", {
-                                ns: "components/player",
-                              }),
-                              {
-                                position: "top-center",
-                              },
-                            );
-                          }
-                        }}
-                      >
-                        {t("itemMenu.submitToPlus.label")}
-                      </DropdownMenuItem>
-                    )}
-                    {item.data.box && (
-                      <DropdownMenuItem
-                        className="cursor-pointer"
-                        onSelect={() => {
-                          setIsOpen(false);
-                          setTimeout(() => {
-                            navigate(
-                              `/settings?page=masksAndZones&camera=${item.camera}&object_mask=${item.data.box}`,
-                            );
-                          }, 0);
-                        }}
-                      >
-                        {t("trackingDetails.createObjectMask")}
-                      </DropdownMenuItem>
-                    )}
-                  </DropdownMenuContent>
-                </DropdownMenuPortal>
-              </DropdownMenu>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}