Improve Details Settings (#20718)

* detail stream settings

* fix mobile landscape

* mobile landscape

* tweak

* tweaks

web/public/locales/en/views/events.json

@@ -26,7 +26,12 @@
     "aria": "Toggle detail view",
     "trackedObject_one": "object",
     "trackedObject_other": "objects",
-    "noObjectDetailData": "No object detail data available."
+    "noObjectDetailData": "No object detail data available.",
+    "settings": "Detail View Settings",
+    "alwaysExpandActive": {
+      "title": "Always expand active",
+      "desc": "Always expand the active review item's object details when available."
+    }
   },
   "objectTrack": {
     "trackedPoint": "Tracked point",

web/public/locales/en/views/explore.json

@@ -71,7 +71,7 @@
       },
       "offset": {
         "label": "Annotation Offset",
-        "desc": "This data comes from your camera's detect feed but is overlayed on images from the the record feed. It is unlikely that the two streams are perfectly in sync. As a result, the bounding box and the footage will not line up perfectly. However, the <code>annotation_offset</code> field can be used to adjust this.",
+        "desc": "This data comes from your camera's detect feed but is overlayed on images from the the record feed. It is unlikely that the two streams are perfectly in sync. As a result, the bounding box and the footage will not line up perfectly. You can use this setting to offset the annotations forward or backward in time to better align them with the recorded footage.",
         "millisecondsToOffset": "Milliseconds to offset detect annotations by. <em>Default: 0</em>",
         "tips": "TIP: Imagine there is an event clip with a person walking from left to right. If the event timeline bounding box is consistently to the left of the person then the value should be decreased. Similarly, if a person is walking from left to right and the bounding box is consistently ahead of the person then the value should be increased.",
         "toast": {

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

@@ -1,11 +1,15 @@
 import { useCallback, useState } from "react";
 import { Slider } from "@/components/ui/slider";
 import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
 import { useDetailStream } from "@/context/detail-stream-context";
 import axios from "axios";
 import { useSWRConfig } from "swr";
 import { toast } from "sonner";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
+import { LuInfo } from "react-icons/lu";
+import { cn } from "@/lib/utils";
+import { isMobile } from "react-device-detect";
 
 type Props = {
   className?: string;
@@ -65,30 +69,67 @@ export default function AnnotationOffsetSlider({ className }: Props) {
 
   return (
     <div
-      className={`absolute bottom-0 left-0 right-0 z-30 flex items-center gap-3 bg-background p-3 ${className ?? ""}`}
+      className={cn(
-      style={{ pointerEvents: "auto" }}
+        "flex flex-col gap-0.5",
+        isMobile && "landscape:gap-3",
+        className,
+      )}
     >
-      <div className="w-56 text-sm">
+      <div
-        Annotation offset (ms): {annotationOffset}
+        className={cn(
+          "flex items-center gap-3",
+          isMobile &&
+            "landscape:flex-col landscape:items-start landscape:gap-4",
+        )}
+      >
+        <div className="flex max-w-28 flex-row items-center gap-2 text-sm md:max-w-48">
+          <span className="max-w-24 md:max-w-44">
+            {t("trackingDetails.annotationSettings.offset.label")}:
+          </span>
+          <span className="text-primary-variant">{annotationOffset}</span>
+        </div>
+        <div className="w-full flex-1 landscape:flex">
+          <Slider
+            value={[annotationOffset]}
+            min={-1500}
+            max={1500}
+            step={50}
+            onValueChange={handleChange}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Button size="sm" variant="ghost" onClick={reset}>
+            {t("button.reset", { ns: "common" })}
+          </Button>
+          <Button size="sm" onClick={save} disabled={isSaving}>
+            {isSaving
+              ? t("button.saving", { ns: "common" })
+              : t("button.save", { ns: "common" })}
+          </Button>
+        </div>
       </div>
-      <div className="flex-1">
+      <div
-        <Slider
+        className={cn(
-          value={[annotationOffset]}
+          "flex items-center gap-2 text-xs text-muted-foreground",
-          min={-1500}
+          isMobile && "landscape:flex-col landscape:items-start",
-          max={1500}
+        )}
-          step={50}
+      >
-          onValueChange={handleChange}
+        <Trans ns="views/explore">
-        />
+          trackingDetails.annotationSettings.offset.millisecondsToOffset
-      </div>
+        </Trans>
-      <div className="flex items-center gap-2">
+        <Popover>
-        <Button size="sm" variant="ghost" onClick={reset}>
+          <PopoverTrigger asChild>
-          Reset
+            <button
-        </Button>
+              className="focus:outline-none"
-        <Button size="sm" onClick={save} disabled={isSaving}>
+              aria-label={t("trackingDetails.annotationSettings.offset.desc")}
-          {isSaving
+            >
-            ? t("button.saving", { ns: "common" })
+              <LuInfo className="size-4" />
-            : t("button.save", { ns: "common" })}
+            </button>
-        </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 text-sm">
+            {t("trackingDetails.annotationSettings.offset.desc")}
+          </PopoverContent>
+        </Popover>
       </div>
     </div>
   );

web/src/components/timeline/DetailStream.tsx

@@ -16,13 +16,21 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { Event } from "@/types/event";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { ReviewSegment } from "@/types/review";
-import { LuChevronDown, LuCircle, LuChevronRight } from "react-icons/lu";
+import {
+  LuChevronDown,
+  LuCircle,
+  LuChevronRight,
+  LuSettings,
+} 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";
 import { Link } from "react-router-dom";
+import { Switch } from "@/components/ui/switch";
+import { usePersistence } from "@/hooks/use-persistence";
+import { isDesktop } from "react-device-detect";
 
 type DetailStreamProps = {
   reviewItems?: ReviewSegment[];
@@ -51,6 +59,11 @@ export default function DetailStream({
 
   const effectiveTime = currentTime + annotationOffset / 1000;
   const [upload, setUpload] = useState<Event | undefined>(undefined);
+  const [controlsExpanded, setControlsExpanded] = useState(false);
+  const [alwaysExpandActive, setAlwaysExpandActive] = usePersistence(
+    "detailStreamActiveExpanded",
+    true,
+  );
 
   const onSeekCheckPlaying = (timestamp: number) => {
     onSeek(timestamp, isPlaying);
@@ -168,7 +181,7 @@ export default function DetailStream({
   }
 
   return (
-    <div className="relative">
+    <>
       <FrigatePlusDialog
         upload={upload}
         onClose={() => setUpload(undefined)}
@@ -179,38 +192,80 @@ export default function DetailStream({
         }}
       />
 
-      <div
+      <div className="relative flex h-full flex-col">
-        ref={scrollRef}
+        <div
-        className="scrollbar-container h-[calc(100vh-70px)] overflow-y-auto"
+          ref={scrollRef}
-      >
+          className="scrollbar-container flex-1 overflow-y-auto pb-14"
-        <div className="space-y-4 py-2">
+        >
-          {reviewItems?.length === 0 ? (
+          <div className="space-y-4 py-2">
-            <div className="py-8 text-center text-muted-foreground">
+            {reviewItems?.length === 0 ? (
-              {t("detail.noDataFound")}
+              <div className="py-8 text-center text-muted-foreground">
+                {t("detail.noDataFound")}
+              </div>
+            ) : (
+              reviewItems?.map((review: ReviewSegment) => {
+                const id = `review-${review.id ?? review.start_time ?? Math.floor(review.start_time ?? 0)}`;
+                return (
+                  <ReviewGroup
+                    key={id}
+                    id={id}
+                    review={review}
+                    config={config}
+                    onSeek={onSeekCheckPlaying}
+                    effectiveTime={effectiveTime}
+                    isActive={activeReviewId == id}
+                    onActivate={() => setActiveReviewId(id)}
+                    onOpenUpload={(e) => setUpload(e)}
+                    alwaysExpandActive={alwaysExpandActive}
+                  />
+                );
+              })
+            )}
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "absolute bottom-0 left-0 right-0 z-30 rounded-t-md border border-secondary-highlight bg-background_alt shadow-md",
+            isDesktop && "border-b-0",
+          )}
+        >
+          <button
+            onClick={() => setControlsExpanded(!controlsExpanded)}
+            className="flex w-full items-center justify-between p-3"
+          >
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <LuSettings className="size-4" />
+              <span>{t("detail.settings")}</span>
+            </div>
+            {controlsExpanded ? (
+              <LuChevronDown className="size-4 text-primary-variant" />
+            ) : (
+              <LuChevronRight className="size-4 text-primary-variant" />
+            )}
+          </button>
+          {controlsExpanded && (
+            <div className="space-y-3 px-3 pb-3">
+              <AnnotationOffsetSlider />
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <label className="text-sm font-medium">
+                    {t("detail.alwaysExpandActive.title")}
+                  </label>
+                  <Switch
+                    checked={alwaysExpandActive}
+                    onCheckedChange={setAlwaysExpandActive}
+                  />
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {t("detail.alwaysExpandActive.desc")}
+                </div>
+              </div>
             </div>
-          ) : (
-            reviewItems?.map((review: ReviewSegment) => {
-              const id = `review-${review.id ?? review.start_time ?? Math.floor(review.start_time ?? 0)}`;
-              return (
-                <ReviewGroup
-                  key={id}
-                  id={id}
-                  review={review}
-                  config={config}
-                  onSeek={onSeekCheckPlaying}
-                  effectiveTime={effectiveTime}
-                  isActive={activeReviewId == id}
-                  onActivate={() => setActiveReviewId(id)}
-                  onOpenUpload={(e) => setUpload(e)}
-                />
-              );
-            })
           )}
         </div>
       </div>
-
+    </>
-      <AnnotationOffsetSlider />
-    </div>
   );
 }
 
@@ -223,6 +278,7 @@ type ReviewGroupProps = {
   onActivate?: () => void;
   onOpenUpload?: (e: Event) => void;
   effectiveTime?: number;
+  alwaysExpandActive?: boolean;
 };
 
 function ReviewGroup({
@@ -234,11 +290,19 @@ function ReviewGroup({
   onActivate,
   onOpenUpload,
   effectiveTime,
+  alwaysExpandActive = false,
 }: ReviewGroupProps) {
   const { t } = useTranslation("views/events");
   const [open, setOpen] = useState(false);
   const start = review.start_time ?? 0;
 
+  // Auto-expand when this review becomes active and alwaysExpandActive is enabled
+  useEffect(() => {
+    if (isActive && alwaysExpandActive) {
+      setOpen(true);
+    }
+  }, [isActive, alwaysExpandActive]);
+
   const displayTime = formatUnixTimestampToDateTime(start, {
     timezone: config.ui.timezone,
     date_format: