Tweaks (#22630)

* fix stage overlay size

* add audio filter config and load audio labels

* remove add button from object and audio labels in settings

* tests

* update classification docs

* tweak wording

* don't require restart for timestamp_style changes

* add optional i18n prefix for select widgets

* use i18n enum prefix for timestamp position

* add i18n for all presets

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

@@ -752,7 +752,7 @@
   },
   "live": {
     "label": "Live playback",
-    "description": "Settings used by the Web UI to control live stream resolution and quality.",
+    "description": "Settings to control the jsmpeg live stream resolution and quality. This does not affect restreamed cameras that use go2rtc for live view.",
     "streams": {
       "label": "Live stream names",
       "description": "Mapping of configured stream names to restream/go2rtc names used for live playback."

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

@@ -825,6 +825,12 @@
       "area": "Area"
     }
   },
+  "timestampPosition": {
+    "tl": "Top left",
+    "tr": "Top right",
+    "bl": "Bottom left",
+    "br": "Bottom right"
+  },
   "users": {
     "title": "Users",
     "management": {
@@ -1342,7 +1348,22 @@
         "preset-nvidia": "NVIDIA GPU",
         "preset-jetson-h264": "NVIDIA Jetson (H.264)",
         "preset-jetson-h265": "NVIDIA Jetson (H.265)",
-        "preset-rkmpp": "Rockchip RKMPP"
+        "preset-rkmpp": "Rockchip RKMPP",
+        "preset-http-jpeg-generic": "HTTP JPEG (Generic)",
+        "preset-http-mjpeg-generic": "HTTP MJPEG (Generic)",
+        "preset-http-reolink": "HTTP - Reolink Cameras",
+        "preset-rtmp-generic": "RTMP (Generic)",
+        "preset-rtsp-generic": "RTSP (Generic)",
+        "preset-rtsp-restream": "RTSP - Restream from go2rtc",
+        "preset-rtsp-restream-low-latency": "RTSP - Restream from go2rtc (Low Latency)",
+        "preset-rtsp-udp": "RTSP - UDP",
+        "preset-rtsp-blue-iris": "RTSP - Blue Iris",
+        "preset-record-generic": "Record (Generic, no audio)",
+        "preset-record-generic-audio-copy": "Record (Generic + Copy Audio)",
+        "preset-record-generic-audio-aac": "Record (Generic + Audio to AAC)",
+        "preset-record-mjpeg": "Record - MJPEG Cameras",
+        "preset-record-jpeg": "Record - JPEG Cameras",
+        "preset-record-ubiquiti": "Record - Ubiquiti Cameras"
       }
     },
     "cameraInputs": {

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

@@ -19,6 +19,16 @@ const audio: SectionConfigOverrides = {
     hiddenFields: ["enabled_in_config"],
     advancedFields: ["min_volume", "max_not_heard", "num_threads"],
     uiSchema: {
+      filters: {
+        "ui:options": {
+          expandable: false,
+        },
+      },
+      "filters.*": {
+        "ui:options": {
+          additionalPropertyKeyReadonly: true,
+        },
+      },
       listen: {
         "ui:widget": "audioLabels",
       },

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

@@ -29,6 +29,11 @@ const objects: SectionConfigOverrides = {
     ],
     advancedFields: ["genai"],
     uiSchema: {
+      filters: {
+        "ui:options": {
+          expandable: false,
+        },
+      },
       "filters.*.min_area": {
         "ui:options": {
           suppressMultiSchema: true,

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

@@ -4,12 +4,13 @@ const timestampStyle: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/reference",
     restartRequired: [],
-    fieldOrder: ["position", "format", "color", "thickness"],
+    fieldOrder: ["position", "format", "thickness", "color"],
     hiddenFields: ["effect", "enabled_in_config"],
     advancedFields: [],
     uiSchema: {
       position: {
         "ui:size": "xs",
+        "ui:options": { enumI18nPrefix: "timestampPosition" },
       },
       format: {
         "ui:size": "xs",
@@ -17,7 +18,7 @@ const timestampStyle: SectionConfigOverrides = {
     },
   },
   global: {
-    restartRequired: ["position", "format", "color", "thickness", "effect"],
+    restartRequired: [],
   },
   camera: {
     restartRequired: [],

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

@@ -1,5 +1,6 @@
 // Select Widget - maps to shadcn/ui Select
 import type { WidgetProps } from "@rjsf/utils";
+import { useTranslation } from "react-i18next";
 import {
   Select,
   SelectContent,
@@ -21,9 +22,18 @@ export function SelectWidget(props: WidgetProps) {
     schema,
   } = props;
 
+  const { t } = useTranslation(["views/settings"]);
   const { enumOptions = [] } = options;
+  const enumI18nPrefix = options["enumI18nPrefix"] as string | undefined;
   const fieldClassName = getSizedFieldClassName(options, "sm");
 
+  const getLabel = (option: { value: unknown; label: string }) => {
+    if (enumI18nPrefix) {
+      return t(`${enumI18nPrefix}.${option.value}`);
+    }
+    return option.label;
+  };
+
   return (
     <Select
       value={value?.toString() ?? ""}
@@ -42,7 +52,7 @@ export function SelectWidget(props: WidgetProps) {
       <SelectContent>
         {enumOptions.map((option: { value: unknown; label: string }) => (
           <SelectItem key={String(option.value)} value={String(option.value)}>
-            {option.label}
+            {getLabel(option)}
           </SelectItem>
         ))}
       </SelectContent>

web/src/views/live/LiveCameraView.tsx

@@ -707,14 +707,23 @@ export default function LiveCameraView({
               }}
             >
               <div
-                className={`relative flex flex-col items-center justify-center ${growClassName}`}
+                className={cn(
+                  "flex flex-col items-center justify-center",
+                  growClassName,
+                )}
                 ref={clickOverlayRef}
                 style={{
                   aspectRatio: constrainedAspectRatio,
                 }}
               >
                 {clickOverlay && overlaySize.width > 0 && (
-                  <div className="absolute inset-0 z-40 cursor-crosshair">
+                  <div
+                    className="absolute z-40 cursor-crosshair"
+                    style={{
+                      width: overlaySize.width,
+                      height: overlaySize.height,
+                    }}
+                  >
                     <Stage
                       width={overlaySize.width}
                       height={overlaySize.height}