]>
Commit | Line | Data |
---|---|---|
1 | import { Control, ControlGroup, Validators } from '@angular/common'; | |
2 | import { Component, ElementRef, OnInit } from '@angular/core'; | |
3 | import { Router } from '@angular/router'; | |
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(['/videos/list']); | |
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 | } |