Fix pagination in my videos page

6 files changed, 25 insertions, 18 deletions

diff --git a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
index 62dde60bb..e2193b630 100644
--- a/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-auto-blacklist-list/video-auto-blacklist-list.component.html
@@ -1,4 +1,5 @@
 <my-videos-selection
+  [pagination]="pagination"
   [(selection)]="selection"
   [(videosModel)]="videos"
   [miniatureDisplayOptions]="miniatureDisplayOptions"
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index d7993fdc2..84d464800 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,4 +1,5 @@
 <my-videos-selection
+  [pagination]="pagination"
   [(selection)]="selection"
   [(videosModel)]="videos"
   [miniatureDisplayOptions]="miniatureDisplayOptions"
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index 4d12a84c0..b4acb9d32 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,4 +1,4 @@
-<span class="action-button action-button-delete" [title]="getTitle()" role="button">
+<span class="action-button action-button-delete" [title]="title" role="button">
   <my-global-icon iconName="delete"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
diff --git a/client/src/app/shared/buttons/delete-button.component.ts b/client/src/app/shared/buttons/delete-button.component.ts
index 8e285d982..39e31900f 100644
--- a/client/src/app/shared/buttons/delete-button.component.ts
+++ b/client/src/app/shared/buttons/delete-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
@@ -7,12 +7,14 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   templateUrl: './delete-button.component.html'
 })
 
-export class DeleteButtonComponent {
+export class DeleteButtonComponent implements OnInit {
   @Input() label: string
 
+  title: string
+
   constructor (private i18n: I18n) { }
 
-  getTitle () {
-    return this.label || this.i18n('Delete')
+  ngOnInit () {
+    this.title = this.label || this.i18n('Delete')
   }
 }
diff --git a/client/src/app/shared/video/videos-selection.component.html b/client/src/app/shared/video/videos-selection.component.html
index 53809b6fd..120c168cd 100644
--- a/client/src/app/shared/video/videos-selection.component.html
+++ b/client/src/app/shared/video/videos-selection.component.html
@@ -1,7 +1,8 @@
 <div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
 
 <div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" class="videos">
-  <div class="video" *ngFor="let video of videos; let i = index">
+  <div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">
+
     <div class="checkbox-container">
       <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
     </div>
diff --git a/client/src/app/shared/video/videos-selection.component.ts b/client/src/app/shared/video/videos-selection.component.ts
index b6bedafd8..955ebca9f 100644
--- a/client/src/app/shared/video/videos-selection.component.ts
+++ b/client/src/app/shared/video/videos-selection.component.ts
@@ -19,6 +19,7 @@ import { Observable } from 'rxjs'
 import { Video } from '@app/shared/video/video.model'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoSortField } from '@app/shared/video/sort-field.type'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 
 export type SelectionType = { [ id: number ]: boolean }
 
@@ -28,6 +29,7 @@ export type SelectionType = { [ id: number ]: boolean }
   styleUrls: [ './videos-selection.component.scss' ]
 })
 export class VideosSelectionComponent extends AbstractVideoList implements OnInit, OnDestroy, AfterContentInit {
+  @Input() pagination: ComponentPagination
   @Input() titlePage: string
   @Input() miniatureDisplayOptions: MiniatureDisplayOptions
   @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<{ videos: Video[], totalVideos: number }>
@@ -52,18 +54,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
     super()
   }
 
-  ngAfterContentInit () {
-    {
-      const t = this.templates.find(t => t.name === 'rowButtons')
-      if (t) this.rowButtonsTemplate = t.template
-    }
-
-    {
-      const t = this.templates.find(t => t.name === 'globalButtons')
-      if (t) this.globalButtonsTemplate = t.template
-    }
-  }
-
   @Input() get selection () {
     return this._selection
   }
@@ -86,6 +76,18 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
     super.ngOnInit()
   }
 
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'rowButtons')
+      if (t) this.rowButtonsTemplate = t.template
+    }
+
+    {
+      const t = this.templates.find(t => t.name === 'globalButtons')
+      if (t) this.globalButtonsTemplate = t.template
+    }
+  }
+
   ngOnDestroy () {
     super.ngOnDestroy()
   }