Reduce latency when adding a video to playlist

1 files changed, 17 insertions, 4 deletions

diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index 553930595..e4972ec10 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -56,6 +56,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   private listenToPlaylistChangeSub: Subscription
   private playlistsData: CachedPlaylist[] = []
 
+  private pendingAddId: number
+
   constructor (
     protected formValidatorService: FormValidatorService,
     private authService: AuthService,
@@ -215,8 +217,9 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   isPrimaryCheckboxChecked (playlist: PlaylistSummary) {
-    return playlist.elements.filter(e => e.enabled)
-                            .length !== 0
+    // Reduce latency when adding a video to a playlist using pendingAddId
+    return this.pendingAddId === playlist.id ||
+      playlist.elements.filter(e => e.enabled).length !== 0
   }
 
   toggleOptionalRow (playlist: PlaylistSummary) {
@@ -367,6 +370,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
     if (element.startTimestamp) body.startTimestamp = element.startTimestamp
     if (element.stopTimestamp && element.stopTimestamp !== this.video.duration) body.stopTimestamp = element.stopTimestamp
 
+    this.pendingAddId = playlist.id
+
     this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
       .subscribe({
         next: res => {
@@ -379,9 +384,17 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
           if (element) element.playlistElementId = res.videoPlaylistElement.id
         },
 
-        error: err => this.notifier.error(err.message),
+        error: err => {
+          this.pendingAddId = undefined
+          this.cd.markForCheck()
+
+          this.notifier.error(err.message)
+        },
 
-        complete: () => this.cd.markForCheck()
+        complete: () => {
+          this.pendingAddId = undefined
+          this.cd.markForCheck()
+        }
       })
   }