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 { 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 => this.videoPlaylistService.getVideoPlaylist(videoPlaylistId)),
  60                            delayWhen(() => this.serverService.videoPlaylistPrivaciesLoaded)
  61                          )
  62                          .subscribe(
  63                            videoPlaylistToUpdate => {
  64                              this.videoPlaylistPrivacies = this.serverService.getVideoPlaylistPrivacies()
  65                              this.videoPlaylistToUpdate = videoPlaylistToUpdate
  66
  67                              this.hydrateFormFromPlaylist()
  68                            },
  69
  70                            err => this.error = err.message
  71                          )
  72   }
  73
  74   ngOnDestroy () {
  75     if (this.paramsSub) this.paramsSub.unsubscribe()
  76   }
  77
  78   formValidated () {
  79     this.error = undefined
  80
  81     const body = this.form.value
  82     const videoPlaylistUpdate: VideoPlaylistUpdate = {
  83       displayName: body.displayName,
  84       privacy: body.privacy,
  85       description: body.description || null,
  86       videoChannelId: body.videoChannelId || null,
  87       thumbnailfile: body.thumbnailfile || undefined
  88     }
  89
  90     this.videoPlaylistService.updateVideoPlaylist(this.videoPlaylistToUpdate, videoPlaylistUpdate).subscribe(
  91       () => {
  92         this.notifier.success(
  93           this.i18n('Playlist {{videoPlaylistName}} updated.', { videoPlaylistName: videoPlaylistUpdate.displayName })
  94         )
  95
  96         this.router.navigate([ '/my-account', 'video-playlists' ])
  97       },
  98
  99       err => this.error = err.message
 100     )
 101   }
 102
 103   isCreation () {
 104     return false
 105   }
 106
 107   getFormButtonTitle () {
 108     return this.i18n('Update')
 109   }
 110
 111   private hydrateFormFromPlaylist () {
 112     this.form.patchValue({
 113       displayName: this.videoPlaylistToUpdate.displayName,
 114       privacy: this.videoPlaylistToUpdate.privacy.id,
 115       description: this.videoPlaylistToUpdate.description,
 116       videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null
 117     })
 118
 119     fetch(this.videoPlaylistToUpdate.thumbnailUrl)
 120       .then(response => response.blob())
 121       .then(data => {
 122         this.form.patchValue({
 123           thumbnailfile: data
 124         })
 125       })
 126   }
 127 }