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 { secondsToTime } from '@shared/core-utils'
12 VideoPlaylistElementCreate,
13 VideoPlaylistElementUpdate,
15 } from '@shared/models'
16 import { VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR } from '../form-validators/video-playlist-validators'
17 import { CachedPlaylist, VideoPlaylistService } from './video-playlist.service'
19 const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
21 type PlaylistElement = {
23 playlistElementId?: number
24 startTimestamp?: number
25 stopTimestamp?: number
28 type PlaylistSummary = {
31 optionalRowDisplayed: boolean
33 elements: PlaylistElement[]
37 selector: 'my-video-add-to-playlist',
38 styleUrls: [ './video-add-to-playlist.component.scss' ],
39 templateUrl: './video-add-to-playlist.component.html',
40 changeDetection: ChangeDetectionStrategy.OnPush
42 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges, OnDestroy, DisableForReuseHook {
44 @Input() currentVideoTimestamp: number
45 @Input() lazyLoad = false
47 isNewPlaylistBlockOpened = false
49 videoPlaylistSearch: string
50 videoPlaylistSearchChanged = new Subject<string>()
52 videoPlaylists: PlaylistSummary[] = []
54 private disabled = false
56 private listenToPlaylistChangeSub: Subscription
57 private playlistsData: CachedPlaylist[] = []
60 protected formValidatorService: FormValidatorService,
61 private authService: AuthService,
62 private notifier: Notifier,
63 private videoPlaylistService: VideoPlaylistService,
64 private cd: ChangeDetectorRef
70 return this.authService.getUser()
75 displayName: VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR
78 this.videoPlaylistService.listenToMyAccountPlaylistsChange()
79 .subscribe(result => {
80 this.playlistsData = result.data
82 this.videoPlaylistService.runPlaylistCheck(this.video.id)
85 this.videoPlaylistSearchChanged
86 .pipe(debounceTime(500))
87 .subscribe(() => this.load())
89 if (this.lazyLoad === false) this.load()
92 ngOnChanges (simpleChanges: SimpleChanges) {
93 if (simpleChanges['video']) {
99 this.unsubscribePlaylistChanges()
107 this.disabled = false
111 logger('Reloading component')
113 this.videoPlaylists = []
114 this.videoPlaylistSearch = undefined
118 this.cd.markForCheck()
122 logger('Loading component')
124 this.listenToVideoPlaylistChange()
126 this.videoPlaylistService.listMyPlaylistWithCache(this.user, this.videoPlaylistSearch)
127 .subscribe(playlistsResult => {
128 this.playlistsData = playlistsResult.data
130 this.videoPlaylistService.runPlaylistCheck(this.video.id)
134 openChange (opened: boolean) {
135 if (opened === false) {
136 this.isNewPlaylistBlockOpened = false
140 openCreateBlock (event: Event) {
141 event.preventDefault()
143 this.isNewPlaylistBlockOpened = true
146 toggleMainPlaylist (e: Event, playlist: PlaylistSummary) {
149 if (this.isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed) return
151 if (playlist.elements.length === 0) {
152 const element: PlaylistElement = {
154 playlistElementId: undefined,
156 stopTimestamp: this.video.duration
159 this.addVideoInPlaylist(playlist, element)
161 this.removeVideoFromPlaylist(playlist, playlist.elements[0].playlistElementId)
162 playlist.elements = []
165 this.cd.markForCheck()
168 toggleOptionalPlaylist (e: Event, playlist: PlaylistSummary, element: PlaylistElement, startTimestamp: number, stopTimestamp: number) {
171 if (element.enabled) {
172 this.removeVideoFromPlaylist(playlist, element.playlistElementId)
173 element.enabled = false
175 // Hide optional rows pane when the user unchecked all the playlists
176 if (this.isPrimaryCheckboxChecked(playlist) === false) {
177 playlist.optionalRowDisplayed = false
180 const element: PlaylistElement = {
182 playlistElementId: undefined,
187 this.addVideoInPlaylist(playlist, element)
190 this.cd.markForCheck()
194 const displayName = this.form.value[ 'displayName' ]
196 const videoPlaylistCreate: VideoPlaylistCreate = {
198 privacy: VideoPlaylistPrivacy.PRIVATE
201 this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
203 this.isNewPlaylistBlockOpened = false
205 this.cd.markForCheck()
208 err => this.notifier.error(err.message)
212 onVideoPlaylistSearchChanged () {
213 this.videoPlaylistSearchChanged.next()
216 isPrimaryCheckboxChecked (playlist: PlaylistSummary) {
217 return playlist.elements.filter(e => e.enabled)
221 toggleOptionalRow (playlist: PlaylistSummary) {
222 playlist.optionalRowDisplayed = !playlist.optionalRowDisplayed
224 this.cd.markForCheck()
227 getPrimaryInputName (playlist: PlaylistSummary) {
228 return 'in-playlist-primary-' + playlist.id
231 getOptionalInputName (playlist: PlaylistSummary, element?: PlaylistElement) {
232 const suffix = element
233 ? '-' + element.playlistElementId
236 return 'in-playlist-optional-' + playlist.id + suffix
239 buildOptionalRowElements (playlist: PlaylistSummary) {
240 const elements = playlist.elements
242 const lastElement = elements.length === 0
244 : elements[elements.length - 1]
246 // Build an empty last element
247 if (!lastElement || lastElement.enabled === true) {
251 stopTimestamp: this.video.duration
258 isPresentMultipleTimes (playlist: PlaylistSummary) {
259 return playlist.elements.filter(e => e.enabled === true).length > 1
262 onElementTimestampUpdate (playlist: PlaylistSummary, element: PlaylistElement) {
263 if (!element.playlistElementId || element.enabled === false) return
265 const body: VideoPlaylistElementUpdate = {
266 startTimestamp: element.startTimestamp,
267 stopTimestamp: element.stopTimestamp
270 this.videoPlaylistService.updateVideoOfPlaylist(playlist.id, element.playlistElementId, body, this.video.id)
273 this.notifier.success($localize`Timestamps updated`)
277 this.notifier.error(err.message)
280 () => this.cd.markForCheck()
284 private isOptionalRowDisplayed (playlist: PlaylistSummary) {
285 const elements = playlist.elements.filter(e => e.enabled)
287 if (elements.length > 1) return true
289 if (elements.length === 1) {
290 const element = elements[0]
293 (element.startTimestamp && element.startTimestamp !== 0) ||
294 (element.stopTimestamp && element.stopTimestamp !== this.video.duration)
303 private removeVideoFromPlaylist (playlist: PlaylistSummary, elementId: number) {
304 this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, elementId, this.video.id)
307 this.notifier.success($localize`Video removed from ${playlist.displayName}`)
311 this.notifier.error(err.message)
314 () => this.cd.markForCheck()
318 private listenToVideoPlaylistChange () {
319 this.unsubscribePlaylistChanges()
321 this.listenToPlaylistChangeSub = this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)
322 .pipe(filter(() => this.disabled === false))
323 .subscribe(existResult => this.rebuildPlaylists(existResult))
326 private unsubscribePlaylistChanges () {
327 if (this.listenToPlaylistChangeSub) {
328 this.listenToPlaylistChangeSub.unsubscribe()
329 this.listenToPlaylistChangeSub = undefined
333 private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
334 logger('Got existing results for %d.', this.video.id, existResult)
336 const oldPlaylists = this.videoPlaylists
338 this.videoPlaylists = []
339 for (const playlist of this.playlistsData) {
340 const existingPlaylists = existResult.filter(p => p.playlistId === playlist.id)
342 const playlistSummary = {
344 optionalRowDisplayed: false,
345 displayName: playlist.displayName,
346 elements: existingPlaylists.map(e => ({
348 playlistElementId: e.playlistElementId,
349 startTimestamp: e.startTimestamp || 0,
350 stopTimestamp: e.stopTimestamp || this.video.duration
354 const oldPlaylist = oldPlaylists.find(p => p.id === playlist.id)
355 playlistSummary.optionalRowDisplayed = oldPlaylist
356 ? oldPlaylist.optionalRowDisplayed
357 : this.isOptionalRowDisplayed(playlistSummary)
359 this.videoPlaylists.push(playlistSummary)
362 logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
364 this.cd.markForCheck()
367 private addVideoInPlaylist (playlist: PlaylistSummary, element: PlaylistElement) {
368 const body: VideoPlaylistElementCreate = { videoId: this.video.id }
370 if (element.startTimestamp) body.startTimestamp = element.startTimestamp
371 if (element.stopTimestamp && element.stopTimestamp !== this.video.duration) body.stopTimestamp = element.stopTimestamp
373 this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
376 const message = body.startTimestamp || body.stopTimestamp
377 ? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(element)}`
378 : $localize`Video added in ${playlist.displayName}`
380 this.notifier.success(message)
382 if (element) element.playlistElementId = res.videoPlaylistElement.id
386 this.notifier.error(err.message)
389 () => this.cd.markForCheck()
393 private formatTimestamp (element: PlaylistElement) {
394 const start = element.startTimestamp ? secondsToTime(element.startTimestamp) : ''
395 const stop = element.stopTimestamp ? secondsToTime(element.stopTimestamp) : ''
397 return `(${start}-${stop})`