diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-06-03 22:08:03 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-06-03 22:08:03 +0200 |
commit | 4a6995be18b15de1834a39c8921a0e4109671bb6 (patch) | |
tree | b659661cea33687fcc6bd8fc2251cb7a15ab9f9d /client/app/videos/video-add | |
parent | 468892541175f9662f8b1b977e819dc1a496f282 (diff) | |
download | PeerTube-4a6995be18b15de1834a39c8921a0e4109671bb6.tar.gz PeerTube-4a6995be18b15de1834a39c8921a0e4109671bb6.tar.zst PeerTube-4a6995be18b15de1834a39c8921a0e4109671bb6.zip |
First draft to use webpack instead of systemjs
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 | 69 |
4 files changed, 0 insertions, 144 deletions
diff --git a/client/app/videos/video-add/index.ts b/client/app/videos/video-add/index.ts deleted file mode 100644 index 79488e851..000000000 --- a/client/app/videos/video-add/index.ts +++ /dev/null | |||
@@ -1 +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 deleted file mode 100644 index 80d229cb8..000000000 --- a/client/app/videos/video-add/video-add.component.html +++ /dev/null | |||
@@ -1,41 +0,0 @@ | |||
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 deleted file mode 100644 index 01195f017..000000000 --- a/client/app/videos/video-add/video-add.component.scss +++ /dev/null | |||
@@ -1,33 +0,0 @@ | |||
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 deleted file mode 100644 index e17b1b0f6..000000000 --- a/client/app/videos/video-add/video-add.component.ts +++ /dev/null | |||
@@ -1,69 +0,0 @@ | |||
1 | /// <reference path="../../../typings/globals/jquery/index.d.ts" /> | ||
2 | /// <reference path="../../../typings/globals/jquery.fileupload/index.d.ts" /> | ||
3 | |||
4 | import { Component, ElementRef, OnInit } from '@angular/core'; | ||
5 | import { Router } from '@angular/router-deprecated'; | ||
6 | |||
7 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; | ||
8 | import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; | ||
9 | |||
10 | import { AuthService, User } from '../../shared/index'; | ||
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 | fileToUpload: any; | ||
22 | progressBar: { value: number; max: number; } = { value: 0, max: 0 }; | ||
23 | user: User; | ||
24 | |||
25 | private form: any; | ||
26 | |||
27 | constructor( | ||
28 | private authService: AuthService, | ||
29 | private elementRef: ElementRef, | ||
30 | private router: Router | ||
31 | ) {} | ||
32 | |||
33 | ngOnInit() { | ||
34 | this.user = User.load(); | ||
35 | jQuery(this.elementRef.nativeElement).find('#videofile').fileupload({ | ||
36 | url: '/api/v1/videos', | ||
37 | dataType: 'json', | ||
38 | singleFileUploads: true, | ||
39 | multipart: true, | ||
40 | autoUpload: false, | ||
41 | |||
42 | add: (e, data) => { | ||
43 | this.form = data; | ||
44 | this.fileToUpload = data['files'][0]; | ||
45 | }, | ||
46 | |||
47 | progressall: (e, data) => { | ||
48 | this.progressBar.value = data.loaded; | ||
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); | ||
52 | }, | ||
53 | |||
54 | done: (e, data) => { | ||
55 | this.progressBar.value = this.progressBar.max; | ||
56 | console.log('Video uploaded.'); | ||
57 | |||
58 | // Print all the videos once it's finished | ||
59 | this.router.navigate(['VideosList']); | ||
60 | } | ||
61 | }); | ||
62 | } | ||
63 | |||
64 | uploadFile() { | ||
65 | this.form.formData = jQuery(this.elementRef.nativeElement).find('form').serializeArray(); | ||
66 | this.form.headers = this.authService.getRequestHeader().toJSON(); | ||
67 | this.form.submit(); | ||
68 | } | ||
69 | } | ||