From 9fae0a5169c53f971ea25dde2c1b41d56795e839 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 16 May 2022 23:00:08 +0200
Subject: [PATCH] fix(person): fix state not displayed on cast devices (#495)

* fix(chip): fix entity chip avatar

* chore: add missing imports

* fix: fix name not displayed
---
 src/cards/chips-card/chips/entity-chip.ts |  2 +-
 src/cards/person-card/person-card.ts      | 70 +++++++++++------------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/cards/chips-card/chips/entity-chip.ts b/src/cards/chips-card/chips/entity-chip.ts
index a28b29e4d..029dd02c8 100644
--- a/src/cards/chips-card/chips/entity-chip.ts
+++ b/src/cards/chips-card/chips/entity-chip.ts
@@ -93,7 +93,7 @@ export class EntityChip extends LitElement implements LovelaceChip {
                     hasHold: hasAction(this._config.hold_action),
                     hasDoubleClick: hasAction(this._config.double_tap_action),
                 })}
-                .avatar=${(this.hass as any).hassUrl(picture)}
+                .avatar=${picture ? (this.hass as any).hassUrl(picture) : undefined}
                 .avatarOnly=${picture && !content}
             >
                 ${!picture ? this.renderIcon(icon, iconColor, active) : null}
diff --git a/src/cards/person-card/person-card.ts b/src/cards/person-card/person-card.ts
index 535a04250..6b404d780 100644
--- a/src/cards/person-card/person-card.ts
+++ b/src/cards/person-card/person-card.ts
@@ -17,6 +17,8 @@ import "../../shared/badge-icon";
 import "../../shared/card";
 import "../../shared/shape-avatar";
 import "../../shared/shape-icon";
+import "../../shared/state-info";
+import "../../shared/state-item";
 import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
@@ -101,41 +103,39 @@ export class PersonCard extends MushroomBaseElement implements LovelaceCard {
         return html`
             <ha-card class=${classMap({ "fill-container": this._config.fill_container ?? false })}>
                 <mushroom-card .layout=${layout} ?rtl=${rtl}>
-                    <div class="container">
-                        <mushroom-state-item
-                            ?rtl=${rtl}
-                            .layout=${layout}
-                            @action=${this._handleAction}
-                            .actionHandler=${actionHandler({
-                                hasHold: hasAction(this._config.hold_action),
-                                hasDoubleClick: hasAction(this._config.double_tap_action),
-                            })}
-                            hide_info=${hideName && hideState}
-                        >
-                            ${picture
-                                ? html`
-                                      <mushroom-shape-avatar
-                                          slot="icon"
-                                          .picture_url=${(this.hass as any).hassUrl(picture)}
-                                      ></mushroom-shape-avatar>
-                                  `
-                                : html`
-                                      <mushroom-shape-icon
-                                          slot="icon"
-                                          .icon=${icon}
-                                          .disabled=${!isActive(entity)}
-                                      ></mushroom-shape-icon>
-                                  `}
-                            ${isAvailable(entity)
-                                ? this.renderStateBadge(stateIcon, stateColor)
-                                : this.renderUnavailableBadge()}
-                            <mushroom-state-info
-                                slot="info"
-                                .primary=${!hideName ? name : undefined}
-                                .secondary=${!hideState && stateDisplay}
-                            ></mushroom-state-info>
-                        </mushroom-state-item>
-                    </div>
+                    <mushroom-state-item
+                        ?rtl=${rtl}
+                        .layout=${layout}
+                        @action=${this._handleAction}
+                        .actionHandler=${actionHandler({
+                            hasHold: hasAction(this._config.hold_action),
+                            hasDoubleClick: hasAction(this._config.double_tap_action),
+                        })}
+                        .hide_info=${hideName && hideState}
+                    >
+                        ${picture
+                            ? html`
+                                  <mushroom-shape-avatar
+                                      slot="icon"
+                                      .picture_url=${(this.hass as any).hassUrl(picture)}
+                                  ></mushroom-shape-avatar>
+                              `
+                            : html`
+                                  <mushroom-shape-icon
+                                      slot="icon"
+                                      .icon=${icon}
+                                      .disabled=${!isActive(entity)}
+                                  ></mushroom-shape-icon>
+                              `}
+                        ${isAvailable(entity)
+                            ? this.renderStateBadge(stateIcon, stateColor)
+                            : this.renderUnavailableBadge()}
+                        <mushroom-state-info
+                            slot="info"
+                            .primary=${!hideName ? name : undefined}
+                            .secondary=${!hideState ? stateDisplay : undefined}
+                        ></mushroom-state-info>
+                    </mushroom-state-item>
                 </mushroom-card>
             </ha-card>
         `;