jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 20:26:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow picture card to serve media images (#26291)

Browse Source 
* Allow picture card to serve media images

* small adjustments
This commit is contained in:
karwosts 2025-07-28 23:49:08 -07:00 committed by GitHub
parent 4740a71bdd
commit c14425b2d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/data/media_source.ts
View File

@ -24,6 +24,9 @@ export const browseLocalMediaPlayer = (
media_content_id: mediaContentId,
});
export const isMediaSourceContentId = (mediaId: string) =>
mediaId.startsWith("media-source://");
export const isLocalMediaSourceContentId = (mediaId: string) =>
mediaId.startsWith("media-source://media_source");

46
src/panels/lovelace/cards/hui-picture-card.ts
View File

@ -18,6 +18,10 @@ import { createEntityNotFoundWarning } from "../components/hui-warning";
import type { LovelaceCard, LovelaceCardEditor } from "../types";
import type { PictureCardConfig } from "./types";
import type { PersonEntity } from "../../../data/person";
import {
isMediaSourceContentId,
resolveMediaSource,
} from "../../../data/media_source";
@customElement("hui-picture-card")
export class HuiPictureCard extends LitElement implements LovelaceCard {
@ -37,6 +41,8 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
@state() private _config?: PictureCardConfig;
@state() private _resolvedImage?: string;
public getCardSize(): number {
return 5;
}
@ -53,7 +59,11 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
}
protected shouldUpdate(changedProps: PropertyValues): boolean {
if (!this._config || hasConfigChanged(this, changedProps)) {
if (
!this._config ||
hasConfigChanged(this, changedProps) ||
changedProps.has("_resolvedImage")
) {
return true;
}
if (this._config.image_entity && changedProps.has("hass")) {
@ -70,6 +80,33 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
return false;
}
protected willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps);
if (!this._config || !this.hass) {
return;
}
const firstHass =
changedProps.has("hass") && changedProps.get("hass") === undefined;
const imageChanged =
changedProps.has("_config") &&
changedProps.get("_config")?.image !== this._config?.image;
if (
(firstHass || imageChanged) &&
typeof this._config?.image === "string" &&
isMediaSourceContentId(this._config.image)
) {
this._resolvedImage = undefined;
resolveMediaSource(this.hass, this._config?.image).then((result) => {
this._resolvedImage = result.url;
});
} else if (imageChanged) {
this._resolvedImage = this._config?.image;
}
}
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
if (!this._config || !this.hass) {
@ -106,7 +143,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
}
}
let image: string | undefined = this._config.image;
let image: string | undefined = this._resolvedImage;
if (this._config.image_entity) {
const domain: string = computeDomain(this._config.image_entity);
switch (domain) {
@ -121,6 +158,11 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
}
}
if (image === undefined) {
// Bail if we're waiting for our image to be resolved from the media-source.
return nothing;
}
return html`
<ha-card
@action=${this._handleAction}