Add media support to hui-image and picture-entity-card (#27450)

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

Author: karwosts

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -148,7 +148,10 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     }
 
     const domain: string = computeDomain(this._config.entity);
-    let image: string | undefined = this._config.image;
+    let image: string | undefined =
+      (typeof this._config?.image === "object" &&
+        this._config.image.media_content_id) ||
+      (this._config.image as string | undefined);
     if (!image) {
       switch (domain) {
         case "image":

src/panels/lovelace/cards/types.ts

@@ -476,7 +476,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
 export interface PictureEntityCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string | EntityNameItem | EntityNameItem[];
-  image?: string;
+  image?: string | MediaSelectorValue;
   camera_image?: string;
   camera_view?: HuiImage["cameraView"];
   state_image?: Record<string, unknown>;

src/panels/lovelace/components/hui-image.ts

@@ -15,6 +15,10 @@ import { UNAVAILABLE } from "../../../data/entity";
 import type { ImageEntity } from "../../../data/image";
 import { computeImageUrl } from "../../../data/image";
 import type { HomeAssistant } from "../../../types";
+import {
+  isMediaSourceContentId,
+  resolveMediaSource,
+} from "../../../data/media_source";
 
 const UPDATE_INTERVAL = 10000;
 const DEFAULT_FILTER = "grayscale(100%)";
@@ -67,6 +71,12 @@ export class HuiImage extends LitElement {
 
   @state() private _loadedImageSrc?: string;
 
+  @state() private _resolvedImageSrc?: string;
+
+  @state() private _resolvedDarkModeImageSrc?: string;
+
+  @state() private _resolvedStateImages: Record<string, string> = {};
+
   @state() private _lastImageHeight?: number;
 
   private _intersectionObserver?: IntersectionObserver;
@@ -130,6 +140,46 @@ export class HuiImage extends LitElement {
     if (this._loadState === LoadState.Loading && !this.cameraImage) {
       this._loadState = LoadState.Loaded;
     }
+
+    const firstHass = changedProps.has("hass") && !changedProps.get("hass");
+    if (this.hass && (changedProps.has("image") || firstHass)) {
+      if (this.image && isMediaSourceContentId(this.image)) {
+        resolveMediaSource(this.hass, this.image).then((result) => {
+          this._resolvedImageSrc = result.url;
+        });
+      } else {
+        this._resolvedImageSrc = this.image;
+      }
+    }
+    if (this.hass && (changedProps.has("darkModeImage") || firstHass)) {
+      if (this.darkModeImage && isMediaSourceContentId(this.darkModeImage)) {
+        resolveMediaSource(this.hass, this.darkModeImage).then((result) => {
+          this._resolvedDarkModeImageSrc = result.url;
+        });
+      } else {
+        this._resolvedDarkModeImageSrc = this.darkModeImage;
+      }
+    }
+    if (changedProps.has("stateImage") || firstHass) {
+      this._resolvedStateImages = {};
+      Object.entries(this.stateImage || {}).forEach((entry) => {
+        const key = entry[0] as string;
+        const value = entry[1] as any;
+        const image =
+          (typeof value === "object" && value.media_content_id) ||
+          (value as string | undefined);
+        if (isMediaSourceContentId(image)) {
+          resolveMediaSource(this.hass!, image).then((result) => {
+            this._resolvedStateImages = {
+              ...this._resolvedStateImages,
+              [key]: result.url,
+            };
+          });
+        } else {
+          this._resolvedStateImages![key] = image;
+        }
+      });
+    }
   }
 
   protected render() {
@@ -155,20 +205,20 @@ export class HuiImage extends LitElement {
         imageSrc = this._cameraImageSrc;
       }
     } else if (this.stateImage) {
-      const stateImage = this.stateImage[entityState];
+      const stateImage = this._resolvedStateImages[entityState];
 
       if (stateImage) {
         imageSrc = stateImage;
       } else {
-        imageSrc = this.image;
+        imageSrc = this._resolvedImageSrc;
         imageFallback = true;
       }
     } else if (this.darkModeImage && this.hass.themes.darkMode) {
-      imageSrc = this.darkModeImage;
+      imageSrc = this._resolvedDarkModeImageSrc;
     } else if (stateObj && computeDomain(stateObj.entity_id) === "image") {
       imageSrc = computeImageUrl(stateObj as ImageEntity);
     } else {
-      imageSrc = this.image;
+      imageSrc = this._resolvedImageSrc;
     }
 
     if (imageSrc) {

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

@@ -11,6 +11,7 @@ import {
   object,
   optional,
   string,
+  union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -34,7 +35,7 @@ const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     entity: optional(string()),
-    image: optional(string()),
+    image: optional(union([string(), object()])),
     name: optional(entityNameStruct),
     camera_image: optional(string()),
     camera_view: optional(enums(["auto", "live"])),
@@ -76,7 +77,20 @@ export class HuiPictureEntityCardEditor
           },
           context: { entity: "entity" },
         },
-        { name: "image", selector: { image: {} } },
+        {
+          name: "image",
+          selector: {
+            media: {
+              accept: ["image/*"] as string[],
+              clearable: true,
+              image_upload: true,
+              hide_content_type: true,
+              content_id_helper: localize(
+                "ui.panel.lovelace.editor.card.picture.content_id_helper"
+              ),
+            },
+          },
+        },
         { name: "camera_image", selector: { entity: { domain: "camera" } } },
         {
           name: "",
@@ -169,21 +183,11 @@ export class HuiPictureEntityCardEditor
       return nothing;
     }
 
-    const data = {
-      show_state: true,
-      show_name: true,
-      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}
+        .data=${this._processData(this._config)}
+        .schema=${this._schema(this.hass.localize)}
         .computeLabel=${this._computeLabelCallback}
         .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
@@ -192,6 +196,17 @@ export class HuiPictureEntityCardEditor
     `;
   }
 
+  private _processData = memoizeOne((config: PictureEntityCardConfig) => ({
+    show_state: true,
+    show_name: true,
+    camera_view: "auto",
+    fit_mode: "cover",
+    ...config,
+    ...(typeof config.image === "string"
+      ? { image: { media_content_id: config.image } }
+      : {}),
+  }));
+
   private _valueChanged(ev: CustomEvent): void {
     const config = ev.detail.value;
     if (