Add infinite scroll to comments

2 files changed, 40 insertions, 11 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index 9d7581269..5c6908150 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -9,7 +9,13 @@
     (commentCreated)="onCommentThreadCreated($event)"
   ></my-video-comment-add>
 
-  <div class="comment-threads">
+  <div
+    class="comment-threads"
+    infiniteScroll
+    [infiniteScrollUpDistance]="1.5"
+    [infiniteScrollDistance]="0.5"
+    (scrolled)="onNearOfBottom()"
+  >
     <div *ngFor="let comment of comments">
       <my-video-comment
         [comment]="comment"
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
+  }
 }