From b9a94da736ed2b5a64642b8fa248fc468ccd9593 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Fri, 22 Jan 2021 23:06:27 +0000
Subject: [PATCH] Got lazy loading working on the carousel

---
 .../carousel-list.component.html              |  2 +-
 .../carousel-list/carousel-list.component.ts  | 49 ++++++++++++++++---
 .../discover/discover.component.html          |  6 +--
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
index 08a0d5746..4b7767721 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html
@@ -6,7 +6,7 @@
   </mat-button-toggle-group>
 </div>
 
-<p-carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions">
+<p-carousel #carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions" (onPage)="newPage()">
     <ng-template let-result pTemplate="item">
         <discover-card [result]="result"></discover-card>
     </ng-template>
diff --git a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
index ff7f353ae..0279fbd06 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input, ViewChild } from "@angular/core";
 import { DiscoverOption, IDiscoverCardResult } from "../../interfaces";
 import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
 import { SearchV2Service } from "../../../services";
 import { StorageService } from "../../../shared/storage/storage-service";
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { Carousel } from 'primeng/carousel';
 
 export enum DiscoverType {
     Upcoming,
@@ -19,6 +20,7 @@ export enum DiscoverType {
 export class CarouselListComponent implements OnInit {
 
     @Input() public discoverType: DiscoverType;
+    @ViewChild('carousel', {static: false}) carousel: Carousel;
 
     public DiscoverOption = DiscoverOption;
     public discoverOptions: DiscoverOption = DiscoverOption.Combined;
@@ -33,6 +35,7 @@ export class CarouselListComponent implements OnInit {
         return "DiscoverOptions" + this.discoverType.toString();
     };
     private amountToLoad = 14;
+    private currentlyLoaded = 0;
 
     constructor(private searchService: SearchV2Service,
         private storageService: StorageService) {
@@ -61,6 +64,7 @@ export class CarouselListComponent implements OnInit {
     }
 
     public async ngOnInit() {
+        this.currentlyLoaded = 0;
         const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
         if (localDiscoverOptions) {
             this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
@@ -91,6 +95,32 @@ export class CarouselListComponent implements OnInit {
         await this.switchDiscoverMode(event.value);
     }
 
+    public async newPage() {
+        // Note this is using the internal carousel APIs
+        // https://github.com/primefaces/primeng/blob/master/src/app/components/carousel/carousel.ts
+        var end = this.carousel._page >= (this.carousel.totalDots() - 1);
+        if (end) {
+            var moviePromise: Promise<void>;
+            var tvPromise: Promise<void>;
+            switch (this.discoverOptions) {
+                case DiscoverOption.Combined:
+                    moviePromise = this.loadMovies();
+                    tvPromise = this.loadTv();
+                    break;
+                case DiscoverOption.Movie:
+                    moviePromise = this.loadMovies();
+                    break;
+                case DiscoverOption.Tv:
+                    tvPromise = this.loadTv();
+                    break;
+            }
+            await moviePromise;
+            await tvPromise;
+
+            this.createModel();
+        }
+    }
+
     private async switchDiscoverMode(newMode: DiscoverOption) {
         if (this.discoverOptions === newMode) {
             return;
@@ -105,32 +135,35 @@ export class CarouselListComponent implements OnInit {
     private async loadMovies() {
         switch (this.discoverType) {
             case DiscoverType.Popular:
-                this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
+                this.movies = await this.searchService.popularMoviesByPage(this.currentlyLoaded, this.amountToLoad);
                 break;
             case DiscoverType.Trending:
-                this.movies = await this.searchService.nowPlayingMoviesByPage(0, this.amountToLoad);
+                this.movies = await this.searchService.nowPlayingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
                 break;
             case DiscoverType.Upcoming:
-                this.movies = await this.searchService.upcomingMoviesByPage(0, this.amountToLoad);
+                this.movies = await this.searchService.upcomingMoviesByPage(this.currentlyLoaded, this.amountToLoad);
                 break
         }
+        this.currentlyLoaded += this.amountToLoad;
     }
 
     private async loadTv() {
         switch (this.discoverType) {
             case DiscoverType.Popular:
-                this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
+                this.tvShows = await this.searchService.popularTvByPage(this.currentlyLoaded, this.amountToLoad);
                 break;
             case DiscoverType.Trending:
-                this.tvShows = await this.searchService.trendingTvByPage(0, this.amountToLoad);
+                this.tvShows = await this.searchService.trendingTvByPage(this.currentlyLoaded, this.amountToLoad);
                 break;
             case DiscoverType.Upcoming:
-                this.tvShows = await this.searchService.anticipatedTvByPage(0, this.amountToLoad);
+                this.tvShows = await this.searchService.anticipatedTvByPage(this.currentlyLoaded, this.amountToLoad);
                 break
         }
+        this.currentlyLoaded += this.amountToLoad;
     }
 
     private createInitialModel() {
+        this.clear();
         this.createModel();
     }
 
@@ -151,8 +184,8 @@ export class CarouselListComponent implements OnInit {
                 break;
         }
 
-        this.clear();
         this.discoverResults.push(...tempResults);
+        this.carousel.ngAfterContentInit();
 
         this.finishLoading();
     }
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
index e71debb46..ee52f371c 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
@@ -2,7 +2,7 @@
     <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
     </div>
     <div class="section">
-        <h2>Popular <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
+        <h2>Popular</h2>
         <div>
             <carousel-list [discoverType]="DiscoverType.Popular"></carousel-list>
         </div>
@@ -10,7 +10,7 @@
     </div>
 
     <div class="section">
-        <h2>Trending <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
+        <h2>Trending</h2>
         <div >
             <carousel-list [discoverType]="DiscoverType.Trending"></carousel-list>
         </div>
@@ -18,7 +18,7 @@
     </div>
 
     <div class="section">
-        <h2>Upcoming <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
+        <h2>Upcoming</h2>
         <div>
             <carousel-list [discoverType]="DiscoverType.Upcoming"></carousel-list>
         </div>