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