Add per domain style for tile card image (#19419)

src/components/tile/ha-tile-image.ts

@@ -1,16 +1,19 @@
-import { CSSResultGroup, html, css, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 
+export type TileImageStyle = "square" | "rounded-square" | "circle";
 @customElement("ha-tile-image")
 export class HaTileImage extends LitElement {
   @property() public imageUrl?: string;
 
   @property() public imageAlt?: string;
 
+  @property() public imageStyle: TileImageStyle = "circle";
+
   protected render() {
     return html`
-      <div class="image">
+      <div class="image ${this.imageStyle}">
         ${this.imageUrl
           ? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
           : nothing}
@@ -31,6 +34,12 @@ export class HaTileImage extends LitElement {
         justify-content: center;
         overflow: hidden;
       }
+      .image.rounded-square {
+        border-radius: 8%;
+      }
+      .image.square {
+        border-radius: 0;
+      }
       .image img {
         width: 100%;
         height: 100%;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -33,22 +33,23 @@ import "../../../components/ha-card";
 import "../../../components/tile/ha-tile-badge";
 import "../../../components/tile/ha-tile-icon";
 import "../../../components/tile/ha-tile-image";
+import type { TileImageStyle } from "../../../components/tile/ha-tile-image";
 import "../../../components/tile/ha-tile-info";
 import { cameraUrlWithWidthHeight } from "../../../data/camera";
 import { isUnavailableState } from "../../../data/entity";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
 import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
+import { UpdateEntity, computeUpdateStateDisplay } from "../../../data/update";
 import { HomeAssistant } from "../../../types";
+import "../card-features/hui-card-features";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import "../components/hui-timestamp-display";
-import "../card-features/hui-card-features";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import { computeTileBadge } from "./tile/badges/tile-badge";
 import type { ThermostatCardConfig, TileCardConfig } from "./types";
-import { UpdateEntity, computeUpdateStateDisplay } from "../../../data/update";
 
 const TIMESTAMP_STATE_DOMAINS = ["button", "input_button", "scene"];
 
@@ -61,6 +62,11 @@ export const getEntityDefaultTileIconAction = (entityId: string) => {
   return supportsIconAction ? "toggle" : "more-info";
 };
 
+const DOMAIN_IMAGE_STYLE: Record<string, TileImageStyle> = {
+  update: "square",
+  media_player: "rounded-square",
+};
+
 @customElement("hui-tile-card")
 export class HuiTileCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -413,6 +419,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             ${imageUrl
               ? html`
                   <ha-tile-image
+                    .imageStyle=${DOMAIN_IMAGE_STYLE[domain] || "circle"}
                     class="icon"
                     .imageUrl=${imageUrl}
                   ></ha-tile-image>