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