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

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