Merge branch 'release/5.0.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-playlist / video-add-to-playlist.component.ts

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 5539305956394d2930aae4d19f845df6a869888f..f802416a4235a8c637d699f6b36e095c4227d010 100644 (file)
--- 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
@@ -3,11 +3,11 @@ import { Subject, Subscription } from 'rxjs'
 import { debounceTime, filter } from 'rxjs/operators'
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
 import { AuthService, DisableForReuseHook, Notifier } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 import { secondsToTime } from '@shared/core-utils'
 import {
+  CachedVideoExistInPlaylist,
   Video,
-  VideoExistInPlaylist,
   VideoPlaylistCreate,
   VideoPlaylistElementCreate,
   VideoPlaylistElementUpdate,
@@ -16,7 +16,7 @@ import {
 import { VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR } from '../form-validators/video-playlist-validators'
 import { CachedPlaylist, VideoPlaylistService } from './video-playlist.service'
 
-const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
+const debugLogger = debug('peertube:playlists:VideoAddToPlaylistComponent')
 
 type PlaylistElement = {
   enabled: boolean
@@ -56,8 +56,10 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   private listenToPlaylistChangeSub: Subscription
   private playlistsData: CachedPlaylist[] = []
 
+  private pendingAddId: number
+
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private authService: AuthService,
     private notifier: Notifier,
     private videoPlaylistService: VideoPlaylistService,
@@ -79,7 +81,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
         .subscribe(result => {
           this.playlistsData = result.data
 
-          this.videoPlaylistService.runPlaylistCheck(this.video.id)
+          this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
         })
 
     this.videoPlaylistSearchChanged
@@ -108,7 +110,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   reload () {
-    logger('Reloading component')
+    debugLogger('Reloading component')
 
     this.videoPlaylists = []
     this.videoPlaylistSearch = undefined
@@ -119,7 +121,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   load () {
-    logger('Loading component')
+    debugLogger('Loading component')
 
     this.listenToVideoPlaylistChange()
 
@@ -127,7 +129,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
         .subscribe(playlistsResult => {
           this.playlistsData = playlistsResult.data
 
-          this.videoPlaylistService.runPlaylistCheck(this.video.id)
+          this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
         })
   }
 
@@ -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) {
@@ -327,8 +330,8 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
     }
   }
 
-  private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
-    logger('Got existing results for %d.', this.video.id, existResult)
+  private rebuildPlaylists (existResult: CachedVideoExistInPlaylist[]) {
+    debugLogger('Got existing results for %d.', this.video.id, existResult)
 
     const oldPlaylists = this.videoPlaylists
 
@@ -356,7 +359,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
       this.videoPlaylists.push(playlistSummary)
     }
 
-    logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
+    debugLogger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
 
     this.cd.markForCheck()
   }
@@ -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()
+        }
       })
   }