Fix issue causing first thumbnail to be empty.

src/components/surround-thumbnails.ts

@@ -101,15 +101,6 @@ export class FrigateCardSurround extends LitElement {
           });
         }
       }}
-      @frigate-card:change-view=${(ev) => {
-        // Close the drawer if the carousel or thumbnail requests a view change
-        // (e.g. playing the clip, or viewing something on the timeline).
-        if (this.config && ['left', 'right'].includes(this.config.mode)) {
-          dispatchFrigateCardEvent(ev.composedPath()[0], 'drawer:close', {
-            drawer: this.config.mode,
-          });
-        }
-      }}
     >
       ${this.config?.mode !== 'none'
         ? html` <frigate-card-thumbnail-carousel
@@ -118,6 +109,15 @@ export class FrigateCardSurround extends LitElement {
             .view=${this.view}
             .target=${this.view.target}
             .selected=${this.view.childIndex ?? null}
+            @frigate-card:change-view=${(ev) => {
+              // Close the drawer if the carousel or thumbnail requests a view change
+              // (e.g. playing the clip, or viewing something on the timeline).
+              if (this.config && ['left', 'right'].includes(this.config.mode)) {
+                dispatchFrigateCardEvent(ev.composedPath()[0], 'drawer:close', {
+                  drawer: this.config.mode,
+                });
+              }
+            }}
             @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
               this.view
                 ?.evolve({

src/components/thumbnail-carousel.ts

@@ -102,6 +102,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     return {
       containScroll: 'keepSnaps',
       dragFree: true,
+      startIndex: this._selected ?? 0,
     };
   }
 
@@ -138,6 +139,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       this.updateComplete.then(() => {
         if (this._carousel) {
           if (this._selected !== undefined && this._selected !== null) {
+            console.info('thumbnail carousel scroll to')
             this.carouselScrollTo(this._selected);
           }
         }

src/components/thumbnail.ts

@@ -37,7 +37,7 @@ export class FrigateCardThumbnail extends LitElement {
    * @returns A template to display to the user.
    */
   protected render(): TemplateResult | void {
-    if (!this.target || !this.target.children || !this.childIndex) {
+    if (!this.target || !this.target.children || this.childIndex === undefined) {
       return;
     }
     const media = this.target.children[this.childIndex];

src/components/timeline.ts

@@ -164,11 +164,11 @@ class TimelineEventManager {
     start: Date,
     end: Date,
   ): Promise<boolean> {
-    if (!this.hasCoverage(start, end)) {
+    if (this.hasCoverage(start, end)) {
-      await this._fetchEvents(element, hass, cameras, start, end);
+      return false;
-      return true;
     }
-    return false;
+    await this._fetchEvents(element, hass, cameras, start, end);
+    return true;
   }
 
   /**
@@ -580,13 +580,17 @@ export class FrigateCardTimelineCore extends LitElement {
     }
 
     const [eventWindowStart, eventWindowEnd] = this._getStartEndFromEvent(event);
-    await this._events.fetchEventsIfNecessary(
+    if (
-      this,
+      await this._events.fetchEventsIfNecessary(
-      this.hass,
+        this,
-      this.cameras,
+        this.hass,
-      eventWindowStart,
+        this.cameras,
-      eventWindowEnd,
+        eventWindowStart,
-    );
+        eventWindowEnd,
+      )
+    ) {
+      this._generateThumbnails();
+    }
 
     const eventStart = new Date(event.start_time * 1000);
     const eventEnd = event.end_time ? new Date(event.end_time * 1000) : 0;