Initial attempt add hiding elements during loading.

src/components/live.ts

@@ -44,7 +44,10 @@ import {
   WebRTCCardConfig,
 } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
-import { contentsChanged, errorToConsole } from '../utils/basic.js';
+import {
+  contentsChanged,
+  errorToConsole,
+} from '../utils/basic.js';
 import { getCameraIcon, getCameraTitle } from '../utils/camera.js';
 import { homeAssistantSignPath } from '../utils/ha';
 import { getFullDependentBrowseMediaQueryParameters } from '../utils/ha/browse-media.js';
@@ -52,7 +55,7 @@ import {
   dispatchExistingMediaShowInfoAsEvent,
   dispatchMediaShowEvent,
 } from '../utils/media-info.js';
-import { View } from '../view.js';
+import { dispatchViewContextChangeEvent, View } from '../view.js';
 import { AutoMediaPlugin } from './embla-plugins/automedia.js';
 import { Lazyload } from './embla-plugins/lazyload.js';
 import {
@@ -226,7 +229,7 @@ export class FrigateCardLive extends LitElement {
             ev.stopPropagation();
           }
         }}
-        @frigate-card:change-view=${(ev: CustomEvent<View>) => {
+        @frigate-card:view:change=${(ev: CustomEvent<View>) => {
           if (this._inBackground) {
             ev.stopPropagation();
           }
@@ -448,10 +451,13 @@ export class FrigateCardLiveCarousel extends LitElement {
       .evolve({
         camera: Array.from(this.cameras.keys())[selectedCameraIndex],
 
-        // Reset the target so thumbnails will be re-fetched.
+        // Reset the target.
         target: null,
         childIndex: null,
       })
+      // Don't yet fetch thumbnails (they will be fetched when the carousel
+      // settles).
+      .mergeInContext({ thumbnails: { fetch: false } })
       .dispatchChangeEvent(this);
   }
 
@@ -582,7 +588,11 @@ export class FrigateCardLiveCarousel extends LitElement {
         .label="${title ? `${localize('common.live')}: ${title}` : ''}"
         .titlePopupConfig=${config.controls.title}
         transitionEffect=${this._getTransitionEffect()}
-        @frigate-card:carousel:settle=${this._setViewHandler.bind(this)}
+        @frigate-card:media-carousel:select=${this._setViewHandler.bind(this)}
+        @frigate-card:carousel:settle=${() => {
+          // Fetch the thumbnails after the carousel has settled.
+          dispatchViewContextChangeEvent(this, { thumbnails: { fetch: true }});
+        }}
       >
         <frigate-card-next-previous-control
           slot="previous"

src/components/media-carousel.ts

@@ -363,6 +363,16 @@ export class FrigateCardMediaCarousel extends LitElement {
         @frigate-card:carousel:select=${(ev: CustomEvent<CarouselSelect>) => {
           this._slideResizeObserver.disconnect();
           this._slideResizeObserver.observe(ev.detail.element);
+
+          // Pass up the media-carousel select event first to allow parents to
+          // initialize/reset before the media info is dispatched.
+          dispatchFrigateCardEvent<CarouselSelect>(
+            this,
+            'media-carousel:select',
+            ev.detail,
+          );
+
+          // Dispatch media info.
           this._dispatchMediaShowInfo();
         }}
         @frigate-card:carousel:media-show=${this._storeMediaShowInfo.bind(this)}

src/components/surround-thumbnails.ts

@@ -27,6 +27,17 @@ import { dispatchFrigateCardErrorEvent } from './message.js';
 import './surround.js';
 import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 
+interface ThumbnailViewContext {
+  // Whetherr or not to fetch thumbnails.
+  fetch?: boolean;
+}
+
+declare module 'view' {
+  interface ViewContext {
+    thumbnails?: ThumbnailViewContext;
+  }
+}
+
 @customElement('frigate-card-surround-thumbnails')
 export class FrigateCardSurround extends LitElement {
   @property({ attribute: false })
@@ -64,7 +75,8 @@ export class FrigateCardSurround extends LitElement {
       !this.config ||
       this.config.mode === 'none' ||
       this.view.target ||
-      !this.browseMediaParams
+      !this.browseMediaParams ||
+      !(this.view.context?.thumbnails?.fetch ?? true)
     ) {
       return;
     }
@@ -147,7 +159,7 @@ export class FrigateCardSurround extends LitElement {
             .target=${this.view.target}
             .selected=${this.view.childIndex}
             .cameras=${this.cameras}
-            @frigate-card:change-view=${(ev: CustomEvent) => changeDrawer(ev, 'close')}
+            @frigate-card:view:change=${(ev: CustomEvent) => changeDrawer(ev, 'close')}
             @frigate-card:thumbnail-carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
               // Send the view change from the source of the tap event, so the
               // view change will be caught by the handler above (to close the drawer).

src/components/thumbnail.ts

@@ -282,8 +282,8 @@ export class FrigateCardThumbnail extends LitElement {
                   view: 'timeline',
                   target: this.target,
                   childIndex: this.childIndex ?? null,
-                  context: {},
                 })
+                .removeContext('timeline')
                 .dispatchChangeEvent(this);
             } else if (recording) {
               this.view
@@ -291,7 +291,9 @@ export class FrigateCardThumbnail extends LitElement {
                   view: 'timeline',
                   target: null,
                   childIndex: null,
-                  context: {
+                })
+                .mergeInContext({
+                  timeline: {
                     window: {
                       start: fromUnixTime(recording.start_time),
                       end: fromUnixTime(recording.end_time),

src/components/timeline.ts

@@ -21,6 +21,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { isEqual } from 'lodash-es';
+import { ViewContext } from 'view';
 import { DataSet } from 'vis-data/esnext';
 import {
   DataGroupCollectionType,
@@ -64,7 +65,7 @@ import {
   isTrueMedia,
   multipleBrowseMediaQuery,
 } from '../utils/ha/browse-media';
-import { View, ViewContext } from '../view';
+import { View } from '../view';
 import { dispatchFrigateCardErrorEvent, dispatchMessageEvent } from './message.js';
 import './surround-thumbnails.js';
 
@@ -81,12 +82,18 @@ interface FrigateCardTimelineItem extends TimelineItem {
   source?: FrigateBrowseMediaSource;
 }
 
-interface TimelineViewContext extends ViewContext {
-  // The selected timeline window.
-  window?: TimelineWindow;
+interface TimelineViewContext {
+   // The selected timeline window.
+   window?: TimelineWindow;
 
-  // The date of the last event fetch.
-  dateFetch?: Date;
+   // The date of the last event fetch.
+   dateFetch?: Date;
+}
+
+declare module 'view' {
+  interface ViewContext {
+    timeline?: TimelineViewContext;
+  }
 }
 
 type TimelineMediaType = 'all' | 'clips' | 'snapshots';
@@ -867,8 +874,8 @@ export class FrigateCardTimelineCore extends LitElement {
               ?.evolve({
                 target: thumbnails?.target ?? null,
                 childIndex: thumbnails?.childIndex ?? null,
-                context: this._generateViewContext(true),
               })
+              .mergeInContext(this._generateTimelineContext(true))
               .dispatchChangeEvent(this);
           }
         });
@@ -1174,7 +1181,7 @@ export class FrigateCardTimelineCore extends LitElement {
 
     // Regenerate the thumbnails after the selection, to allow the new selection
     // to be in the generated view.
-    const context = this.view.context as TimelineViewContext | null;
+    const context = this.view.context?.timeline;
     const timelineWindow = this._timeline.getWindow();
 
     if (context?.window) {
@@ -1222,8 +1229,8 @@ export class FrigateCardTimelineCore extends LitElement {
         ?.evolve({
           target: thumbnails?.target ?? null,
           childIndex: thumbnails?.childIndex ?? null,
-          context: this._generateViewContext(false),
         })
+        .mergeInContext(this._generateTimelineContext(false))
         .dispatchChangeEvent(this);
     }
   }
@@ -1234,9 +1241,10 @@ export class FrigateCardTimelineCore extends LitElement {
    * the window is preserved if it is already in the context.
    * @returns The TimelineViewContext object.
    */
-  protected _generateViewContext(addWindow: boolean): TimelineViewContext {
-    const currentContext = this.view?.context as TimelineViewContext | undefined;
-    const newContext: TimelineViewContext = {};
+  protected _generateTimelineContext(addWindow: boolean): ViewContext {
+    const currentContext = this.view?.context?.timeline;
+    const newContext: TimelineViewContext = {}
+
     if (addWindow && this._timeline) {
       newContext.window = this._timeline.getWindow();
     } else if (currentContext?.window) {
@@ -1245,7 +1253,7 @@ export class FrigateCardTimelineCore extends LitElement {
     if (this._data.lastFetchDate) {
       newContext.dateFetch = this._data.lastFetchDate;
     }
-    return newContext || null;
+    return Object.keys(newContext) ? {timeline: newContext} : {};
   }
 
   /**

src/components/viewer.ts

@@ -618,7 +618,7 @@ export class FrigateCardViewerCarousel extends LitElement {
       .label="${this.view.media.title}"
       .titlePopupConfig=${this.viewerConfig?.controls.title}
       transitionEffect=${this._getTransitionEffect()}
-      @frigate-card:carousel:select=${this._setViewHandler.bind(this)}
+      @frigate-card:media-carousel:select=${this._setViewHandler.bind(this)}
       @frigate-card:media-show=${this._recordingSeekHandler.bind(this)}
     >
       <frigate-card-next-previous-control