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.tags.length === 0) {
 109       this.tagsError = 'You have 0 tags';
 110     }
 111
 112     if (this.filename === null) {
 113       this.fileError = 'You did not add a file.';
 114     }
 115
 116     return this.form.valid === true && this.tagsError === '' && this.fileError === '';
 117   }
 118
 119   fileChanged() {
 120     this.fileError = '';
 121   }
 122
 123   onTagKeyPress(event: KeyboardEvent) {
 124     const currentTag = this.form.value['currentTag'];
 125
 126     // Enter press
 127     if (event.keyCode === 13) {
 128       // Check if the tag is valid and does not already exist
 129       if (
 130         currentTag.length >= 2 &&
 131         this.form.controls['currentTag'].valid &&
 132         this.tags.indexOf(currentTag) === -1
 133       ) {
 134         this.tags.push(currentTag);
 135         this.form.patchValue({ currentTag: '' });
 136
 137         if (this.tags.length >= 3) {
 138           this.form.get('currentTag').disable();
 139         }
 140
 141         this.tagsError = '';
 142       }
 143     }
 144   }
 145
 146   removeFile() {
 147     this.uploader.clearQueue();
 148   }
 149
 150   removeTag(tag: string) {
 151     this.tags.splice(this.tags.indexOf(tag), 1);
 152     this.form.get('currentTag').enable();
 153   }
 154
 155   upload() {
 156     if (this.checkForm() === false) {
 157       return;
 158     }
 159
 160     const item = this.uploader.queue[0];
 161     // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
 162     item.alias = 'videofile';
 163
 164     // FIXME: remove
 165     // Run detection change for progress bar
 166     const interval = setInterval(() => { ; }, 250);
 167
 168     item.onSuccess = () => {
 169       clearInterval(interval);
 170
 171       console.log('Video uploaded.');
 172       this.notificationsService.success('Success', 'Video uploaded.');
 173
 174
 175       // Print all the videos once it's finished
 176       this.router.navigate(['/videos/list']);
 177     };
 178
 179     item.onError = (response: string, status: number) => {
 180       clearInterval(interval);
 181
 182       // We need to handle manually these cases beceause we use the FileUpload component
 183       if (status === 400) {
 184         this.error = response;
 185       } else if (status === 401) {
 186         this.error = 'Access token was expired, refreshing token...';
 187         this.authService.refreshAccessToken().subscribe(
 188           () => {
 189             // Update the uploader request header
 190             this.uploader.authToken = this.authService.getRequestHeaderValue();
 191             this.error += ' access token refreshed. Please retry your request.';
 192           }
 193         );
 194       } else {
 195         this.error = 'Unknow error';
 196         console.error(this.error);
 197       }
 198     };
 199
 200     this.uploader.uploadAll();
 201   }
 202 }