ONVIF refactor (#22629)

* add profile support and decouple relative move from autotracking

* add drag to zoom

* docs

* add profile selection to UI

* dynamically update onvif config

* ui tweak

* docs

* docs tweak

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

@@ -3,20 +3,12 @@ import type { SectionConfigOverrides } from "./types";
 const onvif: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/cameras#setting-up-camera-ptz-controls",
-    restartRequired: [
-      "host",
-      "port",
-      "user",
-      "password",
-      "tls_insecure",
-      "ignore_time_mismatch",
-      "autotracking.calibrate_on_startup",
-    ],
     fieldOrder: [
       "host",
       "port",
       "user",
       "password",
+      "profile",
       "tls_insecure",
       "ignore_time_mismatch",
       "autotracking",
@@ -27,10 +19,14 @@ const onvif: SectionConfigOverrides = {
     ],
     advancedFields: ["tls_insecure", "ignore_time_mismatch"],
     overrideFields: [],
+    restartRequired: ["autotracking.calibrate_on_startup"],
     uiSchema: {
       host: {
         "ui:options": { size: "sm" },
       },
+      profile: {
+        "ui:widget": "onvifProfile",
+      },
       autotracking: {
         required_zones: {
           "ui:widget": "zoneNames",

web/src/components/config-form/theme/frigateTheme.ts

@@ -29,6 +29,7 @@ import { TimezoneSelectWidget } from "./widgets/TimezoneSelectWidget";
 import { CameraPathWidget } from "./widgets/CameraPathWidget";
 import { OptionalFieldWidget } from "./widgets/OptionalFieldWidget";
 import { SemanticSearchModelWidget } from "./widgets/SemanticSearchModelWidget";
+import { OnvifProfileWidget } from "./widgets/OnvifProfileWidget";
 
 import { FieldTemplate } from "./templates/FieldTemplate";
 import { ObjectFieldTemplate } from "./templates/ObjectFieldTemplate";
@@ -79,6 +80,7 @@ export const frigateTheme: FrigateTheme = {
     timezoneSelect: TimezoneSelectWidget,
     optionalField: OptionalFieldWidget,
     semanticSearchModel: SemanticSearchModelWidget,
+    onvifProfile: OnvifProfileWidget,
   },
   templates: {
     FieldTemplate: FieldTemplate as React.ComponentType<FieldTemplateProps>,

web/src/components/config-form/theme/widgets/OnvifProfileWidget.tsx

@@ -0,0 +1,84 @@
+import type { WidgetProps } from "@rjsf/utils";
+import useSWR from "swr";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ConfigFormContext } from "@/types/configForm";
+import type { CameraPtzInfo } from "@/types/ptz";
+import { getSizedFieldClassName } from "../utils";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { cn } from "@/lib/utils";
+
+const AUTO_VALUE = "__auto__";
+
+export function OnvifProfileWidget(props: WidgetProps) {
+  const { id, value, disabled, readonly, onChange, schema, options } = props;
+  const { t } = useTranslation(["views/settings"]);
+
+  const formContext = props.registry?.formContext as
+    | ConfigFormContext
+    | undefined;
+  const cameraName = formContext?.cameraName;
+  const isCameraLevel = formContext?.level === "camera";
+  const hasOnvifHost = !!formContext?.fullCameraConfig?.onvif?.host;
+
+  const { data: ptzInfo } = useSWR<CameraPtzInfo>(
+    isCameraLevel && cameraName && hasOnvifHost
+      ? `${cameraName}/ptz/info`
+      : null,
+    {
+      // ONVIF may not be initialized yet when the settings page loads,
+      // so retry until profiles become available
+      refreshInterval: (data) =>
+        data?.profiles && data.profiles.length > 0 ? 0 : 5000,
+    },
+  );
+
+  const profiles = ptzInfo?.profiles ?? [];
+  const fieldClassName = getSizedFieldClassName(options, "md");
+  const hasProfiles = profiles.length > 0;
+  const waiting = isCameraLevel && !!cameraName && hasOnvifHost && !hasProfiles;
+
+  const selected = value ?? AUTO_VALUE;
+
+  if (waiting) {
+    return (
+      <div className={cn("flex items-center gap-2", fieldClassName)}>
+        <ActivityIndicator className="size-4" />
+        <span className="text-sm text-muted-foreground">
+          {t("onvif.profileLoading")}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <Select
+      value={String(selected)}
+      onValueChange={(val) => {
+        onChange(val === AUTO_VALUE ? null : val);
+      }}
+      disabled={disabled || readonly}
+    >
+      <SelectTrigger id={id} className={cn("text-left", fieldClassName)}>
+        <SelectValue placeholder={schema.title || "Select..."} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={AUTO_VALUE}>{t("onvif.profileAuto")}</SelectItem>
+        {profiles.map((p) => (
+          <SelectItem key={p.token} value={p.token}>
+            {p.name !== p.token ? `${p.name} (${p.token})` : p.token}
+          </SelectItem>
+        ))}
+        {!hasProfiles && value && value !== AUTO_VALUE && (
+          <SelectItem value={String(value)}>{String(value)}</SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}

web/src/components/overlay/PtzControlPanel.tsx

@@ -284,7 +284,9 @@ export default function PtzControlPanel({
             <p>
               {clickOverlay
                 ? t("ptz.move.clickMove.disable")
-                : t("ptz.move.clickMove.enable")}
+                : ptz?.features?.includes("zoom-r")
+                  ? t("ptz.move.clickMove.enableWithZoom")
+                  : t("ptz.move.clickMove.enable")}
             </p>
           </TooltipContent>
         </Tooltip>