client/src/app/shared/video-playlist/video-add-to-playlist.component.ts

   1 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
   2 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
   3 import { AuthService, Notifier } from '@app/core'
   4 import { Subject, Subscription } from 'rxjs'
   5 import { debounceTime, filter } from 'rxjs/operators'
   6 import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
   7 import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
   8 import { I18n } from '@ngx-translate/i18n-polyfill'
   9 import { secondsToTime } from '../../../assets/player/utils'
  10 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
  11 import * as debug from 'debug'
  12 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
  13 import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
  14
  15 const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
  16
  17 type PlaylistSummary = {
  18   id: number
  19   inPlaylist: boolean
  20   displayName: string
  21
  22   playlistElementId?: number
  23   startTimestamp?: number
  24   stopTimestamp?: number
  25 }
  26
  27 @Component({
  28   selector: 'my-video-add-to-playlist',
  29   styleUrls: [ './video-add-to-playlist.component.scss' ],
  30   templateUrl: './video-add-to-playlist.component.html',
  31   changeDetection: ChangeDetectionStrategy.OnPush
  32 })
  33 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges, OnDestroy, DisableForReuseHook {
  34   @Input() video: Video
  35   @Input() currentVideoTimestamp: number
  36   @Input() lazyLoad = false
  37
  38   isNewPlaylistBlockOpened = false
  39   videoPlaylistSearch: string
  40   videoPlaylistSearchChanged = new Subject<string>()
  41   videoPlaylists: PlaylistSummary[] = []
  42   timestampOptions: {
  43     startTimestampEnabled: boolean
  44     startTimestamp: number
  45     stopTimestampEnabled: boolean
  46     stopTimestamp: number
  47   }
  48   displayOptions = false
  49
  50   private disabled = false
  51
  52   private listenToPlaylistChangeSub: Subscription
  53   private playlistsData: VideoPlaylist[] = []
  54
  55   constructor (
  56     protected formValidatorService: FormValidatorService,
  57     private authService: AuthService,
  58     private notifier: Notifier,
  59     private i18n: I18n,
  60     private videoPlaylistService: VideoPlaylistService,
  61     private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
  62     private cd: ChangeDetectorRef
  63   ) {
  64     super()
  65   }
  66
  67   get user () {
  68     return this.authService.getUser()
  69   }
  70
  71   ngOnInit () {
  72     this.buildForm({
  73       displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
  74     })
  75
  76     this.videoPlaylistService.listenToMyAccountPlaylistsChange()
  77         .subscribe(result => {
  78           this.playlistsData = result.data
  79
  80           this.videoPlaylistService.runPlaylistCheck(this.video.id)
  81         })
  82
  83     this.videoPlaylistSearchChanged
  84         .pipe(debounceTime(500))
  85         .subscribe(() => this.load())
  86
  87     if (this.lazyLoad === false) this.load()
  88   }
  89
  90   ngOnChanges (simpleChanges: SimpleChanges) {
  91     if (simpleChanges['video']) {
  92       this.reload()
  93     }
  94   }
  95
  96   ngOnDestroy () {
  97     this.unsubscribePlaylistChanges()
  98   }
  99
 100   disableForReuse () {
 101     this.disabled = true
 102   }
 103
 104   enabledForReuse () {
 105     this.disabled = false
 106   }
 107
 108   reload () {
 109     logger('Reloading component')
 110
 111     this.videoPlaylists = []
 112     this.videoPlaylistSearch = undefined
 113
 114     this.resetOptions(true)
 115     this.load()
 116
 117     this.cd.markForCheck()
 118   }
 119
 120   load () {
 121     logger('Loading component')
 122
 123     this.listenToPlaylistChanges()
 124
 125     this.videoPlaylistService.listMyPlaylistWithCache(this.user, this.videoPlaylistSearch)
 126         .subscribe(playlistsResult => {
 127           this.playlistsData = playlistsResult.data
 128
 129           this.videoPlaylistService.runPlaylistCheck(this.video.id)
 130         })
 131   }
 132
 133   openChange (opened: boolean) {
 134     if (opened === false) {
 135       this.isNewPlaylistBlockOpened = false
 136       this.displayOptions = false
 137     }
 138   }
 139
 140   openCreateBlock (event: Event) {
 141     event.preventDefault()
 142
 143     this.isNewPlaylistBlockOpened = true
 144   }
 145
 146   togglePlaylist (event: Event, playlist: PlaylistSummary) {
 147     event.preventDefault()
 148
 149     if (playlist.inPlaylist === true) {
 150       this.removeVideoFromPlaylist(playlist)
 151     } else {
 152       this.addVideoInPlaylist(playlist)
 153     }
 154
 155     playlist.inPlaylist = !playlist.inPlaylist
 156     this.resetOptions()
 157
 158     this.cd.markForCheck()
 159   }
 160
 161   createPlaylist () {
 162     const displayName = this.form.value[ 'displayName' ]
 163
 164     const videoPlaylistCreate: VideoPlaylistCreate = {
 165       displayName,
 166       privacy: VideoPlaylistPrivacy.PRIVATE
 167     }
 168
 169     this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
 170       () => {
 171         this.isNewPlaylistBlockOpened = false
 172
 173         this.cd.markForCheck()
 174       },
 175
 176       err => this.notifier.error(err.message)
 177     )
 178   }
 179
 180   resetOptions (resetTimestamp = false) {
 181     this.displayOptions = false
 182
 183     this.timestampOptions = {} as any
 184     this.timestampOptions.startTimestampEnabled = false
 185     this.timestampOptions.stopTimestampEnabled = false
 186
 187     if (resetTimestamp) {
 188       this.timestampOptions.startTimestamp = 0
 189       this.timestampOptions.stopTimestamp = this.video.duration
 190     }
 191   }
 192
 193   formatTimestamp (playlist: PlaylistSummary) {
 194     const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : ''
 195     const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : ''
 196
 197     return `(${start}-${stop})`
 198   }
 199
 200   onVideoPlaylistSearchChanged () {
 201     this.videoPlaylistSearchChanged.next()
 202   }
 203
 204   private removeVideoFromPlaylist (playlist: PlaylistSummary) {
 205     if (!playlist.playlistElementId) return
 206
 207     this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId, this.video.id)
 208         .subscribe(
 209           () => {
 210             this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
 211           },
 212
 213           err => {
 214             this.notifier.error(err.message)
 215           },
 216
 217           () => this.cd.markForCheck()
 218         )
 219   }
 220
 221   private listenToPlaylistChanges () {
 222     this.unsubscribePlaylistChanges()
 223
 224     this.listenToPlaylistChangeSub = this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)
 225                                          .pipe(filter(() => this.disabled === false))
 226                                          .subscribe(existResult => this.rebuildPlaylists(existResult))
 227   }
 228
 229   private unsubscribePlaylistChanges () {
 230     if (this.listenToPlaylistChangeSub) {
 231       this.listenToPlaylistChangeSub.unsubscribe()
 232       this.listenToPlaylistChangeSub = undefined
 233     }
 234   }
 235
 236   private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
 237     logger('Got existing results for %d.', this.video.id, existResult)
 238
 239     this.videoPlaylists = []
 240     for (const playlist of this.playlistsData) {
 241       const existingPlaylist = existResult.find(p => p.playlistId === playlist.id)
 242
 243       this.videoPlaylists.push({
 244         id: playlist.id,
 245         displayName: playlist.displayName,
 246         inPlaylist: !!existingPlaylist,
 247         playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
 248         startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
 249         stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
 250       })
 251     }
 252
 253     logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
 254
 255     this.cd.markForCheck()
 256   }
 257
 258   private addVideoInPlaylist (playlist: PlaylistSummary) {
 259     const body: VideoPlaylistElementCreate = { videoId: this.video.id }
 260
 261     if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp
 262     if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp
 263
 264     this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
 265       .subscribe(
 266         () => {
 267           const message = body.startTimestamp || body.stopTimestamp
 268             ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) })
 269             : this.i18n('Video added in {{n}}', { n: playlist.displayName })
 270
 271           this.notifier.success(message)
 272         },
 273
 274         err => {
 275           this.notifier.error(err.message)
 276         },
 277
 278         () => this.cd.markForCheck()
 279       )
 280   }
 281 }