Show entity_picture in logbook (#8118)

src/common/const.ts

@@ -138,6 +138,9 @@ export const DOMAINS_TOGGLE = new Set([
   "humidifier",
 ]);
 
+/** Domains that have a dynamic entity image / picture. */
+export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set(["camera", "media_player"]);
+
 /** Temperature units. */
 export const UNIT_C = "°C";
 export const UNIT_F = "°F";

src/components/entity/state-badge.ts

@@ -37,7 +37,8 @@ export class StateBadge extends LitElement {
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
 
-    if (!stateObj) {
+    // We either need a `stateObj` or one override
+    if (!stateObj && !this.overrideIcon && !this.overrideImage) {
       return html`<div class="missing">
         <ha-icon icon="hass:alert"></ha-icon>
       </div>`;
@@ -47,7 +48,7 @@ export class StateBadge extends LitElement {
       return html``;
     }
 
-    const domain = computeStateDomain(stateObj);
+    const domain = stateObj ? computeStateDomain(stateObj) : undefined;
 
     return html`
       <ha-icon
@@ -57,14 +58,18 @@ export class StateBadge extends LitElement {
             ? domain
             : undefined
         )}
-        data-state=${computeActiveState(stateObj)}
+        data-state=${stateObj ? computeActiveState(stateObj) : ""}
-        .icon=${this.overrideIcon || stateIcon(stateObj)}
+        .icon=${this.overrideIcon || (stateObj ? stateIcon(stateObj) : "")}
       ></ha-icon>
     `;
   }
 
   protected updated(changedProps: PropertyValues) {
-    if (!changedProps.has("stateObj") || !this.stateObj) {
+    if (
+      !changedProps.has("stateObj") &&
+      !changedProps.has("overrideImage") &&
+      !changedProps.has("overrideIcon")
+    ) {
       return;
     }
     const stateObj = this.stateObj;
@@ -114,7 +119,15 @@ export class StateBadge extends LitElement {
           iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`;
         }
       }
+    } else if (this.overrideImage) {
+      let imageUrl = this.overrideImage;
+      if (this.hass) {
+        imageUrl = this.hass.hassUrl(imageUrl);
       }
+      hostStyle.backgroundImage = `url(${imageUrl})`;
+      this._showIcon = false;
+    }
+
     this._iconStyle = iconStyle;
     Object.assign(this.style, hostStyle);
   }

src/panels/logbook/ha-logbook.ts

@@ -11,6 +11,7 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { scroll } from "lit-virtualizer";
+import { DOMAINS_WITH_DYNAMIC_PICTURE } from "../../common/const";
 import { formatDate } from "../../common/datetime/format_date";
 import { formatTimeWithSeconds } from "../../common/datetime/format_time";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
@@ -18,8 +19,8 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
+import "../../components/entity/state-badge";
 import "../../components/ha-circular-progress";
-import "../../components/ha-icon";
 import "../../components/ha-relative-time";
 import { LogbookEntry } from "../../data/logbook";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
@@ -111,9 +112,12 @@ class HaLogbook extends LitElement {
     }
 
     const previous = this.entries[index - 1];
-    const state = item.entity_id ? this.hass.states[item.entity_id] : undefined;
+    const stateObj = item.entity_id
+      ? this.hass.states[item.entity_id]
+      : undefined;
     const item_username =
       item.context_user_id && this.userIdToName[item.context_user_id];
+    const domain = item.entity_id ? computeDomain(item.entity_id) : item.domain;
 
     return html`
       <div class="entry-container">
@@ -132,17 +136,18 @@ class HaLogbook extends LitElement {
         <div class="entry ${classMap({ "no-entity": !item.entity_id })}">
           <div class="icon-message">
             ${!this.noIcon
-              ? html`
+              ? // We do not want to use dynamic entity pictures (e.g., from media player) for the log book rendering,
-                  <ha-icon
+                // as they would present a false state in the log (played media right now vs actual historic data).
-                    .icon=${item.icon ??
+                html`
-                    domainIcon(
+                  <state-badge
-                      item.entity_id
+                    .hass=${this.hass}
-                        ? computeDomain(item.entity_id)
+                    .overrideIcon=${item.icon ??
-                        : item.domain,
+                    domainIcon(domain, stateObj, item.state)}
-                      state,
+                    .overrideImage=${DOMAINS_WITH_DYNAMIC_PICTURE.has(domain)
-                      item.state
+                      ? ""
-                    )}
+                      : stateObj?.attributes.entity_picture_local ||
-                  ></ha-icon>
+                        stateObj?.attributes.entity_picture}
+                  ></state-badge>
                 `
               : ""}
             <div class="message-relative_time">
@@ -295,7 +300,7 @@ class HaLogbook extends LitElement {
           color: var(--secondary-text-color);
         }
 
-        ha-icon {
+        state-badge {
           margin-right: 16px;
           flex-shrink: 0;
           color: var(--state-icon-color);
@@ -330,7 +335,7 @@ class HaLogbook extends LitElement {
           padding: 8px;
         }
 
-        .narrow .icon-message ha-icon {
+        .narrow .icon-message state-badge {
           margin-left: 0;
         }
       `,