Fix pagination in my videos page

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 62dde60bb7ed841f78e95965133303bcb5b557ab..e2193b630a1bfd9e8f0ba196123f5c37a3a73715 100644 (file)
--- 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 d7993fdc266b4e8f230004bd1bfb8ccf300ab027..84d4648001c12114275cb2b66aef1655dbf69bdb 100644 (file)
--- 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 4d12a84c06f20801b70ba04c2f80d1c1609c1dfa..b4acb9d32a4ecf974a9ee33fa4b334fc92dc1afa 100644 (file)
--- 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 8e285d98282616e398504245c6e63bacc71338f5..39e31900fa3998423dba23683688bfc3b554575b 100644 (file)
--- 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 53809b6fdb198e35d192ec8eec33fcf8ceadd90a..120c168cd96b71df20cef32eda6901c40873922e 100644 (file)
--- 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 b6bedafd8a52eaf7acfbf0243a47b3ecddf4f101..955ebca9fcdf8765bb36c658e05484704e00fb59 100644 (file)
--- 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()
   }