]>
Commit | Line | Data |
---|---|---|
4a6995be C |
1 | /// <reference path="../../../../typings/globals/jquery/index.d.ts" /> |
2 | /// <reference path="../../../../typings/globals/jquery.fileupload/index.d.ts" /> | |
d3ef341a | 3 | |
230809ef C |
4 | import { Component, ElementRef, OnInit } from '@angular/core'; |
5 | import { Router } from '@angular/router-deprecated'; | |
dc8bc31b | 6 | |
8140a704 | 7 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; |
41a2aee3 | 8 | import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; |
8140a704 | 9 | |
4a6995be | 10 | import { AuthService, User } from '../../shared'; |
1553e15d | 11 | |
dc8bc31b C |
12 | @Component({ |
13 | selector: 'my-videos-add', | |
4a6995be C |
14 | styles: [ require('./video-add.component.scss') ], |
15 | template: require('./video-add.component.html'), | |
8140a704 C |
16 | directives: [ PROGRESSBAR_DIRECTIVES ], |
17 | pipes: [ BytesPipe ] | |
dc8bc31b C |
18 | }) |
19 | ||
41a2aee3 | 20 | export class VideoAddComponent implements OnInit { |
1cdb5c0f | 21 | error: string = null; |
dc8bc31b C |
22 | fileToUpload: any; |
23 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; | |
4fd8aa32 | 24 | user: User; |
dc8bc31b | 25 | |
4fd8aa32 | 26 | private form: any; |
dc8bc31b | 27 | |
1553e15d | 28 | constructor( |
9bfe96e1 | 29 | private authService: AuthService, |
4fd8aa32 | 30 | private elementRef: ElementRef, |
9bfe96e1 | 31 | private router: Router |
1553e15d | 32 | ) {} |
dc8bc31b C |
33 | |
34 | ngOnInit() { | |
1553e15d | 35 | this.user = User.load(); |
4fd8aa32 | 36 | jQuery(this.elementRef.nativeElement).find('#videofile').fileupload({ |
98b01bac C |
37 | url: '/api/v1/videos', |
38 | dataType: 'json', | |
dc8bc31b C |
39 | singleFileUploads: true, |
40 | multipart: true, | |
d3ef341a | 41 | autoUpload: false, |
dc8bc31b C |
42 | |
43 | add: (e, data) => { | |
4fd8aa32 | 44 | this.form = data; |
dc8bc31b C |
45 | this.fileToUpload = data['files'][0]; |
46 | }, | |
47 | ||
48 | progressall: (e, data) => { | |
49 | this.progressBar.value = data.loaded; | |
86e054b2 C |
50 | // The server is a little bit slow to answer (has to seed the video) |
51 | // So we add more time to the progress bar (+10%) | |
52 | this.progressBar.max = data.total + (0.1 * data.total); | |
dc8bc31b C |
53 | }, |
54 | ||
55 | done: (e, data) => { | |
86e054b2 | 56 | this.progressBar.value = this.progressBar.max; |
98b01bac C |
57 | console.log('Video uploaded.'); |
58 | ||
dc8bc31b | 59 | // Print all the videos once it's finished |
4fd8aa32 | 60 | this.router.navigate(['VideosList']); |
1cdb5c0f C |
61 | }, |
62 | ||
63 | fail: (e, data) => { | |
64 | const xhr = data.jqXHR; | |
65 | if (xhr.status === 400) { | |
66 | this.error = xhr.responseText; | |
67 | } else { | |
68 | this.error = 'Unknow error'; | |
69 | } | |
70 | ||
71 | console.error(data); | |
dc8bc31b C |
72 | } |
73 | }); | |
74 | } | |
75 | ||
76 | uploadFile() { | |
1cdb5c0f | 77 | this.error = null; |
4fd8aa32 | 78 | this.form.formData = jQuery(this.elementRef.nativeElement).find('form').serializeArray(); |
9bfe96e1 | 79 | this.form.headers = this.authService.getRequestHeader().toJSON(); |
4fd8aa32 | 80 | this.form.submit(); |
dc8bc31b C |
81 | } |
82 | } |