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,
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
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,
.subscribe(result => {
this.playlistsData = result.data
- this.videoPlaylistService.runPlaylistCheck(this.video.id)
+ this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
})
this.videoPlaylistSearchChanged
}
reload () {
- logger('Reloading component')
+ debugLogger('Reloading component')
this.videoPlaylists = []
this.videoPlaylistSearch = undefined
}
load () {
- logger('Loading component')
+ debugLogger('Loading component')
this.listenToVideoPlaylistChange()
.subscribe(playlistsResult => {
this.playlistsData = playlistsResult.data
- this.videoPlaylistService.runPlaylistCheck(this.video.id)
+ this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
})
}
}
createPlaylist () {
- const displayName = this.form.value[ 'displayName' ]
+ const displayName = this.form.value['displayName']
const videoPlaylistCreate: VideoPlaylistCreate = {
displayName,
}
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) {
}
}
- 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
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()
}
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 => {
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()
+ }
})
}