Add media selector to picture-card-editor (#26317)

2025-11-09 10:59:50 +00:00 · 2025-10-10 02:26:49 -07:00
parent 8c19e080be
commit 6653333c38
11 changed files with 251 additions and 84 deletions
--- a/src/components/ha-picture-upload.ts
+++ b/src/components/ha-picture-upload.ts
@@ -39,6 +39,15 @@ export class HaPictureUpload extends LitElement {
  @property({ type: Boolean, attribute: "select-media" }) public selectMedia =
    false;

+  // This property is set when this component is used inside a media selector.
+  // When set, it returns selected media or uploaded files as MediaSelectorValue
+  // When unset, it only allows selecting images from image-upload, and returns
+  // selected or uploaded images as a string starting with /api/...
+  @property({ type: Boolean, attribute: "full-media" }) public fullMedia =
+    false;
+
+  @property({ attribute: false }) public contentIdHelper?: string;
+
  @property({ attribute: false }) public cropOptions?: CropOptions;

  @property({ type: Boolean }) public original = false;
@@ -164,12 +173,33 @@ export class HaPictureUpload extends LitElement {
    this._uploading = true;
    try {
      const media = await createImage(this.hass, file);
+      if (this.fullMedia) {
+        const item = {
+          media_content_id: `${MEDIA_PREFIX}/${media.id}`,
+          media_content_type: media.content_type,
+          title: media.name,
+          media_class: "image" as const,
+          can_play: true,
+          can_expand: false,
+          can_search: false,
+          thumbnail: generateImageThumbnailUrl(media.id, 256),
+        } as const;
+        const navigateIds = [
+          {},
+          { media_content_type: "app", media_content_id: MEDIA_PREFIX },
+        ];
+        fireEvent(this, "media-picked", {
+          item,
+          navigateIds,
+        });
+      } else {
        this.value = generateImageThumbnailUrl(
          media.id,
          this.size,
          this.original
        );
        fireEvent(this, "change");
+      }
    } catch (err: any) {
      showAlertDialog(this, {
        text: err.toString(),
@@ -183,15 +213,24 @@ export class HaPictureUpload extends LitElement {
    showMediaBrowserDialog(this, {
      action: "pick",
      entityId: "browser",
-      navigateIds: [
+      accept: ["image/*"],
+      navigateIds: this.fullMedia
+        ? undefined
+        : [
            { media_content_id: undefined, media_content_type: undefined },
            {
              media_content_id: MEDIA_PREFIX,
              media_content_type: "app",
            },
          ],
-      minimumNavigateLevel: 2,
+      minimumNavigateLevel: this.fullMedia ? undefined : 2,
+      hideContentType: true,
+      contentIdHelper: this.contentIdHelper,
      mediaPickedCallback: async (pickedMedia: MediaPickedEvent) => {
+        if (this.fullMedia) {
+          fireEvent(this, "media-picked", pickedMedia);
+          return;
+        }
        const mediaId = getIdFromUrl(pickedMedia.item.media_content_id);
        if (mediaId) {
          if (this.crop) {
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -19,6 +19,7 @@ import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
+import "../ha-picture-upload";

 const MANUAL_SCHEMA = [
  { name: "media_content_id", required: false, selector: { text: {} } },
@@ -105,6 +106,17 @@ export class HaMediaSelector extends LitElement {
      (stateObj &&
        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));

+    if (this.selector.media?.image_upload && !this.value) {
+      return html`<ha-picture-upload
+        .hass=${this.hass}
+        .value=${null}
+        .contentIdHelper=${this.selector.media?.content_id_helper}
+        select-media
+        full-media
+        @media-picked=${this._pictureUploadMediaPicked}
+      ></ha-picture-upload>`;
+    }
+
    return html`
      ${this._hasAccept ||
      (this._contextEntities && this._contextEntities.length <= 1)
@@ -142,8 +154,7 @@ export class HaMediaSelector extends LitElement {
              .computeHelper=${this._computeHelperCallback}
            ></ha-form>
          `
-        : html`
-            <ha-card
+        : html`<ha-card
              outlined
              tabindex="0"
              role="button"
@@ -203,7 +214,20 @@ export class HaMediaSelector extends LitElement {
                </div>
              </div>
            </ha-card>
-          `}
+            ${this.selector.media?.clearable
+              ? html`<div>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    variant="danger"
+                    @click=${this._clearValue}
+                  >
+                    ${this.hass.localize(
+                      "ui.components.picture-upload.clear_picture"
+                    )}
+                  </ha-button>
+                </div>`
+              : nothing}`}
    `;
  }

@@ -248,6 +272,8 @@ export class HaMediaSelector extends LitElement {
      accept: this.selector.media?.accept,
      defaultId: this.value?.media_content_id,
      defaultType: this.value?.media_content_type,
+      hideContentType: this.selector.media?.hide_content_type,
+      contentIdHelper: this.selector.media?.content_id_helper,
      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
        fireEvent(this, "value-changed", {
          value: {
@@ -289,6 +315,31 @@ export class HaMediaSelector extends LitElement {
    }
  }

+  private _pictureUploadMediaPicked(ev) {
+    const pickedMedia = ev.detail as MediaPickedEvent;
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.value,
+        media_content_id: pickedMedia.item.media_content_id,
+        media_content_type: pickedMedia.item.media_content_type,
+        metadata: {
+          title: pickedMedia.item.title,
+          thumbnail: pickedMedia.item.thumbnail,
+          media_class: pickedMedia.item.media_class,
+          children_media_class: pickedMedia.item.children_media_class,
+          navigateIds: pickedMedia.navigateIds?.map((id) => ({
+            media_content_type: id.media_content_type,
+            media_content_id: id.media_content_id,
+          })),
+        },
+      },
+    });
+  }
+
+  private _clearValue() {
+    fireEvent(this, "value-changed", { value: undefined });
+  }
+
  static styles = css`
    ha-entity-picker {
      display: block;
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -167,6 +167,8 @@ class DialogMediaPlayerBrowse extends LitElement {
          .accept=${this._params.accept}
          .defaultId=${this._params.defaultId}
          .defaultType=${this._params.defaultType}
+          .hideContentType=${this._params.hideContentType}
+          .contentIdHelper=${this._params.contentIdHelper}
          @close-dialog=${this.closeDialog}
          @media-picked=${this._mediaPicked}
          @media-browsed=${this._mediaBrowsed}
--- a/src/components/media-player/ha-browse-media-manual.ts
+++ b/src/components/media-player/ha-browse-media-manual.ts
@@ -19,8 +19,12 @@ class BrowseMediaManual extends LitElement {

  @property({ attribute: false }) public item!: MediaPlayerItemId;

+  @property({ attribute: false }) public hideContentType = false;
+
+  @property({ attribute: false }) public contentIdHelper?: string;
+
  private _schema = memoizeOne(
-    () =>
+    (hideContentType: boolean) =>
      [
        {
          name: "media_content_id",
@@ -29,6 +33,9 @@ class BrowseMediaManual extends LitElement {
            text: {},
          },
        },
+        ...(hideContentType
+          ? []
+          : [
              {
                name: "media_content_type",
                required: false,
@@ -36,6 +43,7 @@ class BrowseMediaManual extends LitElement {
                  text: {},
                },
              },
+            ]),
      ] as const
  );

@@ -45,7 +53,7 @@ class BrowseMediaManual extends LitElement {
        <div class="card-content">
          <ha-form
            .hass=${this.hass}
-            .schema=${this._schema()}
+            .schema=${this._schema(this.hideContentType)}
            .data=${this.item}
            .computeLabel=${this._computeLabel}
            .computeHelper=${this._computeHelper}
@@ -69,13 +77,35 @@ class BrowseMediaManual extends LitElement {

  private _computeLabel = (
    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}`);
+  ): string => {
+    switch (entry.name) {
+      case "media_content_id":
+      case "media_content_type":
+        return this.hass.localize(
+          `ui.components.selectors.media.${entry.name}`
+        );
+    }
+    return entry.name;
+  };

  private _computeHelper = (
    entry: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${entry.name}_detail`);
+  ): string => {
+    switch (entry.name) {
+      case "media_content_id":
+        return (
+          this.contentIdHelper ||
+          this.hass.localize(
+            `ui.components.selectors.media.${entry.name}_detail`
+          )
+        );
+      case "media_content_type":
+        return this.hass.localize(
+          `ui.components.selectors.media.${entry.name}_detail`
+        );
+    }
+    return "";
+  };

  private _mediaPicked() {
    fireEvent(this, "manual-media-picked", {
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -76,8 +76,8 @@ declare global {
 }

 export interface MediaPlayerItemId {
-  media_content_id: string | undefined;
-  media_content_type: string | undefined;
+  media_content_id?: string | undefined;
+  media_content_type?: string | undefined;
 }

 const MANUAL_ITEM: MediaPlayerItem = {
@@ -113,6 +113,10 @@ export class HaMediaPlayerBrowse extends LitElement {

  @property({ attribute: false }) public defaultType?: string;

+  @property({ attribute: false }) public hideContentType = false;
+
+  @property({ attribute: false }) public contentIdHelper?: string;
+
  // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
  @property({ type: Boolean, reflect: true }) public narrow = false;

@@ -521,6 +525,8 @@ export class HaMediaPlayerBrowse extends LitElement {
                        media_content_type: this.defaultType || "",
                      }}
                      .hass=${this.hass}
+                      .hideContentType=${this.hideContentType}
+                      .contentIdHelper=${this.contentIdHelper}
                      @manual-media-picked=${this._manualPicked}
                    ></ha-browse-media-manual>`
                  : isTTSMediaSource(currentItem.media_content_id)
--- a/src/components/media-player/show-media-browser-dialog.ts
+++ b/src/components/media-player/show-media-browser-dialog.ts
@@ -14,6 +14,8 @@ export interface MediaPlayerBrowseDialogParams {
  accept?: string[];
  defaultId?: string;
  defaultType?: string;
+  hideContentType?: boolean;
+  contentIdHelper?: string;
 }

 export const showMediaBrowserDialog = (
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -312,6 +312,10 @@ export interface LocationSelectorValue {
 export interface MediaSelector {
  media: {
    accept?: string[];
+    image_upload?: boolean;
+    clearable?: boolean;
+    hide_content_type?: boolean;
+    content_id_helper?: string;
  } | null;
 }

--- a/src/panels/lovelace/cards/hui-picture-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-card.ts
@@ -93,17 +93,21 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
      changedProps.has("_config") &&
      changedProps.get("_config")?.image !== this._config?.image;

+    const image =
+      (typeof this._config?.image === "object" &&
+        this._config.image.media_content_id) ||
+      (this._config.image as string | undefined);
    if (
      (firstHass || imageChanged) &&
-      typeof this._config?.image === "string" &&
-      isMediaSourceContentId(this._config.image)
+      typeof image === "string" &&
+      isMediaSourceContentId(image)
    ) {
      this._resolvedImage = undefined;
-      resolveMediaSource(this.hass, this._config?.image).then((result) => {
+      resolveMediaSource(this.hass, image).then((result) => {
        this._resolvedImage = result.url;
      });
    } else if (imageChanged) {
-      this._resolvedImage = this._config?.image;
+      this._resolvedImage = image;
    }
  }

--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -29,6 +29,7 @@ import type {
 import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
 import type { HomeSummary } from "../strategies/home/helpers/home-summaries";
+import type { MediaSelectorValue } from "../../../data/selector";

 export type AlarmPanelCardConfigState =
  | "arm_away"
@@ -441,7 +442,7 @@ export interface StatisticCardConfig extends LovelaceCardConfig {
 }

 export interface PictureCardConfig extends LovelaceCardConfig {
-  image?: string;
+  image?: string | MediaSelectorValue;
  image_entity?: string;
  tap_action?: ActionConfig;
  hold_action?: ActionConfig;
--- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
@@ -1,7 +1,8 @@
 import { mdiGestureTap } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, object, optional, string } from "superstruct";
+import { assert, assign, object, optional, string, union } from "superstruct";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-theme-picker";
@@ -11,11 +12,12 @@ import "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import type { LocalizeFunc } from "../../../../common/translations/localize";

 const cardConfigStruct = assign(
  baseLovelaceCardConfig,
  object({
-    image: optional(string()),
+    image: optional(union([string(), object()])),
    image_entity: optional(string()),
    tap_action: optional(actionConfigStruct),
    hold_action: optional(actionConfigStruct),
@@ -25,8 +27,32 @@ const cardConfigStruct = assign(
  })
 );

-const SCHEMA = [
-  { name: "image", selector: { image: {} } },
+@customElement("hui-picture-card-editor")
+export class HuiPictureCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: PictureCardConfig;
+
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
+        {
+          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: "image_entity",
          selector: { entity: { domain: ["image", "person"] } },
@@ -64,16 +90,8 @@ const SCHEMA = [
            },
          ],
        },
-] as const;
-
-@customElement("hui-picture-card-editor")
-export class HuiPictureCardEditor
-  extends LitElement
-  implements LovelaceCardEditor
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _config?: PictureCardConfig;
+      ] as const
+  );

  public setConfig(config: PictureCardConfig): void {
    assert(config, cardConfigStruct);
@@ -88,19 +106,28 @@ export class HuiPictureCardEditor
    return html`
      <ha-form
        .hass=${this.hass}
-        .data=${this._config}
-        .schema=${SCHEMA}
+        .data=${this._processData(this._config)}
+        .schema=${this._schema(this.hass.localize)}
        .computeLabel=${this._computeLabelCallback}
        @value-changed=${this._valueChanged}
      ></ha-form>
    `;
  }

+  private _processData = memoizeOne((config: PictureCardConfig) => ({
+    ...config,
+    ...(typeof config.image === "string"
+      ? { image: { media_content_id: config.image } }
+      : {}),
+  }));
+
  private _valueChanged(ev: CustomEvent): void {
    fireEvent(this, "config-changed", { config: ev.detail.value });
  }

-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
    switch (schema.name) {
      case "theme":
        return `${this.hass!.localize(
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -7880,7 +7880,8 @@
            },
            "picture": {
              "name": "Picture",
-              "description": "The Picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action."
+              "description": "The Picture card allows you to set an image to use for navigation to various paths in your interface or to perform an action.",
+              "content_id_helper": "Enter a media_source id or a URL for the image to be displayed."
            },
            "picture-elements": {
              "name": "Picture elements",