1 import * as debug from 'debug'
2 import { Subject, Subscription } from 'rxjs'
3 import { debounceTime, filter } from 'rxjs/operators'
4 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
5 import { AuthService, DisableForReuseHook, Notifier } from '@app/core'
6 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
7 import { Video, VideoExistInPlaylist, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy, VideoPlaylistElementUpdate } from '@shared/models'
8 import { secondsToTime } from '../../../assets/player/utils'
9 import { VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR } from '../form-validators/video-playlist-validators'
10 import { CachedPlaylist, VideoPlaylistService } from './video-playlist.service'
11 import { invoke, last } from 'lodash'
13 const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
15 type PlaylistElement = {
17 playlistElementId?: number
18 startTimestamp?: number
19 stopTimestamp?: number
22 type PlaylistSummary = {
25 optionalRowDisplayed: boolean
27 elements: PlaylistElement[]
31 selector: 'my-video-add-to-playlist',
32 styleUrls: [ './video-add-to-playlist.component.scss' ],
33 templateUrl: './video-add-to-playlist.component.html',
34 changeDetection: ChangeDetectionStrategy.OnPush
36 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges, OnDestroy, DisableForReuseHook {
38 @Input() currentVideoTimestamp: number
39 @Input() lazyLoad = false
41 isNewPlaylistBlockOpened = false
43 videoPlaylistSearch: string
44 videoPlaylistSearchChanged = new Subject<string>()
46 videoPlaylists: PlaylistSummary[] = []
48 private disabled = false
50 private listenToPlaylistChangeSub: Subscription
51 private playlistsData: CachedPlaylist[] = []
54 protected formValidatorService: FormValidatorService,
55 private authService: AuthService,
56 private notifier: Notifier,
57 private videoPlaylistService: VideoPlaylistService,
58 private cd: ChangeDetectorRef
64 return this.authService.getUser()
69 displayName: VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR
72 this.videoPlaylistService.listenToMyAccountPlaylistsChange()
73 .subscribe(result => {
74 this.playlistsData = result.data
76 this.videoPlaylistService.runPlaylistCheck(this.video.id)
79 this.videoPlaylistSearchChanged
80 .pipe(debounceTime(500))
81 .subscribe(() => this.load())
83 if (this.lazyLoad === false) this.load()
86 ngOnChanges (simpleChanges: SimpleChanges) {
87 if (simpleChanges['video']) {
93 this.unsubscribePlaylistChanges()
101 this.disabled = false
105 logger('Reloading component')
107 this.videoPlaylists = []
108 this.videoPlaylistSearch = undefined
112 this.cd.markForCheck()
116 logger('Loading component')
118 this.listenToVideoPlaylistChange()
120 this.videoPlaylistService.listMyPlaylistWithCache(this.user, this.videoPlaylistSearch)
121 .subscribe(playlistsResult => {
122 this.playlistsData = playlistsResult.data
124 this.videoPlaylistService.runPlaylistCheck(this.video.id)
128 openChange (opened: boolean) {
129 if (opened === false) {
130 this.isNewPlaylistBlockOpened = false
134 openCreateBlock (event: Event) {
135 event.preventDefault()
137 this.isNewPlaylistBlockOpened = true
140 toggleMainPlaylist (e: Event, playlist: PlaylistSummary) {
143 if (this.isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed) return
145 if (playlist.elements.length === 0) {
146 const element: PlaylistElement = {
148 playlistElementId: undefined,
150 stopTimestamp: this.video.duration
153 this.addVideoInPlaylist(playlist, element)
155 this.removeVideoFromPlaylist(playlist, playlist.elements[0].playlistElementId)
156 playlist.elements = []
159 this.cd.markForCheck()
162 toggleOptionalPlaylist (e: Event, playlist: PlaylistSummary, element: PlaylistElement, startTimestamp: number, stopTimestamp: number) {
165 if (element.enabled) {
166 this.removeVideoFromPlaylist(playlist, element.playlistElementId)
167 element.enabled = false
169 // Hide optional rows pane when the user unchecked all the playlists
170 if (this.isPrimaryCheckboxChecked(playlist) === false) {
171 playlist.optionalRowDisplayed = false
174 const element: PlaylistElement = {
176 playlistElementId: undefined,
181 this.addVideoInPlaylist(playlist, element)
184 this.cd.markForCheck()
188 const displayName = this.form.value[ 'displayName' ]
190 const videoPlaylistCreate: VideoPlaylistCreate = {
192 privacy: VideoPlaylistPrivacy.PRIVATE
195 this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
197 this.isNewPlaylistBlockOpened = false
199 this.cd.markForCheck()
202 err => this.notifier.error(err.message)
206 onVideoPlaylistSearchChanged () {
207 this.videoPlaylistSearchChanged.next()
210 isPrimaryCheckboxChecked (playlist: PlaylistSummary) {
211 return playlist.elements.filter(e => e.enabled)
215 toggleOptionalRow (playlist: PlaylistSummary) {
216 playlist.optionalRowDisplayed = !playlist.optionalRowDisplayed
218 this.cd.markForCheck()
221 getPrimaryInputName (playlist: PlaylistSummary) {
222 return 'in-playlist-primary-' + playlist.id
225 getOptionalInputName (playlist: PlaylistSummary, element?: PlaylistElement) {
226 const suffix = element
227 ? '-' + element.playlistElementId
230 return 'in-playlist-optional-' + playlist.id + suffix
233 buildOptionalRowElements (playlist: PlaylistSummary) {
234 const elements = playlist.elements
236 const lastElement = elements.length === 0
238 : elements[elements.length - 1]
240 // Build an empty last element
241 if (!lastElement || lastElement.enabled === true) {
245 stopTimestamp: this.video.duration
252 isPresentMultipleTimes (playlist: PlaylistSummary) {
253 return playlist.elements.filter(e => e.enabled === true).length > 1
256 onElementTimestampUpdate (playlist: PlaylistSummary, element: PlaylistElement) {
257 if (!element.playlistElementId || element.enabled === false) return
259 const body: VideoPlaylistElementUpdate = {
260 startTimestamp: element.startTimestamp,
261 stopTimestamp: element.stopTimestamp
264 this.videoPlaylistService.updateVideoOfPlaylist(playlist.id, element.playlistElementId, body, this.video.id)
267 this.notifier.success($localize`Timestamps updated`)
271 this.notifier.error(err.message)
274 () => this.cd.markForCheck()
278 private isOptionalRowDisplayed (playlist: PlaylistSummary) {
279 const elements = playlist.elements.filter(e => e.enabled)
281 if (elements.length > 1) return true
283 if (elements.length === 1) {
284 const element = elements[0]
287 (element.startTimestamp && element.startTimestamp !== 0) ||
288 (element.stopTimestamp && element.stopTimestamp !== this.video.duration)
297 private removeVideoFromPlaylist (playlist: PlaylistSummary, elementId: number) {
298 this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, elementId, this.video.id)
301 this.notifier.success($localize`Video removed from ${playlist.displayName}`)
305 this.notifier.error(err.message)
308 () => this.cd.markForCheck()
312 private listenToVideoPlaylistChange () {
313 this.unsubscribePlaylistChanges()
315 this.listenToPlaylistChangeSub = this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)
316 .pipe(filter(() => this.disabled === false))
317 .subscribe(existResult => this.rebuildPlaylists(existResult))
320 private unsubscribePlaylistChanges () {
321 if (this.listenToPlaylistChangeSub) {
322 this.listenToPlaylistChangeSub.unsubscribe()
323 this.listenToPlaylistChangeSub = undefined
327 private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
328 logger('Got existing results for %d.', this.video.id, existResult)
330 const oldPlaylists = this.videoPlaylists
332 this.videoPlaylists = []
333 for (const playlist of this.playlistsData) {
334 const existingPlaylists = existResult.filter(p => p.playlistId === playlist.id)
336 const playlistSummary = {
338 optionalRowDisplayed: false,
339 displayName: playlist.displayName,
340 elements: existingPlaylists.map(e => ({
342 playlistElementId: e.playlistElementId,
343 startTimestamp: e.startTimestamp || 0,
344 stopTimestamp: e.stopTimestamp || this.video.duration
348 const oldPlaylist = oldPlaylists.find(p => p.id === playlist.id)
349 playlistSummary.optionalRowDisplayed = oldPlaylist
350 ? oldPlaylist.optionalRowDisplayed
351 : this.isOptionalRowDisplayed(playlistSummary)
353 this.videoPlaylists.push(playlistSummary)
356 logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
358 this.cd.markForCheck()
361 private addVideoInPlaylist (playlist: PlaylistSummary, element: PlaylistElement) {
362 const body: VideoPlaylistElementCreate = { videoId: this.video.id }
364 if (element.startTimestamp) body.startTimestamp = element.startTimestamp
365 if (element.stopTimestamp && element.stopTimestamp !== this.video.duration) body.stopTimestamp = element.stopTimestamp
367 this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
370 const message = body.startTimestamp || body.stopTimestamp
371 ? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(element)}`
372 : $localize`Video added in ${playlist.displayName}`
374 this.notifier.success(message)
376 if (element) element.playlistElementId = res.videoPlaylistElement.id
380 this.notifier.error(err.message)
383 () => this.cd.markForCheck()
387 private formatTimestamp (element: PlaylistElement) {
388 const start = element.startTimestamp ? secondsToTime(element.startTimestamp) : ''
389 const stop = element.stopTimestamp ? secondsToTime(element.stopTimestamp) : ''
391 return `(${start}-${stop})`