Handle overview pagination in client

2 files changed, 80 insertions, 42 deletions

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 5fe1f5c80..84999cfb2 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -2,35 +2,44 @@
 
   <div class="no-results" i18n *ngIf="notResults">No results.</div>
 
-  <div class="section" *ngFor="let object of overview.categories">
-    <div class="section-title">
-      <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
-    </div>
+  <div
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
+  >
+    <ng-container *ngFor="let overview of overviews">
 
-    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
-    </my-video-miniature>
-  </div>
+      <div class="section" *ngFor="let object of overview.categories">
+        <div class="section-title">
+          <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
+        </div>
 
-  <div class="section" *ngFor="let object of overview.tags">
-    <div class="section-title">
-      <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
-    </div>
+        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        </my-video-miniature>
+      </div>
 
-    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
-    </my-video-miniature>
-  </div>
+      <div class="section" *ngFor="let object of overview.tags">
+        <div class="section-title">
+          <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
+        </div>
+
+        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        </my-video-miniature>
+      </div>
+
+      <div class="section channel" *ngFor="let object of overview.channels">
+        <div class="section-title">
+          <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
+            <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+
+            <div>{{ object.channel.displayName }}</div>
+          </a>
+        </div>
 
-  <div class="section channel" *ngFor="let object of overview.channels">
-    <div class="section-title">
-      <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
-        <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
+        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        </my-video-miniature>
+      </div>
 
-        <div>{{ object.channel.displayName }}</div>
-      </a>
-    </div>
+    </ng-container>
 
-    <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
-    </my-video-miniature>
   </div>
 
 </div>
diff --git a/client/src/app/videos/video-list/video-overview.component.ts b/client/src/app/videos/video-list/video-overview.component.ts
index 4fee92d54..101073949 100644
--- a/client/src/app/videos/video-list/video-overview.component.ts
+++ b/client/src/app/videos/video-list/video-overview.component.ts
@@ -5,6 +5,7 @@ import { VideosOverview } from '@app/shared/overview/videos-overview.model'
 import { OverviewService } from '@app/shared/overview'
 import { Video } from '@app/shared/video/video.model'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { Subject } from 'rxjs'
 
 @Component({
   selector: 'my-video-overview',
@@ -12,13 +13,17 @@ import { ScreenService } from '@app/shared/misc/screen.service'
   styleUrls: [ './video-overview.component.scss' ]
 })
 export class VideoOverviewComponent implements OnInit {
-  overview: VideosOverview = {
-    categories: [],
-    channels: [],
-    tags: []
-  }
+  onDataSubject = new Subject<any>()
+
+  overviews: VideosOverview[] = []
   notResults = false
 
+  private loaded = false
+  private currentPage = 1
+  private maxPage = 20
+  private lastWasEmpty = false
+  private isLoading = false
+
   constructor (
     private i18n: I18n,
     private notifier: Notifier,
@@ -32,20 +37,7 @@ export class VideoOverviewComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.overviewService.getVideosOverview()
-        .subscribe(
-          overview => {
-            this.overview = overview
-
-            if (
-              this.overview.categories.length === 0 &&
-              this.overview.channels.length === 0 &&
-              this.overview.tags.length === 0
-            ) this.notResults = true
-          },
-
-          err => this.notifier.error(err.message)
-        )
+    this.loadMoreResults()
   }
 
   buildVideoChannelBy (object: { videos: Video[] }) {
@@ -61,4 +53,41 @@ export class VideoOverviewComponent implements OnInit {
 
     return videos.slice(0, numberOfVideos * 2)
   }
+
+  onNearOfBottom () {
+    if (this.currentPage >= this.maxPage) return
+    if (this.lastWasEmpty) return
+    if (this.isLoading) return
+
+    this.currentPage++
+    this.loadMoreResults()
+  }
+
+  private loadMoreResults () {
+    this.isLoading = true
+
+    this.overviewService.getVideosOverview(this.currentPage)
+        .subscribe(
+          overview => {
+            this.isLoading = false
+
+            if (overview.tags.length === 0 && overview.channels.length === 0 && overview.categories.length === 0) {
+              this.lastWasEmpty = true
+              if (this.loaded === false) this.notResults = true
+
+              return
+            }
+
+            this.loaded = true
+            this.onDataSubject.next(overview)
+
+            this.overviews.push(overview)
+          },
+
+          err => {
+            this.notifier.error(err.message)
+            this.isLoading = false
+          }
+        )
+  }
 }