Camera view options translated (#25119)

* Camera view options translated

* Swap around changes

* Clean up

* Clean up

src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts

@@ -1,7 +1,9 @@
+import memoizeOne from "memoize-one";
 import { mdiGestureTap } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { any, assert, literal, object, optional, string } from "superstruct";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
@@ -27,61 +29,6 @@ const imageElementConfigStruct = object({
   aspect_ratio: optional(string()),
 });
 
-const SCHEMA = [
-  { name: "entity", selector: { entity: {} } },
-  { name: "title", selector: { text: {} } },
-  {
-    name: "interactions",
-    type: "expandable",
-    flatten: true,
-    iconPath: mdiGestureTap,
-    schema: [
-      {
-        name: "tap_action",
-        selector: {
-          ui_action: {
-            default_action: "more-info",
-          },
-        },
-      },
-      {
-        name: "hold_action",
-        selector: {
-          ui_action: {
-            default_action: "more-info",
-          },
-        },
-      },
-      {
-        name: "",
-        type: "optional_actions",
-        flatten: true,
-        schema: [
-          {
-            name: "double_tap_action",
-            selector: {
-              ui_action: {
-                default_action: "none",
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  { name: "image", selector: { image: {} } },
-  { name: "camera_image", selector: { entity: { domain: "camera" } } },
-  {
-    name: "camera_view",
-    selector: { select: { options: ["auto", "live"] } },
-  },
-  { name: "state_image", selector: { object: {} } },
-  { name: "filter", selector: { text: {} } },
-  { name: "state_filter", selector: { object: {} } },
-  { name: "aspect_ratio", selector: { text: {} } },
-  { name: "style", selector: { object: {} } },
-] as const;
-
 @customElement("hui-image-element-editor")
 export class HuiImageElementEditor
   extends LitElement
@@ -96,6 +43,74 @@ export class HuiImageElementEditor
     this._config = config;
   }
 
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
+        { name: "entity", selector: { entity: {} } },
+        { name: "title", selector: { text: {} } },
+        {
+          name: "interactions",
+          type: "expandable",
+          flatten: true,
+          iconPath: mdiGestureTap,
+          schema: [
+            {
+              name: "tap_action",
+              selector: {
+                ui_action: {
+                  default_action: "more-info",
+                },
+              },
+            },
+            {
+              name: "hold_action",
+              selector: {
+                ui_action: {
+                  default_action: "more-info",
+                },
+              },
+            },
+            {
+              name: "",
+              type: "optional_actions",
+              flatten: true,
+              schema: [
+                {
+                  name: "double_tap_action",
+                  selector: {
+                    ui_action: {
+                      default_action: "none",
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        { name: "image", selector: { image: {} } },
+        { name: "camera_image", selector: { entity: { domain: "camera" } } },
+        {
+          name: "camera_view",
+          selector: {
+            select: {
+              options: ["auto", "live"].map((value) => ({
+                value,
+                label: localize(
+                  `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}`
+                ),
+              })),
+              mode: "dropdown",
+            },
+          },
+        },
+        { name: "state_image", selector: { object: {} } },
+        { name: "filter", selector: { text: {} } },
+        { name: "state_filter", selector: { object: {} } },
+        { name: "aspect_ratio", selector: { text: {} } },
+        { name: "style", selector: { object: {} } },
+      ] as const
+  );
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
@@ -105,7 +120,7 @@ export class HuiImageElementEditor
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${SCHEMA}
+        .schema=${this._schema(this.hass.localize)}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -116,7 +131,9 @@ export class HuiImageElementEditor
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) =>
     this.hass!.localize(
       `ui.panel.lovelace.editor.card.generic.${schema.name}`
     ) ||

src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts

@@ -25,6 +25,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
 import { caseInsensitiveStringCompare } from "../../../../common/string/compare";
 import type { SelectOption } from "../../../../data/selector";
 import { getSensorNumericDeviceClasses } from "../../../../data/sensor";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -53,6 +54,7 @@ export class HuiAreaCardEditor
 
   private _schema = memoizeOne(
     (
+      localize: LocalizeFunc,
       showCamera: boolean,
       binaryClasses: SelectOption[],
       sensorClasses: SelectOption[]
@@ -64,7 +66,17 @@ export class HuiAreaCardEditor
           ? ([
               {
                 name: "camera_view",
-                selector: { select: { options: ["auto", "live"] } },
+                selector: {
+                  select: {
+                    options: ["auto", "live"].map((value) => ({
+                      value,
+                      label: localize(
+                        `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}`
+                      ),
+                    })),
+                    mode: "dropdown",
+                  },
+                },
               },
             ] as const)
           : []),
@@ -212,6 +224,7 @@ export class HuiAreaCardEditor
     );
 
     const schema = this._schema(
+      this.hass.localize,
       this._config.show_camera || false,
       binarySelectOptions,
       sensorSelectOptions

src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts

@@ -1,3 +1,4 @@
+import memoizeOne from "memoize-one";
 import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -11,7 +12,6 @@ import {
   string,
   type,
 } from "superstruct";
-import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
@@ -84,7 +84,17 @@ export class HuiPictureElementsCardEditor
             },
             {
               name: "camera_view",
-              selector: { select: { options: ["auto", "live"] } },
+              selector: {
+                select: {
+                  options: ["auto", "live"].map((value) => ({
+                    value,
+                    label: localize(
+                      `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}`
+                    ),
+                  })),
+                  mode: "dropdown",
+                },
+              },
             },
             { name: "theme", selector: { theme: {} } },
             { name: "state_filter", selector: { object: {} } },

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -1,8 +1,8 @@
+import memoizeOne from "memoize-one";
 import { mdiGestureTap } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import {
   assert,
   assign,

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -173,13 +173,11 @@ export class HuiPictureGlanceCardEditor
 
     const data = { camera_view: "auto", fit_mode: "cover", ...this._config };
 
-    const schema = this._schema(this.hass.localize);
-
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${schema}
+        .schema=${this._schema(this.hass.localize)}
         .computeLabel=${this._computeLabelCallback}
         .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}