client/src/app/videos/video-add/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_DESCRIPTION,
  15   VIDEO_TAGS
  16 } from '../../shared';
  17 import { VideoService } from '../shared';
  18
  19 @Component({
  20   selector: 'my-videos-add',
  21   styleUrls: [ './video-add.component.scss' ],
  22   templateUrl: './video-add.component.html'
  23 })
  24
  25 export class VideoAddComponent extends FormReactive implements OnInit {
  26   tags: string[] = [];
  27   uploader: FileUploader;
  28   videoCategories = [];
  29   videoLicences = [];
  30
  31   error: string = null;
  32   form: FormGroup;
  33   formErrors = {
  34     name: '',
  35     category: '',
  36     licence: '',
  37     description: '',
  38     currentTag: ''
  39   };
  40   validationMessages = {
  41     name: VIDEO_NAME.MESSAGES,
  42     category: VIDEO_CATEGORY.MESSAGES,
  43     licence: VIDEO_LICENCE.MESSAGES,
  44     description: VIDEO_DESCRIPTION.MESSAGES,
  45     currentTag: VIDEO_TAGS.MESSAGES
  46   };
  47
  48   // Special error messages
  49   tagsError = '';
  50   fileError = '';
  51
  52   constructor(
  53     private authService: AuthService,
  54     private elementRef: ElementRef,
  55     private formBuilder: FormBuilder,
  56     private router: Router,
  57     private notificationsService: NotificationsService,
  58     private videoService: VideoService
  59   ) {
  60     super();
  61   }
  62
  63   get filename() {
  64     if (this.uploader.queue.length === 0) {
  65       return null;
  66     }
  67
  68     return this.uploader.queue[0].file.name;
  69   }
  70
  71   buildForm() {
  72     this.form = this.formBuilder.group({
  73       name: [ '', VIDEO_NAME.VALIDATORS ],
  74       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
  75       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
  76       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
  77       currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
  78     });
  79
  80     this.form.valueChanges.subscribe(data => this.onValueChanged(data));
  81   }
  82
  83   ngOnInit() {
  84     this.videoCategories = this.videoService.videoCategories;
  85     this.videoLicences = this.videoService.videoLicences;
  86
  87     this.uploader = new FileUploader({
  88       authToken: this.authService.getRequestHeaderValue(),
  89       queueLimit: 1,
  90       url: '/api/v1/videos',
  91       removeAfterUpload: true
  92     });
  93
  94     this.uploader.onBuildItemForm = (item, form) => {
  95       const name = this.form.value['name'];
  96       const category = this.form.value['category'];
  97       const licence = this.form.value['licence'];
  98       const description = this.form.value['description'];
  99
 100       form.append('name', name);
 101       form.append('category', category);
 102       form.append('licence', licence);
 103       form.append('description', description);
 104
 105       for (let i = 0; i < this.tags.length; i++) {
 106         form.append(`tags[${i}]`, this.tags[i]);
 107       }
 108     };
 109
 110     this.buildForm();
 111   }
 112
 113   checkForm() {
 114     this.forceCheck();
 115
 116     if (this.filename === null) {
 117       this.fileError = 'You did not add a file.';
 118     }
 119
 120     return this.form.valid === true && this.tagsError === '' && this.fileError === '';
 121   }
 122
 123   fileChanged() {
 124     this.fileError = '';
 125   }
 126
 127   onTagKeyPress(event: KeyboardEvent) {
 128     // Enter press
 129     if (event.keyCode === 13) {
 130       this.addTagIfPossible();
 131     }
 132   }
 133
 134   removeFile() {
 135     this.uploader.clearQueue();
 136   }
 137
 138   removeTag(tag: string) {
 139     this.tags.splice(this.tags.indexOf(tag), 1);
 140     this.form.get('currentTag').enable();
 141   }
 142
 143   upload() {
 144     // Maybe the user forgot to press "enter" when he filled the field
 145     this.addTagIfPossible();
 146
 147     if (this.checkForm() === false) {
 148       return;
 149     }
 150
 151     const item = this.uploader.queue[0];
 152     // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
 153     item.alias = 'videofile';
 154
 155     // FIXME: remove
 156     // Run detection change for progress bar
 157     const interval = setInterval(() => { ; }, 250);
 158
 159     item.onSuccess = () => {
 160       clearInterval(interval);
 161
 162       console.log('Video uploaded.');
 163       this.notificationsService.success('Success', 'Video uploaded.');
 164
 165
 166       // Print all the videos once it's finished
 167       this.router.navigate(['/videos/list']);
 168     };
 169
 170     item.onError = (response: string, status: number) => {
 171       clearInterval(interval);
 172
 173       // We need to handle manually these cases beceause we use the FileUpload component
 174       if (status === 400) {
 175         this.error = response;
 176       } else if (status === 401) {
 177         this.error = 'Access token was expired, refreshing token...';
 178         this.authService.refreshAccessToken().subscribe(
 179           () => {
 180             // Update the uploader request header
 181             this.uploader.authToken = this.authService.getRequestHeaderValue();
 182             this.error += ' access token refreshed. Please retry your request.';
 183           }
 184         );
 185       } else {
 186         this.error = 'Unknow error';
 187         console.error(this.error);
 188       }
 189     };
 190
 191     this.uploader.uploadAll();
 192   }
 193
 194   private addTagIfPossible() {
 195     const currentTag = this.form.value['currentTag'];
 196     if (currentTag === undefined) return;
 197
 198     // Check if the tag is valid and does not already exist
 199     if (
 200       currentTag.length >= 2 &&
 201       this.form.controls['currentTag'].valid &&
 202       this.tags.indexOf(currentTag) === -1
 203     ) {
 204       this.tags.push(currentTag);
 205       this.form.patchValue({ currentTag: '' });
 206
 207       if (this.tags.length >= 3) {
 208         this.form.get('currentTag').disable();
 209       }
 210
 211       this.tagsError = '';
 212     }
 213   }
 214 }