Move popup to timeline for mobile

web/src/components/card/ReviewCard.tsx

@@ -6,7 +6,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { isDesktop, isIOS, isSafari } from "react-device-detect";
 import useSWR from "swr";
 import TimeAgo from "../dynamic/TimeAgo";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import useImageLoaded from "@/hooks/use-image-loaded";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import { FaCompactDisc } from "react-icons/fa";
@@ -36,15 +36,16 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { buttonVariants } from "../ui/button";
 import { Trans, useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
 
 type ReviewCardProps = {
   event: ReviewSegment;
-  currentTime: number;
+  activeReviewItem?: ReviewSegment;
   onClick?: () => void;
 };
 export default function ReviewCard({
   event,
-  currentTime,
+  activeReviewItem,
   onClick,
 }: ReviewCardProps) {
   const { t } = useTranslation(["components/dialog"]);
@@ -57,12 +58,6 @@ export default function ReviewCard({
       : t("time.formattedTimestampHourMinute.12hour", { ns: "common" }),
     config?.ui.timezone,
   );
-  const isSelected = useMemo(
-    () =>
-      event.start_time <= currentTime &&
-      (event.end_time ?? Date.now() / 1000) >= currentTime,
-    [event, currentTime],
-  );
 
   const [optionsOpen, setOptionsOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -139,7 +134,12 @@ export default function ReviewCard({
       />
       <img
         ref={imgRef}
-        className={`size-full rounded-lg ${isSelected ? "outline outline-[3px] outline-offset-1 outline-selected" : ""} ${imgLoaded ? "visible" : "invisible"}`}
+        className={cn(
+          "size-full rounded-lg",
+          activeReviewItem?.id == event.id &&
+            "outline outline-[3px] outline-offset-1 outline-selected",
+          imgLoaded ? "visible" : "invisible",
+        )}
         src={`${baseUrl}${event.thumb_path.replace("/media/frigate/", "")}`}
         loading={isSafari ? "eager" : "lazy"}
         style={

web/src/views/recording/RecordingView.tsx

@@ -678,10 +678,12 @@ export function RecordingView({
                   : Math.max(1, getCameraAspect(mainCamera) ?? 0),
               }}
             >
-              <GenAISummaryDialog
+              {isDesktop && (
-                review={activeReviewItem}
+                <GenAISummaryDialog
-                onOpen={onAnalysisOpen}
+                  review={activeReviewItem}
-              />
+                  onOpen={onAnalysisOpen}
+                />
+              )}
 
               <DynamicVideoPlayer
                 className={grow}
@@ -773,12 +775,14 @@ export function RecordingView({
           }
           timeRange={timeRange}
           mainCameraReviewItems={mainCameraReviewItems}
+          activeReviewItem={activeReviewItem}
           currentTime={currentTime}
           exportRange={exportMode == "timeline" ? exportRange : undefined}
           setCurrentTime={setCurrentTime}
           manuallySetCurrentTime={manuallySetCurrentTime}
           setScrubbing={setScrubbing}
           setExportRange={setExportRange}
+          onAnalysisOpen={onAnalysisOpen}
         />
       </div>
     </div>
@@ -792,12 +796,14 @@ type TimelineProps = {
   timelineType: TimelineType;
   timeRange: TimeRange;
   mainCameraReviewItems: ReviewSegment[];
+  activeReviewItem?: ReviewSegment;
   currentTime: number;
   exportRange?: TimeRange;
   setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
   manuallySetCurrentTime: (time: number, force: boolean) => void;
   setScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
   setExportRange: (range: TimeRange) => void;
+  onAnalysisOpen: (open: boolean) => void;
 };
 function Timeline({
   contentRef,
@@ -806,12 +812,14 @@ function Timeline({
   timelineType,
   timeRange,
   mainCameraReviewItems,
+  activeReviewItem,
   currentTime,
   exportRange,
   setCurrentTime,
   manuallySetCurrentTime,
   setScrubbing,
   setExportRange,
+  onAnalysisOpen,
 }: TimelineProps) {
   const { t } = useTranslation(["views/events"]);
   const internalTimelineRef = useRef<HTMLDivElement>(null);
@@ -889,12 +897,17 @@ function Timeline({
 
   return (
     <div
-      className={`${
+      className={cn(
+        "relative",
         isDesktop
           ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} no-scrollbar overflow-y-auto`
-          : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : "landscape:w-[175px]"} `
+          : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : "landscape:w-[175px]"}`,
-      } relative`}
+      )}
     >
+      {isMobile && (
+        <GenAISummaryDialog review={activeReviewItem} onOpen={onAnalysisOpen} />
+      )}
+
       <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" ? (
@@ -946,7 +959,7 @@ function Timeline({
                   <ReviewCard
                     key={review.id}
                     event={review}
-                    currentTime={currentTime}
+                    activeReviewItem={activeReviewItem}
                     onClick={() => {
                       manuallySetCurrentTime(
                         review.start_time - REVIEW_PADDING,