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 { listUserChannels } 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     listUserChannels(this.authService)
  55       .subscribe(channels => this.userVideoChannels = channels)
  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                            next: ([ videoPlaylistToUpdate, videoPlaylistPrivacies]) => {
  69                              this.videoPlaylistToUpdate = videoPlaylistToUpdate
  70                              this.videoPlaylistPrivacies = videoPlaylistPrivacies
  71
  72                              this.hydrateFormFromPlaylist()
  73                            },
  74
  75                            error: 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)
  96       .subscribe({
  97         next: () => {
  98           this.notifier.success($localize`Playlist ${videoPlaylistUpdate.displayName} updated.`)
  99           this.router.navigate([ '/my-library', 'video-playlists' ])
 100         },
 101
 102         error: 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 }