Add Auto live view option with transcoding options (#24519)

* implement auto mode for single camera live view

* add transcoded live streams and stream ordering for auto mode

Cameras can now add lower quality live streams that go2rtc transcodes to H.264 on demand. `live.transcode` takes a source stream and a list of heights and bitrates, and each quality becomes a `{camera}_transcode_{height}p` stream. The config validator adds them to `live.streams` without moving any the user already placed, and drops them when transcoding is disabled or a height changes. `create_config.py` writes them into go2rtc's generated config at startup, and saving the config or deleting a camera syncs them through go2rtc's API, so no restart is needed. They use `#hardware`, so go2rtc picks a hardware encoder and falls back to the CPU when there isn't one.

The Live playback settings stream list can be reordered by drag, since its order is the auto ladder. Auto order sorts it by bitrate, measuring native streams through a new admin-only `/go2rtc/streams/{name}/bitrate` endpoint and using the configured bitrate for transcoded ones. A pure reorder wasn't saved before because RJSF, the settings form, and `update_yaml` all ignore map key order. Sections can now mark a map with `orderedMaps`, which sends the whole map with `replace_paths` so `config_set` rewrites it in order.

Transcoded streams aren't in `go2rtc.streams`, which only lists yaml streams, so the frontend treated them as not restreamed and fell back to jsmpeg. Every restream check now goes through `isRestreamedStream`.

Auto treated any stall with no bytes in the last 2 seconds as a dead camera and handed it to the error fallback, which went straight to jsmpeg. Heavy congestion can stop delivery completely, so congested viewers skipped every lower stream. Auto now declines only when stats show the camera offline, and a stall on a live camera steps down. The stream picker also has a Try highest quality button that sends auto back to the top stream.

* fixes

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

@@ -1,8 +1,12 @@
 import type { FieldPathList, FieldProps, RJSFSchema } from "@rjsf/utils";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import axios from "axios";
+import { Reorder, useDragControls } from "framer-motion";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
   Command,
@@ -16,16 +20,35 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown, Plus } from "lucide-react";
-import { LuPlus, LuTrash2 } from "react-icons/lu";
+import {
+  LuArrowDownWideNarrow,
+  LuGripVertical,
+  LuPlus,
+  LuTrash2,
+} from "react-icons/lu";
 import { MapKeyInput } from "../components";
 import type { ConfigFormContext } from "@/types/configForm";
+import type { LiveTranscodeConfig } from "@/types/frigateConfig";
 import get from "lodash/get";
+import isEqual from "lodash/isEqual";
 import { isSubtreeModified } from "../utils";
+import {
+  isTranscodeStreamName,
+  transcodeBitrateFor,
+} from "@/utils/liveTranscode";
 
 type LiveStreamsData = Record<string, string>;
 
+// kbps measured by the server, or configured for a transcoded stream
+type StreamRate = { kbps: number; set: boolean } | { failed: true };
+
+function rateValue(rate: StreamRate | undefined): number {
+  return rate && "kbps" in rate ? rate.kbps : -1;
+}
+
 type StreamValueComboboxProps = {
   id: string;
   value: string;
@@ -156,6 +179,154 @@ function StreamValueCombobox({
   );
 }
 
+type StreamRowProps = {
+  entryKey: string;
+  value: string;
+  entryId: string;
+  data: LiveStreamsData;
+  generated: boolean;
+  rate?: StreamRate;
+  options: string[];
+  disabled?: boolean;
+  readonly?: boolean;
+  onRename: (oldKey: string, newKey: string) => void;
+  onUpdateValue: (key: string, value: string) => void;
+  onRemove: (key: string) => void;
+  onDragEnd: () => void;
+};
+
+function StreamRow({
+  entryKey,
+  value,
+  entryId,
+  data,
+  generated,
+  rate,
+  options,
+  disabled,
+  readonly,
+  onRename,
+  onUpdateValue,
+  onRemove,
+  onDragEnd,
+}: StreamRowProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+  const controls = useDragControls();
+  const locked = disabled || readonly;
+
+  const deleteLabel = t("button.delete", {
+    ns: "common",
+    defaultValue: "Delete",
+  });
+
+  let rateLabel: string | undefined;
+  if (rate && "failed" in rate) {
+    rateLabel = t("configForm.liveStreams.rateFailed", {
+      ns: "views/settings",
+    });
+  } else if (rate?.set) {
+    rateLabel = t("configForm.liveStreams.rateSet", {
+      ns: "views/settings",
+      kbps: rate.kbps,
+    });
+  } else if (rate) {
+    rateLabel = t("configForm.liveStreams.rate", {
+      ns: "views/settings",
+      kbps: rate.kbps,
+    });
+  }
+
+  return (
+    <Reorder.Item
+      as="div"
+      value={entryKey}
+      dragListener={false}
+      dragControls={controls}
+      onDragEnd={onDragEnd}
+      className="grid grid-cols-12 items-end gap-2 rounded-md border bg-background p-3"
+    >
+      <div className="col-span-12 flex items-end gap-1 md:col-span-5">
+        <button
+          type="button"
+          disabled={locked}
+          onPointerDown={(e) => controls.start(e)}
+          className="mb-2 cursor-grab touch-none rounded p-1 text-muted-foreground hover:text-primary active:cursor-grabbing disabled:cursor-not-allowed"
+          aria-label={t("configForm.liveStreams.reorderHandle", {
+            ns: "views/settings",
+          })}
+        >
+          <LuGripVertical className="size-4" />
+        </button>
+        <div className="flex-1 space-y-2">
+          <Label htmlFor={`${entryId}-key`}>
+            {t("configForm.liveStreams.streamNameLabel", {
+              ns: "views/settings",
+            })}
+          </Label>
+          <MapKeyInput
+            id={`${entryId}-key`}
+            value={entryKey}
+            placeholder={t("configForm.liveStreams.streamNamePlaceholder", {
+              ns: "views/settings",
+            })}
+            disabled={locked}
+            onCommit={(next) => onRename(entryKey, next)}
+            isKeyTaken={(next) =>
+              next !== entryKey &&
+              Object.prototype.hasOwnProperty.call(data, next)
+            }
+          />
+        </div>
+      </div>
+      <div className="col-span-10 space-y-2 md:col-span-6">
+        <Label htmlFor={`${entryId}-value`} className="flex items-center gap-2">
+          {t("configForm.liveStreams.go2rtcStreamLabel", {
+            ns: "views/settings",
+          })}
+          {generated && (
+            <Badge variant="secondary">
+              {t("configForm.liveStreams.transcodedBadge", {
+                ns: "views/settings",
+              })}
+            </Badge>
+          )}
+        </Label>
+        {generated ? (
+          <Input id={`${entryId}-value`} value={value} disabled readOnly />
+        ) : (
+          <StreamValueCombobox
+            id={`${entryId}-value`}
+            value={value}
+            options={options}
+            disabled={disabled}
+            readonly={readonly}
+            onChange={(next) => onUpdateValue(entryKey, next)}
+          />
+        )}
+        {rateLabel && (
+          <p className="text-xs text-muted-foreground">{rateLabel}</p>
+        )}
+      </div>
+      <div className="col-span-2 flex justify-end md:col-span-1">
+        {!generated && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onRemove(entryKey)}
+            disabled={locked}
+            aria-label={deleteLabel}
+            title={deleteLabel}
+            className="shrink-0"
+          >
+            <LuTrash2 className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </Reorder.Item>
+  );
+}
+
 export function LiveStreamsField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
@@ -166,6 +337,7 @@ export function LiveStreamsField(props: FieldProps) {
     (formContext?.level === "camera" ? "config/cameras" : "config/global");
   const { t: fallbackT } = useTranslation(["common", configNamespace]);
   const t = formContext?.t ?? fallbackT;
+  const { t: tSettings } = useTranslation(["views/settings"]);
 
   const data: LiveStreamsData = useMemo(() => {
     if (!formData || typeof formData !== "object" || Array.isArray(formData)) {
@@ -175,6 +347,7 @@ export function LiveStreamsField(props: FieldProps) {
   }, [formData]);
 
   const entries = useMemo(() => Object.entries(data), [data]);
+  const keys = useMemo(() => entries.map(([key]) => key), [entries]);
 
   const id = idSchema?.$id ?? props.name;
   const sectionPrefix = formContext?.sectionI18nPrefix;
@@ -185,12 +358,22 @@ export function LiveStreamsField(props: FieldProps) {
     t(`${sectionPrefix}.${id}.description`) ??
     (schema as RJSFSchema).description;
 
+  const camera = formContext?.cameraName ?? "";
+  const transcode = formContext?.formData?.transcode as
+    LiveTranscodeConfig | undefined;
+
   const go2rtcStreamNames = useMemo<string[]>(() => {
     const streams = formContext?.fullConfig?.go2rtc?.streams;
     if (!streams || typeof streams !== "object") return [];
     return Object.keys(streams).sort();
   }, [formContext?.fullConfig?.go2rtc?.streams]);
 
+  const isGenerated = useCallback(
+    (name: string) =>
+      isTranscodeStreamName(camera, name) && !go2rtcStreamNames.includes(name),
+    [camera, go2rtcStreamNames],
+  );
+
   const emptyPath = useMemo(() => [] as FieldPathList, []);
   const fieldPath =
     (props as { fieldPathId?: { path?: FieldPathList } }).fieldPathId?.path ??
@@ -210,6 +393,51 @@ export function LiveStreamsField(props: FieldProps) {
     );
   }, [fieldPath, formContext, data]);
 
+  const commitOrder = useCallback(
+    (order: string[]) => {
+      const next: LiveStreamsData = {};
+      order.forEach((key) => {
+        next[key] = data[key];
+      });
+      onChange(next, fieldPath);
+    },
+    [data, fieldPath, onChange],
+  );
+
+  // rows keep one React key through renames, so the name input stays mounted
+  const rowIdsRef = useRef(new Map<string, number>());
+  const nextRowIdRef = useRef(0);
+
+  const rowIdFor = (key: string) => {
+    let id = rowIdsRef.current.get(key);
+
+    if (id === undefined) {
+      id = nextRowIdRef.current++;
+      rowIdsRef.current.set(key, id);
+    }
+
+    return id;
+  };
+
+  // local order while dragging; committed to the form on drop
+  const [dragOrder, setDragOrder] = useState<string[] | null>(null);
+  const dragOrderRef = useRef<string[] | null>(null);
+
+  const handleReorder = useCallback((next: string[]) => {
+    dragOrderRef.current = next;
+    setDragOrder(next);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    const next = dragOrderRef.current;
+    dragOrderRef.current = null;
+    setDragOrder(null);
+
+    if (next && !isEqual(next, keys)) {
+      commitOrder(next);
+    }
+  }, [commitOrder, keys]);
+
   const handleAddEntry = useCallback(() => {
     const next = { ...data, "": "" };
     onChange(next, fieldPath);
@@ -227,6 +455,13 @@ export function LiveStreamsField(props: FieldProps) {
   const handleRenameKey = useCallback(
     (oldKey: string, newKey: string) => {
       if (oldKey === newKey) return;
+
+      const id = rowIdsRef.current.get(oldKey);
+      if (id !== undefined) {
+        rowIdsRef.current.delete(oldKey);
+        rowIdsRef.current.set(newKey, id);
+      }
+
       const next: LiveStreamsData = {};
       for (const [k, v] of Object.entries(data)) {
         if (k === oldKey) {
@@ -248,24 +483,84 @@ export function LiveStreamsField(props: FieldProps) {
     [data, fieldPath, onChange],
   );
 
+  // Auto order commits after measuring, so edits made meanwhile must survive
+  // and a camera switched to meanwhile must not receive the result
+  const dataRef = useRef(data);
+  const cameraRef = useRef(camera);
+  useEffect(() => {
+    dataRef.current = data;
+    cameraRef.current = camera;
+  }, [data, camera]);
+
+  const [measurement, setMeasurement] = useState<{
+    data: LiveStreamsData;
+    transcode: LiveTranscodeConfig | undefined;
+    rates: Record<string, StreamRate>;
+  } | null>(null);
+  const [measuring, setMeasuring] = useState(false);
+
+  // rates describe the streams as measured; a later edit hides them, while a
+  // reorder alone keeps them since isEqual ignores key order
+  const rates =
+    measurement &&
+    isEqual(measurement.data, data) &&
+    isEqual(measurement.transcode, transcode)
+      ? measurement.rates
+      : {};
+
+  const handleAutoOrder = useCallback(async () => {
+    setMeasuring(true);
+
+    const measured = await Promise.all(
+      entries.map(async ([, name]): Promise<[string, StreamRate]> => {
+        const setRate = transcodeBitrateFor(camera, name, transcode);
+
+        if (setRate !== undefined) {
+          return [name, { kbps: setRate, set: true }];
+        }
+
+        try {
+          const response = await axios.get(
+            `go2rtc/streams/${encodeURIComponent(name)}/bitrate`,
+          );
+          return [name, { kbps: response.data.kbps, set: false }];
+        } catch {
+          return [name, { failed: true }];
+        }
+      }),
+    );
+
+    if (cameraRef.current !== camera) {
+      setMeasuring(false);
+      return;
+    }
+
+    const next = Object.fromEntries(measured);
+    const latest = dataRef.current;
+    setMeasurement({ data: latest, transcode, rates: next });
+    setMeasuring(false);
+
+    // stable sort, so ties and unmeasured rows keep their order; rows added
+    // or renamed while measuring go last
+    const sorted = [...entries]
+      .sort(([, a], [, b]) => rateValue(next[b]) - rateValue(next[a]))
+      .map(([key]) => key)
+      .filter((key) => key in latest);
+    const order = [
+      ...sorted,
+      ...Object.keys(latest).filter((key) => !sorted.includes(key)),
+    ];
+
+    if (!isEqual(order, Object.keys(latest))) {
+      onChange(
+        Object.fromEntries(order.map((key) => [key, latest[key]])),
+        fieldPath,
+      );
+    }
+  }, [camera, entries, fieldPath, onChange, transcode]);
+
   const baseId = idSchema?.$id || "live_streams";
-  const deleteLabel = t("button.delete", {
-    ns: "common",
-    defaultValue: "Delete",
-  });
-  const streamNameLabel = t("configForm.liveStreams.streamNameLabel", {
-    ns: "views/settings",
-  });
-  const streamNamePlaceholder = t(
-    "configForm.liveStreams.streamNamePlaceholder",
-    { ns: "views/settings" },
-  );
-  const go2rtcStreamLabel = t("configForm.liveStreams.go2rtcStreamLabel", {
-    ns: "views/settings",
-  });
-  const addStreamLabel = t("configForm.liveStreams.addStream", {
-    ns: "views/settings",
-  });
+  const order = dragOrder ?? keys;
 
   return (
     <Card className="w-full">
@@ -278,57 +573,34 @@ export function LiveStreamsField(props: FieldProps) {
         )}
       </CardHeader>
       <CardContent className="space-y-3 p-4 pt-0">
-        {entries.map(([key, value], entryIndex) => {
-          const entryId = `${baseId}-${entryIndex}`;
-          return (
-            <div
-              key={entryIndex}
-              className="grid grid-cols-12 items-end gap-2 rounded-md border p-3"
-            >
-              <div className="col-span-12 space-y-2 md:col-span-5">
-                <Label htmlFor={`${entryId}-key`}>{streamNameLabel}</Label>
-                <MapKeyInput
-                  id={`${entryId}-key`}
-                  value={key}
-                  placeholder={streamNamePlaceholder}
-                  disabled={disabled || readonly}
-                  onCommit={(next) => handleRenameKey(key, next)}
-                  isKeyTaken={(next) =>
-                    next !== key &&
-                    Object.prototype.hasOwnProperty.call(data, next)
-                  }
-                />
-              </div>
-              <div className="col-span-10 space-y-2 md:col-span-6">
-                <Label htmlFor={`${entryId}-value`}>{go2rtcStreamLabel}</Label>
-                <StreamValueCombobox
-                  id={`${entryId}-value`}
-                  value={value}
-                  options={go2rtcStreamNames}
-                  disabled={disabled}
-                  readonly={readonly}
-                  onChange={(next) => handleUpdateValue(key, next)}
-                />
-              </div>
-              <div className="col-span-2 flex justify-end md:col-span-1">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => handleRemoveEntry(key)}
-                  disabled={disabled || readonly}
-                  aria-label={deleteLabel}
-                  title={deleteLabel}
-                  className="shrink-0"
-                >
-                  <LuTrash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          );
-        })}
+        <Reorder.Group
+          as="div"
+          axis="y"
+          values={order}
+          onReorder={handleReorder}
+          className="space-y-3"
+        >
+          {order.map((key, entryIndex) => (
+            <StreamRow
+              key={rowIdFor(key)}
+              entryKey={key}
+              value={data[key] ?? ""}
+              entryId={`${baseId}-${entryIndex}`}
+              data={data}
+              generated={isGenerated(data[key] ?? "")}
+              rate={rates[data[key] ?? ""]}
+              options={go2rtcStreamNames}
+              disabled={disabled}
+              readonly={readonly}
+              onRename={handleRenameKey}
+              onUpdateValue={handleUpdateValue}
+              onRemove={handleRemoveEntry}
+              onDragEnd={handleDragEnd}
+            />
+          ))}
+        </Reorder.Group>
 
-        <div>
+        <div className="flex flex-wrap gap-2">
           <Button
             type="button"
             variant="outline"
@@ -338,7 +610,25 @@ export function LiveStreamsField(props: FieldProps) {
             className="gap-2"
           >
             <LuPlus className="h-4 w-4" />
-            {addStreamLabel}
+            {tSettings("configForm.liveStreams.addStream")}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAutoOrder}
+            disabled={disabled || readonly || measuring || entries.length < 2}
+            title={tSettings("configForm.liveStreams.autoOrderTips")}
+            className="gap-2"
+          >
+            {measuring ? (
+              <ActivityIndicator className="size-4" />
+            ) : (
+              <LuArrowDownWideNarrow className="h-4 w-4" />
+            )}
+            {measuring
+              ? tSettings("configForm.liveStreams.measuring")
+              : tSettings("configForm.liveStreams.autoOrder")}
           </Button>
         </div>
       </CardContent>

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

@@ -0,0 +1,280 @@
+import type { FieldPathList, FieldProps } from "@rjsf/utils";
+import { useCallback, useMemo } from "react";
+import get from "lodash/get";
+import { useTranslation } from "react-i18next";
+import { LuPlus, LuTrash2 } from "react-icons/lu";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ConfigFormContext } from "@/types/configForm";
+import type {
+  LiveTranscodeConfig,
+  LiveTranscodeQuality,
+} from "@/types/frigateConfig";
+import {
+  TRANSCODE_HEIGHTS,
+  defaultTranscodeBitrate,
+  reconcileTranscodeStreams,
+} from "@/utils/liveTranscode";
+
+const EMPTY_TRANSCODE: LiveTranscodeConfig = {
+  enabled: false,
+  source: null,
+  qualities: [],
+};
+
+// presets plus a height set in yaml, minus heights other rows use
+function heightOptions(current: number, used: number[]): number[] {
+  return [...new Set([...TRANSCODE_HEIGHTS, current])]
+    .filter((height) => height === current || !used.includes(height))
+    .sort((a, b) => b - a);
+}
+
+export function LiveTranscodeField(props: FieldProps) {
+  const { formData, onChange, idSchema, disabled, readonly } = props;
+  const formContext = props.registry?.formContext as
+    ConfigFormContext | undefined;
+  const { t } = useTranslation(["views/settings"]);
+
+  const transcode =
+    (formData as LiveTranscodeConfig | undefined) ?? EMPTY_TRANSCODE;
+
+  const emptyPath = useMemo(() => [] as FieldPathList, []);
+  const fieldPath =
+    (props as { fieldPathId?: { path?: FieldPathList } }).fieldPathId?.path ??
+    emptyPath;
+
+  const camera = formContext?.cameraName ?? "";
+  const streams = useMemo(
+    () => (formContext?.formData?.streams ?? {}) as Record<string, string>,
+    [formContext?.formData?.streams],
+  );
+  const go2rtcStreams = useMemo(
+    () => Object.keys(formContext?.fullConfig?.go2rtc?.streams ?? {}),
+    [formContext?.fullConfig?.go2rtc?.streams],
+  );
+  const sources = useMemo(
+    () =>
+      [...new Set(Object.values(streams))].filter((name) =>
+        go2rtcStreams.includes(name),
+      ),
+    [streams, go2rtcStreams],
+  );
+
+  const savedSource = get(formContext?.baselineFormData, [
+    ...fieldPath,
+    "source",
+  ]) as string | null | undefined;
+
+  const available = sources.length > 0;
+  const locked = disabled || readonly || !available;
+  const baseId = idSchema?.$id || "live_transcode";
+
+  // the stream list follows the transcode config in the same form change
+  const update = useCallback(
+    (next: LiveTranscodeConfig) => {
+      onChange(next, fieldPath);
+      onChange(
+        reconcileTranscodeStreams(camera, streams, next, go2rtcStreams),
+        [...fieldPath.slice(0, -1), "streams"],
+      );
+    },
+    [camera, fieldPath, go2rtcStreams, onChange, streams],
+  );
+
+  const updateQuality = useCallback(
+    (index: number, quality: LiveTranscodeQuality) => {
+      const qualities = [...transcode.qualities];
+      qualities[index] = quality;
+      update({ ...transcode, qualities });
+    },
+    [transcode, update],
+  );
+
+  const addQuality = useCallback(() => {
+    const used = new Set(transcode.qualities.map((q) => q.height));
+    const height = TRANSCODE_HEIGHTS.find((h) => !used.has(h));
+
+    if (height === undefined) return;
+
+    update({
+      ...transcode,
+      qualities: [
+        ...transcode.qualities,
+        { height, bitrate: defaultTranscodeBitrate(height) },
+      ],
+    });
+  }, [transcode, update]);
+
+  const removeQuality = useCallback(
+    (index: number) =>
+      update({
+        ...transcode,
+        qualities: transcode.qualities.filter((_, i) => i !== index),
+      }),
+    [transcode, update],
+  );
+
+  const usedHeights = transcode.qualities.map((q) => q.height);
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="p-4">
+        <CardTitle className="text-sm">
+          {t("configForm.liveTranscode.title")}
+        </CardTitle>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {available
+            ? t("configForm.liveTranscode.description")
+            : t("configForm.liveTranscode.unavailable")}
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4 p-4 pt-0">
+        <div className="flex items-center gap-3">
+          <Switch
+            id={`${baseId}-enabled`}
+            checked={transcode.enabled}
+            disabled={locked}
+            onCheckedChange={(enabled) =>
+              update({
+                ...transcode,
+                enabled,
+                // pin the shown source so reordering streams can't change it;
+                // turning off drops the pin
+                source: enabled
+                  ? (transcode.source ?? sources[0])
+                  : savedSource,
+              })
+            }
+          />
+          <Label htmlFor={`${baseId}-enabled`}>
+            {t("configForm.liveTranscode.enable")}
+          </Label>
+        </div>
+
+        {transcode.enabled && available && (
+          <>
+            <div className="space-y-2">
+              <Label htmlFor={`${baseId}-source`}>
+                {t("configForm.liveTranscode.source")}
+              </Label>
+              <Select
+                value={transcode.source ?? sources[0]}
+                disabled={locked}
+                onValueChange={(source) => update({ ...transcode, source })}
+              >
+                <SelectTrigger id={`${baseId}-source`} className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {sources.map((source) => (
+                    <SelectItem key={source} value={source}>
+                      {source}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {transcode.qualities.map((quality, index) => (
+              <div
+                key={quality.height}
+                className="grid grid-cols-12 items-end gap-2 rounded-md border p-3"
+              >
+                <div className="col-span-5 space-y-2">
+                  <Label htmlFor={`${baseId}-${index}-height`}>
+                    {t("configForm.liveTranscode.height")}
+                  </Label>
+                  <Select
+                    value={String(quality.height)}
+                    disabled={locked}
+                    onValueChange={(value) =>
+                      updateQuality(index, {
+                        height: Number(value),
+                        bitrate: defaultTranscodeBitrate(Number(value)),
+                      })
+                    }
+                  >
+                    <SelectTrigger id={`${baseId}-${index}-height`}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {heightOptions(quality.height, usedHeights).map(
+                        (height) => (
+                          <SelectItem key={height} value={String(height)}>
+                            {t("configForm.liveTranscode.heightOption", {
+                              height,
+                            })}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="col-span-5 space-y-2">
+                  <Label htmlFor={`${baseId}-${index}-bitrate`}>
+                    {t("configForm.liveTranscode.bitrate")}
+                  </Label>
+                  <Input
+                    id={`${baseId}-${index}-bitrate`}
+                    type="number"
+                    min={64}
+                    value={quality.bitrate}
+                    disabled={locked}
+                    onChange={(e) => {
+                      // an empty input would save 0, which the backend rejects
+                      if (e.target.value === "") return;
+
+                      updateQuality(index, {
+                        ...quality,
+                        bitrate: Number(e.target.value),
+                      });
+                    }}
+                  />
+                </div>
+                <div className="col-span-2 flex justify-end">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    disabled={locked}
+                    onClick={() => removeQuality(index)}
+                    aria-label={t("configForm.liveTranscode.removeQuality")}
+                    title={t("configForm.liveTranscode.removeQuality")}
+                  >
+                    <LuTrash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="gap-2"
+              disabled={
+                locked || usedHeights.length >= TRANSCODE_HEIGHTS.length
+              }
+              onClick={addQuality}
+            >
+              <LuPlus className="h-4 w-4" />
+              {t("configForm.liveTranscode.addQuality")}
+            </Button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default LiveTranscodeField;

web/src/components/config-form/theme/fields/index.ts

@@ -3,3 +3,4 @@ export { LayoutGridField } from "./LayoutGridField";
 export { ModelsField } from "./ModelsField";
 export { ReplaceRulesField } from "./ReplaceRulesField";
 export { LiveStreamsField } from "./LiveStreamsField";
+export { LiveTranscodeField } from "./LiveTranscodeField";