Reset playlist add component when video changes

2 files changed, 27 insertions, 4 deletions

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 7dcdf7a9e..be15f2352 100644
--- 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { AuthService, Notifier } from '@app/core'
 import { forkJoin } from 'rxjs'
@@ -22,7 +22,7 @@ type PlaylistSummary = {
   templateUrl: './video-add-to-playlist.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
+export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges {
   @Input() video: Video
   @Input() currentVideoTimestamp: number
   @Input() lazyLoad = false
@@ -54,15 +54,33 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
   }
 
   ngOnInit () {
-    this.resetOptions(true)
-
     this.buildForm({
       displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
     })
 
+    this.init()
+  }
+
+  ngOnChanges (simpleChanges: SimpleChanges) {
+    if (simpleChanges['video']) {
+      this.unload()
+    }
+  }
+
+  init () {
+    this.resetOptions(true)
+
     if (this.lazyLoad !== true) this.load()
   }
 
+  unload () {
+    this.videoPlaylists = []
+
+    this.init()
+
+    this.cd.markForCheck()
+  }
+
   load () {
     forkJoin([
       this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index ee2f44f9e..df799499e 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -79,6 +79,11 @@ export class VideoActionsDropdownComponent implements OnChanges {
   }
 
   ngOnChanges () {
+    if (this.loaded) {
+      this.loaded = false
+      this.playlistAdd.unload()
+    }
+
     this.buildActions()
   }