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

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