fix: Camera aspect-ratio should always apply (#2114)

- Closes #2073
2025-07-13 14:56:03 -07:00
parent d0bfb97843
commit c3e7cef9cf
29 changed files with 812 additions and 201 deletions
@@ -0,0 +1,158 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { throttle } from 'lodash-es';
+import { CameraDimensionsConfig } from '../config/schema/cameras';
+import { MediaLoadedInfo } from '../types';
+import { aspectRatioToString, setOrRemoveAttribute } from '../utils/basic';
+import { AdvancedCameraCardMediaLoadedEventTarget } from '../utils/media-info';
+import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout';
+
+const SIZE_ATTRIBUTE = 'size';
+type SizeMode = 'sized' | 'unsized' | 'unsized-portrait' | 'unsized-landscape';
+
+export class MediaProviderDimensionsController implements ReactiveController {
+  public resize = throttle(this._resizeHandler.bind(this), 100, {
+    trailing: true,
+  });
+
+  private _host: HTMLElement &
+    ReactiveControllerHost &
+    AdvancedCameraCardMediaLoadedEventTarget;
+  private _container: HTMLElement | null = null;
+  private _cameraConfig: CameraDimensionsConfig | null = null;
+  private _resizeObserver = new ResizeObserver(this.resize);
+  private _intendedHostSize: DOMRect | null = null;
+
+  constructor(host: HTMLElement & ReactiveControllerHost) {
+    this._host = host;
+    this._host.addController(this);
+  }
+
+  public hostConnected(): void {
+    this._host.addEventListener(
+      'advanced-camera-card:media:loaded',
+      this._mediaLoadHandler,
+    );
+
+    this._resizeObserver.observe(this._host);
+  }
+
+  public hostDisconnected(): void {
+    this._host.removeEventListener(
+      'advanced-camera-card:media:loaded',
+      this._mediaLoadHandler,
+    );
+    this._resizeObserver.disconnect();
+  }
+
+  public setContainer(container?: HTMLElement): void {
+    if (container === this._container) {
+      return;
+    }
+    this._container = container ?? null;
+    this._setAttributesFromConfig();
+  }
+
+  private _setAttributesFromConfig(): void {
+    if (this._container) {
+      this._container.style.aspectRatio = aspectRatioToString({
+        ratio: this._cameraConfig?.aspect_ratio,
+      });
+    }
+
+    updateElementStyleFromMediaLayoutConfig(this._host, this._cameraConfig?.layout);
+
+    // When the provider is not precisely sized, we guess the best aspect
+    // ratio to "maximize" if known. This prevents media "hopping" from no
+    // forced aspect ratio to a forced one, once its true size is known.
+    setOrRemoveAttribute<SizeMode>(
+      this._host,
+      true,
+      SIZE_ATTRIBUTE,
+      this._cameraConfig?.aspect_ratio
+        ? this._cameraConfig?.aspect_ratio[0] >= this._cameraConfig?.aspect_ratio[1]
+          ? 'unsized-landscape'
+          : 'unsized-portrait'
+        : 'unsized',
+    );
+  }
+
+  public setCameraConfig(config?: CameraDimensionsConfig): void {
+    this._cameraConfig = config ?? null;
+    this._setAttributesFromConfig();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private _mediaLoadHandler = (_ev: CustomEvent<MediaLoadedInfo>): void => {
+    // Allow the browser to render the media fully before attempting to resize.
+    // Without this, viewer provider will not be sized correctly.
+    window.requestAnimationFrame(() => this.resize());
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  private _resizeHandler(_entries?: ResizeObserverEntry[]): void {
+    const rememberHostSize = (): void => {
+      this._intendedHostSize = this._host.getBoundingClientRect();
+    };
+
+    const setUnsizedAttribute = (): void => {
+      setOrRemoveAttribute<SizeMode>(this._host, true, SIZE_ATTRIBUTE, 'unsized');
+    };
+
+    const setContainerIntrinsicSize = (container: HTMLElement): void => {
+      container.style.width = '100%';
+      container.style.height = 'auto';
+      rememberHostSize();
+    };
+
+    const setContainerSize = (
+      container: HTMLElement,
+      width: number,
+      height: number,
+    ): void => {
+      container.style.width = `${width}px`;
+      container.style.height = `${height}px`;
+      rememberHostSize();
+    };
+
+    const hostSize = this._host.getBoundingClientRect();
+    if (
+      hostSize.width === this._intendedHostSize?.width &&
+      hostSize.height === this._intendedHostSize?.height
+    ) {
+      return;
+    }
+
+    if (!this._container) {
+      setUnsizedAttribute();
+      return;
+    }
+
+    // In the ideal case, the width can be maximum and the height can be
+    // whatever is necessary to support the aspect ratio.
+    setContainerIntrinsicSize(this._container);
+
+    const containerSize = this._container.getBoundingClientRect();
+
+    if (!containerSize.width || !containerSize.height) {
+      setUnsizedAttribute();
+      return;
+    }
+
+    const mediaAspectRatio = containerSize.width / containerSize.height;
+    const newHostSize = this._host.getBoundingClientRect();
+
+    // If the container is larger than the host, the host was not able to expand
+    // enough to cover the size (e.g. fullscreen, panel or height constrained in
+    // configuration). In this case, just limit the container to the host height
+    // at the same aspect ratio.
+    if (containerSize.height > newHostSize.height) {
+      setContainerSize(
+        this._container,
+        newHostSize.height * mediaAspectRatio,
+        newHostSize.height,
+      );
+    }
+
+    setOrRemoveAttribute<SizeMode>(this._host, true, SIZE_ATTRIBUTE, 'sized');
+  }
+}