Fix issue causing first thumbnail to be empty.

src/components/surround-thumbnails.ts

@@ -101,6 +101,14 @@ export class FrigateCardSurround extends LitElement {
           });
         }
       }}
+    >
+      ${this.config?.mode !== 'none'
+        ? html` <frigate-card-thumbnail-carousel
+            slot=${this.config.mode}
+            .config=${this.config}
+            .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).
@@ -110,14 +118,6 @@ export class FrigateCardSurround extends LitElement {
                 });
               }
             }}
-    >
-      ${this.config?.mode !== 'none'
-        ? html` <frigate-card-thumbnail-carousel
-            slot=${this.config.mode}
-            .config=${this.config}
-            .view=${this.view}
-            .target=${this.view.target}
-            .selected=${this.view.childIndex ?? null}
             @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,12 +164,12 @@ class TimelineEventManager {
     start: Date,
     end: Date,
   ): Promise<boolean> {
-    if (!this.hasCoverage(start, end)) {
+    if (this.hasCoverage(start, end)) {
+      return false;
+    }
     await this._fetchEvents(element, hass, cameras, start, end);
     return true;
   }
-    return false;
-  }
 
   /**
    * Fetch events for the timeline.
@@ -580,13 +580,17 @@ export class FrigateCardTimelineCore extends LitElement {
     }
 
     const [eventWindowStart, eventWindowEnd] = this._getStartEndFromEvent(event);
+    if (
       await this._events.fetchEventsIfNecessary(
         this,
         this.hass,
         this.cameras,
         eventWindowStart,
         eventWindowEnd,
-    );
+      )
+    ) {
+      this._generateThumbnails();
+    }
 
     const eventStart = new Date(event.start_time * 1000);
     const eventEnd = event.end_time ? new Date(event.end_time * 1000) : 0;