client/src/app/+my-library/my-video-playlists/my-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 { MyVideoPlaylistEdit } from './my-video-playlist-edit'
  18
  19 @Component({
  20   templateUrl: './my-video-playlist-edit.component.html',
  21   styleUrls: [ './my-video-playlist-edit.component.scss' ]
  22 })
  23 export class MyVideoPlaylistUpdateComponent extends MyVideoPlaylistEdit implements OnInit, OnDestroy {
  24   error: string
  25   videoPlaylistToUpdate: VideoPlaylist
  26
  27   private paramsSub: Subscription
  28
  29   constructor (
  30     protected formValidatorService: FormValidatorService,
  31     private authService: AuthService,
  32     private notifier: Notifier,
  33     private router: Router,
  34     private route: ActivatedRoute,
  35     private videoPlaylistService: VideoPlaylistService,
  36     private serverService: ServerService
  37   ) {
  38     super()
  39   }
  40
  41   ngOnInit () {
  42     this.buildForm({
  43       displayName: VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR,
  44       privacy: VIDEO_PLAYLIST_PRIVACY_VALIDATOR,
  45       description: VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR,
  46       videoChannelId: VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
  47       thumbnailfile: null
  48     })
  49
  50     this.form.get('privacy').valueChanges.subscribe(privacy => {
  51       setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
  52     })
  53
  54     populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
  55       .catch(err => console.error('Cannot populate user video channels.', err))
  56
  57     this.paramsSub = this.route.params
  58                          .pipe(
  59                            map(routeParams => routeParams['videoPlaylistId']),
  60                            switchMap(videoPlaylistId => {
  61                              return forkJoin([
  62                                this.videoPlaylistService.getVideoPlaylist(videoPlaylistId),
  63                                this.serverService.getVideoPlaylistPrivacies()
  64                              ])
  65                            })
  66                          )
  67                          .subscribe(
  68                            ([ videoPlaylistToUpdate, videoPlaylistPrivacies]) => {
  69                              this.videoPlaylistToUpdate = videoPlaylistToUpdate
  70                              this.videoPlaylistPrivacies = videoPlaylistPrivacies
  71
  72                              this.hydrateFormFromPlaylist()
  73                            },
  74
  75                            err => this.error = err.message
  76                          )
  77   }
  78
  79   ngOnDestroy () {
  80     if (this.paramsSub) this.paramsSub.unsubscribe()
  81   }
  82
  83   formValidated () {
  84     this.error = undefined
  85
  86     const body = this.form.value
  87     const videoPlaylistUpdate: VideoPlaylistUpdate = {
  88       displayName: body.displayName,
  89       privacy: body.privacy,
  90       description: body.description || null,
  91       videoChannelId: body.videoChannelId || null,
  92       thumbnailfile: body.thumbnailfile || undefined
  93     }
  94
  95     this.videoPlaylistService.updateVideoPlaylist(this.videoPlaylistToUpdate, videoPlaylistUpdate).subscribe(
  96       () => {
  97         this.notifier.success($localize`Playlist ${videoPlaylistUpdate.displayName} updated.`)
  98         this.router.navigate([ '/my-library', 'video-playlists' ])
  99       },
 100
 101       err => this.error = err.message
 102     )
 103   }
 104
 105   isCreation () {
 106     return false
 107   }
 108
 109   getFormButtonTitle () {
 110     return $localize`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 }