client/src/app/videos/video-edit/video-update.component.ts

   1 import { Component, ElementRef, OnInit } from '@angular/core'
   2 import { FormBuilder, FormGroup } from '@angular/forms'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4
   5 import { NotificationsService } from 'angular2-notifications'
   6
   7 import { AuthService } from '../../core'
   8 import {
   9   FormReactive,
  10   VIDEO_NAME,
  11   VIDEO_CATEGORY,
  12   VIDEO_LICENCE,
  13   VIDEO_LANGUAGE,
  14   VIDEO_DESCRIPTION,
  15   VIDEO_TAGS
  16 } from '../../shared'
  17 import { Video, VideoService } from '../shared'
  18
  19 @Component({
  20   selector: 'my-videos-update',
  21   styleUrls: [ './video-edit.component.scss' ],
  22   templateUrl: './video-update.component.html'
  23 })
  24
  25 export class VideoUpdateComponent extends FormReactive implements OnInit {
  26   tags: string[] = []
  27   videoCategories = []
  28   videoLicences = []
  29   videoLanguages = []
  30   video: Video
  31
  32   tagValidators = VIDEO_TAGS.VALIDATORS
  33   tagValidatorsMessages = VIDEO_TAGS.MESSAGES
  34
  35   error: string = null
  36   form: FormGroup
  37   formErrors = {
  38     name: '',
  39     category: '',
  40     licence: '',
  41     language: '',
  42     description: ''
  43   }
  44   validationMessages = {
  45     name: VIDEO_NAME.MESSAGES,
  46     category: VIDEO_CATEGORY.MESSAGES,
  47     licence: VIDEO_LICENCE.MESSAGES,
  48     language: VIDEO_LANGUAGE.MESSAGES,
  49     description: VIDEO_DESCRIPTION.MESSAGES
  50   }
  51
  52   fileError = ''
  53
  54   constructor (
  55     private authService: AuthService,
  56     private elementRef: ElementRef,
  57     private formBuilder: FormBuilder,
  58     private route: ActivatedRoute,
  59     private router: Router,
  60     private notificationsService: NotificationsService,
  61     private videoService: VideoService
  62   ) {
  63     super()
  64   }
  65
  66   buildForm () {
  67     this.form = this.formBuilder.group({
  68       name: [ '', VIDEO_NAME.VALIDATORS ],
  69       nsfw: [ false ],
  70       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
  71       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
  72       language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
  73       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
  74       tags: [ '' ]
  75     })
  76
  77     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  78   }
  79
  80   ngOnInit () {
  81     this.buildForm()
  82
  83     this.videoCategories = this.videoService.videoCategories
  84     this.videoLicences = this.videoService.videoLicences
  85     this.videoLanguages = this.videoService.videoLanguages
  86
  87     const uuid: string = this.route.snapshot.params['uuid']
  88     this.videoService.getVideo(uuid)
  89                      .subscribe(
  90                        video => {
  91                          this.video = video
  92
  93                          this.hydrateFormFromVideo()
  94                        },
  95
  96                        err => {
  97                          console.error(err)
  98                          this.error = 'Cannot fetch video.'
  99                        }
 100                      )
 101   }
 102
 103   checkForm () {
 104     this.forceCheck()
 105
 106     return this.form.valid
 107   }
 108
 109   update () {
 110     if (this.checkForm() === false) {
 111       return
 112     }
 113
 114     this.video.patch(this.form.value)
 115
 116     this.videoService.updateVideo(this.video)
 117                      .subscribe(
 118                        () => {
 119                          this.notificationsService.success('Success', 'Video updated.')
 120                          this.router.navigate([ '/videos/watch', this.video.uuid ])
 121                        },
 122
 123                        err => {
 124                          this.error = 'Cannot update the video.'
 125                          console.error(err)
 126                        }
 127                       )
 128
 129   }
 130
 131   private hydrateFormFromVideo () {
 132     this.form.patchValue(this.video.toJSON())
 133   }
 134 }