Restore videos list components

5 files changed, 65 insertions, 90 deletions

diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 2349f02f5..00ee5fbd1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -13,16 +13,14 @@
 
 <div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div>
 
-<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" class="videos" #videosElement>
-  <div *ngFor="let videos of videoPages;" class="videos-page">
-    <div class="video" *ngFor="let video of videos">
-      <my-video-thumbnail [video]="video"></my-video-thumbnail>
+<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
+  <div class="video" *ngFor="let video of videos">
+    <my-video-thumbnail [video]="video"></my-video-thumbnail>
 
-      <div class="video-info">
-        <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-        <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
-        <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
-      </div>
+    <div class="video-info">
+      <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
+      <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
+      <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
index 394091bad..73340d21a 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.ts
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
 import { AuthService } from '../../core/auth'
@@ -11,7 +10,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { UserHistoryService } from '@app/shared/users/user-history.service'
 import { UserService } from '@app/shared'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 
 @Component({
   selector: 'my-account-history',
@@ -20,7 +19,6 @@ import { Notifier } from '@app/core'
 })
 export class MyAccountHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
   titlePage: string
-  currentRoute = '/my-account/history/videos'
   pagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 5,
@@ -28,16 +26,13 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
   }
   videosHistoryEnabled: boolean
 
-  protected baseVideoWidth = -1
-  protected baseVideoHeight = 155
-
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
     protected userService: UserService,
     protected notifier: Notifier,
-    protected location: Location,
     protected screenService: ScreenService,
     protected i18n: I18n,
     private confirmService: ConfirmService,
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 07557a029..018d6f996 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -118,6 +118,10 @@ const myAccountRoutes: Routes = [
         data: {
           meta: {
             title: 'Account videos'
+          },
+          reuse: {
+            enabled: true,
+            key: 'my-account-videos-list'
           }
         }
       },
@@ -172,6 +176,10 @@ const myAccountRoutes: Routes = [
         data: {
           meta: {
             title: 'Videos history'
+          },
+          reuse: {
+            enabled: true,
+            key: 'my-videos-history-list'
           }
         }
       },
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 b09e845ac..1f3ac0005 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,54 +1,47 @@
 <div i18n *ngIf="pagination.totalItems === 0">No results.</div>
 
-<div
-  myInfiniteScroller
-  [pageHeight]="pageHeight"
-  (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)"
-  class="videos" #videosElement
->
-  <div *ngFor="let videos of videoPages; let i = index" class="videos-page">
-    <div class="video" *ngFor="let video of videos; let j = index">
-      <div class="checkbox-container">
-        <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
-      </div>
+<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
+  <div class="video" *ngFor="let video of videos; let i = index">
+    <div class="checkbox-container">
+      <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
+    </div>
 
-      <my-video-thumbnail [video]="video"></my-video-thumbnail>
+    <my-video-thumbnail [video]="video"></my-video-thumbnail>
 
-      <div class="video-info">
-        <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-        <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-        <div class="video-info-privacy">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
-        <div *ngIf="video.blacklisted" class="video-info-blacklisted">
-          <span class="blacklisted-label" i18n>Blacklisted</span>
-          <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
-        </div>
+    <div class="video-info">
+      <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
+      <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
+      <div class="video-info-privacy">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
+      <div *ngIf="video.blacklisted" class="video-info-blacklisted">
+        <span class="blacklisted-label" i18n>Blacklisted</span>
+        <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
       </div>
+    </div>
 
-      <!-- Display only once -->
-      <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0">
-        <div class="action-selection-mode-child">
-          <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
-            Cancel
-          </span>
-
-          <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
-            <my-global-icon iconName="delete"></my-global-icon>
-            <ng-container i18n>Delete</ng-container>
-          </span>
-        </div>
+    <!-- Display only once -->
+    <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
+      <div class="action-selection-mode-child">
+        <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+          Cancel
+        </span>
+
+        <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
+          <my-global-icon iconName="delete"></my-global-icon>
+          <ng-container i18n>Delete</ng-container>
+        </span>
       </div>
+    </div>
 
-      <div class="video-buttons" *ngIf="isInSelectionMode() === false">
-        <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
+    <div class="video-buttons" *ngIf="isInSelectionMode() === false">
+      <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
 
-        <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+      <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
 
-        <my-button i18n-label label="Change ownership"
-                   className="action-button-change-ownership"
-                   icon="im-with-her"
-                   (click)="changeOwnership($event, video)"
-        ></my-button>
-      </div>
+      <my-button i18n-label label="Change ownership"
+                 className="action-button-change-ownership"
+                 icon="im-with-her"
+                 (click)="changeOwnership($event, video)"
+      ></my-button>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 41608f796..eb5096a5e 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,11 +1,10 @@
-import { from as observableFrom, Observable } from 'rxjs'
-import { concatAll, tap } from 'rxjs/operators'
-import { Component, OnDestroy, OnInit, Inject, LOCALE_ID, ViewChild } from '@angular/core'
+import { concat, Observable } from 'rxjs'
+import { tap, toArray } from 'rxjs/operators'
+import { Component, Inject, LOCALE_ID, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { Location } from '@angular/common'
 import { immutableAssign } from '@app/shared/misc/utils'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Notifier } from '@app/core'
+import { Notifier, ServerService } from '@app/core'
 import { AuthService } from '../../core/auth'
 import { ConfirmService } from '../../core/confirm'
 import { AbstractVideoList } from '../../shared/video/abstract-video-list'
@@ -22,8 +21,9 @@ import { VideoChangeOwnershipComponent } from './video-change-ownership/video-ch
   styleUrls: [ './my-account-videos.component.scss' ]
 })
 export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
+  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+
   titlePage: string
-  currentRoute = '/my-account/videos'
   checkedVideos: { [ id: number ]: boolean } = {}
   pagination: ComponentPagination = {
     currentPage: 1,
@@ -31,19 +31,14 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
     totalItems: null
   }
 
-  protected baseVideoWidth = -1
-  protected baseVideoHeight = 155
-
-  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
-
   constructor (
     protected router: Router,
+    protected serverService: ServerService,
     protected route: ActivatedRoute,
     protected authService: AuthService,
     protected notifier: Notifier,
-    protected location: Location,
     protected screenService: ScreenService,
-    protected i18n: I18n,
+    private i18n: I18n,
     private confirmService: ConfirmService,
     private videoService: VideoService,
     @Inject(LOCALE_ID) private localeId: string
@@ -93,19 +88,18 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
     const observables: Observable<any>[] = []
     for (const videoId of toDeleteVideosIds) {
       const o = this.videoService.removeVideo(videoId)
-                    .pipe(tap(() => this.spliceVideosById(videoId)))
+                    .pipe(tap(() => this.removeVideoFromArray(videoId)))
 
       observables.push(o)
     }
 
-    observableFrom(observables)
-      .pipe(concatAll())
+    concat(...observables)
+      .pipe(toArray())
       .subscribe(
-        res => {
+        () => {
           this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length }))
 
           this.abortSelectionMode()
-          this.reloadVideos()
         },
 
         err => this.notifier.error(err.message)
@@ -156,20 +150,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
     return ' - ' + suffix
   }
 
-  protected buildVideoHeight () {
-    // In account videos, the video height is fixed
-    return this.baseVideoHeight
-  }
-
-  private spliceVideosById (id: number) {
-    for (const key of Object.keys(this.loadedPages)) {
-      const videos: Video[] = this.loadedPages[ key ]
-      const index = videos.findIndex(v => v.id === id)
-
-      if (index !== -1) {
-        videos.splice(index, 1)
-        return
-      }
-    }
+  private removeVideoFromArray (id: number) {
+    this.videos = this.videos.filter(v => v.id !== id)
   }
 }