Automatically update playlist thumbnails

2 files changed, 38 insertions, 10 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 6434b9e50..6f307a058 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
@@ -63,24 +63,26 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
 
     if (oldPosition > insertAfter) insertAfter--
 
-    this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter)
-      .subscribe(
-        () => { /* nothing to do */ },
-
-        err => this.notifier.error(err.message)
-      )
-
     const element = this.playlistElements[previousIndex]
 
     this.playlistElements.splice(previousIndex, 1)
     this.playlistElements.splice(newIndex, 0, element)
 
-    this.reorderClientPositions()
+    this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter)
+      .subscribe(
+        () => {
+          this.reorderClientPositions()
+        },
+
+        err => this.notifier.error(err.message)
+      )
   }
 
   onElementRemoved (element: VideoPlaylistElement) {
+    const oldFirst = this.findFirst()
+
     this.playlistElements = this.playlistElements.filter(v => v.id !== element.id)
-    this.reorderClientPositions()
+    this.reorderClientPositions(oldFirst)
   }
 
   onNearOfBottom () {
@@ -110,12 +112,25 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
       })
   }
 
-  private reorderClientPositions () {
+  private reorderClientPositions (first?: VideoPlaylistElement) {
+    if (this.playlistElements.length === 0) return
+
+    const oldFirst = first || this.findFirst()
     let i = 1
 
     for (const element of this.playlistElements) {
       element.position = i
       i++
     }
+
+    // Reload playlist thumbnail if the first element changed
+    const newFirst = this.findFirst()
+    if (oldFirst && newFirst && oldFirst.id !== newFirst.id) {
+      this.playlist.refreshThumbnail()
+    }
+  }
+
+  private findFirst () {
+    return this.playlistElements.find(e => e.position === 1)
   }
 }
diff --git a/client/src/app/shared/video-playlist/video-playlist.model.ts b/client/src/app/shared/video-playlist/video-playlist.model.ts
index 7e311aa54..6f27e7475 100644
--- a/client/src/app/shared/video-playlist/video-playlist.model.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.model.ts
@@ -38,6 +38,9 @@ export class VideoPlaylist implements ServerVideoPlaylist {
   videoChannelBy?: string
   videoChannelAvatarUrl?: string
 
+  private thumbnailVersion: number
+  private originThumbnailUrl: string
+
   constructor (hash: ServerVideoPlaylist, translations: {}) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
@@ -54,6 +57,7 @@ export class VideoPlaylist implements ServerVideoPlaylist {
 
     if (this.thumbnailPath) {
       this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
+      this.originThumbnailUrl = this.thumbnailUrl
     } else {
       this.thumbnailUrl = window.location.origin + '/client/assets/images/default-playlist.jpg'
     }
@@ -81,4 +85,13 @@ export class VideoPlaylist implements ServerVideoPlaylist {
       this.displayName = peertubeTranslate(this.displayName, translations)
     }
   }
+
+  refreshThumbnail () {
+    if (!this.originThumbnailUrl) return
+
+    if (!this.thumbnailVersion) this.thumbnailVersion = 0
+    this.thumbnailVersion++
+
+    this.thumbnailUrl = this.originThumbnailUrl + '?v' + this.thumbnailVersion
+  }
 }