diff --git a/src/components/surround-thumbnails.ts b/src/components/surround-thumbnails.ts index 3f213bd1..53e3ff44 100644 --- a/src/components/surround-thumbnails.ts +++ b/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` { + // 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) => { this.view ?.evolve({ diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 9be59991..556d56a8 100644 --- a/src/components/thumbnail-carousel.ts +++ b/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); } } diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts index b2813089..2f870ffe 100644 --- a/src/components/thumbnail.ts +++ b/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]; diff --git a/src/components/timeline.ts b/src/components/timeline.ts index db9971db..34e586d4 100644 --- a/src/components/timeline.ts +++ b/src/components/timeline.ts @@ -164,11 +164,11 @@ class TimelineEventManager { start: Date, end: Date, ): Promise { - if (!this.hasCoverage(start, end)) { - await this._fetchEvents(element, hass, cameras, start, end); - return true; + if (this.hasCoverage(start, end)) { + return false; } - 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( - this, - this.hass, - this.cameras, - eventWindowStart, - eventWindowEnd, - ); + 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;