refactor ffmpeg section for readability

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

@@ -25,7 +25,8 @@
   "ffmpeg": {
     "inputs": {
       "rolesUnique": "Each role can only be assigned to one input stream.",
-      "detectRequired": "At least one input stream must be assigned the 'detect' role."
+      "detectRequired": "At least one input stream must be assigned the 'detect' role.",
+      "hwaccelDetectOnly": "Only the input stream with the detect role can define hardware acceleration arguments."
     }
   }
 }

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

@@ -22,7 +22,7 @@
     "integrations": "Integrations",
     "cameras": "Camera configuration",
     "ui": "UI",
-    "profileSettings": "Profile Settings",
+    "profileSettings": "Profile settings",
     "globalDetect": "Object detection",
     "globalRecording": "Recording",
     "globalSnapshots": "Snapshots",
@@ -1247,9 +1247,13 @@
     "ffmpegArgs": {
       "preset": "Preset",
       "manual": "Manual arguments",
+      "inherit": "Inherit from camera setting",
       "selectPreset": "Select preset",
       "manualPlaceholder": "Enter FFmpeg arguments"
     },
+    "cameraInputs": {
+      "itemTitle": "Stream {{index}}: {{path}}"
+    },
     "restartRequiredField": "Restart required",
     "restartRequiredFooter": "Configuration changed - Restart required",
     "sections": {
@@ -1341,7 +1345,8 @@
     },
     "timestamp_style": {
       "title": "Timestamp Settings"
-    }
+    },
+    "searchPlaceholder": "Search..."
   },
   "globalConfig": {
     "title": "Global Configuration",

web/src/components/card/SettingsGroupCard.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { Label } from "../ui/label";
 
 export const SPLIT_ROW_CLASS_NAME =
-  "space-y-2 md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0";
+  "space-y-2 md:grid md:grid-cols-[minmax(14rem,24rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0";
 export const DESCRIPTION_CLASS_NAME = "text-sm text-muted-foreground";
 export const CONTROL_COLUMN_CLASS_NAME = "w-full md:max-w-2xl";
 

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

@@ -7,11 +7,15 @@ const arrayAsTextWidget = {
   },
 };
 
-const ffmpegArgsWidget = (presetField: string) => ({
+const ffmpegArgsWidget = (
+  presetField: string,
+  extraOptions?: Record<string, unknown>,
+) => ({
   "ui:widget": "FfmpegArgsWidget",
   "ui:options": {
     suppressMultiSchema: true,
     ffmpegPresetField: presetField,
+    ...extraOptions,
   },
 });
 
@@ -23,35 +27,36 @@ const ffmpeg: SectionConfigOverrides = {
       "inputs.hwaccel_args": "/configuration/ffmpeg_presets#hwaccel-presets",
       input_args: "/configuration/ffmpeg_presets#input-args-presets",
       "inputs.input_args": "/configuration/ffmpeg_presets#input-args-presets",
+      output_args: "/configuration/ffmpeg_presets#output-args-presets",
+      "inputs.output_args": "/configuration/ffmpeg_presets#output-args-presets",
       "output_args.record": "/configuration/ffmpeg_presets#output-args-presets",
     },
     restartRequired: [],
     fieldOrder: [
       "inputs",
-      "path",
       "global_args",
-      "hwaccel_args",
       "input_args",
+      "hwaccel_args",
       "output_args",
+      "path",
       "retry_interval",
       "apple_compatibility",
       "gpu",
     ],
     hiddenFields: [],
     advancedFields: [
+      "path",
       "global_args",
-      "hwaccel_args",
-      "input_args",
-      "output_args",
       "retry_interval",
       "apple_compatibility",
       "gpu",
     ],
     overrideFields: [
+      "inputs",
       "path",
       "global_args",
-      "hwaccel_args",
       "input_args",
+      "hwaccel_args",
       "output_args",
       "retry_interval",
       "apple_compatibility",
@@ -73,6 +78,7 @@ const ffmpeg: SectionConfigOverrides = {
         },
       },
       inputs: {
+        "ui:field": "CameraInputsField",
         items: {
           path: {
             "ui:options": { size: "full" },
@@ -83,8 +89,15 @@ const ffmpeg: SectionConfigOverrides = {
           global_args: {
             "ui:widget": "hidden",
           },
-          hwaccel_args: ffmpegArgsWidget("hwaccel_args"),
+          hwaccel_args: ffmpegArgsWidget("hwaccel_args", {
-          input_args: ffmpegArgsWidget("input_args"),
+            allowInherit: true,
+            hideDescription: true,
+            showArrayItemDescription: true,
+          }),
+          input_args: ffmpegArgsWidget("input_args", {
+            hideDescription: true,
+            showArrayItemDescription: true,
+          }),
           output_args: {
             items: {
               detect: arrayAsTextWidget,
@@ -107,9 +120,9 @@ const ffmpeg: SectionConfigOverrides = {
       "gpu",
     ],
     fieldOrder: [
+      "hwaccel_args",
       "path",
       "global_args",
-      "hwaccel_args",
       "input_args",
       "output_args",
       "retry_interval",
@@ -120,6 +133,7 @@ const ffmpeg: SectionConfigOverrides = {
       "global_args",
       "input_args",
       "output_args",
+      "path",
       "retry_interval",
       "apple_compatibility",
       "gpu",

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

@@ -3,6 +3,18 @@ import type { TFunction } from "i18next";
 import { isJsonObject } from "@/lib/utils";
 import type { JsonObject } from "@/types/configForm";
 
+function hasValue(value: unknown): boolean {
+  if (value === null || value === undefined || value === "") {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+
+  return true;
+}
+
 export function validateFfmpegInputRoles(
   formData: unknown,
   errors: FormValidation,
@@ -19,6 +31,7 @@ export function validateFfmpegInputRoles(
 
   const roleCounts = new Map<string, number>();
   let hasDetect = false;
+  let hasInvalidHwaccel = false;
   inputs.forEach((input) => {
     if (!isJsonObject(input) || !Array.isArray(input.roles)) {
       return;
@@ -31,6 +44,8 @@ export function validateFfmpegInputRoles(
     });
     if (input.roles.includes("detect")) {
       hasDetect = true;
+    } else if (hasValue(input.hwaccel_args)) {
+      hasInvalidHwaccel = true;
     }
   });
 
@@ -56,5 +71,14 @@ export function validateFfmpegInputRoles(
     );
   }
 
+  if (hasInvalidHwaccel) {
+    const inputsErrors = errors.inputs as {
+      addError?: (message: string) => void;
+    };
+    inputsErrors?.addError?.(
+      t("ffmpeg.inputs.hwaccelDetectOnly", { ns: "config/validation" }),
+    );
+  }
+
   return errors;
 }

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

@@ -211,6 +211,7 @@ export function ConfigSection({
     [onPendingDataChange, sectionPath, cameraName],
   );
   const [isSaving, setIsSaving] = useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = useState(false);
   const [extraHasChanges, setExtraHasChanges] = useState(false);
   const [formKey, setFormKey] = useState(0);
   const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
@@ -754,6 +755,7 @@ export function ConfigSection({
         schema={modifiedSchema}
         formData={currentFormData}
         onChange={handleChange}
+        onValidationChange={setHasValidationErrors}
         fieldOrder={sectionConfig.fieldOrder}
         fieldGroups={sectionConfig.fieldGroups}
         hiddenFields={sectionConfig.hiddenFields}
@@ -851,7 +853,9 @@ export function ConfigSection({
             <Button
               onClick={handleSave}
               variant="select"
-              disabled={!hasChanges || isSaving || disabled}
+              disabled={
+                !hasChanges || hasValidationErrors || isSaving || disabled
+              }
               className="flex min-w-36 flex-1 gap-2"
             >
               {isSaving ? (

web/src/components/config-form/theme/fields/CameraInputsField.tsx

@@ -0,0 +1,409 @@
+import type {
+  ErrorSchema,
+  FieldProps,
+  RJSFSchema,
+  UiSchema,
+} from "@rjsf/utils";
+import { toFieldPathId } from "@rjsf/utils";
+import { cloneDeep, isEqual } from "lodash";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { applySchemaDefaults } from "@/lib/config-schema";
+import { mergeUiSchema } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  LuChevronDown,
+  LuChevronRight,
+  LuPlus,
+  LuTrash2,
+} from "react-icons/lu";
+import type { ConfigFormContext } from "@/types/configForm";
+
+type FfmpegInput = {
+  path?: string;
+  roles?: string[];
+  hwaccel_args?: unknown;
+};
+
+const asInputList = (formData: unknown): FfmpegInput[] => {
+  if (!Array.isArray(formData)) {
+    return [];
+  }
+
+  return formData.filter(
+    (item): item is FfmpegInput => typeof item === "object" && item !== null,
+  );
+};
+
+const getItemSchema = (schema: RJSFSchema): RJSFSchema | undefined => {
+  const items = schema.items;
+  if (!items || typeof items !== "object" || Array.isArray(items)) {
+    return undefined;
+  }
+
+  return items as RJSFSchema;
+};
+
+const getItemProperties = (
+  schema: RJSFSchema | undefined,
+): Record<string, RJSFSchema> => {
+  if (!schema || typeof schema.properties !== "object" || !schema.properties) {
+    return {};
+  }
+
+  return schema.properties as Record<string, RJSFSchema>;
+};
+
+const hasDetectRole = (input: FfmpegInput): boolean =>
+  Array.isArray(input.roles) && input.roles.includes("detect");
+
+const hasHwaccelValue = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === "") {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+
+  return true;
+};
+
+const normalizeNonDetectHwaccel = (inputs: FfmpegInput[]): FfmpegInput[] =>
+  inputs.map((input) => {
+    if (hasDetectRole(input)) {
+      return input;
+    }
+
+    if (!hasHwaccelValue(input.hwaccel_args)) {
+      return input;
+    }
+
+    return {
+      ...input,
+      hwaccel_args: null,
+    };
+  });
+
+export function CameraInputsField(props: FieldProps) {
+  const {
+    schema,
+    uiSchema,
+    formData,
+    onChange,
+    fieldPathId,
+    registry,
+    idSchema,
+    errorSchema,
+    disabled,
+    readonly,
+    hideError,
+    onBlur,
+    onFocus,
+  } = props;
+
+  const formContext = registry?.formContext as ConfigFormContext | undefined;
+  const isCameraLevel = formContext?.level === "camera";
+  const effectiveNamespace = isCameraLevel ? "config/cameras" : "config/global";
+
+  const { t, i18n } = useTranslation([
+    "common",
+    "views/settings",
+    effectiveNamespace,
+  ]);
+
+  const inputs = useMemo(() => asInputList(formData), [formData]);
+  const arraySchema = schema as RJSFSchema;
+  const itemSchema = useMemo(() => getItemSchema(arraySchema), [arraySchema]);
+  const itemProperties = useMemo(
+    () => getItemProperties(itemSchema),
+    [itemSchema],
+  );
+  const itemUiSchema = useMemo(
+    () =>
+      ((uiSchema as { items?: UiSchema } | undefined)?.items ?? {}) as UiSchema,
+    [uiSchema],
+  );
+  const SchemaField = registry.fields.SchemaField;
+
+  const [openByIndex, setOpenByIndex] = useState<Record<number, boolean>>({});
+
+  useEffect(() => {
+    setOpenByIndex((previous) => {
+      const next: Record<number, boolean> = {};
+      for (let index = 0; index < inputs.length; index += 1) {
+        next[index] = previous[index] ?? true;
+      }
+      return next;
+    });
+  }, [inputs.length]);
+
+  useEffect(() => {
+    const normalized = normalizeNonDetectHwaccel(inputs);
+    if (!isEqual(normalized, inputs)) {
+      onChange(normalized, fieldPathId.path);
+    }
+  }, [fieldPathId.path, inputs, onChange]);
+
+  const handleFieldValueChange = useCallback(
+    (index: number, fieldName: string, nextValue: unknown) => {
+      const nextInputs = cloneDeep(inputs);
+      const item =
+        (nextInputs[index] as Record<string, unknown> | undefined) ??
+        ({} as Record<string, unknown>);
+
+      item[fieldName] = nextValue;
+      nextInputs[index] = item;
+
+      onChange(normalizeNonDetectHwaccel(nextInputs), fieldPathId.path);
+    },
+    [fieldPathId.path, inputs, onChange],
+  );
+
+  const handleAddInput = useCallback(() => {
+    const base = itemSchema
+      ? (applySchemaDefaults(itemSchema) as FfmpegInput)
+      : ({} as FfmpegInput);
+    const nextInputs = normalizeNonDetectHwaccel([...inputs, base]);
+    onChange(nextInputs, fieldPathId.path);
+    setOpenByIndex((previous) => ({ ...previous, [inputs.length]: true }));
+  }, [fieldPathId.path, inputs, itemSchema, onChange]);
+
+  const handleRemoveInput = useCallback(
+    (index: number) => {
+      const nextInputs = inputs.filter(
+        (_, currentIndex) => currentIndex !== index,
+      );
+      onChange(nextInputs, fieldPathId.path);
+      setOpenByIndex((previous) => {
+        const next: Record<number, boolean> = {};
+        Object.entries(previous).forEach(([key, value]) => {
+          const current = Number(key);
+          if (Number.isNaN(current) || current === index) {
+            return;
+          }
+
+          next[current > index ? current - 1 : current] = value;
+        });
+        return next;
+      });
+    },
+    [fieldPathId.path, inputs, onChange],
+  );
+
+  const renderField = useCallback(
+    (
+      index: number,
+      fieldName: string,
+      options?: {
+        extraUiSchema?: UiSchema;
+        showSchemaDescription?: boolean;
+      },
+    ) => {
+      if (!SchemaField) {
+        return null;
+      }
+
+      const fieldSchema = itemProperties[fieldName];
+      if (!fieldSchema) {
+        return null;
+      }
+
+      const itemData = inputs[index] as Record<string, unknown>;
+      const itemPath = [...fieldPathId.path, index];
+      const itemFieldPathId = toFieldPathId(
+        fieldName,
+        registry.globalFormOptions,
+        itemPath,
+      );
+
+      const itemErrors = (
+        errorSchema as Record<string, ErrorSchema> | undefined
+      )?.[index] as Record<string, ErrorSchema> | undefined;
+      const fieldErrorSchema = itemErrors?.[fieldName];
+
+      const baseUiSchema =
+        (itemUiSchema[fieldName] as UiSchema | undefined) ?? ({} as UiSchema);
+      const mergedUiSchema = options?.extraUiSchema
+        ? mergeUiSchema(baseUiSchema, options.extraUiSchema)
+        : baseUiSchema;
+
+      const fieldTranslationDescriptionKey = `ffmpeg.inputs.${fieldName}.description`;
+      const translatedDescription = i18n.exists(
+        fieldTranslationDescriptionKey,
+        {
+          ns: effectiveNamespace,
+        },
+      )
+        ? t(fieldTranslationDescriptionKey, { ns: effectiveNamespace })
+        : "";
+
+      const fieldDescription =
+        typeof fieldSchema.description === "string" &&
+        fieldSchema.description.length > 0
+          ? fieldSchema.description
+          : translatedDescription;
+
+      const handleScopedFieldChange = (
+        nextValue: unknown,
+        _path: unknown,
+        _errors?: ErrorSchema,
+        _id?: string,
+      ) => {
+        handleFieldValueChange(index, fieldName, nextValue);
+      };
+
+      return (
+        <div className="space-y-1">
+          <SchemaField
+            name={fieldName}
+            schema={fieldSchema}
+            uiSchema={mergedUiSchema}
+            fieldPathId={itemFieldPathId}
+            formData={itemData?.[fieldName]}
+            errorSchema={fieldErrorSchema}
+            onChange={handleScopedFieldChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            registry={registry}
+            disabled={disabled}
+            readonly={readonly}
+            hideError={hideError}
+          />
+          {options?.showSchemaDescription && fieldDescription ? (
+            <p className="text-xs text-muted-foreground">{fieldDescription}</p>
+          ) : null}
+        </div>
+      );
+    },
+    [
+      SchemaField,
+      itemProperties,
+      inputs,
+      fieldPathId.path,
+      registry,
+      errorSchema,
+      itemUiSchema,
+      i18n,
+      handleFieldValueChange,
+      effectiveNamespace,
+      onBlur,
+      onFocus,
+      disabled,
+      readonly,
+      hideError,
+      t,
+    ],
+  );
+
+  const baseId = idSchema?.$id ?? "ffmpeg_inputs";
+
+  return (
+    <div className="space-y-3">
+      {inputs.map((input, index) => {
+        const open = openByIndex[index] ?? true;
+        const itemTitle = t("configForm.cameraInputs.itemTitle", {
+          ns: "views/settings",
+          index: index + 1,
+          path: typeof input.path === "string" ? input.path.trim() : "",
+        });
+
+        return (
+          <Card key={`${baseId}-${index}`} className="w-full">
+            <Collapsible
+              open={open}
+              onOpenChange={(nextOpen) =>
+                setOpenByIndex((previous) => ({
+                  ...previous,
+                  [index]: nextOpen,
+                }))
+              }
+            >
+              <CollapsibleTrigger asChild>
+                <CardHeader className="cursor-pointer p-4 transition-colors hover:bg-muted/50">
+                  <div className="flex items-center justify-between gap-4">
+                    <CardTitle className="text-sm">{itemTitle}</CardTitle>
+                    {open ? (
+                      <LuChevronDown className="h-4 w-4" />
+                    ) : (
+                      <LuChevronRight className="h-4 w-4" />
+                    )}
+                  </div>
+                </CardHeader>
+              </CollapsibleTrigger>
+
+              <CollapsibleContent>
+                <CardContent className="space-y-4 p-4 pt-0">
+                  <div className="w-full">
+                    {renderField(index, "path", {
+                      extraUiSchema: {
+                        "ui:options": {
+                          size: "full",
+                          splitLayout: false,
+                        },
+                      },
+                      showSchemaDescription: true,
+                    })}
+                  </div>
+
+                  <div className="w-full">
+                    {renderField(index, "roles", {
+                      showSchemaDescription: true,
+                    })}
+                  </div>
+
+                  {renderField(index, "input_args")}
+
+                  {hasDetectRole(input)
+                    ? renderField(index, "hwaccel_args", {
+                        extraUiSchema: {
+                          "ui:options": {
+                            allowInherit: true,
+                          },
+                        },
+                      })
+                    : null}
+
+                  {renderField(index, "output_args")}
+
+                  <div className="flex justify-end">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleRemoveInput(index)}
+                      disabled={disabled || readonly}
+                      aria-label={t("button.delete", { ns: "common" })}
+                    >
+                      <LuTrash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </CollapsibleContent>
+            </Collapsible>
+          </Card>
+        );
+      })}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleAddInput}
+        disabled={disabled || readonly}
+        className="gap-2"
+      >
+        <LuPlus className="h-4 w-4" />
+        {t("button.add", { ns: "common" })}
+      </Button>
+    </div>
+  );
+}
+
+export default CameraInputsField;

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

@@ -40,6 +40,7 @@ import { WrapIfAdditionalTemplate } from "./templates/WrapIfAdditionalTemplate";
 import { LayoutGridField } from "./fields/LayoutGridField";
 import { DetectorHardwareField } from "./fields/DetectorHardwareField";
 import { ReplaceRulesField } from "./fields/ReplaceRulesField";
+import { CameraInputsField } from "./fields/CameraInputsField";
 
 export interface FrigateTheme {
   widgets: RegistryWidgetsType;
@@ -87,5 +88,6 @@ export const frigateTheme: FrigateTheme = {
     LayoutGridField: LayoutGridField,
     DetectorHardwareField: DetectorHardwareField,
     ReplaceRulesField: ReplaceRulesField,
+    CameraInputsField: CameraInputsField,
   },
 };

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

@@ -28,6 +28,7 @@ import {
 import { normalizeOverridePath } from "../utils/overrides";
 import get from "lodash/get";
 import isEqual from "lodash/isEqual";
+import { SPLIT_ROW_CLASS_NAME } from "@/components/card/SettingsGroupCard";
 
 function _isArrayItemInAdditionalProperty(
   pathSegments: Array<string | number>,
@@ -101,6 +102,8 @@ export function FieldTemplate(props: FieldTemplateProps) {
   const uiOptionsFromSchema = uiSchema?.["ui:options"] || {};
 
   const suppressDescription = uiOptionsFromSchema.suppressDescription === true;
+  const showArrayItemDescription =
+    uiOptionsFromSchema.showArrayItemDescription === true;
 
   // Determine field characteristics
   const isBoolean =
@@ -155,7 +158,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
     !isMultiSchemaWrapper &&
     !isObjectField &&
     !isAdditionalProperty &&
-    !isArrayItemInAdditionalProp &&
+    (!isArrayItemInAdditionalProp || showArrayItemDescription) &&
     !suppressDescription;
 
   const translationPath = buildTranslationPath(
@@ -512,7 +515,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
         {renderDocsLink()}
       </div>
 
-      <div className="hidden md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6">
+      <div className={cn("hidden md:grid", SPLIT_ROW_CLASS_NAME)}>
         <div className="space-y-0.5">
           {renderBooleanLabel()}
           {renderDescription()}
@@ -537,7 +540,7 @@ export function FieldTemplate(props: FieldTemplateProps) {
   );
 
   const renderSplitValueLayout = () => (
-    <div className="space-y-1.5 md:grid md:grid-cols-[minmax(14rem,22rem)_minmax(0,1fr)] md:items-start md:gap-x-6 md:space-y-0 md:space-y-3">
+    <div className={cn(SPLIT_ROW_CLASS_NAME, "space-y-1.5 md:space-y-3")}>
       <div className="space-y-1.5">
         {renderSplitLabel()}
         {renderDescription("hidden md:block")}

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

@@ -22,7 +22,7 @@ type FfmpegPresetResponse = {
   };
 };
 
-type FfmpegArgsMode = "preset" | "manual";
+type FfmpegArgsMode = "preset" | "manual" | "inherit";
 
 type PresetField =
   | "hwaccel_args"
@@ -58,7 +58,12 @@ const resolveMode = (
   value: unknown,
   presets: string[],
   defaultMode: FfmpegArgsMode,
+  allowInherit: boolean,
 ): FfmpegArgsMode => {
+  if (allowInherit && (value === null || value === undefined)) {
+    return "inherit";
+  }
+
   if (Array.isArray(value)) {
     return "manual";
   }
@@ -109,6 +114,8 @@ export function FfmpegArgsWidget(props: WidgetProps) {
     id,
   } = props;
   const presetField = options?.ffmpegPresetField as PresetField | undefined;
+  const allowInherit = options?.allowInherit === true;
+  const hideDescription = options?.hideDescription === true;
 
   const { data } = useSWR<FfmpegPresetResponse>("ffmpeg/presets");
 
@@ -121,14 +128,14 @@ export function FfmpegArgsWidget(props: WidgetProps) {
   const defaultMode: FfmpegArgsMode = canUsePresets ? "preset" : "manual";
 
   const detectedMode = useMemo(
-    () => resolveMode(value, presetOptions, defaultMode),
+    () => resolveMode(value, presetOptions, defaultMode, allowInherit),
-    [value, presetOptions, defaultMode],
+    [value, presetOptions, defaultMode, allowInherit],
   );
 
   const [mode, setMode] = useState<FfmpegArgsMode>(detectedMode);
 
   useEffect(() => {
-    if (!canUsePresets) {
+    if (!canUsePresets && detectedMode === "preset") {
       setMode("manual");
       return;
     }
@@ -140,6 +147,11 @@ export function FfmpegArgsWidget(props: WidgetProps) {
     (nextMode: FfmpegArgsMode) => {
       setMode(nextMode);
 
+      if (nextMode === "inherit") {
+        onChange(null);
+        return;
+      }
+
       if (nextMode === "preset") {
         const currentValue = typeof value === "string" ? value : undefined;
         const presetValue =
@@ -255,9 +267,26 @@ export function FfmpegArgsWidget(props: WidgetProps) {
             {t("configForm.ffmpegArgs.manual", { ns: "views/settings" })}
           </label>
         </div>
+        {allowInherit ? (
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem
+              value="inherit"
+              id={`${id}-inherit`}
+              disabled={disabled || readonly}
+              className={
+                mode === "inherit"
+                  ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                  : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+              }
+            />
+            <label htmlFor={`${id}-inherit`} className="cursor-pointer text-sm">
+              {t("configForm.ffmpegArgs.inherit", { ns: "views/settings" })}
+            </label>
+          </div>
+        ) : null}
       </RadioGroup>
 
-      {mode === "preset" && canUsePresets ? (
+      {mode === "inherit" ? null : mode === "preset" && canUsePresets ? (
         <Select
           value={presetValue}
           onValueChange={handlePresetChange}
@@ -297,7 +326,7 @@ export function FfmpegArgsWidget(props: WidgetProps) {
         />
       )}
 
-      {fieldDescription ? (
+      {!hideDescription && fieldDescription ? (
         <p className="text-xs text-muted-foreground">{fieldDescription}</p>
       ) : null}
     </div>

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

@@ -185,13 +185,18 @@ export function SwitchesWidget(props: WidgetProps) {
           ) : (
             <>
               {enableSearch && (
-                <Input
+                <div className="mr-2">
-                  type="text"
+                  <Input
-                  placeholder="Search..."
+                    type="text"
-                  value={searchTerm}
+                    placeholder={t?.("configForm.searchPlaceholder", {
-                  onChange={(e) => setSearchTerm(e.target.value)}
+                      ns: "views/settings",
-                  className="mb-2"
+                      defaultValue: "Search...",
-                />
+                    })}
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="mb-2"
+                  />
+                </div>
               )}
               <div className={cn("grid gap-2", listClassName)}>
                 {filteredEntities.map((entity) => {