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/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     // FIXME: remove
 158     // Run detection change for progress bar
 159     const interval = setInterval(() => { ; }, 250);
 160
 161     item.onSuccess = () => {
 162       clearInterval(interval);
 163
 164       console.log('Video uploaded.');
 165       this.notificationsService.success('Success', 'Video uploaded.');
 166
 167
 168       // Print all the videos once it's finished
 169       this.router.navigate(['/videos/list']);
 170     };
 171
 172     item.onError = (response: string, status: number) => {
 173       clearInterval(interval);
 174
 175       // We need to handle manually these cases beceause we use the FileUpload component
 176       if (status === 400) {
 177         this.error = response;
 178       } else if (status === 401) {
 179         this.error = 'Access token was expired, refreshing token...';
 180         this.authService.refreshAccessToken().subscribe(
 181           () => {
 182             // Update the uploader request header
 183             this.uploader.authToken = this.authService.getRequestHeaderValue();
 184             this.error += ' access token refreshed. Please retry your request.';
 185           }
 186         );
 187       } else {
 188         this.error = 'Unknow error';
 189         console.error(this.error);
 190       }
 191     };
 192
 193     this.uploader.uploadAll();
 194   }
 195 }