-import { Component, Input, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
import { AuthService, Notifier } from '@app/core'
-import { forkJoin } from 'rxjs'
+import { forkJoin, Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
import { I18n } from '@ngx-translate/i18n-polyfill'
inPlaylist: boolean
displayName: string
+ playlistElementId?: number
startTimestamp?: number
stopTimestamp?: number
}
@Component({
selector: 'my-video-add-to-playlist',
styleUrls: [ './video-add-to-playlist.component.scss' ],
- templateUrl: './video-add-to-playlist.component.html'
+ templateUrl: './video-add-to-playlist.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
})
-export class VideoAddToPlaylistComponent extends FormReactive implements OnInit {
+export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges {
@Input() video: Video
@Input() currentVideoTimestamp: number
@Input() lazyLoad = false
isNewPlaylistBlockOpened = false
+ videoPlaylistSearch: string
+ videoPlaylistSearchChanged = new Subject<string>()
videoPlaylists: PlaylistSummary[] = []
timestampOptions: {
startTimestampEnabled: boolean
private notifier: Notifier,
private i18n: I18n,
private videoPlaylistService: VideoPlaylistService,
- private videoPlaylistValidatorsService: VideoPlaylistValidatorsService
+ private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
+ private cd: ChangeDetectorRef
) {
super()
}
}
ngOnInit () {
- this.resetOptions(true)
-
this.buildForm({
displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
})
+ this.videoPlaylistSearchChanged
+ .pipe(
+ debounceTime(500))
+ .subscribe(() => {
+ this.load()
+ })
+ }
+
+ ngOnChanges (simpleChanges: SimpleChanges) {
+ if (simpleChanges['video']) {
+ this.reload()
+ }
+ }
+
+ init () {
+ this.resetOptions(true)
+
if (this.lazyLoad !== true) this.load()
}
+ reload () {
+ this.videoPlaylists = []
+ this.videoPlaylistSearch = undefined
+
+ this.init()
+
+ this.cd.markForCheck()
+ }
+
load () {
forkJoin([
- this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
+ this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined, '-updatedAt', this.videoPlaylistSearch),
this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
])
.subscribe(
([ playlistsResult, existResult ]) => {
+ this.videoPlaylists = []
for (const playlist of playlistsResult.data) {
const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
id: playlist.id,
displayName: playlist.displayName,
inPlaylist: !!existingPlaylist,
+ playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
})
}
+
+ this.cd.markForCheck()
}
)
}
playlist.inPlaylist = !playlist.inPlaylist
this.resetOptions()
+
+ this.cd.markForCheck()
}
createPlaylist () {
})
this.isNewPlaylistBlockOpened = false
+
+ this.cd.markForCheck()
},
err => this.notifier.error(err.message)
return `(${start}-${stop})`
}
+ onVideoPlaylistSearchChanged () {
+ this.videoPlaylistSearchChanged.next()
+ }
+
private removeVideoFromPlaylist (playlist: PlaylistSummary) {
- this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id)
+ if (!playlist.playlistElementId) return
+
+ this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId)
.subscribe(
() => {
this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
playlist.inPlaylist = false
+ playlist.playlistElementId = undefined
},
err => {
this.notifier.error(err.message)
playlist.inPlaylist = true
- }
+ },
+
+ () => this.cd.markForCheck()
)
}
this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
.subscribe(
- () => {
+ res => {
playlist.inPlaylist = true
+ playlist.playlistElementId = res.videoPlaylistElement.id
playlist.startTimestamp = body.startTimestamp
playlist.stopTimestamp = body.stopTimestamp
this.notifier.error(err.message)
playlist.inPlaylist = false
- }
+ },
+
+ () => this.cd.markForCheck()
)
}
}