From a9539925ca992c24aeeb8c1b44b4b725333960d5 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 7 Jan 2022 23:20:14 -0800
Subject: [PATCH] Fix dynamic height issue in fullscreen.

---
 src/components/live.ts           |  7 +++++--
 src/components/media-carousel.ts | 24 +++++++++++++++++++-----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/live.ts b/src/components/live.ts
index f3eb3378..c86e7a7f 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -141,7 +141,7 @@ export class FrigateCardLive extends LitElement {
       }
 
       if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) != null) {
-        return html` <frigate-card-thumbnail-carousel
+        return html`<frigate-card-thumbnail-carousel
           .target=${parent}
           .view=${this.view}
           .config=${config.controls.thumbnails}
@@ -162,7 +162,10 @@ export class FrigateCardLive extends LitElement {
       }
     };
 
-    return html`${until(fetchThumbnailsThenRender(), renderProgressIndicator())}`;
+    // Don't render a progress indicator for live thumbnails, as it's jarring
+    // during live-carousel scrolling (the progress indicator repeatedly
+    // flashes). Just render nothing during loading.
+    return html`${until(fetchThumbnailsThenRender(), html``)}`;
   }
 
   /**
diff --git a/src/components/media-carousel.ts b/src/components/media-carousel.ts
index e5109790..0460d225 100644
--- a/src/components/media-carousel.ts
+++ b/src/components/media-carousel.ts
@@ -87,9 +87,11 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
     carousel?.on('select', this._selectSlideMediaShowHandler.bind(this));
 
     // Adapt the height of the container to the media as the carousel is moved.
-    carousel?.on('init', this._adaptiveHeightHandler.bind(this));
-    carousel?.on('select', this._adaptiveHeightHandler.bind(this));
-    carousel?.on('resize', this._adaptiveHeightHandler.bind(this));
+    carousel?.on('init', this._adaptiveHeightResizeHandler.bind(this));
+    carousel?.on('resize', this._adaptiveHeightResizeHandler.bind(this));
+    carousel?.on('init', this._adaptiveHeightSetHandler.bind(this));
+    carousel?.on('select', this._adaptiveHeightSetHandler.bind(this));
+    carousel?.on('resize', this._adaptiveHeightSetHandler.bind(this));
     
     if (this._getLazyLoadCount() != null) {
       // Load media as the carousel is moved (if lazy loading is in use).
@@ -99,12 +101,24 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
     }
   }
 
+  /**
+   * Remove height restrictions on the media when the carousel is resized to let
+   * it naturally render.
+   * @returns 
+   */
+  protected _adaptiveHeightResizeHandler(): void {
+    if (!this._carousel) {
+      return;
+    }
+    this._carousel.containerNode().style.removeProperty('max-height')
+  }
+
   /**
    * Adapt the height of the container to the height of the media (for cases
    * where the carousel has different media heights, e.g. live cameras with
    * different aspect ratios).
    */
-  protected _adaptiveHeightHandler(): void {
+  protected _adaptiveHeightSetHandler(): void {
     if (!this._carousel) {
       return;
     }
@@ -246,7 +260,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
 
       // After media has been loaded, the height of the container may need to be
       // re-adjusted.
-      this._adaptiveHeightHandler();
+      this._adaptiveHeightSetHandler();
       /**
        * Images need a width/height from initial load, and browsers will assume
        * that the aspect ratio of the initial dummy-image load will persist. In