Miscellaneous fixes (#22924)

* apply annotation offset to frigate+ submission frame time

* fix broken docs links with hash fragments that resolve wrong on reload

* undo

* use recording snapshot for frigate+ frame submission from VideoControls

rather than a canvas grab/paint, which may not always align with an ffmpeg snapshot due to keyframes

* add more docs links

- display docs link for main sections on collapsible fields

* dialog button consistency

web/public/locales/en/components/player.json

@@ -4,7 +4,8 @@
   "noPreviewFoundFor": "No Preview Found for {{cameraName}}",
   "submitFrigatePlus": {
     "title": "Submit this frame to Frigate+?",
-    "submit": "Submit"
+    "submit": "Submit",
+    "previewError": "Could not load snapshot preview. The recording may not be available at this time."
   },
   "livePlayerRequiredIOSVersion": "iOS 17.1 or greater is required for this live stream type.",
   "streamOffline": {

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

@@ -31,6 +31,8 @@ const ffmpeg: SectionConfigOverrides = {
       "inputs.output_args": "/configuration/ffmpeg_presets#output-args-presets",
       "output_args.record": "/configuration/ffmpeg_presets#output-args-presets",
       "inputs.roles": "/configuration/cameras/#setting-up-camera-inputs",
+      apple_compatibility:
+        "/configuration/camera_specific#h265-cameras-via-safari",
     },
     restartRequired: [],
     fieldOrder: [

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

@@ -27,10 +27,12 @@ const lpr: SectionConfigOverrides = {
     ],
     fieldDocs: {
       enhancement: "/configuration/license_plate_recognition#enhancement",
+      debug_save_plates:
+        "/configuration/license_plate_recognition/#how-do-i-debug-lpr-issues",
     },
     restartRequired: [],
     fieldOrder: ["enabled", "min_area", "enhancement", "expire_time"],
-    hiddenFields: [],
+    hiddenFields: ["expire_time"],
     advancedFields: ["expire_time", "enhancement"],
     overrideFields: ["enabled", "min_area", "enhancement"],
   },

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

@@ -3,6 +3,11 @@ import type { SectionConfigOverrides } from "./types";
 const onvif: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/cameras#setting-up-camera-ptz-controls",
+    fieldDocs: {
+      autotracking: "/configuration/autotracking",
+      "autotracking.calibrate_on_startup":
+        "/configuration/autotracking#calibration",
+    },
     fieldOrder: [
       "host",
       "port",

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

@@ -45,6 +45,10 @@ const review: SectionConfigOverrides = {
     fieldDocs: {
       "alerts.labels": "/configuration/review/#alerts-and-detections",
       "detections.labels": "/configuration/review/#alerts-and-detections",
+      genai: "/configuration/genai/genai_review",
+      "genai.image_source": "/configuration/genai/genai_review#image-source",
+      "genai.additional_concerns":
+        "/configuration/genai/genai_review#additional-concerns",
     },
     restartRequired: [],
     fieldOrder: ["alerts", "detections", "genai", "genai.enabled"],

web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx

@@ -9,11 +9,13 @@ import {
 import { Children, useState, useEffect, useRef } from "react";
 import type { ReactNode } from "react";
 import RestartRequiredIndicator from "@/components/indicators/RestartRequiredIndicator";
-import { LuChevronDown, LuChevronRight } from "react-icons/lu";
+import { LuChevronDown, LuChevronRight, LuExternalLink } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { getTranslatedLabel } from "@/utils/i18n";
 import { requiresRestartForFieldPath } from "@/utils/configUtil";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 import { ConfigFormContext } from "@/types/configForm";
 import {
   buildTranslationPath,
@@ -178,6 +180,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     "views/settings",
     "common",
   ]);
+  const { getLocaleDocUrl } = useDocDomain();
   const objectRequiresRestart = requiresRestartForFieldPath(
     fieldPath,
     restartRequired,
@@ -300,6 +303,17 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     schemaDescription;
   inferredDescription = inferredDescription ?? fallbackDescription;
 
+  const pathStringSegments =
+    path?.filter((segment): segment is string => typeof segment === "string") ??
+    [];
+  const fieldDocsKey = translationPath || pathStringSegments.join(".");
+  const fieldDocsPath = fieldDocsKey
+    ? formContext?.fieldDocs?.[fieldDocsKey]
+    : undefined;
+  const fieldDocsUrl = fieldDocsPath
+    ? getLocaleDocUrl(fieldDocsPath)
+    : undefined;
+
   const renderGroupedFields = (items: (typeof properties)[number][]) => {
     if (!items.length) {
       return null;
@@ -466,6 +480,20 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
                     {inferredDescription}
                   </p>
                 )}
+                {fieldDocsUrl && (
+                  <div className="mt-1 flex items-center text-xs text-primary-variant">
+                    <Link
+                      to={fieldDocsUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {t("readTheDocumentation", { ns: "common" })}
+                      <LuExternalLink className="ml-2 inline-flex size-3" />
+                    </Link>
+                  </div>
+                )}
               </div>
               {isOpen ? (
                 <LuChevronDown className="h-4 w-4 shrink-0" />

web/src/components/overlay/DebugReplayDialog.tsx

@@ -113,18 +113,19 @@ export function DebugReplayContent({
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
 
       <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
       >
-        <div
+        <Button
-          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+          className={isDesktop ? "" : "w-full"}
+          aria-label={t("button.cancel", { ns: "common" })}
+          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
-        </div>
+        </Button>
         <Button
           className={isDesktop ? "" : "w-full"}
           variant="select"
-          size="sm"
           disabled={isStarting}
           onClick={() => {
             if (selectedOption === "timeline") {

web/src/components/overlay/ExportDialog.tsx

@@ -1043,20 +1043,21 @@ export function ExportContent({
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
       <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
       >
-        <div
+        <Button
-          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+          className={isDesktop ? "" : "w-full"}
+          aria-label={t("button.cancel", { ns: "common" })}
+          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
-        </div>
+        </Button>
         {activeTab === "export" ? (
           <Button
             className={isDesktop ? "" : "w-full"}
             aria-label={t("export.selectOrExport")}
             variant="select"
-            size="sm"
             disabled={isStartingExport}
             onClick={async () => {
               if (selectedOption == "timeline") {

web/src/components/overlay/ShareTimestampDialog.tsx

@@ -197,24 +197,21 @@ export function ShareTimestampContent({
       {isDesktop && <Separator className="my-4 bg-secondary" />}
 
       <DialogFooter
-        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-4")}
+        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-2")}
       >
         {onCancel && (
-          <button
+          <Button
-            type="button"
+            className={cn(!isDesktop && "w-full")}
-            className={cn(
+            aria-label={t("button.cancel", { ns: "common" })}
-              "cursor-pointer p-2 text-center",
+            variant="outline"
-              !isDesktop && "w-full",
-            )}
             onClick={onCancel}
           >
             {t("button.cancel", { ns: "common" })}
-          </button>
+          </Button>
         )}
         <Button
           className={cn(!isDesktop && "w-full")}
           variant="select"
-          size="sm"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
           {t("recording.shareTimestamp.button", { ns: "components/dialog" })}

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

@@ -636,6 +636,13 @@ export function TrackingDetails({
     return axios.post(`/${event.camera}/plus/${currentTime}`);
   }, [event.camera, currentTime]);
 
+  const getSnapshotUrlForPlus = useCallback(() => {
+    if (!currentTime) {
+      return undefined;
+    }
+    return `${apiHost}api/${event.camera}/recordings/${currentTime}/snapshot.jpg?height=500`;
+  }, [apiHost, event.camera, currentTime]);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -683,6 +690,7 @@ export function TrackingDetails({
                 onTimeUpdate={handleTimeUpdate}
                 onSeekToTime={handleSeekToTime}
                 onUploadFrame={onUploadFrameToPlus}
+                getSnapshotUrl={getSnapshotUrlForPlus}
                 onPlaying={() => setIsVideoLoading(false)}
                 setFullResolution={setFullResolution}
                 toggleFullscreen={toggleFullscreen}
@@ -867,6 +875,7 @@ export function TrackingDetails({
                             getZoneColor={getZoneColor}
                             effectiveTime={effectiveTime}
                             isTimelineActive={isWithinEventRange}
+                            annotationOffset={annotationOffset}
                           />
                         </div>
                       );
@@ -890,6 +899,7 @@ type LifecycleIconRowProps = {
   getZoneColor: (zoneName: string) => number[] | undefined;
   effectiveTime?: number;
   isTimelineActive?: boolean;
+  annotationOffset: number;
 };
 
 function LifecycleIconRow({
@@ -900,6 +910,7 @@ function LifecycleIconRow({
   getZoneColor,
   effectiveTime,
   isTimelineActive,
+  annotationOffset,
 }: LifecycleIconRowProps) {
   const { t } = useTranslation(["views/explore", "components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -1206,7 +1217,7 @@ function LifecycleIconRow({
                         className="cursor-pointer"
                         onSelect={async () => {
                           const resp = await axios.post(
-                            `/${item.camera}/plus/${item.timestamp}`,
+                            `/${item.camera}/plus/${item.timestamp + annotationOffset / 1000}`,
                           );
 
                           if (resp && resp.status == 200) {

web/src/components/player/HlsVideoPlayer.tsx

@@ -53,6 +53,7 @@ type HlsVideoPlayerProps = {
   onSeekToTime?: (timestamp: number, play?: boolean) => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
+  getSnapshotUrl?: (playTime: number) => string | undefined;
   toggleFullscreen?: () => void;
   onError?: (error: RecordingPlayerError) => void;
   isDetailMode?: boolean;
@@ -78,6 +79,7 @@ export default function HlsVideoPlayer({
   onSeekToTime,
   setFullResolution,
   onUploadFrame,
+  getSnapshotUrl,
   toggleFullscreen,
   onError,
   isDetailMode = false,
@@ -331,6 +333,13 @@ export default function HlsVideoPlayer({
               videoRef.current.playbackRate = rate;
             }
           }}
+          getSnapshotUrl={() => {
+            const frameTime = getVideoTime();
+            if (!frameTime || !getSnapshotUrl) {
+              return undefined;
+            }
+            return getSnapshotUrl(frameTime);
+          }}
           onUploadFrame={async () => {
             const frameTime = getVideoTime();
 

web/src/components/player/VideoControls.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
+import { LuFolderX } from "react-icons/lu";
 import { isDesktop, isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
@@ -71,6 +72,7 @@ type VideoControlsProps = {
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
+  getSnapshotUrl?: () => string | undefined;
   toggleFullscreen?: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
@@ -92,6 +94,7 @@ export default function VideoControls({
   onSeek,
   onSetPlaybackRate,
   onUploadFrame,
+  getSnapshotUrl,
   toggleFullscreen,
   containerRef,
 }: VideoControlsProps) {
@@ -288,6 +291,7 @@ export default function VideoControls({
             }
           }}
           onUploadFrame={onUploadFrame}
+          getSnapshotUrl={getSnapshotUrl}
           containerRef={containerRef}
           fullscreen={fullscreen}
         />
@@ -306,6 +310,7 @@ type FrigatePlusUploadButtonProps = {
   onOpen: () => void;
   onClose: () => void;
   onUploadFrame: () => void;
+  getSnapshotUrl?: () => string | undefined;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   fullscreen?: boolean;
 };
@@ -314,12 +319,14 @@ function FrigatePlusUploadButton({
   onOpen,
   onClose,
   onUploadFrame,
+  getSnapshotUrl,
   containerRef,
   fullscreen,
 }: FrigatePlusUploadButtonProps) {
   const { t } = useTranslation(["components/player"]);
 
-  const [videoImg, setVideoImg] = useState<string>();
+  const [previewUrl, setPreviewUrl] = useState<string>();
+  const [previewError, setPreviewError] = useState(false);
 
   return (
     <AlertDialog
@@ -334,6 +341,13 @@ function FrigatePlusUploadButton({
           className="size-5 cursor-pointer"
           onClick={() => {
             onOpen();
+            setPreviewError(false);
+
+            const snapshotUrl = getSnapshotUrl?.();
+            if (snapshotUrl) {
+              setPreviewUrl(snapshotUrl);
+              return;
+            }
 
             if (video) {
               const videoSize = [video.clientWidth, video.clientHeight];
@@ -345,7 +359,7 @@ function FrigatePlusUploadButton({
 
               if (context) {
                 context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
-                setVideoImg(canvas.toDataURL("image/webp"));
+                setPreviewUrl(canvas.toDataURL("image/webp"));
               }
             }
           }}
@@ -362,14 +376,29 @@ function FrigatePlusUploadButton({
         <AlertDialogHeader>
           <AlertDialogTitle>{t("submitFrigatePlus.title")}</AlertDialogTitle>
         </AlertDialogHeader>
-        <img className="aspect-video w-full object-contain" src={videoImg} />
+        {previewError ? (
+          <div className="flex aspect-video w-full flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+            <LuFolderX className="size-12" />
+            <span>{t("submitFrigatePlus.previewError")}</span>
+          </div>
+        ) : (
+          <img
+            className="aspect-video w-full object-contain"
+            src={previewUrl}
+            onError={() => setPreviewError(true)}
+          />
+        )}
         <AlertDialogFooter>
-          <AlertDialogAction className="bg-selected" onClick={onUploadFrame}>
-            {t("submitFrigatePlus.submit")}
-          </AlertDialogAction>
           <AlertDialogCancel>
             {t("button.cancel", { ns: "common" })}
           </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-selected text-white"
+            onClick={onUploadFrame}
+            disabled={previewError}
+          >
+            {t("submitFrigatePlus.submit")}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -181,6 +181,21 @@ export default function DynamicVideoPlayer({
     [camera, controller],
   );
 
+  const getSnapshotUrlForPlus = useCallback(
+    (playTime: number) => {
+      if (!controller) {
+        return undefined;
+      }
+
+      const time = controller.getProgress(playTime);
+      if (!time) {
+        return undefined;
+      }
+      return `${apiHost}api/${camera}/recordings/${time}/snapshot.jpg?height=500`;
+    },
+    [apiHost, camera, controller],
+  );
+
   // state of playback player
 
   const recordingParams = useMemo(
@@ -312,6 +327,7 @@ export default function DynamicVideoPlayer({
           }}
           setFullResolution={setFullResolution}
           onUploadFrame={onUploadFrameToPlus}
+          getSnapshotUrl={getSnapshotUrlForPlus}
           toggleFullscreen={toggleFullscreen}
           onError={(error) => {
             if (error == "stalled" && !isScrubbing) {

web/src/views/settings/TriggerView.tsx

@@ -487,7 +487,7 @@ export default function TriggerView({
           <>
             <div className="mb-5 flex flex-row items-center justify-between gap-2">
               <div className="flex flex-col items-start">
-                <Heading as="h4" className="mb-2">
+                <Heading as="h4" className="mb-1">
                   {t("triggers.management.title")}
                 </Heading>
                 <p className="text-sm text-muted-foreground">
@@ -495,6 +495,17 @@ export default function TriggerView({
                     camera: cameraName,
                   })}
                 </p>
+                <div className="mt-1 flex items-center text-sm text-primary-variant">
+                  <Link
+                    to={getLocaleDocUrl("configuration/semantic_search")}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline"
+                  >
+                    {t("readTheDocumentation", { ns: "common" })}{" "}
+                    <LuExternalLink className="ml-2 inline-flex size-3" />
+                  </Link>
+                </div>
               </div>
               <Button
                 className="flex items-center gap-2 self-start sm:self-auto"