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

   1 import { Component, ElementRef, OnInit } from '@angular/core'
   2 import { FormBuilder, FormGroup } from '@angular/forms'
   3 import { Router } from '@angular/router'
   4
   5 import { FileUploader } from 'ng2-file-upload/ng2-file-upload'
   6 import { NotificationsService } from 'angular2-notifications'
   7
   8 import { AuthService } from '../../core'
   9 import {
  10   FormReactive,
  11   VIDEO_NAME,
  12   VIDEO_CATEGORY,
  13   VIDEO_LICENCE,
  14   VIDEO_LANGUAGE,
  15   VIDEO_DESCRIPTION,
  16   VIDEO_TAGS
  17 } from '../../shared'
  18 import { VideoService } from '../shared'
  19
  20 @Component({
  21   selector: 'my-videos-add',
  22   styleUrls: [ './video-edit.component.scss' ],
  23   templateUrl: './video-add.component.html'
  24 })
  25
  26 export class VideoAddComponent extends FormReactive implements OnInit {
  27   tags: string[] = []
  28   uploader: FileUploader
  29   videoCategories = []
  30   videoLicences = []
  31   videoLanguages = []
  32
  33   tagValidators = VIDEO_TAGS.VALIDATORS
  34   tagValidatorsMessages = VIDEO_TAGS.MESSAGES
  35
  36   error: string = null
  37   form: FormGroup
  38   formErrors = {
  39     name: '',
  40     category: '',
  41     licence: '',
  42     language: '',
  43     description: ''
  44   }
  45   validationMessages = {
  46     name: VIDEO_NAME.MESSAGES,
  47     category: VIDEO_CATEGORY.MESSAGES,
  48     licence: VIDEO_LICENCE.MESSAGES,
  49     language: VIDEO_LANGUAGE.MESSAGES,
  50     description: VIDEO_DESCRIPTION.MESSAGES
  51   }
  52
  53   // Special error messages
  54   fileError = ''
  55
  56   constructor (
  57     private authService: AuthService,
  58     private elementRef: ElementRef,
  59     private formBuilder: FormBuilder,
  60     private router: Router,
  61     private notificationsService: NotificationsService,
  62     private videoService: VideoService
  63   ) {
  64     super()
  65   }
  66
  67   get filename () {
  68     if (this.uploader.queue.length === 0) {
  69       return null
  70     }
  71
  72     return this.uploader.queue[0].file.name
  73   }
  74
  75   buildForm () {
  76     this.form = this.formBuilder.group({
  77       name: [ '', VIDEO_NAME.VALIDATORS ],
  78       nsfw: [ false ],
  79       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
  80       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
  81       language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
  82       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
  83       tags: [ '']
  84     })
  85
  86     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  87   }
  88
  89   ngOnInit () {
  90     this.videoCategories = this.videoService.videoCategories
  91     this.videoLicences = this.videoService.videoLicences
  92     this.videoLanguages = this.videoService.videoLanguages
  93
  94     this.uploader = new FileUploader({
  95       authToken: this.authService.getRequestHeaderValue(),
  96       queueLimit: 1,
  97       url: API_URL + '/api/v1/videos',
  98       removeAfterUpload: true
  99     })
 100
 101     this.uploader.onBuildItemForm = (item, form) => {
 102       const name = this.form.value['name']
 103       const nsfw = this.form.value['nsfw']
 104       const category = this.form.value['category']
 105       const licence = this.form.value['licence']
 106       const language = this.form.value['language']
 107       const description = this.form.value['description']
 108       const tags = this.form.value['tags']
 109
 110       form.append('name', name)
 111       form.append('category', category)
 112       form.append('nsfw', nsfw)
 113       form.append('licence', licence)
 114
 115       // Language is optional
 116       if (language) {
 117         form.append('language', language)
 118       }
 119
 120       form.append('description', description)
 121
 122       for (let i = 0; i < tags.length; i++) {
 123         form.append(`tags[${i}]`, tags[i])
 124       }
 125     }
 126
 127     this.buildForm()
 128   }
 129
 130   checkForm () {
 131     this.forceCheck()
 132
 133     if (this.filename === null) {
 134       this.fileError = 'You did not add a file.'
 135     }
 136
 137     return this.form.valid === true && this.fileError === ''
 138   }
 139
 140   fileChanged () {
 141     this.fileError = ''
 142   }
 143
 144   removeFile () {
 145     this.uploader.clearQueue()
 146   }
 147
 148   upload () {
 149     if (this.checkForm() === false) {
 150       return
 151     }
 152
 153     const item = this.uploader.queue[0]
 154     // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
 155     item.alias = 'videofile'
 156
 157     item.onSuccess = () => {
 158       console.log('Video uploaded.')
 159       this.notificationsService.success('Success', 'Video uploaded.')
 160
 161       // Print all the videos once it's finished
 162       this.router.navigate(['/videos/list'])
 163     }
 164
 165     item.onError = (response: string, status: number) => {
 166       // We need to handle manually these cases beceause we use the FileUpload component
 167       if (status === 400) {
 168         this.error = response
 169       } else if (status === 401) {
 170         this.error = 'Access token was expired, refreshing token...'
 171         this.authService.refreshAccessToken().subscribe(
 172           () => {
 173             // Update the uploader request header
 174             this.uploader.authToken = this.authService.getRequestHeaderValue()
 175             this.error += ' access token refreshed. Please retry your request.'
 176           }
 177         )
 178       } else {
 179         this.error = 'Unknow error'
 180         console.error(this.error)
 181       }
 182     }
 183
 184     this.uploader.uploadAll()
 185   }
 186 }