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

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