Request tiny thumbnails for cameras in the entity selector to reduce memory pressure (#12880)

src/components/entity/state-badge.ts

@@ -12,8 +12,10 @@ import { property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { computeActiveState } from "../../common/entity/compute_active_state";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { iconColorCSS } from "../../common/style/icon_color_css";
+import { cameraUrlWithWidthHeight } from "../../data/camera";
 import type { HomeAssistant } from "../../types";
 import "../ha-state-icon";
 
@@ -93,6 +95,9 @@ export class StateBadge extends LitElement {
         if (this.hass) {
           imageUrl = this.hass.hassUrl(imageUrl);
         }
+        if (computeDomain(stateObj.entity_id) === "camera") {
+          imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
+        }
         hostStyle.backgroundImage = `url(${imageUrl})`;
         this._showIcon = false;
       } else if (stateObj.state === "on") {

src/data/camera.ts

@@ -41,6 +41,12 @@ export interface WebRtcAnswer {
   answer: string;
 }
 
+export const cameraUrlWithWidthHeight = (
+  base_url: string,
+  width: number,
+  height: number
+) => `${base_url}&width=${width}&height=${height}`;
+
 export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
   `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
 
@@ -57,7 +63,7 @@ export const fetchThumbnailUrlWithCache = async (
     hass,
     entityId
   );
-  return `${base_url}&width=${width}&height=${height}`;
+  return cameraUrlWithWidthHeight(base_url, width, height);
 };
 
 export const fetchThumbnailUrl = async (