client/src/app/videos/+video-edit/video-add.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core'
   2 import { FormBuilder, FormGroup } from '@angular/forms'
   3 import { Router } from '@angular/router'
   4
   5 import { NotificationsService } from 'angular2-notifications'
   6
   7 import {
   8   FormReactive,
   9   VIDEO_NAME,
  10   VIDEO_CATEGORY,
  11   VIDEO_LICENCE,
  12   VIDEO_LANGUAGE,
  13   VIDEO_DESCRIPTION,
  14   VIDEO_TAGS,
  15   VIDEO_FILE
  16 } from '../../shared'
  17 import { ServerService}  from '../../core'
  18 import { VideoService } from '../shared'
  19 import { VideoCreate } from '../../../../../shared'
  20 import { HttpEventType, HttpResponse } from '@angular/common/http'
  21
  22 @Component({
  23   selector: 'my-videos-add',
  24   styleUrls: [ './video-edit.component.scss' ],
  25   templateUrl: './video-add.component.html'
  26 })
  27
  28 export class VideoAddComponent extends FormReactive implements OnInit {
  29   @ViewChild('videofileInput') videofileInput
  30
  31   progressPercent = 0
  32   tags: string[] = []
  33   videoCategories = []
  34   videoLicences = []
  35   videoLanguages = []
  36
  37   tagValidators = VIDEO_TAGS.VALIDATORS
  38   tagValidatorsMessages = VIDEO_TAGS.MESSAGES
  39
  40   error: string
  41   form: FormGroup
  42   formErrors = {
  43     name: '',
  44     category: '',
  45     licence: '',
  46     language: '',
  47     description: '',
  48     videofile: ''
  49   }
  50   validationMessages = {
  51     name: VIDEO_NAME.MESSAGES,
  52     category: VIDEO_CATEGORY.MESSAGES,
  53     licence: VIDEO_LICENCE.MESSAGES,
  54     language: VIDEO_LANGUAGE.MESSAGES,
  55     description: VIDEO_DESCRIPTION.MESSAGES,
  56     videofile: VIDEO_FILE.MESSAGES
  57   }
  58
  59   constructor (
  60     private formBuilder: FormBuilder,
  61     private router: Router,
  62     private notificationsService: NotificationsService,
  63     private serverService: ServerService,
  64     private videoService: VideoService
  65   ) {
  66     super()
  67   }
  68
  69   get filename () {
  70     return this.form.value['videofile']
  71   }
  72
  73   buildForm () {
  74     this.form = this.formBuilder.group({
  75       name: [ '', VIDEO_NAME.VALIDATORS ],
  76       nsfw: [ false ],
  77       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
  78       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
  79       language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
  80       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
  81       videofile: [ '', VIDEO_FILE.VALIDATORS ],
  82       tags: [ '' ]
  83     })
  84
  85     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  86   }
  87
  88   ngOnInit () {
  89     this.videoCategories = this.serverService.getVideoCategories()
  90     this.videoLicences = this.serverService.getVideoLicences()
  91     this.videoLanguages = this.serverService.getVideoLanguages()
  92
  93     this.buildForm()
  94   }
  95
  96   // The goal is to keep reactive form validation (required field)
  97   // https://stackoverflow.com/a/44238894
  98   fileChange ($event) {
  99     this.form.controls['videofile'].setValue($event.target.files[0].name)
 100   }
 101
 102   removeFile () {
 103     this.videofileInput.nativeElement.value = ''
 104     this.form.controls['videofile'].setValue('')
 105   }
 106
 107   checkForm () {
 108     this.forceCheck()
 109
 110     return this.form.valid
 111   }
 112
 113   upload () {
 114     if (this.checkForm() === false) {
 115       return
 116     }
 117
 118     const formValue: VideoCreate = this.form.value
 119
 120     const name = formValue.name
 121     const nsfw = formValue.nsfw
 122     const category = formValue.category
 123     const licence = formValue.licence
 124     const language = formValue.language
 125     const description = formValue.description
 126     const tags = formValue.tags
 127     const videofile = this.videofileInput.nativeElement.files[0]
 128
 129     const formData = new FormData()
 130     formData.append('name', name)
 131     formData.append('category', '' + category)
 132     formData.append('nsfw', '' + nsfw)
 133     formData.append('licence', '' + licence)
 134     formData.append('videofile', videofile)
 135
 136     // Language is optional
 137     if (language) {
 138       formData.append('language', '' + language)
 139     }
 140
 141     formData.append('description', description)
 142
 143     for (let i = 0; i < tags.length; i++) {
 144       formData.append(`tags[${i}]`, tags[i])
 145     }
 146
 147     this.videoService.uploadVideo(formData).subscribe(
 148       event => {
 149         if (event.type === HttpEventType.UploadProgress) {
 150           this.progressPercent = Math.round(100 * event.loaded / event.total)
 151         } else if (event instanceof HttpResponse) {
 152           console.log('Video uploaded.')
 153           this.notificationsService.success('Success', 'Video uploaded.')
 154
 155           // Display all the videos once it's finished
 156           this.router.navigate([ '/videos/list' ])
 157         }
 158       },
 159
 160       err => {
 161         // Reset progress
 162         this.progressPercent = 0
 163         this.error = err.message
 164       }
 165     )
 166   }
 167 }