2016-06-07 16:34:02 -04:00
|
|
|
import { Control, ControlGroup, Validators } from '@angular/common';
|
2016-05-13 08:18:37 -04:00
|
|
|
import { Component, ElementRef, OnInit } from '@angular/core';
|
2016-06-10 11:43:40 -04:00
|
|
|
import { Router } from '@angular/router';
|
2016-03-14 08:50:19 -04:00
|
|
|
|
2016-05-23 03:50:26 -04:00
|
|
|
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
|
2016-05-27 10:23:10 -04:00
|
|
|
import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
|
2016-06-07 16:34:02 -04:00
|
|
|
import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
|
2016-05-23 03:50:26 -04:00
|
|
|
|
2016-06-07 16:34:02 -04:00
|
|
|
import { AuthService } from '../../shared';
|
2016-04-14 16:07:46 -04:00
|
|
|
|
2016-03-14 08:50:19 -04:00
|
|
|
@Component({
|
|
|
|
selector: 'my-videos-add',
|
2016-06-03 16:08:03 -04:00
|
|
|
styles: [ require('./video-add.component.scss') ],
|
|
|
|
template: require('./video-add.component.html'),
|
2016-06-07 16:34:02 -04:00
|
|
|
directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ],
|
2016-05-23 03:50:26 -04:00
|
|
|
pipes: [ BytesPipe ]
|
2016-03-14 08:50:19 -04:00
|
|
|
})
|
|
|
|
|
2016-05-27 10:23:10 -04:00
|
|
|
export class VideoAddComponent implements OnInit {
|
2016-06-07 16:34:02 -04:00
|
|
|
currentTag: string; // Tag the user is writing in the input
|
2016-06-04 14:37:38 -04:00
|
|
|
error: string = null;
|
2016-06-07 16:34:02 -04:00
|
|
|
videoForm: ControlGroup;
|
|
|
|
uploader: FileUploader;
|
|
|
|
video = {
|
|
|
|
name: '',
|
|
|
|
tags: [],
|
|
|
|
description: ''
|
|
|
|
};
|
2016-03-14 08:50:19 -04:00
|
|
|
|
2016-04-14 16:07:46 -04:00
|
|
|
constructor(
|
2016-05-27 11:52:41 -04:00
|
|
|
private authService: AuthService,
|
2016-05-27 11:49:18 -04:00
|
|
|
private elementRef: ElementRef,
|
2016-05-27 11:52:41 -04:00
|
|
|
private router: Router
|
2016-04-14 16:07:46 -04:00
|
|
|
) {}
|
2016-03-14 08:50:19 -04:00
|
|
|
|
2016-06-07 16:34:02 -04:00
|
|
|
get filename() {
|
|
|
|
if (this.uploader.queue.length === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.uploader.queue[0].file.name;
|
|
|
|
}
|
|
|
|
|
|
|
|
get isTagsInputDisabled () {
|
|
|
|
return this.video.tags.length >= 3;
|
|
|
|
}
|
|
|
|
|
|
|
|
getInvalidFieldsTitle() {
|
|
|
|
let title = '';
|
|
|
|
const nameControl = this.videoForm.controls['name'];
|
|
|
|
const descriptionControl = this.videoForm.controls['description'];
|
|
|
|
|
|
|
|
if (!nameControl.valid) {
|
|
|
|
title += 'A name is required\n';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.video.tags.length === 0) {
|
|
|
|
title += 'At least one tag is required\n';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.filename === null) {
|
|
|
|
title += 'A file is required\n';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!descriptionControl.valid) {
|
|
|
|
title += 'A description is required\n';
|
|
|
|
}
|
|
|
|
|
|
|
|
return title;
|
|
|
|
}
|
|
|
|
|
2016-03-14 08:50:19 -04:00
|
|
|
ngOnInit() {
|
2016-06-07 16:34:02 -04:00
|
|
|
this.videoForm = new ControlGroup({
|
|
|
|
name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])),
|
|
|
|
description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])),
|
|
|
|
tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.uploader = new FileUploader({
|
|
|
|
authToken: this.authService.getRequestHeaderValue(),
|
|
|
|
queueLimit: 1,
|
2016-03-14 17:16:43 -04:00
|
|
|
url: '/api/v1/videos',
|
2016-06-07 16:34:02 -04:00
|
|
|
removeAfterUpload: true
|
2016-03-14 08:50:19 -04:00
|
|
|
});
|
2016-06-07 16:34:02 -04:00
|
|
|
|
|
|
|
this.uploader.onBuildItemForm = (item, form) => {
|
|
|
|
form.append('name', this.video.name);
|
|
|
|
form.append('description', this.video.description);
|
|
|
|
|
|
|
|
for (let i = 0; i < this.video.tags.length; i++) {
|
|
|
|
form.append(`tags[${i}]`, this.video.tags[i]);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
onTagKeyPress(event: KeyboardEvent) {
|
|
|
|
// Enter press
|
|
|
|
if (event.keyCode === 13) {
|
|
|
|
// Check if the tag is valid and does not already exist
|
|
|
|
if (
|
|
|
|
this.currentTag !== '' &&
|
|
|
|
this.videoForm.controls['tags'].valid &&
|
|
|
|
this.video.tags.indexOf(this.currentTag) === -1
|
|
|
|
) {
|
|
|
|
this.video.tags.push(this.currentTag);
|
|
|
|
this.currentTag = '';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
removeFile() {
|
|
|
|
this.uploader.clearQueue();
|
|
|
|
}
|
|
|
|
|
|
|
|
removeTag(tag: string) {
|
|
|
|
this.video.tags.splice(this.video.tags.indexOf(tag), 1);
|
2016-03-14 08:50:19 -04:00
|
|
|
}
|
|
|
|
|
2016-06-07 16:34:02 -04:00
|
|
|
upload() {
|
|
|
|
const item = this.uploader.queue[0];
|
|
|
|
// TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
|
|
|
|
item.alias = 'videofile';
|
|
|
|
|
|
|
|
item.onSuccess = () => {
|
|
|
|
console.log('Video uploaded.');
|
|
|
|
|
|
|
|
// Print all the videos once it's finished
|
2016-06-10 12:14:01 -04:00
|
|
|
this.router.navigate(['/videos/list']);
|
2016-06-07 16:34:02 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
item.onError = (response: string, status: number) => {
|
2016-07-20 10:24:18 -04:00
|
|
|
// We need to handle manually these cases beceause we use the FileUpload component
|
|
|
|
if (status === 400) {
|
|
|
|
this.error = response;
|
|
|
|
} else if (status === 401) {
|
|
|
|
this.error = 'Access token was expired, refreshing token...';
|
|
|
|
this.authService.refreshAccessToken().subscribe(
|
|
|
|
() => {
|
|
|
|
// Update the uploader request header
|
|
|
|
this.uploader.authToken = this.authService.getRequestHeaderValue();
|
|
|
|
this.error += ' access token refreshed. Please retry your request.';
|
|
|
|
}
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
this.error = 'Unknow error';
|
|
|
|
console.error(this.error);
|
|
|
|
}
|
2016-06-07 16:34:02 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
this.uploader.uploadAll();
|
2016-03-14 08:50:19 -04:00
|
|
|
}
|
|
|
|
}
|