diff --git a/src/components/live.ts b/src/components/live.ts index 7b665ab6..4db05626 100644 --- a/src/components/live.ts +++ b/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 - // during live-carousel scrolling (the progress indicator repeatedly - // flashes). Just render nothing during loading. - return html`${until(fetchThumbnailsThenRender(), html``)}`; + const fillerStyle = { + height: config.controls.thumbnails.size, + }; + + // 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`
` + : html``, + )}`; } /** diff --git a/src/scss/media-carousel.scss b/src/scss/media-carousel.scss index aa51db6d..5611628f 100644 --- a/src/scss/media-carousel.scss +++ b/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%; } \ No newline at end of file