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