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