isNewPlaylistBlockOpened = false
videoPlaylistSearch: string
- videoPlaylistSearchChanged = new Subject<string>()
+ videoPlaylistSearchChanged = new Subject<void>()
videoPlaylists: PlaylistSummary[] = []
private listenToPlaylistChangeSub: Subscription
private playlistsData: CachedPlaylist[] = []
+ private pendingAddId: number
+
constructor (
protected formValidatorService: FormValidatorService,
private authService: AuthService,
}
createPlaylist () {
- const displayName = this.form.value[ 'displayName' ]
+ const displayName = this.form.value['displayName']
const videoPlaylistCreate: VideoPlaylistCreate = {
displayName,
privacy: VideoPlaylistPrivacy.PRIVATE
}
- this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
- () => {
- this.isNewPlaylistBlockOpened = false
+ this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate)
+ .subscribe({
+ next: () => {
+ this.isNewPlaylistBlockOpened = false
- this.cd.markForCheck()
- },
+ this.cd.markForCheck()
+ },
- err => this.notifier.error(err.message)
- )
+ error: err => this.notifier.error(err.message)
+ })
}
onVideoPlaylistSearchChanged () {
}
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) {
}
this.videoPlaylistService.updateVideoOfPlaylist(playlist.id, element.playlistElementId, body, this.video.id)
- .subscribe(
- () => {
+ .subscribe({
+ next: () => {
this.notifier.success($localize`Timestamps updated`)
},
- err => {
- this.notifier.error(err.message)
- },
+ error: err => this.notifier.error(err.message),
- () => this.cd.markForCheck()
- )
+ complete: () => this.cd.markForCheck()
+ })
}
private isOptionalRowDisplayed (playlist: PlaylistSummary) {
private removeVideoFromPlaylist (playlist: PlaylistSummary, elementId: number) {
this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, elementId, this.video.id)
- .subscribe(
- () => {
+ .subscribe({
+ next: () => {
this.notifier.success($localize`Video removed from ${playlist.displayName}`)
},
- err => {
- this.notifier.error(err.message)
- },
+ error: err => this.notifier.error(err.message),
- () => this.cd.markForCheck()
- )
+ complete: () => this.cd.markForCheck()
+ })
}
private listenToVideoPlaylistChange () {
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(
- res => {
+ .subscribe({
+ next: res => {
const message = body.startTimestamp || body.stopTimestamp
? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(element)}`
: $localize`Video added in ${playlist.displayName}`
if (element) element.playlistElementId = res.videoPlaylistElement.id
},
- err => {
+ error: err => {
+ this.pendingAddId = undefined
+ this.cd.markForCheck()
+
this.notifier.error(err.message)
},
- () => this.cd.markForCheck()
- )
+ complete: () => {
+ this.pendingAddId = undefined
+ this.cd.markForCheck()
+ }
+ })
}
private formatTimestamp (element: PlaylistElement) {