Infinite scroll to list our subscriptions

3 files changed, 32 insertions, 10 deletions

diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
index 4c68cd1a5..3752de49f 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -1,4 +1,4 @@
-<div class="video-channels">
+<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
   <div *ngFor="let videoChannel of videoChannels" class="video-channel">
     <a [routerLink]="[ '/video-channels', videoChannel.name ]">
       <img [src]="videoChannel.avatarUrl" alt="Avatar" />
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
index 9434b196f..9517a3705 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -3,6 +3,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserSubscriptionService } from '@app/shared/user-subscription'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 
 @Component({
   selector: 'my-account-subscriptions',
@@ -12,6 +13,12 @@ import { UserSubscriptionService } from '@app/shared/user-subscription'
 export class MyAccountSubscriptionsComponent implements OnInit {
   videoChannels: VideoChannel[] = []
 
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
   constructor (
     private userSubscriptionService: UserSubscriptionService,
     private notificationsService: NotificationsService,
@@ -19,12 +26,27 @@ export class MyAccountSubscriptionsComponent implements OnInit {
   ) {}
 
   ngOnInit () {
-    this.userSubscriptionService.listSubscriptions()
-      .subscribe(
-        res => this.videoChannels = res.data,
+    this.loadSubscriptions()
+  }
+
+  loadSubscriptions () {
+    this.userSubscriptionService.listSubscriptions(this.pagination)
+        .subscribe(
+          res => {
+            this.videoChannels = this.videoChannels.concat(res.data)
+            this.pagination.totalItems = res.total
+          },
+
+          error => this.notificationsService.error(this.i18n('Error'), error.message)
+        )
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
 
-        error => this.notificationsService.error(this.i18n('Error'), error.message)
-      )
+    this.pagination.currentPage += 1
+    this.loadSubscriptions()
   }
 
 }
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
index b2b6c3d60..329948cb5 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.html
@@ -29,10 +29,10 @@
       </td>
 
       <td *ngIf="isVideoImportPending(videoImport)">
-        {{ videoImport.video.name }}
+        {{ videoImport.video?.name }}
       </td>
-      <td *ngIf="isVideoImportSuccess(videoImport)">
-        <a [href]="getVideoUrl(videoImport.video)" target="_blank" rel="noopener noreferrer">{{ videoImport.video.name }}</a>
+      <td *ngIf="isVideoImportSuccess(videoImport) && videoImport.video">
+        <a [href]="getVideoUrl(videoImport.video)" target="_blank" rel="noopener noreferrer">{{ videoImport.video?.name }}</a>
       </td>
       <td *ngIf="isVideoImportFailed(videoImport)"></td>
 
@@ -40,7 +40,7 @@
       <td>{{ videoImport.createdAt }}</td>
 
       <td class="action-cell">
-        <my-edit-button *ngIf="isVideoImportSuccess(videoImport)" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
+        <my-edit-button *ngIf="isVideoImportSuccess(videoImport) && videoImport.video" [routerLink]="getEditVideoUrl(videoImport.video)"></my-edit-button>
       </td>
     </tr>
   </ng-template>