diff options
Diffstat (limited to 'client/app/videos/video-add')
-rw-r--r-- | client/app/videos/video-add/index.ts | 1 | ||||
-rw-r--r-- | client/app/videos/video-add/video-add.component.html | 41 | ||||
-rw-r--r-- | client/app/videos/video-add/video-add.component.scss | 33 | ||||
-rw-r--r-- | client/app/videos/video-add/video-add.component.ts | 68 |
4 files changed, 143 insertions, 0 deletions
diff --git a/client/app/videos/video-add/index.ts b/client/app/videos/video-add/index.ts new file mode 100644 index 000000000..79488e851 --- /dev/null +++ b/client/app/videos/video-add/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './video-add.component'; | |||
diff --git a/client/app/videos/video-add/video-add.component.html b/client/app/videos/video-add/video-add.component.html new file mode 100644 index 000000000..80d229cb8 --- /dev/null +++ b/client/app/videos/video-add/video-add.component.html | |||
@@ -0,0 +1,41 @@ | |||
1 | <h3>Upload a video</h3> | ||
2 | |||
3 | <form (ngSubmit)="uploadFile()" #videoForm="ngForm"> | ||
4 | <div class="form-group"> | ||
5 | <label for="name">Video name</label> | ||
6 | <input | ||
7 | type="text" class="form-control" name="name" id="name" required | ||
8 | ngControl="name" #name="ngForm" | ||
9 | > | ||
10 | <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> | ||
11 | Name is required | ||
12 | </div> | ||
13 | </div> | ||
14 | |||
15 | <div class="form-group"> | ||
16 | <div class="btn btn-default btn-file"> | ||
17 | <span>Select the video...</span> | ||
18 | <input type="file" name="videofile" id="videofile"> | ||
19 | </div> | ||
20 | |||
21 | <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span> | ||
22 | </div> | ||
23 | |||
24 | <div class="form-group"> | ||
25 | <label for="description">Description</label> | ||
26 | <textarea | ||
27 | name="description" id="description" class="form-control" placeholder="Description..." required | ||
28 | ngControl="description" #description="ngForm" | ||
29 | > | ||
30 | </textarea> | ||
31 | <div [hidden]="description.valid || description.pristine" class="alert alert-danger"> | ||
32 | A description is required | ||
33 | </div> | ||
34 | </div> | ||
35 | |||
36 | <div id="progress" *ngIf="progressBar.max !== 0"> | ||
37 | <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar> | ||
38 | </div> | ||
39 | |||
40 | <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload"> | ||
41 | </form> | ||
diff --git a/client/app/videos/video-add/video-add.component.scss b/client/app/videos/video-add/video-add.component.scss new file mode 100644 index 000000000..01195f017 --- /dev/null +++ b/client/app/videos/video-add/video-add.component.scss | |||
@@ -0,0 +1,33 @@ | |||
1 | .btn-file { | ||
2 | position: relative; | ||
3 | overflow: hidden; | ||
4 | } | ||
5 | |||
6 | .btn-file input[type=file] { | ||
7 | position: absolute; | ||
8 | top: 0; | ||
9 | right: 0; | ||
10 | min-width: 100%; | ||
11 | min-height: 100%; | ||
12 | font-size: 100px; | ||
13 | text-align: right; | ||
14 | filter: alpha(opacity=0); | ||
15 | opacity: 0; | ||
16 | outline: none; | ||
17 | background: white; | ||
18 | cursor: inherit; | ||
19 | display: block; | ||
20 | } | ||
21 | |||
22 | .name_file { | ||
23 | display: inline-block; | ||
24 | margin-left: 10px; | ||
25 | } | ||
26 | |||
27 | .form-group { | ||
28 | margin-bottom: 10px; | ||
29 | } | ||
30 | |||
31 | #progress { | ||
32 | margin-bottom: 10px; | ||
33 | } | ||
diff --git a/client/app/videos/video-add/video-add.component.ts b/client/app/videos/video-add/video-add.component.ts new file mode 100644 index 000000000..ca583a103 --- /dev/null +++ b/client/app/videos/video-add/video-add.component.ts | |||
@@ -0,0 +1,68 @@ | |||
1 | import { Component, ElementRef, OnInit } from '@angular/core'; | ||
2 | import { Router } from '@angular/router-deprecated'; | ||
3 | |||
4 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; | ||
5 | import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; | ||
6 | |||
7 | import { AuthService, User } from '../../users/index'; | ||
8 | |||
9 | // TODO: import it with systemjs | ||
10 | declare var jQuery:any; | ||
11 | |||
12 | @Component({ | ||
13 | selector: 'my-videos-add', | ||
14 | styleUrls: [ 'client/app/videos/video-add/video-add.component.css' ], | ||
15 | templateUrl: 'client/app/videos/video-add/video-add.component.html', | ||
16 | directives: [ PROGRESSBAR_DIRECTIVES ], | ||
17 | pipes: [ BytesPipe ] | ||
18 | }) | ||
19 | |||
20 | export class VideoAddComponent implements OnInit { | ||
21 | user: User; | ||
22 | fileToUpload: any; | ||
23 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; | ||
24 | |||
25 | private _form: any; | ||
26 | |||
27 | constructor( | ||
28 | private _router: Router, private _elementRef: ElementRef, | ||
29 | private _authService: AuthService | ||
30 | ) {} | ||
31 | |||
32 | ngOnInit() { | ||
33 | this.user = User.load(); | ||
34 | jQuery(this._elementRef.nativeElement).find('#videofile').fileupload({ | ||
35 | url: '/api/v1/videos', | ||
36 | dataType: 'json', | ||
37 | singleFileUploads: true, | ||
38 | multipart: true, | ||
39 | autoupload: false, | ||
40 | |||
41 | add: (e, data) => { | ||
42 | this._form = data; | ||
43 | this.fileToUpload = data['files'][0]; | ||
44 | }, | ||
45 | |||
46 | progressall: (e, data) => { | ||
47 | this.progressBar.value = data.loaded; | ||
48 | // The server is a little bit slow to answer (has to seed the video) | ||
49 | // So we add more time to the progress bar (+10%) | ||
50 | this.progressBar.max = data.total + (0.1 * data.total); | ||
51 | }, | ||
52 | |||
53 | done: (e, data) => { | ||
54 | this.progressBar.value = this.progressBar.max; | ||
55 | console.log('Video uploaded.'); | ||
56 | |||
57 | // Print all the videos once it's finished | ||
58 | this._router.navigate(['VideosList']); | ||
59 | } | ||
60 | }); | ||
61 | } | ||
62 | |||
63 | uploadFile() { | ||
64 | this._form.headers = this._authService.getRequestHeader().toJSON(); | ||
65 | this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray(); | ||
66 | this._form.submit(); | ||
67 | } | ||
68 | } | ||