Reset playlist add component when video changes

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'),

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()
   }
 

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -119,23 +119,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (videoId) this.loadVideo(videoId)
     })
 
-    this.hotkeys = [
+    this.initHotkeys()
-      new Hotkey('shift+l', (event: KeyboardEvent): boolean => {
-        this.setLike()
-        return false
-      }, undefined, this.i18n('Like the video')),
-      new Hotkey('shift+d', (event: KeyboardEvent): boolean => {
-        this.setDislike()
-        return false
-      }, undefined, this.i18n('Dislike the video')),
-      new Hotkey('shift+s', (event: KeyboardEvent): boolean => {
-        this.subscribeButton.subscribed ?
-          this.subscribeButton.unsubscribe() :
-          this.subscribeButton.subscribe()
-        return false
-      }, undefined, this.i18n('Subscribe to the account'))
-    ]
-    if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
   }
 
   ngOnDestroy () {
@@ -565,4 +549,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player = undefined
     }
   }
+
+  private initHotkeys () {
+    this.hotkeys = [
+      new Hotkey('shift+l', (event: KeyboardEvent): boolean => {
+        this.setLike()
+        return false
+      }, undefined, this.i18n('Like the video')),
+      new Hotkey('shift+d', (event: KeyboardEvent): boolean => {
+        this.setDislike()
+        return false
+      }, undefined, this.i18n('Dislike the video')),
+      new Hotkey('shift+s', (event: KeyboardEvent): boolean => {
+        this.subscribeButton.subscribed ?
+          this.subscribeButton.unsubscribe() :
+          this.subscribeButton.subscribe()
+        return false
+      }, undefined, this.i18n('Subscribe to the account'))
+    ]
+    if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
+  }
 }