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