change layout

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

@@ -109,6 +109,7 @@ export default function SearchDetailDialog({
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
+  const apiHost = useApiHost();
 
   // tabs
 
@@ -118,6 +119,12 @@ export default function SearchDetailDialog({
     100,
   );
 
+  // tracking details state
+
+  const [trackingTimeIndex, setTrackingTimeIndex] = useState<
+    number | undefined
+  >(undefined);
+
   // dialog and mobile page
 
   const [isOpen, setIsOpen] = useState(search != undefined);
@@ -200,6 +207,9 @@ export default function SearchDetailDialog({
           "scrollbar-container overflow-y-auto",
           isDesktop &&
             "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
+          isDesktop &&
+            page == "tracking_details" &&
+            "lg:max-w-[75%] xl:max-w-[80%]",
           isMobile && "px-4",
         )}
       >
@@ -209,6 +219,139 @@ export default function SearchDetailDialog({
             {t("trackedObjectDetails")}
           </Description>
         </Header>
+        {isDesktop ? (
+          <div className="flex h-full gap-4 overflow-hidden">
+            <div className="scrollbar-container flex-[3] overflow-y-auto">
+              {page === "snapshot" && search.has_snapshot && (
+                <ObjectSnapshotTab
+                  search={
+                    {
+                      ...search,
+                      plus_id: config?.plus?.enabled
+                        ? search.plus_id
+                        : "not_enabled",
+                    } as unknown as Event
+                  }
+                  onEventUploaded={() => {
+                    search.plus_id = "new_upload";
+                  }}
+                />
+              )}
+              {page === "video" && search.has_clip && (
+                <VideoTab search={search} />
+              )}
+              {page === "tracking_details" && (
+                <TrackingDetails
+                  event={search as unknown as Event}
+                  showImage={true}
+                  showLifecycle={false}
+                  timeIndex={trackingTimeIndex}
+                  setTimeIndex={setTrackingTimeIndex}
+                />
+              )}
+              {(page === "details" ||
+                (!search.has_snapshot && page === "snapshot") ||
+                (!search.has_clip && page === "video")) && (
+                <img
+                  className="aspect-video select-none rounded-lg object-contain transition-opacity"
+                  style={
+                    isIOS
+                      ? {
+                          WebkitUserSelect: "none",
+                          WebkitTouchCallout: "none",
+                        }
+                      : undefined
+                  }
+                  draggable={false}
+                  src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
+                />
+              )}
+            </div>
+            <div className="flex flex-[2] flex-col gap-4 overflow-hidden">
+              <ScrollArea className="w-full whitespace-nowrap">
+                <div className="flex flex-row">
+                  <ToggleGroup
+                    className="*:rounded-md *:px-3 *:py-4"
+                    type="single"
+                    size="sm"
+                    value={pageToggle}
+                    onValueChange={(value: SearchTab) => {
+                      if (value) {
+                        setPageToggle(value);
+                      }
+                    }}
+                  >
+                    {Object.values(searchTabs).map((item) => (
+                      <ToggleGroupItem
+                        key={item}
+                        className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "details" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                        value={item}
+                        data-nav-item={item}
+                        aria-label={`Select ${item}`}
+                      >
+                        {item == "details" && (
+                          <FaRegListAlt className="size-4" />
+                        )}
+                        {item == "snapshot" && <FaImage className="size-4" />}
+                        {item == "video" && <FaVideo className="size-4" />}
+                        {item == "tracking_details" && (
+                          <PiPath className="size-4" />
+                        )}
+                        <div className="smart-capitalize">
+                          {t(`type.${item}`)}
+                        </div>
+                      </ToggleGroupItem>
+                    ))}
+                  </ToggleGroup>
+                  <ScrollBar orientation="horizontal" className="h-0" />
+                </div>
+              </ScrollArea>
+              <div className="scrollbar-container flex-1 overflow-y-auto">
+                {page == "details" && (
+                  <ObjectDetailsTab
+                    search={search}
+                    config={config}
+                    setSearch={setSearch}
+                    setSimilarity={setSimilarity}
+                    setInputFocused={setInputFocused}
+                    showThumbnail={false}
+                  />
+                )}
+                {page == "snapshot" && (
+                  <ObjectDetailsTab
+                    search={search}
+                    config={config}
+                    setSearch={setSearch}
+                    setSimilarity={setSimilarity}
+                    setInputFocused={setInputFocused}
+                    showThumbnail={false}
+                  />
+                )}
+                {page == "video" && (
+                  <ObjectDetailsTab
+                    search={search}
+                    config={config}
+                    setSearch={setSearch}
+                    setSimilarity={setSimilarity}
+                    setInputFocused={setInputFocused}
+                    showThumbnail={false}
+                  />
+                )}
+                {page == "tracking_details" && (
+                  <TrackingDetails
+                    className="w-full overflow-x-hidden"
+                    event={search as unknown as Event}
+                    showImage={false}
+                    showLifecycle={true}
+                    timeIndex={trackingTimeIndex}
+                    setTimeIndex={setTrackingTimeIndex}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
             <ScrollArea
               className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
             >
@@ -235,8 +378,12 @@ export default function SearchDetailDialog({
                       {item == "details" && <FaRegListAlt className="size-4" />}
                       {item == "snapshot" && <FaImage className="size-4" />}
                       {item == "video" && <FaVideo className="size-4" />}
-                  {item == "tracking_details" && <PiPath className="size-4" />}
+                      {item == "tracking_details" && (
-                  <div className="smart-capitalize">{t(`type.${item}`)}</div>
+                        <PiPath className="size-4" />
+                      )}
+                      <div className="smart-capitalize">
+                        {t(`type.${item}`)}
+                      </div>
                     </ToggleGroupItem>
                   ))}
                 </ToggleGroup>
@@ -257,7 +404,9 @@ export default function SearchDetailDialog({
                 search={
                   {
                     ...search,
-                plus_id: config?.plus?.enabled ? search.plus_id : "not_enabled",
+                    plus_id: config?.plus?.enabled
+                      ? search.plus_id
+                      : "not_enabled",
                   } as unknown as Event
                 }
                 onEventUploaded={() => {
@@ -270,10 +419,14 @@ export default function SearchDetailDialog({
               <TrackingDetails
                 className="w-full overflow-x-hidden"
                 event={search as unknown as Event}
-            fullscreen={true}
+                showImage={true}
-            setPane={() => {}}
+                showLifecycle={true}
+                timeIndex={trackingTimeIndex}
+                setTimeIndex={setTrackingTimeIndex}
               />
             )}
+          </>
+        )}
       </Content>
     </Overlay>
   );
@@ -285,6 +438,7 @@ type ObjectDetailsTabProps = {
   setSearch: (search: SearchResult | undefined) => void;
   setSimilarity?: () => void;
   setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
+  showThumbnail?: boolean;
 };
 function ObjectDetailsTab({
   search,
@@ -292,6 +446,7 @@ function ObjectDetailsTab({
   setSearch,
   setSimilarity,
   setInputFocused,
+  showThumbnail = true,
 }: ObjectDetailsTabProps) {
   const { t } = useTranslation(["views/explore", "views/faceLibrary"]);
 
@@ -873,6 +1028,7 @@ function ObjectDetailsTab({
             <div className="text-sm">{formattedDate}</div>
           </div>
         </div>
+        {showThumbnail && (
           <div className="flex w-full flex-col gap-2 pl-6">
             <img
               className="aspect-video select-none rounded-lg object-contain transition-opacity"
@@ -888,7 +1044,10 @@ function ObjectDetailsTab({
               src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
             />
             <div
-            className={cn("flex w-full flex-row gap-2", isMobile && "flex-col")}
+              className={cn(
+                "flex w-full flex-row gap-2",
+                isMobile && "flex-col",
+              )}
             >
               {config?.semantic_search.enabled &&
                 setSimilarity != undefined &&
@@ -933,6 +1092,7 @@ function ObjectDetailsTab({
                 )}
             </div>
           </div>
+        )}
       </div>
       <div className="flex flex-col gap-1.5">
         {config?.cameras[search.camera].objects.genai.enabled &&

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

@@ -5,7 +5,6 @@ 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 { ReviewDetailPaneType } from "@/types/review";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { getIconForLabel } from "@/utils/iconUtil";
@@ -18,7 +17,7 @@ import {
   LuSettings,
   LuTruck,
 } from "react-icons/lu";
-import { IoMdArrowRoundBack, IoMdExit } from "react-icons/io";
+import { IoMdExit } from "react-icons/io";
 import {
   MdFaceUnlock,
   MdOutlineLocationOn,
@@ -26,7 +25,7 @@ import {
 } from "react-icons/md";
 import { cn } from "@/lib/utils";
 import { useApiHost } from "@/api";
-import { isDesktop, isIOS, isSafari } from "react-device-detect";
+import { isIOS, isSafari } from "react-device-detect";
 import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
 import {
   Tooltip,
@@ -63,14 +62,19 @@ type TrackingDetailsProps = {
   className?: string;
   event: Event;
   fullscreen?: boolean;
-  setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
+  showImage?: boolean;
+  showLifecycle?: boolean;
+  timeIndex?: number;
+  setTimeIndex?: (index: number) => void;
 };
 
 export default function TrackingDetails({
   className,
   event,
-  fullscreen = false,
+  showImage = true,
-  setPane,
+  showLifecycle = false,
+  timeIndex: propTimeIndex,
+  setTimeIndex: propSetTimeIndex,
 }: TrackingDetailsProps) {
   const { t } = useTranslation(["views/explore"]);
 
@@ -214,7 +218,11 @@ export default function TrackingDetails({
     );
   }, [savedPathPoints, eventSequencePoints, config, event]);
 
-  const [timeIndex, setTimeIndex] = useState(0);
+  const [localTimeIndex, setLocalTimeIndex] = useState<number>(0);
+
+  const timeIndex =
+    propTimeIndex !== undefined ? propTimeIndex : localTimeIndex;
+  const setTimeIndex = propSetTimeIndex || setLocalTimeIndex;
 
   const handleSetBox = useCallback(
     (box: number[], attrBox: number[] | undefined) => {
@@ -257,15 +265,15 @@ export default function TrackingDetails({
   const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    if (timeIndex) {
+    if (propTimeIndex !== undefined) {
-      const newSrc = `${apiHost}api/${event.camera}/recordings/${timeIndex + annotationOffset / 1000}/snapshot.jpg?height=500`;
+      const newSrc = `${apiHost}api/${event.camera}/recordings/${propTimeIndex + annotationOffset / 1000}/snapshot.jpg?height=500`;
       setSrc(newSrc);
     }
     setImgLoaded(false);
     setHasError(false);
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeIndex, annotationOffset]);
+  }, [propTimeIndex, annotationOffset]);
 
   // carousels
 
@@ -291,7 +299,7 @@ export default function TrackingDetails({
         setLifecycleZones([]);
       }
     },
-    [eventSequence, pathPoints, handleSetBox],
+    [eventSequence, pathPoints, handleSetBox, setTimeIndex],
   );
 
   const formattedStart = config
@@ -329,7 +337,7 @@ export default function TrackingDetails({
   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) {
+    if (timeIndex == null || timeIndex === 0) {
       setTimeIndex(eventSequence[0].timestamp);
       handleSetBox(
         eventSequence[0]?.data.box ?? [],
@@ -337,12 +345,12 @@ export default function TrackingDetails({
       );
       setLifecycleZones(eventSequence[0]?.data.zones);
     }
-  }, [eventSequence, timeIndex, handleSetBox]);
+  }, [eventSequence, timeIndex, handleSetBox, setTimeIndex]);
 
   // When timeIndex changes or image finishes loading, sync the box/zones to matching lifecycle, else clear
   useEffect(() => {
-    if (!eventSequence || timeIndex == null) return;
+    if (!eventSequence || propTimeIndex == null) return;
-    const idx = eventSequence.findIndex((i) => i.timestamp === timeIndex);
+    const idx = eventSequence.findIndex((i) => i.timestamp === propTimeIndex);
     if (idx !== -1) {
       if (imgLoaded) {
         handleSetBox(
@@ -356,7 +364,7 @@ export default function TrackingDetails({
       setBoxStyle(null);
       setLifecycleZones([]);
     }
-  }, [timeIndex, imgLoaded, eventSequence, handleSetBox]);
+  }, [propTimeIndex, imgLoaded, eventSequence, handleSetBox]);
 
   const selectedLifecycle = useMemo(() => {
     if (!eventSequence || eventSequence.length === 0) return undefined;
@@ -423,24 +431,8 @@ export default function TrackingDetails({
   return (
     <div className={className}>
       <span tabIndex={0} className="sr-only" />
-      {!fullscreen && (
-        <div className={cn("flex items-center gap-2")}>
-          <Button
-            className="mb-2 mt-3 flex items-center gap-2.5 rounded-lg md:mt-0"
-            aria-label={t("label.back", { ns: "common" })}
-            size="sm"
-            onClick={() => setPane("overview")}
-          >
-            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-            {isDesktop && (
-              <div className="text-primary">
-                {t("button.back", { ns: "common" })}
-              </div>
-            )}
-          </Button>
-        </div>
-      )}
 
+      {showImage && (
         <div
           className={cn(
             "relative mx-auto flex max-h-[50dvh] flex-row justify-center",
@@ -528,7 +520,10 @@ export default function TrackingDetails({
                   </div>
                 )}
                 {attributeBoxStyle && (
-                <div className="absolute border-2" style={attributeBoxStyle} />
+                  <div
+                    className="absolute border-2"
+                    style={attributeBoxStyle}
+                  />
                 )}
                 {imgRef.current?.width &&
                   imgRef.current?.height &&
@@ -576,7 +571,10 @@ export default function TrackingDetails({
             </ContextMenu>
           </div>
         </div>
+      )}
 
+      {showLifecycle && (
+        <>
           <div className="mt-3 flex flex-row items-center justify-between">
             <Heading as="h4">{t("trackingDetails.title")}</Heading>
 
@@ -602,6 +600,7 @@ export default function TrackingDetails({
               </Tooltip>
             </div>
           </div>
+
           <div className="flex flex-row items-center justify-between">
             <div className="mb-2 text-sm text-muted-foreground">
               {t("trackingDetails.scrollViewTips")}
@@ -613,7 +612,8 @@ export default function TrackingDetails({
               })}
             </div>
           </div>
-      {config?.cameras[event.camera]?.onvif.autotracking.enabled_in_config && (
+          {config?.cameras[event.camera]?.onvif.autotracking
+            .enabled_in_config && (
             <div className="-mt-2 mb-2 text-sm text-danger">
               {t("trackingDetails.autoTrackingTips")}
             </div>
@@ -692,7 +692,9 @@ export default function TrackingDetails({
                     <div className="space-y-2">
                       {eventSequence.map((item, idx) => {
                         const isActive =
-                      Math.abs((timeIndex ?? 0) - (item.timestamp ?? 0)) <= 0.5;
+                          Math.abs(
+                            (propTimeIndex ?? 0) - (item.timestamp ?? 0),
+                          ) <= 0.5;
                         const formattedEventTimestamp = config
                           ? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
                               timezone: config.ui.timezone,
@@ -712,23 +714,27 @@ export default function TrackingDetails({
                           : "";
 
                         const ratio =
-                      Array.isArray(item.data.box) && item.data.box.length >= 4
+                          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
+                          Array.isArray(item.data.box) &&
+                          item.data.box.length >= 4
                             ? Math.round(
-                            (config.cameras[event.camera]?.detect?.width ?? 0) *
+                                (config.cameras[event.camera]?.detect?.width ??
-                              (config.cameras[event.camera]?.detect?.height ??
                                   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
+                          Array.isArray(item.data.box) &&
+                          item.data.box.length >= 4
                             ? (item.data.box[2] * item.data.box[3]).toFixed(4)
                             : undefined;
 
@@ -761,6 +767,8 @@ export default function TrackingDetails({
               </div>
             </div>
           </div>
+        </>
+      )}
     </div>
   );
 }