client/src/app/videos/video-add/video-add.component.ts

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