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/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}