Merge remote-tracking branch 'origin/master' into dev

web/src/components/card/ClassificationCard.tsx

@@ -1,12 +1,20 @@
 import { baseUrl } from "@/api/baseUrl";
 import useContextMenu from "@/hooks/use-contextmenu";
+import { useOverlayState } from "@/hooks/use-overlay-state";
 import { cn } from "@/lib/utils";
 import {
   ClassificationItemData,
   ClassificationThreshold,
   ClassifiedEvent,
 } from "@/types/classification";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isIOS, isMobile, isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import TimeAgo from "../dynamic/TimeAgo";
@@ -16,6 +24,7 @@ import { LuSearch, LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { useNavigate } from "react-router-dom";
 import { HiSquare2Stack } from "react-icons/hi2";
+import scrollIntoView from "scroll-into-view-if-needed";
 import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
 import {
   Dialog,
@@ -85,9 +94,14 @@ export const ClassificationCard = forwardRef<
 
   // interaction
 
+  const cardRef = useRef<HTMLDivElement | null>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
-  useContextMenu(imgRef, () => {
+  useImperativeHandle(ref, () => cardRef.current!);
+
+  // Listen on the whole card, since overlays cover most of the image
+
+  useContextMenu(cardRef, () => {
     onClick(data, true);
   });
 
@@ -101,9 +115,9 @@ export const ClassificationCard = forwardRef<
 
   return (
     <div
-      ref={ref}
+      ref={cardRef}
       className={cn(
-        "relative flex size-full flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        "relative flex size-full select-none flex-col overflow-hidden rounded-lg outline outline-[3px]",
         className,
         selected
           ? "shadow-selected outline-selected"
@@ -117,11 +131,7 @@ export const ClassificationCard = forwardRef<
         }
         onClick(data, isMeta);
       }}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick(data, true);
-      }}
+      style={isIOS ? { WebkitTouchCallout: "none" } : undefined}
     >
       <img
         ref={imgRef}
@@ -130,14 +140,6 @@ export const ClassificationCard = forwardRef<
           imgClassName,
           isMobile && "w-full",
         )}
-        style={
-          isIOS
-            ? {
-                WebkitUserSelect: "none",
-                WebkitTouchCallout: "none",
-              }
-            : undefined
-        }
         draggable={false}
         loading="lazy"
         onLoad={() => setImageLoaded(true)}
@@ -156,7 +158,7 @@ export const ClassificationCard = forwardRef<
         </div>
       )}
       <div className="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-black/60 to-transparent" />
-      <div className="absolute bottom-0 flex w-full select-none flex-row items-center justify-between gap-2 p-2">
+      <div className="absolute bottom-0 flex w-full flex-row items-center justify-between gap-2 p-2">
         <div
           className={cn(
             "flex flex-col items-start text-white",
@@ -216,6 +218,41 @@ export function GroupedClassificationCard({
   const { t } = useTranslation(["views/explore", i18nLibrary]);
   const [detailOpen, setDetailOpen] = useState(false);
 
+  // Explore stores this event in history state so going back can point out the
+  // card the user came from
+
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const [returnEventId, setReturnEventId] = useOverlayState<string | undefined>(
+    "returnEventId",
+  );
+  const [highlighted, setHighlighted] = useState(false);
+
+  useEffect(() => {
+    if (!returnEventId || classifiedEvent?.id !== returnEventId) {
+      return;
+    }
+
+    setReturnEventId(undefined, true);
+    setHighlighted(true);
+  }, [classifiedEvent?.id, returnEventId, setReturnEventId]);
+
+  useEffect(() => {
+    if (!highlighted) {
+      return;
+    }
+
+    if (cardRef.current) {
+      scrollIntoView(cardRef.current, {
+        block: "center",
+        behavior: "smooth",
+        scrollMode: "if-needed",
+      });
+    }
+
+    const timeout = setTimeout(() => setHighlighted(false), 3000);
+    return () => clearTimeout(timeout);
+  }, [highlighted]);
+
   // If the component unmounts while the detail overlay is open, we need to
   // pop the history state that was pushed by useHistoryBack, otherwise it
   // leaves a stale entry that breaks back navigation.
@@ -308,9 +345,10 @@ export function GroupedClassificationCard({
   return (
     <>
       <ClassificationCard
+        ref={cardRef}
         data={bestItem}
         threshold={threshold}
-        selected={selectedItems.includes(bestItem.filename)}
+        selected={highlighted || selectedItems.includes(bestItem.filename)}
         clickable={true}
         i18nLibrary={i18nLibrary}
         count={group.length}
@@ -404,13 +442,19 @@ export function GroupedClassificationCard({
                     isMobile && "absolute right-4 top-8",
                   )}
                 >
-                  <Tooltip>
+                  <Tooltip open={isDesktop ? undefined : false}>
                     <TooltipTrigger asChild>
                       <div
                         className="cursor-pointer"
                         tabIndex={-1}
+                        aria-label={t("details.item.button.viewInExplore", {
+                          ns: "views/explore",
+                        })}
                         onClick={() => {
-                          navigate(`/explore?event_id=${classifiedEvent.id}`);
+                          setReturnEventId(classifiedEvent.id, true);
+                          navigate(`/explore?event_id=${classifiedEvent.id}`, {
+                            state: { canGoBack: true },
+                          });
                         }}
                       >
                         <LuSearch className="size-4 text-secondary-foreground" />

web/src/components/config-form/section-configs/notifications.ts

@@ -8,6 +8,23 @@ const notifications: SectionConfigOverrides = {
     fieldGroups: {},
     hiddenFields: ["enabled_in_config"],
     advancedFields: [],
+    fieldMessages: [
+      {
+        key: "profile-base-notifications-disabled",
+        field: "enabled",
+        messageKey: "configMessages.notifications.profileBaseDisabled",
+        severity: "warning",
+        position: "after",
+        condition: (ctx) =>
+          !!ctx.profileName &&
+          ctx.formData?.enabled === true &&
+          !Object.values(ctx.fullConfig.cameras).some(
+            (camera) =>
+              camera.enabled_in_config &&
+              camera.notifications.enabled_in_config,
+          ),
+      },
+    ],
   },
   global: {
     uiSchema: {

web/src/components/config-form/section-configs/record.ts

@@ -31,6 +31,21 @@ const record: SectionConfigOverrides = {
         },
       },
     ],
+    fieldMessages: [
+      {
+        key: "profile-base-record-disabled",
+        field: "enabled",
+        messageKey: "configMessages.record.profileBaseDisabled",
+        severity: "warning",
+        position: "after",
+        docLink:
+          "/configuration/profiles#why-cant-a-profile-enable-recording-when-its-disabled-in-the-base-config",
+        condition: (ctx) =>
+          !!ctx.profileName &&
+          ctx.formData?.enabled === true &&
+          ctx.fullCameraConfig?.record.enabled_in_config === false,
+      },
+    ],
     fieldDocs: {
       "alerts.pre_capture":
         "/configuration/record#pre-capture-and-post-capture",

web/src/components/config-form/section-configs/types.ts

@@ -8,6 +8,7 @@ export type MessageConditionContext = {
   fullCameraConfig?: CameraConfig;
   level: "global" | "camera";
   cameraName?: string;
+  profileName?: string;
   formData: ConfigSectionData;
 };
 

web/src/components/config-form/sections/BaseSection.tsx

@@ -649,9 +649,10 @@ export function ConfigSection({
           : undefined,
       level: effectiveLevel,
       cameraName,
+      profileName,
       formData: currentFormData as ConfigSectionData,
     };
-  }, [config, currentFormData, effectiveLevel, cameraName]);
+  }, [config, currentFormData, effectiveLevel, cameraName, profileName]);
 
   const { activeMessages, activeFieldMessages } = useConfigMessages(
     sectionConfig.messages,

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

@@ -844,6 +844,7 @@ export function TrackingDetails({
                       <div className="text-sm text-secondary-foreground">
                         <Link
                           to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
+                          state={{ canGoBack: true }}
                           className="text-sm"
                         >
                           {event.data.recognized_license_plate}

web/src/components/timeline/DetailStream.tsx

@@ -727,6 +727,7 @@ function EventList({
                     <div className="text-sm text-secondary-foreground">
                       <Link
                         to={`/explore?recognized_license_plate=${event.data.recognized_license_plate}`}
+                        state={{ canGoBack: true }}
                         className="text-sm"
                       >
                         {event.data.recognized_license_plate}

web/src/components/timeline/EventMenu.tsx

@@ -135,7 +135,9 @@ export default function EventMenu({
             <DropdownMenuItem
               className="cursor-pointer"
               onSelect={() => {
-                navigate(`/explore?event_id=${event.id}`);
+                navigate(`/explore?event_id=${event.id}`, {
+                  state: { canGoBack: true },
+                });
               }}
             >
               {t("details.item.button.viewInExplore")}
@@ -177,6 +179,7 @@ export default function EventMenu({
                   else
                     navigate(
                       `/explore?search_type=similarity&event_id=${event.id}`,
+                      { state: { canGoBack: true } },
                     );
                 }}
               >

web/src/hooks/use-status-messages.ts

@@ -44,8 +44,9 @@ export default function useStatusMessages(): StatusMessage[] {
 
   useEffect(() => {
     if (reindexState) {
-      if (reindexState.status == "indexing") {
-        clearMessages("embeddings-reindex");
+      clearMessages("embeddings-reindex");
+
+      if (reindexState.status === "indexing") {
         addMessage(
           "embeddings-reindex",
           t("stats.reindexingEmbeddings", {
@@ -55,9 +56,12 @@ export default function useStatusMessages(): StatusMessage[] {
             ),
           }),
         );
-      }
-      if (reindexState.status === "completed") {
-        clearMessages("embeddings-reindex");
+      } else if (reindexState.status === "failed") {
+        addMessage(
+          "embeddings-reindex",
+          t("stats.reindexEmbeddingsFailed"),
+          "error",
+        );
       }
     }
   }, [reindexState, addMessage, clearMessages, t]);

web/src/pages/Explore.tsx

@@ -198,7 +198,19 @@ export default function Explore() {
 
     const [url, params] = searchQuery;
 
-    const isAscending = params.sort?.includes("date_asc");
+    // a start_time cursor only works when rows are ordered by start_time,
+    // so every other sort pages by offset
+    const isDateSort =
+      params.sort === "date_asc" ||
+      params.sort === "date_desc" ||
+      (!params.sort && url === "events");
+
+    if (pageIndex > 0 && !isDateSort) {
+      return [
+        url,
+        { ...params, offset: pageIndex * API_LIMIT, limit: API_LIMIT },
+      ];
+    }
 
     if (pageIndex > 0 && previousPageData) {
       const lastDate = previousPageData[previousPageData.length - 1].start_time;
@@ -206,7 +218,8 @@ export default function Explore() {
         url,
         {
           ...params,
-          [isAscending ? "after" : "before"]: lastDate.toString(),
+          [params.sort === "date_asc" ? "after" : "before"]:
+            lastDate.toString(),
           limit: API_LIMIT,
         },
       ];
@@ -238,10 +251,17 @@ export default function Explore() {
     },
   });
 
-  const searchResults = useMemo(
-    () => (data ? ([] as SearchResult[]).concat(...data) : []),
-    [data],
-  );
+  // offset pages can overlap when results shift between page fetches
+  const searchResults = useMemo(() => {
+    if (!data) return [];
+
+    const seen = new Set<string>();
+    return data.flat().filter((result) => {
+      if (seen.has(result.id)) return false;
+      seen.add(result.id);
+      return true;
+    });
+  }, [data]);
   const isLoadingInitialData = !data && !isValidating;
   const isLoadingMore =
     isLoadingInitialData ||

web/src/types/search.ts

@@ -105,6 +105,7 @@ export type SearchQueryParams = {
   max_speed?: number;
   search_type?: string;
   limit?: number;
+  offset?: number;
   in_progress?: number;
   include_thumbnails?: number;
   query?: string;

web/src/views/search/SearchView.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchResult, SearchSource } from "@/types/search";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isMobileOnly } from "react-device-detect";
+import { isDesktop, isMobileOnly } from "react-device-detect";
 import { LuImage, LuSearchX, LuText } from "react-icons/lu";
 import useSWR from "swr";
 import ExploreView from "../explore/ExploreView";
@@ -32,7 +32,9 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import SearchActionGroup from "@/components/filter/SearchActionGroup";
 import { Trans, useTranslation } from "react-i18next";
 import { use24HourTime } from "@/hooks/use-date-utils";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { IoMdArrowRoundBack } from "react-icons/io";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 
 type SearchViewProps = {
@@ -80,6 +82,10 @@ export default function SearchView({
   });
   const is24Hour = use24HourTime(config);
   const navigate = useNavigate();
+  const location = useLocation();
+
+  // set by in-app links, since an iOS home screen app has no back gesture
+  const canGoBack = location.state?.canGoBack === true;
 
   const { data: exploreEvents } = useSWR<SearchResult[]>(
     (!searchFilter || Object.keys(searchFilter).length === 0) &&
@@ -534,17 +540,39 @@ export default function SearchView({
           isMobileOnly && "mb-2 h-auto flex-wrap gap-2 space-y-0",
         )}
       >
-        {config?.semantic_search?.enabled && (
-          <div className={cn("z-[41] w-full lg:absolute lg:top-0 lg:w-1/3")}>
-            <InputWithTags
-              inputFocused={inputFocused}
-              setInputFocused={setInputFocused}
-              filters={searchFilter ?? {}}
-              setFilters={setSearchFilter}
-              search={search}
-              setSearch={setSearch}
-              allSuggestions={suggestionsValues}
-            />
+        {(canGoBack || config?.semantic_search?.enabled) && (
+          <div
+            className={cn(
+              "z-[41] flex w-full flex-row items-start gap-2 lg:absolute lg:top-0 lg:w-1/3",
+            )}
+          >
+            {canGoBack && (
+              <Button
+                className="flex shrink-0 items-center gap-2.5 rounded-lg"
+                aria-label={t("label.back", { ns: "common" })}
+                onClick={() => navigate(-1)}
+              >
+                <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+                {isDesktop && (
+                  <div className="text-primary">
+                    {t("button.back", { ns: "common" })}
+                  </div>
+                )}
+              </Button>
+            )}
+            {config?.semantic_search?.enabled && (
+              <div className="min-w-0 flex-1">
+                <InputWithTags
+                  inputFocused={inputFocused}
+                  setInputFocused={setInputFocused}
+                  filters={searchFilter ?? {}}
+                  setFilters={setSearchFilter}
+                  search={search}
+                  setSearch={setSearch}
+                  allSuggestions={suggestionsValues}
+                />
+              </div>
+            )}
           </div>
         )}
 

web/src/views/settings/TriggerView.tsx

@@ -558,6 +558,7 @@ export default function TriggerView({
                               </Badge>
                               <Link
                                 to={`/explore?event_id=${trigger_status?.triggers[trigger.name]?.triggering_event_id || ""}`}
+                                state={{ canGoBack: true }}
                                 className={cn(
                                   "flex items-center gap-1.5 text-xs text-muted-foreground",
                                   !trigger_status?.triggers[trigger.name]
@@ -719,6 +720,7 @@ export default function TriggerView({
                             <TableCell>
                               <Link
                                 to={`/explore?event_id=${trigger_status?.triggers[trigger.name]?.triggering_event_id || ""}`}
+                                state={{ canGoBack: true }}
                                 className={cn(
                                   "flex items-center gap-1.5 text-sm",
                                   !trigger_status?.triggers[trigger.name]