Add infinite scroll to comments

1 files changed, 33 insertions, 10 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 32e0f2fbd..f4dda9089 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -22,7 +22,7 @@ export class VideoCommentsComponent implements OnInit {
   sort: SortField = '-createdAt'
   componentPagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 25,
+    itemsPerPage: 10,
     totalItems: null
   }
   inReplyToCommentId: number
@@ -36,15 +36,7 @@ export class VideoCommentsComponent implements OnInit {
   ) {}
 
   ngOnInit () {
-    this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort)
-      .subscribe(
-        res => {
-          this.comments = res.comments
-          this.componentPagination.totalItems = res.totalComments
-        },
-
-        err => this.notificationsService.error('Error', err.message)
-      )
+    this.loadMoreComments()
   }
 
   viewReplies (comment: VideoComment) {
@@ -61,6 +53,18 @@ export class VideoCommentsComponent implements OnInit {
       )
   }
 
+  loadMoreComments () {
+    this.videoCommentService.getVideoCommentThreads(this.video.id, this.componentPagination, this.sort)
+      .subscribe(
+        res => {
+          this.comments = this.comments.concat(res.comments)
+          this.componentPagination.totalItems = res.totalComments
+        },
+
+        err => this.notificationsService.error('Error', err.message)
+      )
+  }
+
   onCommentThreadCreated (comment: VideoComment) {
     this.comments.unshift(comment)
   }
@@ -76,4 +80,23 @@ export class VideoCommentsComponent implements OnInit {
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
+
+  onNearOfBottom () {
+    this.componentPagination.currentPage++
+
+    if (this.hasMoreComments()) {
+      this.loadMoreComments()
+    }
+  }
+
+  protected hasMoreComments () {
+    // No results
+    if (this.componentPagination.totalItems === 0) return false
+
+    // Not loaded yet
+    if (!this.componentPagination.totalItems) return true
+
+    const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage
+    return maxPage > this.componentPagination.currentPage
+  }
 }