fix(cards): use entity_picture_local when necessary (#430)

src/cards/chips-card/chips/entity-chip.ts

@@ -10,7 +10,7 @@ import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../../ha/common/entity/compute-state-display";
-import { isActive } from "../../../ha/data/entity";
+import { getEntityPicture, isActive } from "../../../ha/data/entity";
 import { computeRgbColor } from "../../../utils/colors";
 import { actionHandler } from "../../../utils/directives/action-handler-directive";
 import { stateIcon } from "../../../utils/icons/state-icon";
@@ -63,9 +63,7 @@ export class EntityChip extends LitElement implements LovelaceChip {
         const icon = this._config.icon || stateIcon(entity);
         const iconColor = this._config.icon_color;
 
-        const picture = this._config.use_entity_picture
-            ? entity.attributes.entity_picture
-            : undefined;
+        const picture = this._config.use_entity_picture ? getEntityPicture(entity) : undefined;
 
         const stateDisplay = computeStateDisplay(this.hass.localize, entity, this.hass.locale);
 

src/cards/entity-card/entity-card.ts

@@ -12,7 +12,7 @@ import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
-import { isActive, isAvailable } from "../../ha/data/entity";
+import { getEntityPicture, isActive, isAvailable } from "../../ha/data/entity";
 import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-avatar";
@@ -86,9 +86,7 @@ export class EntityCard extends MushroomBaseElement implements LovelaceCard {
         const hideIcon = !!this._config.hide_icon;
         const layout = getLayoutFromConfig(this._config);
 
-        const picture = this._config.use_entity_picture
-            ? entity.attributes.entity_picture
-            : undefined;
+        const picture = this._config.use_entity_picture ? getEntityPicture(entity) : undefined;
 
         const stateDisplay = computeStateDisplay(this.hass.localize, entity, this.hass.locale);
 

src/cards/media-player-card/media-player-card.ts

@@ -10,7 +10,7 @@ import {
 import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { isActive } from "../../ha/data/entity";
+import { getEntityPicture, isActive } from "../../ha/data/entity";
 import { MediaPlayerEntity } from "../../ha/data/media-player";
 import "../../shared/badge-icon";
 import "../../shared/card";
@@ -144,9 +144,7 @@ export class MediaPlayerCard extends MushroomBaseElement implements LovelaceCard
 
         const rtl = computeRTL(this.hass);
 
-        const artwork = this._config.use_media_artwork
-            ? entity.attributes.entity_picture
-            : undefined;
+        const artwork = this._config.use_media_artwork ? getEntityPicture(entity) : undefined;
 
         return html`
             <ha-card class=${classMap({ "fill-container": this._config.fill_container ?? false })}>

src/cards/person-card/person-card.ts

@@ -12,7 +12,7 @@ import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { isActive, isAvailable } from "../../ha/data/entity";
+import { getEntityPicture, isActive, isAvailable } from "../../ha/data/entity";
 import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-avatar";
@@ -82,9 +82,7 @@ export class PersonCard extends MushroomBaseElement implements LovelaceCard {
         const name = this._config.name || entity.attributes.friendly_name;
         const icon = this._config.icon || stateIconHelper(entity);
 
-        const picture = this._config.use_entity_picture
-            ? entity.attributes.entity_picture
-            : undefined;
+        const picture = this._config.use_entity_picture ? getEntityPicture(entity) : undefined;
 
         const layout = getLayoutFromConfig(this._config);
         const hideState = !!this._config.hide_state;

src/cards/update-card/update-card.ts

@@ -13,7 +13,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
 import { supportsFeature } from "../../ha/common/entity/supports-feature";
-import { isActive, isAvailable } from "../../ha/data/entity";
+import { getEntityPicture, isActive, isAvailable } from "../../ha/data/entity";
 import { UpdateEntity, updateIsInstalling, UPDATE_SUPPORT_INSTALL } from "../../ha/data/update";
 import "../../shared/badge-icon";
 import "../../shared/card";
@@ -85,9 +85,7 @@ export class UpdateCard extends MushroomBaseElement implements LovelaceCard {
 
         const name = this._config.name || entity.attributes.friendly_name || "";
         const icon = this._config.icon || stateIcon(entity);
-        const picture = this._config.use_entity_picture
-            ? entity.attributes.entity_picture
-            : undefined;
+        const picture = this._config.use_entity_picture ? getEntityPicture(entity) : undefined;
 
         const layout = getLayoutFromConfig(this._config);
 

src/ha/data/entity.ts

@@ -42,3 +42,10 @@ export function isOff(entity: HassEntity) {
 export function isUnknown(entity: HassEntity) {
     return entity.state === UNKNOWN;
 }
+
+export function getEntityPicture(entity: HassEntity) {
+    return (
+        (entity.attributes.entity_picture_local as string | undefined) ||
+        entity.attributes.entity_picture
+    );
+}