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