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 705f62404daf3c2586d8d582d6c6077d8b6f1540..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,4 +1,4 @@
-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'
@@ -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()
   }
@@ -57,6 +60,10 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
       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,6 +111,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
 
     playlist.inPlaylist = !playlist.inPlaylist
     this.resetOptions()
+
+    this.cd.markForCheck()
   }
 
   createPlaylist () {
@@ -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()
       )
   }
 }