]>
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 { |
dc8bc31b C |
21 | fileToUpload: any; |
22 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; | |
4fd8aa32 | 23 | user: User; |
dc8bc31b | 24 | |
4fd8aa32 | 25 | private form: any; |
dc8bc31b | 26 | |
1553e15d | 27 | constructor( |
9bfe96e1 | 28 | private authService: AuthService, |
4fd8aa32 | 29 | private elementRef: ElementRef, |
9bfe96e1 | 30 | private router: Router |
1553e15d | 31 | ) {} |
dc8bc31b C |
32 | |
33 | ngOnInit() { | |
1553e15d | 34 | this.user = User.load(); |
4fd8aa32 | 35 | jQuery(this.elementRef.nativeElement).find('#videofile').fileupload({ |
98b01bac C |
36 | url: '/api/v1/videos', |
37 | dataType: 'json', | |
dc8bc31b C |
38 | singleFileUploads: true, |
39 | multipart: true, | |
d3ef341a | 40 | autoUpload: false, |
dc8bc31b C |
41 | |
42 | add: (e, data) => { | |
4fd8aa32 | 43 | this.form = data; |
dc8bc31b C |
44 | this.fileToUpload = data['files'][0]; |
45 | }, | |
46 | ||
47 | progressall: (e, data) => { | |
48 | this.progressBar.value = data.loaded; | |
86e054b2 C |
49 | // The server is a little bit slow to answer (has to seed the video) |
50 | // So we add more time to the progress bar (+10%) | |
51 | this.progressBar.max = data.total + (0.1 * data.total); | |
dc8bc31b C |
52 | }, |
53 | ||
54 | done: (e, data) => { | |
86e054b2 | 55 | this.progressBar.value = this.progressBar.max; |
98b01bac C |
56 | console.log('Video uploaded.'); |
57 | ||
dc8bc31b | 58 | // Print all the videos once it's finished |
4fd8aa32 | 59 | this.router.navigate(['VideosList']); |
dc8bc31b C |
60 | } |
61 | }); | |
62 | } | |
63 | ||
64 | uploadFile() { | |
4fd8aa32 | 65 | this.form.formData = jQuery(this.elementRef.nativeElement).find('form').serializeArray(); |
9bfe96e1 | 66 | this.form.headers = this.authService.getRequestHeader().toJSON(); |
4fd8aa32 | 67 | this.form.submit(); |
dc8bc31b C |
68 | } |
69 | } |