fix: Adjust media size to take maximum available space (#2346)

- Closes #2109

src/components-lib/media-height-controller.ts

@@ -53,6 +53,16 @@ export class MediaHeightController {
     this._debouncedSetHeight();
   }
 
+  // Recalculate the height. This is necessary because ResizeObserver may not
+  // fire if the height of the media is constrained by the host's own max-height
+  // (e.g. during initial load, everything is 100% height of the host, so the
+  // rendered height never changes and thus ResizeObserver never fires). This
+  // manual "wakeup" allows the controller to temporarily lift the constraint
+  // and peek at the true desired height.
+  public recalculate(): void {
+    this._debouncedSetHeight();
+  }
+
   public destroy(): void {
     this._mutationObserver.disconnect();
     this._resizeObserver.disconnect();
@@ -76,6 +86,7 @@ export class MediaHeightController {
 
     // Calculate the true height.
     const selectedHeight = this._selectedChild.getBoundingClientRect().height;
+    const hostHeight = this._host.getBoundingClientRect().height;
 
     // Reset the original height so that browser transition animation can be
     // applied from the current to the target.
@@ -85,7 +96,12 @@ export class MediaHeightController {
     this._selectedChild.getBoundingClientRect();
 
     if (selectedHeight && !isNaN(selectedHeight) && selectedHeight > 0) {
-      this._host.style.maxHeight = `${selectedHeight}px`;
+      // Set the height to the larger of the selected child or the host itself.
+      // This ensures that the host (the carousel) expands to fit the media, but
+      // does not shrink smaller than itself (which would cause a "flash" or
+      // jump).
+      // See: https://github.com/dermotduffy/advanced-camera-card/issues/2109
+      this._host.style.maxHeight = `${Math.max(selectedHeight, hostHeight)}px`;
     }
   }
 

src/components/live/carousel.ts

@@ -344,6 +344,7 @@ export class AdvancedCameraCardLiveCarousel extends LitElement {
         @advanced-camera-card:carousel:select=${this._setViewHandler.bind(this)}
         @advanced-camera-card:media:loaded=${() => {
           this._mediaHasLoaded = true;
+          this._mediaHeightController.recalculate();
         }}
         @advanced-camera-card:media:unloaded=${() => {
           this._mediaHasLoaded = false;

src/components/viewer/carousel.ts

@@ -346,6 +346,7 @@ export class AdvancedCameraCardViewerCarousel extends LitElement {
         }}
         @advanced-camera-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
           this._loadedMediaPlayerController = ev.detail.mediaPlayerController ?? null;
+          this._mediaHeightController.recalculate();
           this._seekHandler();
         }}
         @advanced-camera-card:media:unloaded=${() => {