5 files changed, 52 insertions, 22 deletions

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
index 25d51d2cb..03f34412c 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -67,7 +67,9 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     if (previousIndex === newIndex) return
 
     const oldPosition = this.videos[previousIndex].playlistElement.position
-    const insertAfter = newIndex === 0 ? 0 : this.videos[newIndex].playlistElement.position
+    let insertAfter = this.videos[newIndex].playlistElement.position
+
+    if (oldPosition > insertAfter) insertAfter--
 
     this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter)
       .subscribe(
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()
   }
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 8ca5c4118..bada9bae8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -18,6 +18,7 @@ $player-factor: 1.7; // 16/9
   width: 100% !important;
   height: auto !important;
   max-height: 300px !important;
+  max-width: initial;
   border-bottom: 1px solid $separator-border-color !important;
 }
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index d8ba4df89..55109dc32 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/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 = [
-      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)
+    this.initHotkeys()
   }
 
   ngOnDestroy () {
@@ -569,4 +553,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       }
     }
   }
+
+  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)
+  }
 }