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   playlistElementId?: number
  16   startTimestamp?: number
  17   stopTimestamp?: number
  18 }
  19
  20 @Component({
  21   selector: 'my-video-add-to-playlist',
  22   styleUrls: [ './video-add-to-playlist.component.scss' ],
  23   templateUrl: './video-add-to-playlist.component.html',
  24   changeDetection: ChangeDetectionStrategy.OnPush
  25 })
  26 export class VideoAddToPlaylistComponent extends FormReactive implements OnInit, OnChanges {
  27   @Input() video: Video
  28   @Input() currentVideoTimestamp: number
  29   @Input() lazyLoad = false
  30
  31   isNewPlaylistBlockOpened = false
  32   videoPlaylists: PlaylistSummary[] = []
  33   timestampOptions: {
  34     startTimestampEnabled: boolean
  35     startTimestamp: number
  36     stopTimestampEnabled: boolean
  37     stopTimestamp: number
  38   }
  39   displayOptions = false
  40
  41   constructor (
  42     protected formValidatorService: FormValidatorService,
  43     private authService: AuthService,
  44     private notifier: Notifier,
  45     private i18n: I18n,
  46     private videoPlaylistService: VideoPlaylistService,
  47     private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
  48     private cd: ChangeDetectorRef
  49   ) {
  50     super()
  51   }
  52
  53   get user () {
  54     return this.authService.getUser()
  55   }
  56
  57   ngOnInit () {
  58     this.buildForm({
  59       displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
  60     })
  61   }
  62
  63   ngOnChanges (simpleChanges: SimpleChanges) {
  64     if (simpleChanges['video']) {
  65       this.reload()
  66     }
  67   }
  68
  69   init () {
  70     this.resetOptions(true)
  71
  72     if (this.lazyLoad !== true) this.load()
  73   }
  74
  75   reload () {
  76     this.videoPlaylists = []
  77
  78     this.init()
  79
  80     this.cd.markForCheck()
  81   }
  82
  83   load () {
  84     forkJoin([
  85       this.videoPlaylistService.listAccountPlaylists(this.user.account, undefined,'-updatedAt'),
  86       this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
  87     ])
  88       .subscribe(
  89         ([ playlistsResult, existResult ]) => {
  90           for (const playlist of playlistsResult.data) {
  91             const existingPlaylist = existResult[ this.video.id ].find(p => p.playlistId === playlist.id)
  92
  93             this.videoPlaylists.push({
  94               id: playlist.id,
  95               displayName: playlist.displayName,
  96               inPlaylist: !!existingPlaylist,
  97               playlistElementId:  existingPlaylist ? existingPlaylist.playlistElementId : undefined,
  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     if (!playlist.playlistElementId) return
 183
 184     this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId)
 185         .subscribe(
 186           () => {
 187             this.notifier.success(this.i18n('Video removed from {{name}}', { name: playlist.displayName }))
 188
 189             playlist.inPlaylist = false
 190             playlist.playlistElementId = undefined
 191           },
 192
 193           err => {
 194             this.notifier.error(err.message)
 195
 196             playlist.inPlaylist = true
 197           },
 198
 199           () => this.cd.markForCheck()
 200         )
 201   }
 202
 203   private addVideoInPlaylist (playlist: PlaylistSummary) {
 204     const body: VideoPlaylistElementCreate = { videoId: this.video.id }
 205
 206     if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp
 207     if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp
 208
 209     this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
 210       .subscribe(
 211         res => {
 212           playlist.inPlaylist = true
 213           playlist.playlistElementId = res.videoPlaylistElement.id
 214
 215           playlist.startTimestamp = body.startTimestamp
 216           playlist.stopTimestamp = body.stopTimestamp
 217
 218           const message = body.startTimestamp || body.stopTimestamp
 219             ? this.i18n('Video added in {{n}} at timestamps {{t}}', { n: playlist.displayName, t: this.formatTimestamp(playlist) })
 220             : this.i18n('Video added in {{n}}', { n: playlist.displayName })
 221
 222           this.notifier.success(message)
 223         },
 224
 225         err => {
 226           this.notifier.error(err.message)
 227
 228           playlist.inPlaylist = false
 229         },
 230
 231         () => this.cd.markForCheck()
 232       )
 233   }
 234 }