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

- Closes #2073

src/card.ts

@@ -129,6 +129,15 @@ class AdvancedCameraCard extends LitElement {
     }
   }
 
+  set isPanel(isPanel: boolean) {
+    this._controller.getConditionStateManager().setState({
+      panel: isPanel,
+    });
+  }
+  get isPanel(): boolean {
+    return !!this._controller.getConditionStateManager().getState().panel;
+  }
+
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     return await CardController.getConfigElement();
   }
@@ -380,6 +389,7 @@ class AdvancedCameraCard extends LitElement {
             .configManager=${this._controller.getConfigManager()}
             .hide=${!!this._controller.getMessageManager().hasMessage()}
             .microphoneState=${this._controller.getMicrophoneManager().getState()}
+            .conditionStateManager=${this._controller.getConditionStateManager()}
             .triggeredCameraIDs=${this._config?.view.triggers.show_trigger_status
               ? this._controller.getTriggersManager().getTriggeredCameraIDs()
               : undefined}

src/components-lib/media-provider-dimensions-controller.ts

@@ -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');
+  }
+}

src/components/image-updating-player.ts

@@ -64,7 +64,7 @@ export const resolveImageMode = (options?: {
 };
 
 /**
- * A media player to wrap a image that updates continuously.
+ * A media player to wrap an image that updates continuously.
  */
 @customElement('advanced-camera-card-image-updating-player')
 export class AdvancedCameraCardImageUpdatingPlayer

src/components/image.ts

@@ -11,6 +11,7 @@ import { guard } from 'lit/directives/guard.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { CameraManager } from '../camera-manager/manager';
 import { ViewManagerEpoch } from '../card-controller/view/types';
+import { MediaProviderDimensionsController } from '../components-lib/media-provider-dimensions-controller';
 import { ZoomSettingsObserved } from '../components-lib/zoom/types';
 import { handleZoomSettingsObservedEvent } from '../components-lib/zoom/zoom-view-context';
 import { CameraConfig } from '../config/schema/cameras';
@@ -19,8 +20,6 @@ import { IMAGE_VIEW_ZOOM_TARGET_SENTINEL } from '../const';
 import { HomeAssistant } from '../ha/types';
 import imageStyle from '../scss/image.scss';
 import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../types.js';
-import { aspectRatioToString } from '../utils/basic';
-import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.js';
 import './image-updating-player';
 import { resolveImageMode } from './image-updating-player';
 import './zoomer.js';
@@ -42,36 +41,29 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
   @property({ attribute: false })
   public imageConfig?: ImageViewConfig;
 
+  protected _dimensionsController = new MediaProviderDimensionsController(this);
+  protected _refImage: Ref<MediaPlayerElement> = createRef();
+  protected _refContainer: Ref<HTMLElement> = createRef();
+
   public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
     await this.updateComplete;
     return (await this._refImage.value?.getMediaPlayerController()) ?? null;
   }
 
-  protected _refImage: Ref<MediaPlayerElement> = createRef();
-
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('cameraConfig') || changedProps.has('imageConfig')) {
-      if (
+      this._dimensionsController.setCameraConfig(
         resolveImageMode({
           imageConfig: this.imageConfig,
           cameraConfig: this.cameraConfig,
         }) === 'camera'
-      ) {
-        updateElementStyleFromMediaLayoutConfig(
-          this,
-          this.cameraConfig?.dimensions?.layout,
-        );
-        this.style.aspectRatio = aspectRatioToString({
-          ratio: this.cameraConfig?.dimensions?.aspect_ratio,
-        });
-      } else {
-        updateElementStyleFromMediaLayoutConfig(this);
-        this.style.removeProperty('aspect-ratio');
-      }
+          ? this.cameraConfig?.dimensions
+          : undefined,
+      );
     }
   }
 
-  protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
+  protected _renderContainer(template: TemplateResult): TemplateResult {
     const zoomTarget = IMAGE_VIEW_ZOOM_TARGET_SENTINEL;
     const view = this.viewManagerEpoch?.manager.getView();
     const mode = resolveImageMode({
@@ -79,29 +71,33 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
       cameraConfig: this.cameraConfig,
     });
 
-    return this.imageConfig?.zoomable
-      ? html` <advanced-camera-card-zoomer
-          .defaultSettings=${guard(
-            [this.imageConfig, this.cameraConfig?.dimensions?.layout],
-            () =>
-              mode === 'camera' && this.cameraConfig?.dimensions?.layout
-                ? {
-                    pan: this.cameraConfig.dimensions.layout.pan,
-                    zoom: this.cameraConfig.dimensions.layout.zoom,
-                  }
-                : undefined,
-          )}
-          .settings=${view?.context?.zoom?.[zoomTarget]?.requested}
-          @advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
-            handleZoomSettingsObservedEvent(
-              ev,
-              this.viewManagerEpoch?.manager,
-              zoomTarget,
+    return html`<div class="container" ${ref(this._refContainer)}>
+      ${this.imageConfig?.zoomable
+        ? html`<advanced-camera-card-zoomer
+            .defaultSettings=${guard(
+              [this.imageConfig, this.cameraConfig?.dimensions?.layout],
+              () =>
+                mode === 'camera' && this.cameraConfig?.dimensions?.layout
+                  ? {
+                      pan: this.cameraConfig.dimensions.layout.pan,
+                      zoom: this.cameraConfig.dimensions.layout.zoom,
+                    }
+                  : undefined,
             )}
-        >
-          ${template}
-        </advanced-camera-card-zoomer>`
-      : template;
+            .settings=${view?.context?.zoom?.[zoomTarget]?.requested}
+            @advanced-camera-card:zoom:change=${(
+              ev: CustomEvent<ZoomSettingsObserved>,
+            ) =>
+              handleZoomSettingsObservedEvent(
+                ev,
+                this.viewManagerEpoch?.manager,
+                zoomTarget,
+              )}
+          >
+            ${template}
+          </advanced-camera-card-zoomer>`
+        : template}
+    </div>`;
   }
 
   protected render(): TemplateResult | void {
@@ -109,7 +105,7 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
       return;
     }
 
-    return this._useZoomIfRequired(html`
+    return this._renderContainer(html`
       <advanced-camera-card-image-updating-player
         ${ref(this._refImage)}
         .hass=${this.hass}
@@ -121,6 +117,10 @@ export class AdvancedCameraCardImage extends LitElement implements MediaPlayer {
     `);
   }
 
+  public updated(): void {
+    this._dimensionsController.setContainer(this._refContainer.value);
+  }
+
   static get styles(): CSSResultGroup {
     return unsafeCSS(imageStyle);
   }

src/components/live/index.ts

@@ -40,12 +40,6 @@ export class AdvancedCameraCardLive extends LitElement {
       return;
     }
 
-    // Implementation notes:
-    // - See use of liveConfig and not config below -- the underlying carousel
-    //   will independently override the liveConfig to reflect the camera in the
-    //   carousel (not necessarily the selected camera).
-    // - Various events are captured to prevent them propagating upwards if the
-    //   card is in the background.
     return html`
       <advanced-camera-card-live-grid
         .hass=${this.hass}

src/components/live/provider.ts

@@ -14,6 +14,7 @@ import { CameraEndpoints } from '../../camera-manager/types.js';
 import { MicrophoneState } from '../../card-controller/types.js';
 import { LazyLoadController } from '../../components-lib/lazy-load-controller.js';
 import { dispatchLiveErrorEvent } from '../../components-lib/live/utils/dispatch-live-error.js';
+import { MediaProviderDimensionsController } from '../../components-lib/media-provider-dimensions-controller.js';
 import { PartialZoomSettings } from '../../components-lib/zoom/types.js';
 import { CameraConfig, LiveProvider } from '../../config/schema/cameras.js';
 import { LiveConfig } from '../../config/schema/live.js';
@@ -22,15 +23,15 @@ import { STREAM_TROUBLESHOOTING_URL } from '../../const.js';
 import { HomeAssistant } from '../../ha/types.js';
 import { localize } from '../../localize/localize.js';
 import liveProviderStyle from '../../scss/live-provider.scss';
-import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../../types.js';
-import { aspectRatioToString } from '../../utils/basic.js';
+import {
+  MediaLoadedInfo,
+  MediaPlayer,
+  MediaPlayerController,
+  MediaPlayerElement,
+} from '../../types.js';
 import { dispatchMediaUnloadedEvent } from '../../utils/media-info.js';
-import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
 import '../icon.js';
 import { renderMessage } from '../message.js';
-import '../next-prev-control.js';
-import '../ptz.js';
-import '../surround.js';
 
 @customElement('advanced-camera-card-live-provider')
 export class AdvancedCameraCardLiveProvider extends LitElement implements MediaPlayer {
@@ -69,7 +70,9 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
   protected _showStreamTroubleshooting = false;
 
   protected _refProvider: Ref<MediaPlayerElement> = createRef();
+  protected _refContainer: Ref<HTMLElement> = createRef();
   protected _lazyLoadController: LazyLoadController = new LazyLoadController(this);
+  protected _dimensionsController = new MediaProviderDimensionsController(this);
 
   // A note on dynamic imports:
   //
@@ -184,13 +187,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
         this._importPromises.push(import('./providers/go2rtc/index.js'));
       }
 
-      updateElementStyleFromMediaLayoutConfig(
-        this,
-        this.cameraConfig?.dimensions?.layout,
-      );
-      this.style.aspectRatio = aspectRatioToString({
-        ratio: this.cameraConfig?.dimensions?.aspect_ratio,
-      });
+      this._dimensionsController.setCameraConfig(this.cameraConfig?.dimensions);
     }
   }
 
@@ -203,26 +200,30 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
     return result;
   }
 
-  protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
-    return this.liveConfig?.zoomable
-      ? html` <advanced-camera-card-zoomer
-          .defaultSettings=${guard([this.cameraConfig?.dimensions?.layout], () =>
-            this.cameraConfig?.dimensions?.layout
-              ? {
-                  pan: this.cameraConfig.dimensions.layout.pan,
-                  zoom: this.cameraConfig.dimensions.layout.zoom,
-                }
-              : undefined,
-          )}
-          .settings=${this.zoomSettings}
-          @advanced-camera-card:zoom:zoomed=${async () =>
-            (await this.getMediaPlayerController())?.setControls(false)}
-          @advanced-camera-card:zoom:unzoomed=${async () =>
-            (await this.getMediaPlayerController())?.setControls()}
-        >
-          ${template}
-        </advanced-camera-card-zoomer>`
-      : template;
+  protected _renderContainer(template: TemplateResult): TemplateResult {
+    // Place the zoomer in a separate div, as the zoom library misinterprets the
+    // explicit width/height setting from the provider resizer as zooming.
+    return html`<div class="container" ${ref(this._refContainer)}>
+      ${this.liveConfig?.zoomable
+        ? html` <advanced-camera-card-zoomer
+            .defaultSettings=${guard([this.cameraConfig?.dimensions?.layout], () =>
+              this.cameraConfig?.dimensions?.layout
+                ? {
+                    pan: this.cameraConfig.dimensions.layout.pan,
+                    zoom: this.cameraConfig.dimensions.layout.zoom,
+                  }
+                : undefined,
+            )}
+            .settings=${this.zoomSettings}
+            @advanced-camera-card:zoom:zoomed=${async () =>
+              (await this.getMediaPlayerController())?.setControls(false)}
+            @advanced-camera-card:zoom:unzoomed=${async () =>
+              (await this.getMediaPlayerController())?.setControls()}
+          >
+            ${template}
+          </advanced-camera-card-zoomer>`
+        : template}
+    </div>`;
   }
 
   protected render(): TemplateResult | void {
@@ -240,11 +241,6 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
     this.ariaLabel = this.label;
 
     const provider = this._getResolvedProvider();
-    const showImageDuringLoading = this._shouldShowImageDuringLoading();
-    const showLoadingIcon = !this._isVideoMediaLoaded;
-    const providerClasses = {
-      hidden: showImageDuringLoading,
-    };
 
     if (
       provider === 'ha' ||
@@ -287,20 +283,36 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
       }
     }
 
-    return html`${this._useZoomIfRequired(html`
+    const showImageDuringLoading = this._shouldShowImageDuringLoading();
+    const showLoadingIcon = !this._isVideoMediaLoaded;
+
+    const classes = {
+      hidden: showImageDuringLoading,
+    };
+
+    return html`${this._renderContainer(html`
       ${showImageDuringLoading || provider === 'image'
         ? html` <advanced-camera-card-live-image
             ${ref(this._refProvider)}
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
+            class=${classMap({
+              ...classes,
+              // The image provider is providing the temporary loading image,
+              // so it should not be hidden.
+              hidden: false,
+            })}
             @advanced-camera-card:live:error=${() => this._providerErrorHandler()}
-            @advanced-camera-card:media:loaded=${(ev: Event) => {
+            @advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
               if (provider === 'image') {
                 // Only count the media has loaded if the required provider is
                 // the image (not just the temporary image shown during
                 // loading).
                 this._videoMediaShowHandler();
               } else {
+                // Manually call resize(), since the dimensions controller won't
+                // receive the after that stopPropagation().
+                this._dimensionsController.resize();
                 ev.stopPropagation();
               }
             }}
@@ -310,7 +322,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
       ${provider === 'ha'
         ? html` <advanced-camera-card-live-ha
             ${ref(this._refProvider)}
-            class=${classMap(providerClasses)}
+            class=${classMap(classes)}
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
             ?controls=${this.liveConfig.controls.builtin}
@@ -321,7 +333,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
         : provider === 'go2rtc'
           ? html`<advanced-camera-card-live-go2rtc
               ${ref(this._refProvider)}
-              class=${classMap(providerClasses)}
+              class=${classMap(classes)}
               .hass=${this.hass}
               .cameraConfig=${this.cameraConfig}
               .cameraEndpoints=${this.cameraEndpoints}
@@ -337,7 +349,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
           : provider === 'webrtc-card'
             ? html`<advanced-camera-card-live-webrtc-card
                 ${ref(this._refProvider)}
-                class=${classMap(providerClasses)}
+                class=${classMap(classes)}
                 .hass=${this.hass}
                 .cameraConfig=${this.cameraConfig}
                 .cameraEndpoints=${this.cameraEndpoints}
@@ -352,7 +364,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
             : provider === 'jsmpeg'
               ? html` <advanced-camera-card-live-jsmpeg
                   ${ref(this._refProvider)}
-                  class=${classMap(providerClasses)}
+                  class=${classMap(classes)}
                   .hass=${this.hass}
                   .cameraConfig=${this.cameraConfig}
                   .cameraEndpoints=${this.cameraEndpoints}
@@ -390,6 +402,10 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
       : ''}`;
   }
 
+  public updated(): void {
+    this._dimensionsController.setContainer(this._refContainer.value);
+  }
+
   static get styles(): CSSResultGroup {
     return unsafeCSS(liveProviderStyle);
   }

src/components/viewer/grid.ts

@@ -13,8 +13,8 @@ import { ViewManagerEpoch } from '../../card-controller/view/types.js';
 import { MediaGridSelected } from '../../components-lib/media-grid-controller.js';
 import { CardWideConfig } from '../../config/schema/types.js';
 import { ViewerConfig } from '../../config/schema/viewer.js';
-import { HomeAssistant } from '../../ha/types.js';
 import { ResolvedMediaCache } from '../../ha/resolved-media.js';
+import { HomeAssistant } from '../../ha/types.js';
 import '../../patches/ha-hls-player.js';
 import basicBlockStyle from '../../scss/basic-block.scss';
 import './carousel';

src/components/viewer/provider.ts

@@ -12,8 +12,10 @@ import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { CameraManager } from '../../camera-manager/manager.js';
 import { ViewManagerEpoch } from '../../card-controller/view/types.js';
 import { LazyLoadController } from '../../components-lib/lazy-load-controller.js';
+import { MediaProviderDimensionsController } from '../../components-lib/media-provider-dimensions-controller.js';
 import { ZoomSettingsObserved } from '../../components-lib/zoom/types.js';
 import { handleZoomSettingsObservedEvent } from '../../components-lib/zoom/zoom-view-context.js';
+import { CameraConfig } from '../../config/schema/cameras.js';
 import { CardWideConfig } from '../../config/schema/types.js';
 import { ViewerConfig } from '../../config/schema/viewer.js';
 import { canonicalizeHAURL } from '../../ha/canonical-url.js';
@@ -29,8 +31,7 @@ import {
 import '../../patches/ha-hls-player.js';
 import viewerProviderStyle from '../../scss/viewer-provider.scss';
 import { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../../types.js';
-import { aspectRatioToString, errorToConsole } from '../../utils/basic.js';
-import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
+import { errorToConsole } from '../../utils/basic.js';
 import { ViewItemClassifier } from '../../view/item-classifier.js';
 import { VideoContentType, ViewMedia } from '../../view/item.js';
 import { QueryClassifier } from '../../view/query-classifier.js';
@@ -62,7 +63,9 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
   public cardWideConfig?: CardWideConfig;
 
   protected _refProvider: Ref<MediaPlayerElement> = createRef();
+  protected _refContainer: Ref<HTMLElement> = createRef();
   protected _lazyLoadController: LazyLoadController = new LazyLoadController(this);
+  protected _dimensionsController = new MediaProviderDimensionsController(this);
 
   @state()
   protected _url: string | null = null;
@@ -200,19 +203,20 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
     }
 
     if (changedProps.has('media') || changedProps.has('cameraManager')) {
-      const cameraID = this.media?.getCameraID();
-      const cameraConfig = cameraID
-        ? this.cameraManager?.getStore().getCameraConfig(cameraID)
-        : null;
-      updateElementStyleFromMediaLayoutConfig(this, cameraConfig?.dimensions?.layout);
-
-      this.style.aspectRatio = aspectRatioToString({
-        ratio: cameraConfig?.dimensions?.aspect_ratio,
-      });
+      this._dimensionsController.setCameraConfig(
+        this._getRelevantCameraConfig()?.dimensions,
+      );
     }
   }
 
-  protected _useZoomIfRequired(template: TemplateResult): TemplateResult {
+  private _getRelevantCameraConfig(): CameraConfig | null {
+    const cameraID = this.media?.getCameraID();
+    return cameraID
+      ? this.cameraManager?.getStore().getCameraConfig(cameraID) ?? null
+      : null;
+  }
+
+  protected _renderContainer(template: TemplateResult): TemplateResult {
     if (!this.media) {
       return template;
     }
@@ -223,27 +227,37 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
       : null;
     const view = this.viewManagerEpoch?.manager.getView();
 
-    return this.viewerConfig?.zoomable
-      ? html` <advanced-camera-card-zoomer
-          .defaultSettings=${guard([cameraConfig?.dimensions?.layout], () =>
-            cameraConfig?.dimensions?.layout
-              ? {
-                  pan: cameraConfig.dimensions.layout.pan,
-                  zoom: cameraConfig.dimensions.layout.zoom,
-                }
-              : undefined,
-          )}
-          .settings=${mediaID ? view?.context?.zoom?.[mediaID]?.requested : undefined}
-          @advanced-camera-card:zoom:zoomed=${async () =>
-            (await this.getMediaPlayerController())?.setControls(false)}
-          @advanced-camera-card:zoom:unzoomed=${async () =>
-            (await this.getMediaPlayerController())?.setControls()}
-          @advanced-camera-card:zoom:change=${(ev: CustomEvent<ZoomSettingsObserved>) =>
-            handleZoomSettingsObservedEvent(ev, this.viewManagerEpoch?.manager, mediaID)}
-        >
-          ${template}
-        </advanced-camera-card-zoomer>`
-      : template;
+    // Place the zoomer in a separate div, as the zoom library misinterprets the
+    // explicit width/height setting from the provider resizer as zooming.
+    return html`<div class="container" ${ref(this._refContainer)}>
+      ${this.viewerConfig?.zoomable
+        ? html`<advanced-camera-card-zoomer
+            .defaultSettings=${guard([cameraConfig?.dimensions?.layout], () =>
+              cameraConfig?.dimensions?.layout
+                ? {
+                    pan: cameraConfig.dimensions.layout.pan,
+                    zoom: cameraConfig.dimensions.layout.zoom,
+                  }
+                : undefined,
+            )}
+            .settings=${mediaID ? view?.context?.zoom?.[mediaID]?.requested : undefined}
+            @advanced-camera-card:zoom:zoomed=${async () =>
+              (await this.getMediaPlayerController())?.setControls(false)}
+            @advanced-camera-card:zoom:unzoomed=${async () =>
+              (await this.getMediaPlayerController())?.setControls()}
+            @advanced-camera-card:zoom:change=${(
+              ev: CustomEvent<ZoomSettingsObserved>,
+            ) =>
+              handleZoomSettingsObservedEvent(
+                ev,
+                this.viewManagerEpoch?.manager,
+                mediaID,
+              )}
+          >
+            ${template}
+          </advanced-camera-card-zoomer>`
+        : template}
+    </div>`;
   }
 
   protected render(): TemplateResult | void {
@@ -264,7 +278,7 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
 
     // Note: crossorigin="anonymous" is required on <video> below in order to
     // allow screenshot of motionEye videos which currently go cross-origin.
-    return this._useZoomIfRequired(html`
+    return this._renderContainer(html`
       ${ViewItemClassifier.isVideo(this.media)
         ? this.media.getVideoContentType() === VideoContentType.HLS
           ? html`<advanced-camera-card-ha-hls-player
@@ -305,6 +319,10 @@ export class AdvancedCameraCardViewerProvider extends LitElement implements Medi
     `);
   }
 
+  public updated(): void {
+    this._dimensionsController.setContainer(this._refContainer.value);
+  }
+
   static get styles(): CSSResultGroup {
     return unsafeCSS(viewerProviderStyle);
   }

src/components/views.ts

@@ -12,6 +12,7 @@ import { CameraManager } from '../camera-manager/manager.js';
 import { MicrophoneState } from '../card-controller/types.js';
 import { ViewItemManager } from '../card-controller/view/item-manager.js';
 import { ViewManagerEpoch } from '../card-controller/view/types.js';
+import { ConditionStateManagerReadonlyInterface } from '../conditions/types.js';
 import { AdvancedCameraCardConfig, CardWideConfig } from '../config/schema/types.js';
 import { RawAdvancedCameraCardConfig } from '../config/types.js';
 import { DeviceRegistryManager } from '../ha/registry/device/index.js';
@@ -62,6 +63,9 @@ export class AdvancedCameraCardViews extends LitElement {
   @property({ attribute: false })
   public deviceRegistryManager?: DeviceRegistryManager;
 
+  @property({ attribute: false })
+  public conditionStateManager?: ConditionStateManagerReadonlyInterface;
+
   protected willUpdate(changedProps: PropertyValues): void {
     if (changedProps.has('viewManagerEpoch') || changedProps.has('config')) {
       const view = this.viewManagerEpoch?.manager.getView();

src/conditions/types.ts

@@ -15,6 +15,7 @@ export interface ConditionState {
   keys?: KeysState;
   mediaLoadedInfo?: MediaLoadedInfo | null;
   microphone?: MicrophoneState;
+  panel?: boolean;
   hass?: HomeAssistant;
   triggered?: Set<string>;
   userAgent?: string;

src/config/schema/cameras.ts

@@ -146,6 +146,12 @@ const proxyConfigSchema = z.object({
 });
 export type ProxyConfig = z.infer<typeof proxyConfigSchema>;
 
+const cameraDimensionsSchema = z.object({
+  aspect_ratio: aspectRatioSchema.optional(),
+  layout: mediaLayoutConfigSchema.optional(),
+});
+export type CameraDimensionsConfig = z.infer<typeof cameraDimensionsSchema>;
+
 export const cameraConfigSchema = z
   .object({
     camera_entity: z.string().optional(),
@@ -246,12 +252,7 @@ export const cameraConfigSchema = z
 
     ptz: ptzCameraConfigSchema.default(cameraConfigDefault.ptz),
 
-    dimensions: z
-      .object({
-        aspect_ratio: aspectRatioSchema.optional(),
-        layout: mediaLayoutConfigSchema.optional(),
-      })
-      .optional(),
+    dimensions: cameraDimensionsSchema.optional(),
 
     proxy: proxyConfigSchema.default(cameraConfigDefault.proxy),
 

src/scss/card.scss

@@ -9,7 +9,7 @@
 
   // Different browsers use different colors as their fullscreen background,
   // this ensures the same experience across all browsers.
-  background-color: var(--card-background-color);
+  background-color: var(--advanced-camera-card-background);
 
   border-radius: var(--ha-card-border-radius, 4px);
   overflow: auto;
@@ -99,6 +99,9 @@ ha-card {
   height: 100%;
   position: static;
   color: var(--secondary-text-color, white);
+
+  // The background color at the outer level has priority.
+  background-color: transparent;
 }
 
 /************

src/scss/image-updating-player.scss

@@ -1,5 +1,4 @@
 @use 'basic-block.scss';
-@use 'media-background.scss';
 @use 'media-layout.scss';
 
 img {

src/scss/image.scss

@@ -1,11 +1 @@
-@use 'basic-block.scss';
-@use 'media-layout.scss';
-@use 'media-background.scss';
-
-img {
-  width: 100%;
-  height: 100%;
-  display: block;
-
-  @include media-layout.media-layout();
-}
+@use 'provider.scss';

src/scss/live-carousel.scss

@@ -24,10 +24,7 @@
 }
 
 .embla__slide {
-  // Center the content horizontally (for cases where the configured aspect
-  // ratio is a mismatch with the card).
   display: flex;
-  justify-content: center;
 
   height: 100%;
   width: 100%;

src/scss/live-provider.scss

@@ -1,9 +1,4 @@
-@use 'basic-block.scss';
-@use 'media-background.scss';
-
-:host {
-  position: relative;
-}
+@use 'provider.scss';
 
 .hidden {
   display: none;

src/scss/media-background.scss

@@ -2,7 +2,7 @@
 $bg-img: url('../images/iris-background.svg');
 
 :host {
-  background-color: var(--primary-background-color);
+  background-color: var(--advanced-camera-card-background);
   background-position: center;
   background-repeat: no-repeat;
   background-image: $bg-img;

src/scss/provider.scss

@@ -0,0 +1,32 @@
+@use 'media-background.scss';
+
+:host {
+  display: flex;
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  display: block;
+
+  // The container will be sized by the provider resize controller.
+  width: fit-content;
+  height: auto;
+  max-width: 100%;
+}
+
+:host([size='unsized']) > .container {
+  width: 100%;
+  height: 100%;
+}
+:host([size='unsized-portrait']) > .container {
+  height: 100%;
+}
+:host([size='unsized-landscape']) > .container {
+  width: 100%;
+}

src/scss/themes/base.scss

@@ -8,7 +8,7 @@
    *********/
 
   --advanced-camera-card-exterior: var(--secondary-background-color, black);
-  --advanced-camera-card-background: var(--primary-background-color, white);
+  --advanced-camera-card-background: var(--card-background-color, white);
 
   --advanced-camera-card-foreground-primary: var(--primary-color, black);
 

src/scss/themes/dark.scss

@@ -2,6 +2,7 @@
   // This file should include only, and exactly match, values from
   // https://github.com/home-assistant/frontend/blob/dev/src/resources/styles-data.ts .
 
+  --card-background-color: #1c1c1c;
   --primary-background-color: #111111;
   --secondary-background-color: #282828;
   --primary-text-color: #e1e1e1;

src/scss/themes/light.scss

@@ -2,6 +2,7 @@
   // This file should include only, and exactly match, values from
   // https://github.com/home-assistant/frontend/blob/dev/src/resources/ha-style.ts
 
+  --card-background-color: #ffffff;
   --primary-background-color: #fafafa;
   --secondary-background-color: #e5e5e5;
   --primary-text-color: #212121;

src/scss/viewer-carousel.scss

@@ -41,6 +41,8 @@
 }
 
 .embla__slide {
+  display: flex;
+
   height: 100%;
   width: 100%;
 

src/scss/viewer-provider.scss

@@ -1,13 +1,4 @@
-@use 'basic-block.scss';
-@use 'media-background.scss';
-
-advanced-camera-card-ha-hls-player,
-advanced-camera-card-image-player,
-advanced-camera-card-video-player {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+@use 'provider.scss';
 
 advanced-camera-card-progress-indicator {
   padding: 30px;

src/utils/basic.ts

@@ -196,11 +196,11 @@ export const isValidDate = (date: Date): boolean => {
  * @param name The attribute name.
  * @param value An optional value to set the attribute to.
  */
-export const setOrRemoveAttribute = (
+export const setOrRemoveAttribute = <T extends string>(
   element: HTMLElement,
   set: boolean,
   name: string,
-  value?: string,
+  value?: T,
 ): void => {
   if (set) {
     element.setAttribute(name, value ?? '');