Review stream tweaks (#20648)

* add detail stream selector to mobile drawer * tweak getDurationFromTimestamps for i18n and abbreviations * improve lifecycle description labeling * i18n * match figma * fix progress line and add area and ratio tooltip * allow clicking on chevron without triggering playback * tweaks * add key * change wording * clean up * clean up * remove check * clean up
2025-12-06 05:24:11 +03:00 · 2025-10-24 07:50:06 -05:00 · 2025-10-24 07:50:06 -05:00 · 49f5d595ea
commit 49f5d595ea
parent e2da8aa04c
8 changed files with 450 additions and 232 deletions
--- a/web/public/locales/en/views/events.json
+++ b/web/public/locales/en/views/events.json
@ -19,10 +19,11 @@
    "noFoundForTimePeriod": "No events found for this time period."
  },
  "detail": {
+    "label": "Detail",
    "noDataFound": "No detail data to review",
    "aria": "Toggle detail view",
-    "trackedObject_one": "tracked object",
-    "trackedObject_other": "tracked objects",
+    "trackedObject_one": "object",
+    "trackedObject_other": "objects",
    "noObjectDetailData": "No object detail data available."
  },
  "objectTrack": {
--- a/web/public/locales/en/views/explore.json
+++ b/web/public/locales/en/views/explore.json
@ -194,6 +194,12 @@
    },
    "deleteTrackedObject": {
      "label": "Delete this tracked object"
+    },
+    "showObjectDetails": {
+      "label": "Show object path"
+    },
+    "hideObjectDetails": {
+      "label": "Hide object path"
    }
  },
  "dialog": {
--- a/web/src/components/overlay/MobileTimelineDrawer.tsx
+++ b/web/src/components/overlay/MobileTimelineDrawer.tsx
@ -51,6 +51,15 @@ export default function MobileTimelineDrawer({
        >
          {t("events.label")}
        </div>
+        <div
+          className={`mx-4 w-full py-2 text-center smart-capitalize ${selected == "detail" ? "rounded-lg bg-secondary" : ""}`}
+          onClick={() => {
+            onSelect("detail");
+            setDrawer(false);
+          }}
+        >
+          {t("detail.label")}
+        </div>
      </DrawerContent>
    </Drawer>
  );
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@ -1,13 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ObjectLifecycleSequence } from "@/types/timeline";
-import { LifecycleIcon } from "@/components/overlay/detail/ObjectLifecycle";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
 import { useDetailStream } from "@/context/detail-stream-context";
 import scrollIntoView from "scroll-into-view-if-needed";
 import useUserInteraction from "@/hooks/use-user-interaction";
 import {
  formatUnixTimestampToDateTime,
-  formatSecondsToDuration,
+  getDurationFromTimestamps,
 } from "@/utils/dateUtil";
 import { useTranslation } from "react-i18next";
 import AnnotationOffsetSlider from "@/components/overlay/detail/AnnotationOffsetSlider";
@ -17,26 +16,24 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { Event } from "@/types/event";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { ReviewSegment } from "@/types/review";
-import {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "@/components/ui/collapsible";
-import { LuChevronUp, LuChevronDown } from "react-icons/lu";
+import { LuChevronDown, LuCircle, LuChevronRight } from "react-icons/lu";
 import { getTranslatedLabel } from "@/utils/i18n";
 import EventMenu from "@/components/timeline/EventMenu";
 import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
 import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";

 type DetailStreamProps = {
  reviewItems?: ReviewSegment[];
  currentTime: number;
+  isPlaying?: boolean;
  onSeek: (timestamp: number, play?: boolean) => void;
 };

 export default function DetailStream({
  reviewItems,
  currentTime,
+  isPlaying = false,
  onSeek,
 }: DetailStreamProps) {
  const { data: config } = useSWR<FrigateConfig>("config");
@ -54,6 +51,10 @@ export default function DetailStream({
  const effectiveTime = currentTime + annotationOffset / 1000;
  const [upload, setUpload] = useState<Event | undefined>(undefined);

+  const onSeekCheckPlaying = (timestamp: number) => {
+    onSeek(timestamp, isPlaying);
+  };
+
  // Ensure we initialize the active review when reviewItems first arrive.
  // This helps when the component mounts while the video is already
  // playing — it guarantees the matching review is highlighted right
@ -89,7 +90,7 @@ export default function DetailStream({

  // Auto-scroll to current time
  useEffect(() => {
-    if (!scrollRef.current || userInteracting) return;
+    if (!scrollRef.current || userInteracting || !isPlaying) return;
    // Prefer the review whose range contains the effectiveTime. If none
    // contains it, pick the nearest review (by mid-point distance). This is
    // robust to unordered reviewItems and avoids always picking the last
@ -121,6 +122,14 @@ export default function DetailStream({
        `[data-review-id="${id}"]`,
      ) as HTMLElement;
      if (element) {
+        // Only scroll if element is completely out of view
+        const containerRect = scrollRef.current.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const isFullyInvisible =
+          elementRect.bottom < containerRect.top ||
+          elementRect.top > containerRect.bottom;
+
+        if (isFullyInvisible) {
          setProgrammaticScroll();
          scrollIntoView(element, {
            scrollMode: "if-needed",
@ -128,12 +137,14 @@ export default function DetailStream({
          });
        }
      }
+    }
  }, [
    reviewItems,
    effectiveTime,
    annotationOffset,
    userInteracting,
    setProgrammaticScroll,
+    isPlaying,
  ]);

  // Auto-select active review based on effectiveTime (if inside a review range)
@ -165,9 +176,9 @@ export default function DetailStream({

      <div
        ref={scrollRef}
-        className="scrollbar-container h-[calc(100vh-70px)] overflow-y-auto bg-secondary"
+        className="scrollbar-container h-[calc(100vh-70px)] overflow-y-auto"
      >
-        <div className="space-y-2 p-4">
+        <div className="space-y-4 py-2">
          {reviewItems?.length === 0 ? (
            <div className="py-8 text-center text-muted-foreground">
              {t("detail.noDataFound")}
@ -181,7 +192,7 @@ export default function DetailStream({
                  id={id}
                  review={review}
                  config={config}
-                  onSeek={onSeek}
+                  onSeek={onSeekCheckPlaying}
                  effectiveTime={effectiveTime}
                  isActive={activeReviewId == id}
                  onActivate={() => setActiveReviewId(id)}
@ -220,6 +231,7 @@ function ReviewGroup({
  effectiveTime,
 }: ReviewGroupProps) {
  const { t } = useTranslation("views/events");
+  const [open, setOpen] = useState(false);
  const start = review.start_time ?? 0;

  const displayTime = formatUnixTimestampToDateTime(start, {
@ -234,7 +246,7 @@ function ReviewGroup({

  const shouldFetchEvents = review?.data?.detections?.length > 0;

-  const { data: fetchedEvents } = useSWR<Event[]>(
+  const { data: fetchedEvents, isValidating } = useSWR<Event[]>(
    shouldFetchEvents
      ? ["event_ids", { ids: review.data.detections.join(",") }]
      : null,
@ -259,28 +271,27 @@ function ReviewGroup({
  }

  const reviewInfo = useMemo(() => {
-    if (review.data.metadata?.title) {
-      return review.data.metadata.title;
-    } else {
    const objectCount = fetchedEvents
      ? fetchedEvents.length
      : (review.data.objects ?? []).length;

    return `${objectCount} ${t("detail.trackedObject", { count: objectCount })}`;
-    }
  }, [review, t, fetchedEvents]);

-  const reviewDuration =
-    review.end_time != null
-      ? formatSecondsToDuration(
-          Math.max(0, Math.floor((review.end_time ?? 0) - start)),
-        )
-      : null;
+  const reviewDuration = useMemo(
+    () =>
+      getDurationFromTimestamps(
+        review.start_time,
+        review.end_time ?? null,
+        true,
+      ),
+    [review.start_time, review.end_time],
+  );

  return (
    <div
      data-review-id={id}
-      className={`cursor-pointer rounded-lg border bg-background p-3 outline outline-[3px] -outline-offset-[2.8px] ${
+      className={`cursor-pointer rounded-lg bg-secondary p-3 outline outline-[3px] -outline-offset-[2.8px] ${
        isActive
          ? "shadow-selected outline-selected"
          : "outline-transparent duration-500"
@ -293,40 +304,75 @@ function ReviewGroup({
          onSeek(start);
        }}
      >
-        <div className="flex items-center gap-2">
-          <div className="flex flex-col">
+        <div className="ml-1 flex flex-col items-start gap-1.5">
+          <div className="flex flex-row gap-3">
            <div className="text-sm font-medium">{displayTime}</div>
-            {reviewDuration && (
-              <div className="text-xs text-muted-foreground">
-                {reviewDuration}
-              </div>
-            )}
-            <div className="text-xs text-muted-foreground">{reviewInfo}</div>
-          </div>
-        </div>
            <div className="flex items-center gap-2">
              {iconLabels.slice(0, 5).map((lbl, idx) => (
-            <span key={`${lbl}-${idx}`}>
-              {getIconForLabel(lbl, "size-4 text-primary dark:text-white")}
-            </span>
+                <div
+                  key={`${lbl}-${idx}`}
+                  className="rounded-full bg-muted-foreground p-1"
+                >
+                  {getIconForLabel(lbl, "size-3 text-primary dark:text-white")}
+                </div>
              ))}
            </div>
          </div>
+          <div className="flex flex-col gap-0.5">
+            {review.data.metadata?.title && (
+              <div className="mb-1 text-sm text-primary-variant">
+                {review.data.metadata.title}
+              </div>
+            )}
+            <div className="flex flex-row items-center gap-1.5">
+              <div className="text-xs text-primary-variant">{reviewInfo}</div>

-      {isActive && (
-        <div className="mt-2 space-y-2">
-          {shouldFetchEvents && !fetchedEvents ? (
+              {reviewDuration && (
+                <>
+                  <span className="text-[5px] text-primary-variant">•</span>
+                  <div className="text-xs text-primary-variant">
+                    {reviewDuration}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen((v) => !v);
+          }}
+          aria-label={open ? "Collapse" : "Expand"}
+          className="ml-2 inline-flex items-center justify-center rounded p-1 hover:bg-secondary/10"
+        >
+          {open ? (
+            <LuChevronDown className="size-4 text-primary-variant" />
+          ) : (
+            <LuChevronRight className="size-4 text-primary-variant" />
+          )}
+        </div>
+      </div>
+
+      {open && (
+        <div className="mt-2 space-y-0.5">
+          {shouldFetchEvents && isValidating && !fetchedEvents ? (
            <ActivityIndicator />
          ) : (
-            (fetchedEvents || []).map((event) => {
+            (fetchedEvents || []).map((event, index) => {
              return (
-                <EventCollapsible
+                <div
+                  key={`event-${event.id}-${index}`}
+                  className="border-b border-secondary-highlight pb-0.5 last:border-0 last:pb-0"
+                >
+                  <EventList
                    key={event.id}
                    event={event}
                    effectiveTime={effectiveTime}
                    onSeek={onSeek}
                    onOpenUpload={onOpenUpload}
                  />
+                </div>
              );
            })
          )}
@ -337,11 +383,13 @@ function ReviewGroup({
                  key={audioLabel}
                  className="rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px] outline-transparent duration-500"
                >
-                  <div className="flex items-center gap-2 text-sm font-medium">
+                  <div className="ml-1.5 flex items-center gap-2 text-sm font-medium">
+                    <div className="rounded-full bg-muted-foreground p-1">
                      {getIconForLabel(
                        audioLabel,
-                      "size-4 text-primary dark:text-white",
+                        "size-3 text-primary dark:text-white",
                      )}
+                    </div>
                    <span>{getTranslatedLabel(audioLabel)}</span>
                  </div>
                </div>
@ -354,55 +402,30 @@ function ReviewGroup({
  );
 }

-type EventCollapsibleProps = {
+type EventListProps = {
  event: Event;
  effectiveTime?: number;
  onSeek: (ts: number, play?: boolean) => void;
  onOpenUpload?: (e: Event) => void;
 };
-function EventCollapsible({
+function EventList({
  event,
  effectiveTime,
  onSeek,
  onOpenUpload,
-}: EventCollapsibleProps) {
-  const [open, setOpen] = useState(false);
-  const { t } = useTranslation("views/events");
+}: EventListProps) {
  const { data: config } = useSWR<FrigateConfig>("config");

  const { selectedObjectId, setSelectedObjectId } = useDetailStream();

-  const formattedStart = config
-    ? formatUnixTimestampToDateTime(event.start_time ?? 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 formattedEnd = config
-    ? formatUnixTimestampToDateTime(event.end_time ?? 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 handleObjectSelect = (event: Event | undefined) => {
+    if (event) {
+      onSeek(event.start_time ?? 0);
+      setSelectedObjectId(event.id);
+    } else {
+      setSelectedObjectId(undefined);
+    }
+  };

  // Clear selectedObjectId when effectiveTime has passed this event's end_time
  useEffect(() => {
@ -420,66 +443,59 @@ function EventCollapsible({
  ]);

  return (
-    <Collapsible open={open} onOpenChange={(o) => setOpen(o)}>
+    <>
      <div
        className={cn(
          "rounded-md bg-secondary p-2 outline outline-[3px] -outline-offset-[2.8px]",
          event.id == selectedObjectId
-            ? "shadow-selected outline-selected"
+            ? "bg-secondary-highlight shadow-selected outline-selected"
            : "outline-transparent duration-500",
          event.id != selectedObjectId &&
            (effectiveTime ?? 0) >= (event.start_time ?? 0) - 0.5 &&
            (effectiveTime ?? 0) <=
              (event.end_time ?? event.start_time ?? 0) + 0.5 &&
-            "bg-secondary-highlight outline-[1.5px] -outline-offset-[1.1px] outline-primary/40",
+            "bg-secondary-highlight",
        )}
      >
-        <div className="flex w-full items-center justify-between">
+        <div className="ml-1.5 flex w-full items-center justify-between">
          <div
            className="flex items-center gap-2 text-sm font-medium"
            onClick={(e) => {
              e.stopPropagation();
-              onSeek(event.start_time ?? 0);
-              if (event.id) setSelectedObjectId(event.id);
+              handleObjectSelect(
+                event.id == selectedObjectId ? undefined : event,
+              );
            }}
            role="button"
+          >
+            <div
+              className={cn(
+                "rounded-full p-1",
+                event.id == selectedObjectId
+                  ? "bg-selected"
+                  : "bg-muted-foreground",
+              )}
            >
              {getIconForLabel(
                event.label,
-              "size-4 text-primary dark:text-white",
+                "size-3 text-primary dark:text-white",
              )}
+            </div>
            <div className="flex items-end gap-2">
              <span>{getTranslatedLabel(event.label)}</span>
-              <span className="text-xs text-secondary-foreground">
-                {formattedStart ?? ""} - {formattedEnd ?? ""}
-              </span>
            </div>
          </div>
-          <div className="flex flex-1 flex-row justify-end">
+          <div className="mr-2 flex flex-1 flex-row justify-end">
            <EventMenu
              event={event}
              config={config}
              onOpenUpload={(e) => onOpenUpload?.(e)}
+              selectedObjectId={selectedObjectId}
+              setSelectedObjectId={handleObjectSelect}
            />
          </div>
+        </div>

-          <div className="flex items-center gap-2">
-            <CollapsibleTrigger asChild>
-              <button
-                onClick={(e) => e.stopPropagation()}
-                className="rounded bg-muted px-2 py-1 text-xs"
-                aria-label={t("detail.aria")}
-              >
-                {open ? (
-                  <LuChevronUp className="size-3" />
-                ) : (
-                  <LuChevronDown className="size-3" />
-                )}
-              </button>
-            </CollapsibleTrigger>
-          </div>
-        </div>
-        <CollapsibleContent>
        <div className="mt-2">
          <ObjectTimeline
            eventId={event.id}
@ -487,24 +503,40 @@ function EventCollapsible({
            effectiveTime={effectiveTime}
          />
        </div>
-        </CollapsibleContent>
      </div>
-    </Collapsible>
+    </>
  );
 }

 type LifecycleItemProps = {
-  event: ObjectLifecycleSequence;
+  item: ObjectLifecycleSequence;
  isActive?: boolean;
  onSeek?: (timestamp: number, play?: boolean) => void;
+  effectiveTime?: number;
 };

-function LifecycleItem({ event, isActive, onSeek }: LifecycleItemProps) {
+function LifecycleItem({
+  item,
+  isActive,
+  onSeek,
+  effectiveTime,
+}: LifecycleItemProps) {
  const { t } = useTranslation("views/events");
  const { data: config } = useSWR<FrigateConfig>("config");

+  const aspectRatio = useMemo(() => {
+    if (!config || !item?.camera) {
+      return 16 / 9;
+    }
+
+    return (
+      config.cameras[item.camera].detect.width /
+      config.cameras[item.camera].detect.height
+    );
+  }, [config, item]);
+
  const formattedEventTimestamp = config
-    ? formatUnixTimestampToDateTime(event.timestamp ?? 0, {
+    ? formatUnixTimestampToDateTime(item?.timestamp ?? 0, {
        timezone: config.ui.timezone,
        date_format:
          config.ui.time_format == "24hour"
@ -519,11 +551,28 @@ function LifecycleItem({ event, isActive, onSeek }: LifecycleItemProps) {
      })
    : "";

+  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[item?.camera]?.detect?.width ?? 0) *
+            (config?.cameras[item?.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 (
    <div
      role="button"
      onClick={() => {
-        onSeek?.(event.timestamp ?? 0, false);
+        onSeek?.(item.timestamp ?? 0, false);
      }}
      className={cn(
        "flex cursor-pointer items-center gap-2 text-sm text-primary-variant",
@ -532,11 +581,46 @@ function LifecycleItem({ event, isActive, onSeek }: LifecycleItemProps) {
          : "duration-500",
      )}
    >
-      <div className="flex size-4 items-center justify-center">
-        <LifecycleIcon lifecycleItem={event} className="size-3" />
+      <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 || (effectiveTime ?? 0) >= (item?.timestamp ?? 0)) &&
+              "fill-selected duration-300",
+          )}
+        />
      </div>
      <div className="flex w-full flex-row justify-between">
-        <div>{getLifecycleItemDescription(event)}</div>
+        <Tooltip>
+          <TooltipTrigger>
+            <span>{getLifecycleItemDescription(item)}</span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="mt-1 flex flex-wrap items-start gap-3 text-sm text-secondary-foreground">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-start gap-1">
+                  <span className="text-muted-foreground">
+                    {t("objectLifecycle.lifecycleItemDesc.header.ratio")}
+                  </span>
+                  <span className="font-medium text-foreground">{ratio}</span>
+                </div>
+
+                <div className="flex items-start gap-1">
+                  <span className="text-muted-foreground">
+                    {t("objectLifecycle.lifecycleItemDesc.header.area")}
+                  </span>
+                  {areaPx !== undefined && areaPct !== undefined ? (
+                    <span className="font-medium text-foreground">
+                      {areaPx} {t("pixels", { ns: "common" })} · {areaPct}%
+                    </span>
+                  ) : (
+                    <span>N/A</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </TooltipContent>
+        </Tooltip>
        <div className={cn("p-1 text-xs")}>{formattedEventTimestamp}</div>
      </div>
    </div>
@ -561,8 +645,8 @@ function ObjectTimeline({
    },
  ]);

-  if ((!timeline || timeline.length === 0) && isValidating) {
-    return <ActivityIndicator className="h-2 w-2" size={2} />;
+  if (isValidating && (!timeline || timeline.length === 0)) {
+    return <ActivityIndicator className="ml-2 size-3" />;
  }

  if (!timeline || timeline.length === 0) {
@ -573,20 +657,75 @@ function ObjectTimeline({
    );
  }

+  // Calculate how far down the blue line should extend based on effectiveTime
+  const calculateLineHeight = () => {
+    if (!timeline || timeline.length === 0) return 0;
+
+    const currentTime = effectiveTime ?? 0;
+
+    // Find which events have been passed
+    let lastPassedIndex = -1;
+    for (let i = 0; i < timeline.length; i++) {
+      if (currentTime >= (timeline[i].timestamp ?? 0)) {
+        lastPassedIndex = i;
+      } else {
+        break;
+      }
+    }
+
+    // No events passed yet
+    if (lastPassedIndex < 0) return 0;
+
+    // All events passed
+    if (lastPassedIndex >= timeline.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 / (timeline.length - 1);
+
+    // Find progress between current and next event for smooth transition
+    const currentEvent = timeline[lastPassedIndex];
+    const nextEvent = timeline[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();
+
  return (
-    <div className="mx-2 mt-4 space-y-2">
+    <div className="-pb-2 relative mx-2">
+      <div className="absolute -top-2 bottom-2 left-2 z-0 w-0.5 -translate-x-1/2 bg-secondary-foreground" />
+      <div
+        className="absolute left-2 top-2 z-[5] max-h-[calc(100%-1rem)] w-0.5 -translate-x-1/2 bg-selected transition-all duration-300"
+        style={{ height: `${blueLineHeight}%` }}
+      />
+      <div className="space-y-2">
        {timeline.map((event, idx) => {
          const isActive =
            Math.abs((effectiveTime ?? 0) - (event.timestamp ?? 0)) <= 0.5;
+
          return (
            <LifecycleItem
              key={`${event.timestamp}-${event.source_id ?? ""}-${idx}`}
-            event={event}
+              item={event}
              onSeek={onSeek}
              isActive={isActive}
+              effectiveTime={effectiveTime}
            />
          );
        })}
      </div>
+    </div>
  );
 }
--- a/web/src/components/timeline/EventMenu.tsx
+++ b/web/src/components/timeline/EventMenu.tsx
@ -4,19 +4,22 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
+  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { HiDotsHorizontal } from "react-icons/hi";
 import { useApiHost } from "@/api";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import type { Event } from "@/types/event";
-import type { FrigateConfig } from "@/types/frigateConfig";
+import { Event } from "@/types/event";
+import { FrigateConfig } from "@/types/frigateConfig";

 type EventMenuProps = {
  event: Event;
  config?: FrigateConfig;
  onOpenUpload?: (e: Event) => void;
  onOpenSimilarity?: (e: Event) => void;
+  selectedObjectId?: string;
+  setSelectedObjectId?: (event: Event | undefined) => void;
 };

 export default function EventMenu({
@ -24,23 +27,38 @@ export default function EventMenu({
  config,
  onOpenUpload,
  onOpenSimilarity,
+  selectedObjectId,
+  setSelectedObjectId,
 }: EventMenuProps) {
  const apiHost = useApiHost();
  const navigate = useNavigate();
  const { t } = useTranslation("views/explore");

+  const handleObjectSelect = () => {
+    if (event.id === selectedObjectId) {
+      setSelectedObjectId?.(undefined);
+    } else {
+      setSelectedObjectId?.(event);
+    }
+  };
+
  return (
+    <>
+      <span tabIndex={0} className="sr-only" />
      <DropdownMenu>
        <DropdownMenuTrigger>
-        <button
-          className="mr-2 rounded p-1"
-          aria-label={t("itemMenu.openMenu", { ns: "common" })}
-        >
+          <div className="rounded p-1 pr-2" role="button">
            <HiDotsHorizontal className="size-4 text-muted-foreground" />
-        </button>
+          </div>
        </DropdownMenuTrigger>
        <DropdownMenuPortal>
          <DropdownMenuContent>
+            <DropdownMenuItem onSelect={handleObjectSelect}>
+              {event.id === selectedObjectId
+                ? t("itemMenu.hideObjectDetails.label")
+                : t("itemMenu.showObjectDetails.label")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator className="my-0.5" />
            <DropdownMenuItem
              onSelect={() => {
                navigate(`/explore?event_id=${event.id}`);
@ -90,5 +108,6 @@ export default function EventMenu({
          </DropdownMenuContent>
        </DropdownMenuPortal>
      </DropdownMenu>
+    </>
  );
 }
--- a/web/src/utils/dateUtil.ts
+++ b/web/src/utils/dateUtil.ts
@ -1,6 +1,7 @@
 import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns";
 import { Locale } from "date-fns/locale";
 import { formatInTimeZone } from "date-fns-tz";
+import i18n from "@/utils/i18n";
 export const longToDate = (long: number): Date => new Date(long * 1000);
 export const epochToLong = (date: number): number => date / 1000;
 export const dateToLong = (date: Date): number => epochToLong(date.getTime());
@ -234,11 +235,13 @@ export const formatUnixTimestampToDateTime = (
 * If end time is not provided, it returns 'In Progress'
 * @param start_time: number - Unix timestamp for start time
 * @param end_time: number|null - Unix timestamp for end time
+ * @param abbreviated: boolean - Whether to use abbreviated forms (h, m, s) instead of full words
 * @returns string - duration or 'In Progress' if end time is not provided
 */
 export const getDurationFromTimestamps = (
  start_time: number,
  end_time: number | null,
+  abbreviated: boolean = false,
 ): string => {
  if (isNaN(start_time)) {
    return "Invalid start time";
@ -250,12 +253,39 @@ export const getDurationFromTimestamps = (
    }
    const start = fromUnixTime(start_time);
    const end = fromUnixTime(end_time);
-    duration = formatDuration(intervalToDuration({ start, end }), {
-      format: ["hours", "minutes", "seconds"],
-    })
-      .replace("hours", "h")
-      .replace("minutes", "m")
-      .replace("seconds", "s");
+    const durationObj = intervalToDuration({ start, end });
+
+    // Build duration string using i18n keys or abbreviations
+    const parts: string[] = [];
+    if (durationObj.hours) {
+      const count = durationObj.hours;
+      if (abbreviated) {
+        parts.push(`${count}h`);
+      } else {
+        const key = count === 1 ? "hour_one" : "hour_other";
+        parts.push(i18n.t(`time.${key}`, { time: count, ns: "common" }));
+      }
+    }
+    if (durationObj.minutes) {
+      const count = durationObj.minutes;
+      if (abbreviated) {
+        parts.push(`${count}m`);
+      } else {
+        const key = count === 1 ? "minute_one" : "minute_other";
+        parts.push(i18n.t(`time.${key}`, { time: count, ns: "common" }));
+      }
+    }
+    if (durationObj.seconds) {
+      const count = durationObj.seconds;
+      if (abbreviated) {
+        parts.push(`${count}s`);
+      } else {
+        const key = count === 1 ? "second_one" : "second_other";
+        parts.push(i18n.t(`time.${key}`, { time: count, ns: "common" }));
+      }
+    }
+
+    duration = parts.join(" ");
  }
  return duration;
 };
--- a/web/src/utils/lifecycleUtil.ts
+++ b/web/src/utils/lifecycleUtil.ts
@ -9,7 +9,9 @@ export function getLifecycleItemDescription(
    ? lifecycleItem.data.sub_label[0]
    : lifecycleItem.data.sub_label || lifecycleItem.data.label;

-  const label = getTranslatedLabel(rawLabel);
+  const label = lifecycleItem.data.sub_label
+    ? rawLabel
+    : getTranslatedLabel(rawLabel);

  switch (lifecycleItem.class_type) {
    case "visible":
@ -44,14 +46,18 @@ export function getLifecycleItemDescription(
          {
            ns: "views/explore",
            label,
-            attribute: lifecycleItem.data.attribute.replaceAll("_", " "),
+            attribute: getTranslatedLabel(
+              lifecycleItem.data.attribute.replaceAll("_", " "),
+            ),
          },
        );
      } else {
        title = t("objectLifecycle.lifecycleItemDesc.attribute.other", {
          ns: "views/explore",
          label: lifecycleItem.data.label,
-          attribute: lifecycleItem.data.attribute.replaceAll("_", " "),
+          attribute: getTranslatedLabel(
+            lifecycleItem.data.attribute.replaceAll("_", " "),
+          ),
        });
      }
      return title;
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@ -696,7 +696,7 @@ export function RecordingView({
            <div
              className={cn(
                "flex size-full items-center",
-                timelineType === "detail"
+                timelineType === "detail" && isDesktop
                  ? "flex-col"
                  : mainCameraAspect == "tall"
                    ? "flex-row justify-evenly"
@ -782,7 +782,7 @@ export function RecordingView({
                      ? "h-full w-72 flex-col"
                      : `h-28 w-full`,
                    previewRowOverflows ? "" : "items-center justify-center",
-                    timelineType == "detail" && "mt-4",
+                    timelineType == "detail" && isDesktop && "mt-4",
                  )}
                >
                  <div className="w-2" />
@ -847,6 +847,7 @@ export function RecordingView({
            setScrubbing={setScrubbing}
            setExportRange={setExportRange}
            onAnalysisOpen={onAnalysisOpen}
+            isPlaying={mainControllerRef?.current?.isPlaying() ?? false}
          />
        </div>
      </div>
@ -864,6 +865,7 @@ type TimelineProps = {
  activeReviewItem?: ReviewSegment;
  currentTime: number;
  exportRange?: TimeRange;
+  isPlaying?: boolean;
  setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
  manuallySetCurrentTime: (time: number, force: boolean) => void;
  setScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
@ -880,6 +882,7 @@ function Timeline({
  activeReviewItem,
  currentTime,
  exportRange,
+  isPlaying,
  setCurrentTime,
  manuallySetCurrentTime,
  setScrubbing,
@ -966,15 +969,19 @@ function Timeline({
        "relative",
        isDesktop
          ? `${timelineType == "timeline" ? "w-[100px]" : timelineType == "detail" ? "w-[30%]" : "w-60"} no-scrollbar overflow-y-auto`
-          : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : timelineType == "detail" ? "flex-1" : "landscape:w-[175px]"} `,
+          : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : timelineType == "detail" && isDesktop ? "flex-1" : "landscape:w-[300px]"} `,
      )}
    >
      {isMobile && (
        <GenAISummaryDialog review={activeReviewItem} onOpen={onAnalysisOpen} />
      )}

+      {timelineType != "detail" && (
+        <>
          <div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div>
          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[30px] w-full bg-gradient-to-t from-secondary to-transparent"></div>
+        </>
+      )}
      {timelineType == "timeline" ? (
        !isLoading ? (
          <MotionReviewTimeline
@ -1009,6 +1016,7 @@ function Timeline({
            manuallySetCurrentTime(timestamp, play ?? true)
          }
          reviewItems={mainCameraReviewItems}
+          isPlaying={isPlaying}
        />
      ) : (
        <div className="scrollbar-container h-full overflow-auto bg-secondary">