diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index feb10f1bf0..924ccc2ba9 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -113,71 +113,74 @@ export class StateBadge extends LitElement { this.icon = true; - if (stateObj && this.overrideImage === undefined) { - // hide icon if we have entity picture - if ( - (stateObj.attributes.entity_picture_local || - stateObj.attributes.entity_picture) && - !this.overrideIcon - ) { - let imageUrl = - stateObj.attributes.entity_picture_local || - stateObj.attributes.entity_picture; + if (stateObj) { + const domain = computeDomain(stateObj.entity_id); + if (this.overrideImage === undefined) { + // hide icon if we have entity picture + if ( + (stateObj.attributes.entity_picture_local || + stateObj.attributes.entity_picture) && + !this.overrideIcon + ) { + let imageUrl = + stateObj.attributes.entity_picture_local || + stateObj.attributes.entity_picture; + if (this.hass) { + imageUrl = this.hass.hassUrl(imageUrl); + } + if (domain === "camera") { + imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80); + } + backgroundImage = `url(${imageUrl})`; + this.icon = false; + } else if (this.color) { + // Externally provided overriding color wins over state color + iconStyle.color = this.color; + } else if (this._stateColor) { + const color = stateColorCss(stateObj); + if (color) { + iconStyle.color = color; + } + if (stateObj.attributes.rgb_color) { + iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`; + } + if (stateObj.attributes.brightness) { + const brightness = stateObj.attributes.brightness; + if (typeof brightness !== "number") { + const errorMessage = `Type error: state-badge expected number, but type of ${ + stateObj.entity_id + }.attributes.brightness is ${typeof brightness} (${brightness})`; + // eslint-disable-next-line + console.warn(errorMessage); + } + iconStyle.filter = stateColorBrightness(stateObj); + } + if (stateObj.attributes.hvac_action) { + const hvacAction = stateObj.attributes.hvac_action; + if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) { + iconStyle.color = stateColorCss( + stateObj, + CLIMATE_HVAC_ACTION_TO_MODE[hvacAction] + )!; + } else { + delete iconStyle.color; + } + } + } + } else if (this.overrideImage) { + let imageUrl = this.overrideImage; if (this.hass) { imageUrl = this.hass.hassUrl(imageUrl); } - const domain = computeDomain(stateObj.entity_id); - if (domain === "camera") { - imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80); - } backgroundImage = `url(${imageUrl})`; this.icon = false; - if (domain === "update") { - this.style.borderRadius = "0"; - } else if (domain === "media_player") { - this.style.borderRadius = "8%"; - } - } else if (this.color) { - // Externally provided overriding color wins over state color - iconStyle.color = this.color; - } else if (this._stateColor) { - const color = stateColorCss(stateObj); - if (color) { - iconStyle.color = color; - } - if (stateObj.attributes.rgb_color) { - iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`; - } - if (stateObj.attributes.brightness) { - const brightness = stateObj.attributes.brightness; - if (typeof brightness !== "number") { - const errorMessage = `Type error: state-badge expected number, but type of ${ - stateObj.entity_id - }.attributes.brightness is ${typeof brightness} (${brightness})`; - // eslint-disable-next-line - console.warn(errorMessage); - } - iconStyle.filter = stateColorBrightness(stateObj); - } - if (stateObj.attributes.hvac_action) { - const hvacAction = stateObj.attributes.hvac_action; - if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) { - iconStyle.color = stateColorCss( - stateObj, - CLIMATE_HVAC_ACTION_TO_MODE[hvacAction] - )!; - } else { - delete iconStyle.color; - } - } } - } else if (this.overrideImage) { - let imageUrl = this.overrideImage; - if (this.hass) { - imageUrl = this.hass.hassUrl(imageUrl); + + if (domain === "update") { + this.style.borderRadius = "0"; + } else if (domain === "media_player" || domain === "camera") { + this.style.borderRadius = "8%"; } - backgroundImage = `url(${imageUrl})`; - this.icon = false; } this._iconStyle = iconStyle;