client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts

   1 import { forkJoin, Subscription } from 'rxjs'
   2 import { map, switchMap } from 'rxjs/operators'
   3 import { Component, OnDestroy, OnInit } from '@angular/core'
   4 import { ActivatedRoute, Router } from '@angular/router'
   5 import { AuthService, Notifier, ServerService } from '@app/core'
   6 import { populateAsyncUserVideoChannels } from '@app/helpers'
   7 import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
   8 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
   9 import { I18n } from '@ngx-translate/i18n-polyfill'
  10 import { VideoPlaylistUpdate } from '@shared/models'
  11 import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
  12
  13 @Component({
  14   selector: 'my-account-video-playlist-update',
  15   templateUrl: './my-account-video-playlist-edit.component.html',
  16   styleUrls: [ './my-account-video-playlist-edit.component.scss' ]
  17 })
  18 export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylistEdit implements OnInit, OnDestroy {
  19   error: string
  20   videoPlaylistToUpdate: VideoPlaylist
  21
  22   private paramsSub: Subscription
  23
  24   constructor (
  25     protected formValidatorService: FormValidatorService,
  26     private authService: AuthService,
  27     private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
  28     private notifier: Notifier,
  29     private router: Router,
  30     private route: ActivatedRoute,
  31     private videoPlaylistService: VideoPlaylistService,
  32     private i18n: I18n,
  33     private serverService: ServerService
  34   ) {
  35     super()
  36   }
  37
  38   ngOnInit () {
  39     this.buildForm({
  40       displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
  41       privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
  42       description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
  43       videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
  44       thumbnailfile: null
  45     })
  46
  47     this.form.get('privacy').valueChanges.subscribe(privacy => {
  48       this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
  49     })
  50
  51     populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
  52       .catch(err => console.error('Cannot populate user video channels.', err))
  53
  54     this.paramsSub = this.route.params
  55                          .pipe(
  56                            map(routeParams => routeParams['videoPlaylistId']),
  57                            switchMap(videoPlaylistId => {
  58                              return forkJoin([
  59                                this.videoPlaylistService.getVideoPlaylist(videoPlaylistId),
  60                                this.serverService.getVideoPlaylistPrivacies()
  61                              ])
  62                            })
  63                          )
  64                          .subscribe(
  65                            ([ videoPlaylistToUpdate, videoPlaylistPrivacies]) => {
  66                              this.videoPlaylistToUpdate = videoPlaylistToUpdate
  67                              this.videoPlaylistPrivacies = videoPlaylistPrivacies
  68
  69                              this.hydrateFormFromPlaylist()
  70                            },
  71
  72                            err => this.error = err.message
  73                          )
  74   }
  75
  76   ngOnDestroy () {
  77     if (this.paramsSub) this.paramsSub.unsubscribe()
  78   }
  79
  80   formValidated () {
  81     this.error = undefined
  82
  83     const body = this.form.value
  84     const videoPlaylistUpdate: VideoPlaylistUpdate = {
  85       displayName: body.displayName,
  86       privacy: body.privacy,
  87       description: body.description || null,
  88       videoChannelId: body.videoChannelId || null,
  89       thumbnailfile: body.thumbnailfile || undefined
  90     }
  91
  92     this.videoPlaylistService.updateVideoPlaylist(this.videoPlaylistToUpdate, videoPlaylistUpdate).subscribe(
  93       () => {
  94         this.notifier.success(
  95           this.i18n('Playlist {{videoPlaylistName}} updated.', { videoPlaylistName: videoPlaylistUpdate.displayName })
  96         )
  97
  98         this.router.navigate([ '/my-account', 'video-playlists' ])
  99       },
 100
 101       err => this.error = err.message
 102     )
 103   }
 104
 105   isCreation () {
 106     return false
 107   }
 108
 109   getFormButtonTitle () {
 110     return this.i18n('Update')
 111   }
 112
 113   private hydrateFormFromPlaylist () {
 114     this.form.patchValue({
 115       displayName: this.videoPlaylistToUpdate.displayName,
 116       privacy: this.videoPlaylistToUpdate.privacy.id,
 117       description: this.videoPlaylistToUpdate.description,
 118       videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null
 119     })
 120
 121     fetch(this.videoPlaylistToUpdate.thumbnailUrl)
 122       .then(response => response.blob())
 123       .then(data => {
 124         this.form.patchValue({
 125           thumbnailfile: data
 126         })
 127       })
 128   }
 129 }