Fix component reuse on channel/account videos

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video-playlist / video-add-to-playlist.component.ts

diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
index c6fb6dbedab6bf26c287511eeb0ec86f290e5d57..7dcdf7a9eb44e1325626424daaa35d46ba53c412 100644 (file)
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -1,11 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { AuthService, Notifier } from '@app/core'
 import { forkJoin } from 'rxjs'
 import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
 import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { secondsToTime, timeToInt } from '../../../assets/player/utils'
+import { secondsToTime } from '../../../assets/player/utils'
 
 type PlaylistSummary = {
   id: number
@@ -19,11 +19,13 @@ type PlaylistSummary = {
 @Component({
   selector: 'my-video-add-to-playlist',
   styleUrls: [ './video-add-to-playlist.component.scss' ],
-  templateUrl: './video-add-to-playlist.component.html'
+  templateUrl: './video-add-to-playlist.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
   @Input() video: Video
   @Input() currentVideoTimestamp: number
+  @Input() lazyLoad = false
 
   isNewPlaylistBlockOpened = false
   videoPlaylists: PlaylistSummary[] = []
@@ -41,7 +43,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
     private notifier: Notifier,
     private i18n: I18n,
     private videoPlaylistService: VideoPlaylistService,
-    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService
+    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+    private cd: ChangeDetectorRef
   ) {
     super()
   }
@@ -54,9 +57,13 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
     this.resetOptions(true)
 
     this.buildForm({
-      'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
     })
 
+    if (this.lazyLoad !== true) this.load()
+  }
+
+  load () {
     forkJoin([
       this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
       this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
@@ -74,6 +81,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
               stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
             })
           }
+
+          this.cd.markForCheck()
         }
       )
   }
@@ -102,10 +111,12 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
 
     playlist.inPlaylist = !playlist.inPlaylist
     this.resetOptions()
+
+    this.cd.markForCheck()
   }
 
   createPlaylist () {
-    const displayName = this.form.value[ 'display-name' ]
+    const displayName = this.form.value[ 'displayName' ]
 
     const videoPlaylistCreate: VideoPlaylistCreate = {
       displayName,
@@ -121,6 +132,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
         })
 
         this.isNewPlaylistBlockOpened = false
+
+        this.cd.markForCheck()
       },
 
       err => this.notifier.error(err.message)
@@ -160,7 +173,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
             this.notifier.error(err.message)
 
             playlist.inPlaylist = true
-          }
+          },
+
+          () => this.cd.markForCheck()
         )
   }
 
@@ -189,7 +204,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
           this.notifier.error(err.message)
 
           playlist.inPlaylist = false
-        }
+        },
+
+        () => this.cd.markForCheck()
       )
   }
 }