add custom validation and use it for ffmpeg input roles

web/public/locales/en/config/validation.json

@@ -16,5 +16,6 @@
   "format": "Invalid format",
   "additionalProperties": "Unknown property is not allowed",
   "oneOf": "Must match exactly one of the allowed schemas",
-  "anyOf": "Must match at least one of the allowed schemas"
+  "anyOf": "Must match at least one of the allowed schemas",
+  "ffmpeg.inputs.rolesUnique": "Each role can only be assigned to one input stream."
 }

web/src/components/config-form/ConfigForm.tsx

@@ -1,7 +1,7 @@
 // ConfigForm - Main RJSF form wrapper component
 import Form from "@rjsf/shadcn";
 import validator from "@rjsf/validator-ajv8";
-import type { RJSFSchema, UiSchema } from "@rjsf/utils";
+import type { FormValidation, RJSFSchema, UiSchema } from "@rjsf/utils";
 import type { IChangeEvent } from "@rjsf/core";
 import { frigateTheme } from "./theme";
 import { transformSchema } from "@/lib/config-schema";
@@ -182,6 +182,11 @@ export interface ConfigFormProps {
   formContext?: ConfigFormContext;
   /** i18n namespace for field labels */
   i18nNamespace?: string;
+  /** Optional custom validation */
+  customValidate?: (
+    formData: unknown,
+    errors: FormValidation,
+  ) => FormValidation;
 }
 
 export function ConfigForm({
@@ -202,6 +207,7 @@ export function ConfigForm({
   liveValidate = true,
   formContext,
   i18nNamespace,
+  customValidate,
 }: ConfigFormProps) {
   const { t, i18n } = useTranslation([
     i18nNamespace || "common",
@@ -319,6 +325,7 @@ export function ConfigForm({
         liveValidate={liveValidate}
         formContext={extendedFormContext}
         transformErrors={errorTransformer}
+        customValidate={customValidate}
         {...frigateTheme}
       />
     </div>

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

@@ -0,0 +1,47 @@
+import type { FormValidation } from "@rjsf/utils";
+import type { TFunction } from "i18next";
+import { isJsonObject } from "@/lib/utils";
+import type { JsonObject } from "@/types/configForm";
+
+export function validateFfmpegInputRoles(
+  formData: unknown,
+  errors: FormValidation,
+  t: TFunction,
+): FormValidation {
+  if (!isJsonObject(formData as JsonObject)) {
+    return errors;
+  }
+
+  const inputs = (formData as JsonObject).inputs;
+  if (!Array.isArray(inputs)) {
+    return errors;
+  }
+
+  const roleCounts = new Map<string, number>();
+  inputs.forEach((input) => {
+    if (!isJsonObject(input) || !Array.isArray(input.roles)) {
+      return;
+    }
+    input.roles.forEach((role) => {
+      if (typeof role !== "string") {
+        return;
+      }
+      roleCounts.set(role, (roleCounts.get(role) || 0) + 1);
+    });
+  });
+
+  const hasDuplicates = Array.from(roleCounts.values()).some(
+    (count) => count > 1,
+  );
+
+  if (hasDuplicates) {
+    const inputsErrors = errors.inputs as {
+      addError?: (message: string) => void;
+    };
+    inputsErrors?.addError?.(
+      t("ffmpeg.inputs.rolesUnique", { ns: "config/validation" }),
+    );
+  }
+
+  return errors;
+}

web/src/components/config-form/section-validations/index.ts

@@ -0,0 +1,26 @@
+import type { FormValidation } from "@rjsf/utils";
+import type { TFunction } from "i18next";
+import { validateFfmpegInputRoles } from "./ffmpeg";
+
+export type SectionValidation = (
+  formData: unknown,
+  errors: FormValidation,
+) => FormValidation;
+
+type SectionValidationOptions = {
+  sectionPath: string;
+  level: "global" | "camera";
+  t: TFunction;
+};
+
+export function getSectionValidation({
+  sectionPath,
+  level,
+  t,
+}: SectionValidationOptions): SectionValidation | undefined {
+  if (sectionPath === "ffmpeg" && level === "camera") {
+    return (formData, errors) => validateFfmpegInputRoles(formData, errors, t);
+  }
+
+  return undefined;
+}

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

@@ -10,7 +10,8 @@ import sectionRenderers, {
   RendererComponent,
 } from "@/components/config-form/sectionExtras/registry";
 import { ConfigForm } from "../ConfigForm";
-import type { UiSchema } from "@rjsf/utils";
+import type { FormValidation, UiSchema } from "@rjsf/utils";
+import { getSectionValidation } from "../section-validations";
 import {
   useConfigOverride,
   normalizeConfigValue,
@@ -56,6 +57,11 @@ export interface SectionConfig {
   uiSchema?: UiSchema;
   /** Optional per-section renderers usable by FieldTemplate `ui:before`/`ui:after` */
   renderers?: Record<string, RendererComponent>;
+  /** Optional custom validation for section data */
+  customValidate?: (
+    formData: unknown,
+    errors: FormValidation,
+  ) => FormValidation;
 }
 
 export interface BaseSectionProps {
@@ -90,13 +96,6 @@ export interface CreateSectionOptions {
   defaultConfig: SectionConfig;
 }
 
-/**
- * Factory function to create reusable config section components
- */
-export function createConfigSection({
-  sectionPath,
-  defaultConfig,
-}: CreateSectionOptions) {
 const cameraUpdateTopicMap: Record<string, string> = {
   detect: "detect",
   record: "record",
@@ -119,7 +118,11 @@ export function createConfigSection({
   ui: "ui",
 };
 
-  const ConfigSection = function ConfigSection({
+export type ConfigSectionProps = BaseSectionProps & CreateSectionOptions;
+
+export function ConfigSection({
+  sectionPath,
+  defaultConfig,
   level,
   cameraName,
   showOverrideIndicator = true,
@@ -131,7 +134,7 @@ export function createConfigSection({
   collapsible = false,
   defaultCollapsed = false,
   showTitle,
-  }: BaseSectionProps) {
+}: ConfigSectionProps) {
   const { t, i18n } = useTranslation([
     level === "camera" ? "config/cameras" : "config/global",
     "config/cameras",
@@ -152,7 +155,6 @@ export function createConfigSection({
         ? `config/cameras/${cameraName}/${cameraUpdateTopicMap[sectionPath]}`
         : undefined
       : `config/${sectionPath}`;
-
   // Default: show title for camera level (since it might be collapsible), hide for global
   const shouldShowTitle = showTitle ?? level === "camera";
 
@@ -180,7 +182,7 @@ export function createConfigSection({
     }
 
     return get(config, sectionPath) || {};
-    }, [config, level, cameraName]);
+  }, [config, level, cameraName, sectionPath]);
 
   const sanitizeSectionData = useCallback(
     (data: ConfigSectionData) => {
@@ -336,7 +338,6 @@ export function createConfigSection({
         level === "camera" && cameraName
           ? `cameras.${cameraName}.${sectionPath}`
           : sectionPath;
-
       const rawData = sanitizeSectionData(rawFormData);
       const overrides = buildOverrides(pendingData, rawData, schemaDefaults);
 
@@ -352,7 +353,6 @@ export function createConfigSection({
       //     [basePath]: overrides,
       //   },
       // });
-
       // log save to console for debugging
       console.log("Saved config data:", {
         [basePath]: overrides,
@@ -409,6 +409,7 @@ export function createConfigSection({
       setIsSaving(false);
     }
   }, [
+    sectionPath,
     pendingData,
     level,
     cameraName,
@@ -431,9 +432,7 @@ export function createConfigSection({
       const basePath =
         level === "camera" && cameraName
           ? `cameras.${cameraName}.${sectionPath}`
-            : sectionPath;
+          : sectionPath; // const configData = level === "global" ? schemaDefaults : "";
-
-        // const configData = level === "global" ? schemaDefaults : "";
 
       // await axios.put("config/set", {
       //   requires_restart: requiresRestart ? 0 : 1,
@@ -454,7 +453,6 @@ export function createConfigSection({
           requires_restart: requiresRestart ? 0 : 1,
         },
       );
-
       toast.success(
         t("toast.resetSuccess", {
           ns: "views/settings",
@@ -475,7 +473,44 @@ export function createConfigSection({
         }),
       );
     }
-    }, [level, cameraName, requiresRestart, t, refreshConfig, updateTopic]);
+  }, [
+    sectionPath,
+    level,
+    cameraName,
+    requiresRestart,
+    t,
+    refreshConfig,
+    updateTopic,
+  ]);
+
+  const sectionValidation = useMemo(
+    () => getSectionValidation({ sectionPath, level, t }),
+    [sectionPath, level, t],
+  );
+
+  const customValidate = useMemo(() => {
+    const validators: Array<
+      (formData: unknown, errors: FormValidation) => FormValidation
+    > = [];
+
+    if (sectionConfig.customValidate) {
+      validators.push(sectionConfig.customValidate);
+    }
+
+    if (sectionValidation) {
+      validators.push(sectionValidation);
+    }
+
+    if (validators.length === 0) {
+      return undefined;
+    }
+
+    return (formData: unknown, errors: FormValidation) =>
+      validators.reduce(
+        (currentErrors, validatorFn) => validatorFn(formData, currentErrors),
+        errors,
+      );
+  }, [sectionConfig.customValidate, sectionValidation]);
 
   if (!sectionSchema) {
     return null;
@@ -519,6 +554,7 @@ export function createConfigSection({
         readonly={readonly}
         showSubmit={false}
         i18nNamespace={configNamespace}
+        customValidate={customValidate}
         formContext={{
           level,
           cameraName,
@@ -613,8 +649,7 @@ export function createConfigSection({
                   </Badge>
                 )}
               </div>
-                {((level === "camera" && isOverridden) ||
+              {((level === "camera" && isOverridden) || level === "global") && (
-                  level === "global") && (
                 <Button
                   variant="ghost"
                   size="sm"
@@ -654,9 +689,7 @@ export function createConfigSection({
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-3">
               <Heading as="h4">{title}</Heading>
-                {showOverrideIndicator &&
+              {showOverrideIndicator && level === "camera" && isOverridden && (
-                  level === "camera" &&
-                  isOverridden && (
                 <Badge variant="secondary" className="text-xs">
                   {t("overridden", {
                     ns: "common",
@@ -725,7 +758,4 @@ export function createConfigSection({
       {sectionContent}
     </div>
   );
-  };
-
-  return ConfigSection;
 }