diff --git a/src/components/live.ts b/src/components/live.ts index 877e0571..78b7c3c8 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -213,6 +213,18 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel { }; } + /** + * Returns the number of slides to lazily load. 0 means all slides are lazy + * loaded, 1 means that 1 slide on each side of the currently selected slide + * should lazy load, etc. `null` means lazy loading is disabled and everything + * should load simultaneously. + * @returns + */ + protected _getLazyLoadCount(): number | null { + // Defaults to fully-lazy loading. + return 0; + } + /** * Get slides to include in the render. * @returns The slides to include in the render. @@ -221,7 +233,9 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel { if (!this.cameras) { return []; } - return Array.from(this.cameras.values()).map((cameraConfig, index) => this._renderLive(cameraConfig, index)); + return Array.from(this.cameras.values()).map((cameraConfig, index) => + this._renderLive(cameraConfig, index), + ); } /** @@ -236,16 +250,26 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel { this.view.camera = Array.from(this.cameras.keys())[selectedSnap]; } - protected _renderLive( - cameraConfig: CameraConfig, - slideIndex: number, - ): TemplateResult { - // TODO: Add lazy load + /** + * Lazy load a slide. + * @param _slide The slide to lazy load. + */ + protected _lazyLoadSlide(slide: HTMLElement): void { + const liveProvider = slide.querySelector( + 'frigate-card-live-provider', + ) as FrigateCardLiveProvider; + if (liveProvider) { + liveProvider.lazyLoad = false; + } + } + + protected _renderLive(cameraConfig: CameraConfig, slideIndex: number): TemplateResult { return html`