Pass the width and height when requesting camera images (#9683)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/common/util/time-cache-function-promise.ts

@@ -7,14 +7,10 @@ interface ResultCache<T> {
 export const timeCachePromiseFunc = async <T>(
   cacheKey: string,
   cacheTime: number,
-  func: (
+  func: (hass: HomeAssistant, entityId: string, ...args: any[]) => Promise<T>,
   hass: HomeAssistant,
   entityId: string,
-    ...args: unknown[]
+  ...args: any[]
-  ) => Promise<T>,
-  hass: HomeAssistant,
-  entityId: string,
-  ...args: unknown[]
 ): Promise<T> => {
   let cache: ResultCache<T> | undefined = (hass as any)[cacheKey];
 

src/data/camera.ts

@@ -38,22 +38,28 @@ export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
 
 export const fetchThumbnailUrlWithCache = (
   hass: HomeAssistant,
-  entityId: string
+  entityId: string,
+  width: number,
+  height: number
 ) =>
   timeCachePromiseFunc(
     "_cameraTmbUrl",
     9000,
     fetchThumbnailUrl,
     hass,
-    entityId
+    entityId,
+    width,
+    height
   );
 
 export const fetchThumbnailUrl = async (
   hass: HomeAssistant,
-  entityId: string
+  entityId: string,
+  width: number,
+  height: number
 ) => {
   const path = await getSignedPath(hass, `/api/camera_proxy/${entityId}`);
-  return hass.hassUrl(path.path);
+  return hass.hassUrl(`${path.path}&width=${width}&height=${height}`);
 };
 
 export const fetchStreamUrl = async (

src/panels/lovelace/components/hui-image.ts

@@ -19,6 +19,10 @@ import { HomeAssistant } from "../../../types";
 const UPDATE_INTERVAL = 10000;
 const DEFAULT_FILTER = "grayscale(100%)";
 
+const MAX_IMAGE_WIDTH = 640;
+const ASPECT_RATIO_DEFAULT = 9 / 16;
+const SCALING_FACTOR = 2;
+
 export interface StateSpecificConfig {
   [state: string]: string;
 }
@@ -228,9 +232,25 @@ export class HuiImage extends LitElement {
       return;
     }
 
+    // One the first render we will not know the width
+    const element_width = this._image.offsetWidth
+      ? this._image.offsetWidth
+      : MAX_IMAGE_WIDTH;
+    // Because the aspect ratio might result in a smaller image,
+    // we ask for 200% of what we need to make sure the image is
+    // still clear. In practice, for 4k sources, this is still
+    // an order of magnitude smaller.
+    const width = Math.ceil(element_width * SCALING_FACTOR);
+    // If the image has not rendered yet we may have a zero height
+    const height = this._image.offsetHeight
+      ? this._image.offsetHeight * SCALING_FACTOR
+      : Math.ceil(element_width * SCALING_FACTOR * ASPECT_RATIO_DEFAULT);
+
     this._cameraImageSrc = await fetchThumbnailUrlWithCache(
       this.hass,
-      this.cameraImage
+      this.cameraImage,
+      width,
+      height
     );
   }