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 { listUserChannelsForSelect } 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 { FormReactiveService } 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 formReactiveService: FormReactiveService,
  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     listUserChannelsForSelect(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 => {
  76                              this.error = err.message
  77                            }
  78                          })
  79   }
  80
  81   ngOnDestroy () {
  82     if (this.paramsSub) this.paramsSub.unsubscribe()
  83   }
  84
  85   formValidated () {
  86     this.error = undefined
  87
  88     const body = this.form.value
  89     const videoPlaylistUpdate: VideoPlaylistUpdate = {
  90       displayName: body.displayName,
  91       privacy: body.privacy,
  92       description: body.description || null,
  93       videoChannelId: body.videoChannelId || null,
  94       thumbnailfile: body.thumbnailfile || undefined
  95     }
  96
  97     this.videoPlaylistService.updateVideoPlaylist(this.videoPlaylistToUpdate, videoPlaylistUpdate)
  98       .subscribe({
  99         next: () => {
 100           this.notifier.success($localize`Playlist ${videoPlaylistUpdate.displayName} updated.`)
 101           this.router.navigate([ '/my-library', 'video-playlists' ])
 102         },
 103
 104         error: err => {
 105           this.error = err.message
 106         }
 107       })
 108   }
 109
 110   isCreation () {
 111     return false
 112   }
 113
 114   getFormButtonTitle () {
 115     return $localize`Update`
 116   }
 117
 118   private hydrateFormFromPlaylist () {
 119     this.form.patchValue({
 120       displayName: this.videoPlaylistToUpdate.displayName,
 121       privacy: this.videoPlaylistToUpdate.privacy.id,
 122       description: this.videoPlaylistToUpdate.description,
 123       videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null
 124     })
 125
 126     fetch(this.videoPlaylistToUpdate.thumbnailUrl)
 127       .then(response => response.blob())
 128       .then(data => {
 129         this.form.patchValue({
 130           thumbnailfile: data
 131         })
 132       })
 133   }
 134 }