Merge pull request #320 from dermotduffy/adaptive-height

Use a thumbnail filler until it renders to avoid flicker

src/components/live.ts

@@ -25,16 +25,17 @@ import { HomeAssistant } from 'custom-card-helpers';
 import JSMpeg from '@cycjimmy/jsmpeg-player';
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { Task } from '@lit-labs/task';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
+import { styleMap } from 'lit/directives/style-map';
 
 import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js';
 import { BrowseMediaUtil } from '../browse-media-util.js';
 import { ConditionState, getOverriddenConfig } from '../card-condition.js';
 import { FrigateCardMediaCarousel } from './media-carousel.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
+import { FrigateCardThumbnailCarousel, ThumbnailCarouselTap } from './thumbnail-carousel.js';
 import { Lazyload } from './embla-plugins/lazyload.js';
-import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 import { View } from '../view.js';
 import { localize } from '../localize/localize.js';
 import {
@@ -99,6 +100,9 @@ export class FrigateCardLive extends LitElement {
   // pre-loading it may be propagated upwards later.
   protected _savedMediaShowInfo?: MediaShowInfo;
 
+  @query('frigate-card-thumbnail-carousel')
+  protected _thumbnailCarousel?: FrigateCardThumbnailCarousel;
+
   /**
    * Handler for media show events that special cases preloaded live views.
    * @param e The media show event.
@@ -161,10 +165,22 @@ export class FrigateCardLive extends LitElement {
       }
     };
 
-    // Don't render a progress indicator for live thumbnails, as it's jarring
+    const fillerStyle = {
-    // during live-carousel scrolling (the progress indicator repeatedly
+      height: config.controls.thumbnails.size,
-    // flashes). Just render nothing during loading.
+    };
-    return html`${until(fetchThumbnailsThenRender(), html``)}`;
+
+    // As the live carousel moves, thumbnails are re-fetched. This is an async
+    // request, so it can jarring to the user to have the main camera view nudge
+    // up/down as the thumbnails disappear and re-appear. Instead, if there was
+    // previously a thumbnail carousel rendered, use a filler that is the same
+    // size until it is replaced with a real carousel (or empty, if no carousel
+    // is rendered for the next camera).    
+    return html`${until(
+      fetchThumbnailsThenRender(),
+      this._thumbnailCarousel 
+        ? html` <div style="${styleMap(fillerStyle)}"></div>`
+        : html``,
+    )}`;
   }
 
   /**

src/scss/media-carousel.scss

@@ -2,11 +2,6 @@
   --video-max-height: none;
 }
 
-.embla__container {
-  // To support adaptive height animations.
-  transition: max-height 0.5s ease;
-}
-
 .embla__slide {
   flex: 0 0 100%;
 }