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