Miscellaneous Fixes (0.17 beta) (#21474)

* disable modal on dropdown menu in explore

* add another example case for when classification overrides a sub label

* update ollama docs link

* Improve handling of automatic playback for recordings

* Improve ollama documentation

* Don't fall out when all recording segments exist

* clarify coral docs

* improve initial scroll to active item in detail stream

* i18n fixes

* remove console warning

* detail stream scrolling fixes for HA/iOS

* Improve usability of GenAI summary dialog and make clicking on the description directly open it

* Review card too

* Use empty card with dynamic text for review based on the user's config

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

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

@@ -9,7 +9,11 @@
   "empty": {
     "alert": "There are no alerts to review",
     "detection": "There are no detections to review",
-    "motion": "No motion data found"
+    "motion": "No motion data found",
+    "recordingsDisabled": {
+      "title": "Recordings must be enabled",
+      "description": "Review items can only be created for a camera when recordings are enabled for that camera."
+    }
   },
   "timeline": "Timeline",
   "timeline.aria": "Select timeline",

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

@@ -166,6 +166,9 @@
     "tips": {
       "descriptionSaved": "Successfully saved description",
       "saveDescriptionFailed": "Failed to update the description: {{errorMessage}}"
+    },
+    "title": {
+      "label": "Title"
     }
   },
   "itemMenu": {

web/src/components/card/EmptyCard.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import { Button } from "../ui/button";
 import Heading from "../ui/heading";
 import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
 
 type EmptyCardProps = {
+  className?: string;
   icon: React.ReactNode;
   title: string;
-  description: string;
+  description?: string;
   buttonText?: string;
   link?: string;
 };
 export function EmptyCard({
+  className,
   icon,
   title,
   description,
@@ -18,10 +21,12 @@ export function EmptyCard({
   link,
 }: EmptyCardProps) {
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className={cn("flex flex-col items-center gap-2", className)}>
       {icon}
       <Heading as="h4">{title}</Heading>
-      <div className="mb-3 text-secondary-foreground">{description}</div>
+      {description && (
+        <div className="mb-3 text-secondary-foreground">{description}</div>
+      )}
       {buttonText?.length && (
         <Button size="sm" variant="select">
           <Link to={link ?? "#"}>{buttonText}</Link>

web/src/components/card/ReviewCard.tsx

@@ -39,6 +39,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { LuCircle } from "react-icons/lu";
 import { MdAutoAwesome } from "react-icons/md";
+import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -219,12 +220,14 @@ export default function ReviewCard({
         />
       </div>
       {event.data.metadata?.title && (
-        <div className="flex items-center gap-1.5 rounded bg-secondary/50">
-          <MdAutoAwesome className="size-3 shrink-0 text-primary" />
-          <span className="truncate text-xs text-primary">
-            {event.data.metadata.title}
-          </span>
-        </div>
+        <GenAISummaryDialog review={event}>
+          <div className="flex items-center gap-1.5 rounded bg-secondary/50 hover:underline">
+            <MdAutoAwesome className="size-3 shrink-0 text-primary" />
+            <span className="truncate text-xs text-primary">
+              {event.data.metadata.title}
+            </span>
+          </div>
+        </GenAISummaryDialog>
       )}
     </div>
   );

web/src/components/menu/SearchResultActions.tsx

@@ -195,7 +195,7 @@ export default function SearchResultActions({
         </ContextMenu>
       ) : (
         <>
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <BlurredIconButton aria-label={t("itemMenu.more.aria")}>
                 <FiMoreVertical className="size-5" />

web/src/components/overlay/chip/GenAISummaryChip.tsx

@@ -6,16 +6,15 @@ import {
   ThreatLevel,
   THREAT_LEVEL_LABELS,
 } from "@/types/review";
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { MdAutoAwesome } from "react-icons/md";
 
 type GenAISummaryChipProps = {
   review?: ReviewSegment;
-  onClick: () => void;
 };
-export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
+export function GenAISummaryChip({ review }: GenAISummaryChipProps) {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
@@ -29,7 +28,6 @@ export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
         isDesktop ? "bg-card" : "bg-secondary-foreground",
       )}
-      onClick={onClick}
     >
       <MdAutoAwesome className="shrink-0" />
       <span className="truncate">{review?.data.metadata?.title}</span>
@@ -40,10 +38,12 @@ export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
 type GenAISummaryDialogProps = {
   review?: ReviewSegment;
   onOpen?: (open: boolean) => void;
+  children: React.ReactNode;
 };
 export function GenAISummaryDialog({
   review,
   onOpen,
+  children,
 }: GenAISummaryDialogProps) {
   const { t } = useTranslation(["views/explore"]);
 
@@ -104,7 +104,7 @@ export function GenAISummaryDialog({
   return (
     <Overlay open={open} onOpenChange={setOpen}>
       <Trigger asChild>
-        <GenAISummaryChip review={review} onClick={() => setOpen(true)} />
+        <div>{children}</div>
       </Trigger>
       <Content
         className={cn(
@@ -115,6 +115,10 @@ export function GenAISummaryDialog({
         )}
       >
         {t("aiAnalysis.title")}
+        <div className="text-sm text-primary/40">
+          {t("details.title.label")}
+        </div>
+        <div className="text-sm">{aiAnalysis.title}</div>
         <div className="text-sm text-primary/40">
           {t("details.description.label")}
         </div>

web/src/components/timeline/DetailStream.tsx

@@ -25,10 +25,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Link } from "react-router-dom";
 import { Switch } from "@/components/ui/switch";
 import { useUserPersistence } from "@/hooks/use-user-persistence";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isIOS, isMobile } from "react-device-detect";
 import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
 import { PiSlidersHorizontalBold } from "react-icons/pi";
 import { MdAutoAwesome } from "react-icons/md";
+import { isPWA } from "@/utils/isPWA";
+import { isInIframe } from "@/utils/isIFrame";
+import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
 
 type DetailStreamProps = {
   reviewItems?: ReviewSegment[];
@@ -100,7 +103,25 @@ export default function DetailStream({
     }
   }, [reviewItems, activeReviewId, effectiveTime]);
 
-  // Auto-scroll to current time
+  // Initial scroll to active review (runs immediately when user selects, not during playback)
+  useEffect(() => {
+    if (!scrollRef.current || !activeReviewId || userInteracting || isPlaying)
+      return;
+
+    const element = scrollRef.current.querySelector(
+      `[data-review-id="${activeReviewId}"]`,
+    ) as HTMLElement;
+
+    if (element) {
+      setProgrammaticScroll();
+      scrollIntoView(element, {
+        scrollMode: "if-needed",
+        behavior: isMobile && isIOS && !isPWA && isInIframe ? "auto" : "smooth",
+      });
+    }
+  }, [activeReviewId, setProgrammaticScroll, userInteracting, isPlaying]);
+
+  // Auto-scroll to current time during playback
   useEffect(() => {
     if (!scrollRef.current || userInteracting || !isPlaying) return;
     // Prefer the review whose range contains the effectiveTime. If none
@@ -145,7 +166,8 @@ export default function DetailStream({
           setProgrammaticScroll();
           scrollIntoView(element, {
             scrollMode: "if-needed",
-            behavior: "smooth",
+            behavior:
+              isMobile && isIOS && !isPWA && isInIframe ? "auto" : "smooth",
           });
         }
       }
@@ -417,7 +439,18 @@ function ReviewGroup({
                       {review.data.metadata.title}
                     </TooltipContent>
                   </Tooltip>
-                  <span className="truncate">{review.data.metadata.title}</span>
+                  <GenAISummaryDialog
+                    review={review}
+                    onOpen={(open) => {
+                      if (open) {
+                        onSeek(review.start_time, false);
+                      }
+                    }}
+                  >
+                    <span className="truncate hover:underline">
+                      {review.data.metadata.title}
+                    </span>
+                  </GenAISummaryDialog>
                 </div>
               )}
               <div className="flex flex-row items-center gap-1.5">
@@ -782,21 +815,27 @@ function LifecycleItem({
               <div className="flex flex-col gap-1">
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.score")}
+                    {t("trackingDetails.lifecycleItemDesc.header.score", {
+                      ns: "views/explore",
+                    })}
                   </span>
                   <span className="font-medium text-foreground">{score}</span>
                 </div>
 
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.ratio")}
+                    {t("trackingDetails.lifecycleItemDesc.header.ratio", {
+                      ns: "views/explore",
+                    })}
                   </span>
                   <span className="font-medium text-foreground">{ratio}</span>
                 </div>
 
                 <div className="flex items-start gap-1">
                   <span className="text-muted-foreground">
-                    {t("trackingDetails.lifecycleItemDesc.header.area")}{" "}
+                    {t("trackingDetails.lifecycleItemDesc.header.area", {
+                      ns: "views/explore",
+                    })}{" "}
                     {attributeAreaPx !== undefined &&
                       attributeAreaPct !== undefined && (
                         <span className="text-muted-foreground">
@@ -806,7 +845,7 @@ function LifecycleItem({
                   </span>
                   {areaPx !== undefined && areaPct !== undefined ? (
                     <span className="font-medium text-foreground">
-                      {areaPx} {t("pixels", { ns: "common" })}{" "}
+                      {areaPx} {t("information.pixels", { ns: "common" })}{" "}
                       <span className="text-secondary-foreground">·</span>{" "}
                       {areaPct}%
                     </span>
@@ -819,7 +858,9 @@ function LifecycleItem({
                   attributeAreaPct !== undefined && (
                     <div className="flex items-start gap-1">
                       <span className="text-muted-foreground">
-                        {t("trackingDetails.lifecycleItemDesc.header.area")}{" "}
+                        {t("trackingDetails.lifecycleItemDesc.header.area", {
+                          ns: "views/explore",
+                        })}{" "}
                         {attributeAreaPx !== undefined &&
                           attributeAreaPct !== undefined && (
                             <span className="text-muted-foreground">
@@ -828,7 +869,8 @@ function LifecycleItem({
                           )}
                       </span>
                       <span className="font-medium text-foreground">
-                        {attributeAreaPx} {t("pixels", { ns: "common" })}{" "}
+                        {attributeAreaPx}{" "}
+                        {t("information.pixels", { ns: "common" })}{" "}
                         <span className="text-secondary-foreground">·</span>{" "}
                         {attributeAreaPct}%
                       </span>

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -111,7 +111,7 @@ export function MotionReviewTimeline({
 
   const getRecordingAvailability = useCallback(
     (time: number): boolean | undefined => {
-      if (!noRecordingRanges?.length) return undefined;
+      if (noRecordingRanges == undefined) return undefined;
 
       return !noRecordingRanges.some(
         (range) => time >= range.start_time && time < range.end_time,

web/src/types/card.ts

@@ -0,0 +1,4 @@
+export type EmptyCardData = {
+  title: string;
+  description?: string;
+};

web/src/utils/i18n.ts

@@ -79,9 +79,6 @@ i18n
     parseMissingKeyHandler: (key: string) => {
       const parts = key.split(".");
 
-      // eslint-disable-next-line no-console
-      console.warn(`Missing translation key: ${key}`);
-
       if (parts[0] === "time" && parts[1]?.includes("formattedTimestamp")) {
         // Extract the format type from the last part (12hour, 24hour)
         const formatType = parts[parts.length - 1];

web/src/views/events/EventView.tsx

@@ -56,6 +56,8 @@ import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
+import { EmptyCard } from "@/components/card/EmptyCard";
+import { EmptyCardData } from "@/types/card";
 
 type EventViewProps = {
   reviewItems?: SegmentedReviewData;
@@ -132,6 +134,24 @@ export default function EventView({
     }
   }, [filter, showReviewed, reviewSummary]);
 
+  const emptyCardData: EmptyCardData = useMemo(() => {
+    if (
+      !config ||
+      Object.values(config.cameras).find(
+        (cam) => cam.record.enabled_in_config,
+      ) != undefined
+    ) {
+      return {
+        title: t("empty." + severity.replace(/_/g, " ")),
+      };
+    }
+
+    return {
+      title: t("empty.recordingsDisabled.title"),
+      description: t("empty.recordingsDisabled.description"),
+    };
+  }, [config, severity, t]);
+
   // review interaction
 
   const [selectedReviews, setSelectedReviews] = useState<ReviewSegment[]>([]);
@@ -412,6 +432,7 @@ export default function EventView({
             timeRange={timeRange}
             startTime={startTime}
             loading={severity != severityToggle}
+            emptyCardData={emptyCardData}
             markItemAsReviewed={markItemAsReviewed}
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
@@ -430,6 +451,7 @@ export default function EventView({
             startTime={startTime}
             filter={filter}
             motionOnly={motionOnly}
+            emptyCardData={emptyCardData}
             onOpenRecording={onOpenRecording}
           />
         )}
@@ -455,6 +477,7 @@ type DetectionReviewProps = {
   timeRange: { before: number; after: number };
   startTime?: number;
   loading: boolean;
+  emptyCardData: EmptyCardData;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (
@@ -478,6 +501,7 @@ function DetectionReview({
   timeRange,
   startTime,
   loading,
+  emptyCardData,
   markItemAsReviewed,
   markAllItemsAsReviewed,
   onSelectReview,
@@ -737,10 +761,12 @@ function DetectionReview({
         )}
 
         {!loading && currentItems?.length === 0 && (
-          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
-            <LuFolderCheck className="size-16" />
-            {t("empty." + severity.replace(/_/g, " "))}
-          </div>
+          <EmptyCard
+            className="y-translate-1/2 absolute left-[50%] top-[50%] -translate-x-1/2"
+            title={emptyCardData.title}
+            description={emptyCardData.description}
+            icon={<LuFolderCheck className="size-16" />}
+          />
         )}
 
         <div
@@ -875,6 +901,7 @@ type MotionReviewProps = {
   startTime?: number;
   filter?: ReviewFilter;
   motionOnly?: boolean;
+  emptyCardData: EmptyCardData;
   onOpenRecording: (data: RecordingStartingPoint) => void;
 };
 function MotionReview({
@@ -885,9 +912,9 @@ function MotionReview({
   startTime,
   filter,
   motionOnly = false,
+  emptyCardData,
   onOpenRecording,
 }: MotionReviewProps) {
-  const { t } = useTranslation(["views/events"]);
   const segmentDuration = 30;
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -1080,9 +1107,12 @@ function MotionReview({
 
   if (motionData?.length === 0) {
     return (
-      <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
-        <LuFolderX className="size-16" />
-        {t("empty.motion")}
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <EmptyCard
+          title={emptyCardData.title}
+          description={emptyCardData.description}
+          icon={<LuFolderX className="size-16" />}
+        />
       </div>
     );
   }

web/src/views/recording/RecordingView.tsx

@@ -66,7 +66,10 @@ import {
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 import { DetailStreamProvider } from "@/context/detail-stream-context";
-import { GenAISummaryDialog } from "@/components/overlay/chip/GenAISummaryChip";
+import {
+  GenAISummaryDialog,
+  GenAISummaryChip,
+} from "@/components/overlay/chip/GenAISummaryChip";
 
 const DATA_REFRESH_TIME = 600000; // 10 minutes
 
@@ -309,10 +312,18 @@ export function RecordingView({
           currentTimeRange.after <= currentTime &&
           currentTimeRange.before >= currentTime
         ) {
-          mainControllerRef.current?.seekToTimestamp(
-            currentTime,
-            mainControllerRef.current.isPlaying(),
-          );
+          if (mainControllerRef.current != undefined) {
+            let shouldPlayback = true;
+
+            if (timelineType == "detail") {
+              shouldPlayback = mainControllerRef.current.isPlaying();
+            }
+
+            mainControllerRef.current.seekToTimestamp(
+              currentTime,
+              shouldPlayback,
+            );
+          }
         } else {
           updateSelectedSegment(currentTime, true);
         }
@@ -731,7 +742,9 @@ export function RecordingView({
                   <GenAISummaryDialog
                     review={activeReviewItem}
                     onOpen={onAnalysisOpen}
-                  />
+                  >
+                    <GenAISummaryChip review={activeReviewItem} />
+                  </GenAISummaryDialog>
                 )}
 
                 <DynamicVideoPlayer
@@ -989,7 +1002,9 @@ function Timeline({
       )}
     >
       {isMobile && timelineType == "timeline" && (
-        <GenAISummaryDialog review={activeReviewItem} onOpen={onAnalysisOpen} />
+        <GenAISummaryDialog review={activeReviewItem} onOpen={onAnalysisOpen}>
+          <GenAISummaryChip review={activeReviewItem} />
+        </GenAISummaryDialog>
       )}
 
       {timelineType != "detail" && (