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

   1 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, 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 { forkJoin } from 'rxjs'
   5 import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
   6 import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
   7 import { I18n } from '@ngx-translate/i18n-polyfill'
   8 import { secondsToTime } from '../../../assets/player/utils'
   9
  10 type PlaylistSummary = {
  11   id: number
  12   inPlaylist: boolean
  13   displayName: string
  14
  15   startTimestamp?: number
  16   stopTimestamp?: number
  17 }
  18
  19 @Component({
  20   selector: 'my-video-add-to-playlist',
  21   styleUrls: [ './video-add-to-playlist.component.scss' ],
  22   templateUrl: './video-add-to-playlist.component.html',
  23   changeDetection: ChangeDetectionStrategy.OnPush
  24 })
  25 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges {
  26   @Input() video: Video
  27   @Input() currentVideoTimestamp: number
  28   @Input() lazyLoad = false
  29
  30   isNewPlaylistBlockOpened = false
  31   videoPlaylists: PlaylistSummary[] = []
  32   timestampOptions: {
  33     startTimestampEnabled: boolean
  34     startTimestamp: number
  35     stopTimestampEnabled: boolean
  36     stopTimestamp: number
  37   }
  38   displayOptions = false
  39
  40   constructor (
  41     protected formValidatorService: FormValidatorService,
  42     private authService: AuthService,
  43     private notifier: Notifier,
  44     private i18n: I18n,
  45     private videoPlaylistService: VideoPlaylistService,
  46     private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
  47     private cd: ChangeDetectorRef
  48   ) {
  49     super()
  50   }
  51
  52   get user () {
  53     return this.authService.getUser()
  54   }
  55
  56   ngOnInit () {
  57     this.buildForm({
  58       displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
  59     })
  60
  61     this.init()
  62   }
  63
  64   ngOnChanges (simpleChanges: SimpleChanges) {
  65     if (simpleChanges['video']) {
  66       this.unload()
  67     }
  68   }
  69
  70   init () {
  71     this.resetOptions(true)
  72
  73     if (this.lazyLoad !== true) this.load()
  74   }
  75
  76   unload () {
  77     this.videoPlaylists = []
  78
  79     this.init()
  80
  81     this.cd.markForCheck()
  82   }
  83
  84   load () {
  85     forkJoin([
  86       this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt'),
  87       this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
  88     ])
  89       .subscribe(
  90         ([ playlistsResult, existResult ]) => {
  91           for (const playlist of playlistsResult.data) {
  92             const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
  93
  94             this.videoPlaylists.push({
  95               id: playlist.id,
  96               displayName: playlist.displayName,
  97               inPlaylist: !!existingPlaylist,
  98               startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
  99               stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
 100             })
 101           }
 102
 103           this.cd.markForCheck()
 104         }
 105       )
 106   }
 107
 108   openChange (opened: boolean) {
 109     if (opened === false) {
 110       this.isNewPlaylistBlockOpened = false
 111       this.displayOptions = false
 112     }
 113   }
 114
 115   openCreateBlock (event: Event) {
 116     event.preventDefault()
 117
 118     this.isNewPlaylistBlockOpened = true
 119   }
 120
 121   togglePlaylist (event: Event, playlist: PlaylistSummary) {
 122     event.preventDefault()
 123
 124     if (playlist.inPlaylist === true) {
 125       this.removeVideoFromPlaylist(playlist)
 126     } else {
 127       this.addVideoInPlaylist(playlist)
 128     }
 129
 130     playlist.inPlaylist = !playlist.inPlaylist
 131     this.resetOptions()
 132
 133     this.cd.markForCheck()
 134   }
 135
 136   createPlaylist () {
 137     const displayName = this.form.value[ 'displayName' ]
 138
 139     const videoPlaylistCreate: VideoPlaylistCreate = {
 140       displayName,
 141       privacy: VideoPlaylistPrivacy.PRIVATE
 142     }
 143
 144     this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
 145       res => {
 146         this.videoPlaylists.push({
 147           id: res.videoPlaylist.id,
 148           displayName,
 149           inPlaylist: false
 150         })
 151
 152         this.isNewPlaylistBlockOpened = false
 153
 154         this.cd.markForCheck()
 155       },
 156
 157       err => this.notifier.error(err.message)
 158     )
 159   }
 160
 161   resetOptions (resetTimestamp = false) {
 162     this.displayOptions = false
 163
 164     this.timestampOptions = {} as any
 165     this.timestampOptions.startTimestampEnabled = false
 166     this.timestampOptions.stopTimestampEnabled = false
 167
 168     if (resetTimestamp) {
 169       this.timestampOptions.startTimestamp = 0
 170       this.timestampOptions.stopTimestamp = this.video.duration
 171     }
 172   }
 173
 174   formatTimestamp (playlist: PlaylistSummary) {
 175     const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : ''
 176     const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : ''
 177
 178     return `(${start}-${stop})`
 179   }
 180
 181   private removeVideoFromPlaylist (playlist: PlaylistSummary) {
 182     this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, this.video.id)
 183         .subscribe(
 184           () => {
 185             this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
 186
 187             playlist.inPlaylist = false
 188           },
 189
 190           err => {
 191             this.notifier.error(err.message)
 192
 193             playlist.inPlaylist = true
 194           },
 195
 196           () => this.cd.markForCheck()
 197         )
 198   }
 199
 200   private addVideoInPlaylist (playlist: PlaylistSummary) {
 201     const body: VideoPlaylistElementCreate = { videoId: this.video.id }
 202
 203     if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp
 204     if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp
 205
 206     this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
 207       .subscribe(
 208         () => {
 209           playlist.inPlaylist = true
 210
 211           playlist.startTimestamp = body.startTimestamp
 212           playlist.stopTimestamp = body.stopTimestamp
 213
 214           const message = body.startTimestamp || body.stopTimestamp
 215             ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) })
 216             : this.i18n('Video added in {{n}}', { n: playlist.displayName })
 217
 218           this.notifier.success(message)
 219         },
 220
 221         err => {
 222           this.notifier.error(err.message)
 223
 224           playlist.inPlaylist = false
 225         },
 226
 227         () => this.cd.markForCheck()
 228       )
 229   }
 230 }