Rewrite infinite scroll

5 files changed, 21 insertions, 18 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 80b200931..7f2e96e93 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
@@ -15,10 +15,9 @@
 
     <div
       class="comment-threads"
-      infiniteScroll
-      [infiniteScrollUpDistance]="1.5"
-      [infiniteScrollDistance]="0.5"
-      (scrolled)="onNearOfBottom()"
+      myInfiniteScroller
+      [autoLoading]="true"
+      (nearOfBottom)="onNearOfBottom()"
     >
       <div *ngFor="let comment of comments">
         <my-video-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 6025256de..7ca3bafb5 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
@@ -160,11 +160,8 @@ export class VideoCommentsComponent implements OnChanges {
       this.threadComments = {}
       this.threadLoading = {}
       this.inReplyToCommentId = undefined
-      this.componentPagination = {
-        currentPage: 1,
-        itemsPerPage: 10,
-        totalItems: null
-      }
+      this.componentPagination.currentPage = 1
+      this.componentPagination.totalItems = null
 
       this.loadMoreComments()
     }
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
index 3020b8c30..f150e38da 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { immutableAssign } from '@app/shared/misc/utils'
 import { NotificationsService } from 'angular2-notifications'
 import { AuthService } from '../../core/auth'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
@@ -28,7 +29,9 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
     super.ngOnInit()
   }
 
-  getVideosObservable () {
-    return this.videoService.getVideos(this.pagination, this.sort)
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+
+    return this.videoService.getVideos(newPagination, this.sort)
   }
 }
diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts
index 67726afdc..241b97bc7 100644
--- a/client/src/app/videos/video-list/video-search.component.ts
+++ b/client/src/app/videos/video-list/video-search.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { immutableAssign } from '@app/shared/misc/utils'
 import { NotificationsService } from 'angular2-notifications'
 import { Subscription } from 'rxjs/Subscription'
 import { AuthService } from '../../core/auth'
@@ -16,7 +17,7 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O
   currentRoute = '/videos/search'
   loadOnInit = false
 
-  protected otherParams = {
+  protected otherRouteParams = {
     search: ''
   }
   private subActivatedRoute: Subscription
@@ -35,9 +36,9 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O
     this.subActivatedRoute = this.route.queryParams.subscribe(
       queryParams => {
         const querySearch = queryParams['search']
-        if (!querySearch || this.otherParams.search === querySearch) return
+        if (!querySearch || this.otherRouteParams.search === querySearch) return
 
-        this.otherParams.search = querySearch
+        this.otherRouteParams.search = querySearch
         this.reloadVideos()
       },
 
@@ -51,7 +52,8 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O
     }
   }
 
-  getVideosObservable () {
-    return this.videoService.searchVideos(this.otherParams.search, this.pagination, this.sort)
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    return this.videoService.searchVideos(this.otherRouteParams.search, newPagination, this.sort)
   }
 }
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index fc48086d6..a42457273 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { immutableAssign } from '@app/shared/misc/utils'
 import { NotificationsService } from 'angular2-notifications'
 import { AuthService } from '../../core/auth'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
@@ -28,7 +29,8 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit
     super.ngOnInit()
   }
 
-  getVideosObservable () {
-    return this.videoService.getVideos(this.pagination, this.sort)
+  getVideosObservable (page: number) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+    return this.videoService.getVideos(newPagination, this.sort)
   }
 }