aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-add
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-06-03 22:08:03 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-06-03 22:08:03 +0200
commit4a6995be18b15de1834a39c8921a0e4109671bb6 (patch)
treeb659661cea33687fcc6bd8fc2251cb7a15ab9f9d /client/src/app/videos/video-add
parent468892541175f9662f8b1b977e819dc1a496f282 (diff)
downloadPeerTube-4a6995be18b15de1834a39c8921a0e4109671bb6.tar.gz
PeerTube-4a6995be18b15de1834a39c8921a0e4109671bb6.tar.zst
PeerTube-4a6995be18b15de1834a39c8921a0e4109671bb6.zip
First draft to use webpack instead of systemjs
Diffstat (limited to 'client/src/app/videos/video-add')
-rw-r--r--client/src/app/videos/video-add/index.ts1
-rw-r--r--client/src/app/videos/video-add/video-add.component.html41
-rw-r--r--client/src/app/videos/video-add/video-add.component.scss33
-rw-r--r--client/src/app/videos/video-add/video-add.component.ts69
4 files changed, 144 insertions, 0 deletions
diff --git a/client/src/app/videos/video-add/index.ts b/client/src/app/videos/video-add/index.ts
new file mode 100644
index 000000000..79488e851
--- /dev/null
+++ b/client/src/app/videos/video-add/index.ts
@@ -0,0 +1 @@
export * from './video-add.component';
diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
new file mode 100644
index 000000000..80d229cb8
--- /dev/null
+++ b/client/src/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/src/app/videos/video-add/video-add.component.scss b/client/src/app/videos/video-add/video-add.component.scss
new file mode 100644
index 000000000..01195f017
--- /dev/null
+++ b/client/src/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/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
new file mode 100644
index 000000000..8df4f951b
--- /dev/null
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -0,0 +1,69 @@
1/// <reference path="../../../../typings/globals/jquery/index.d.ts" />
2/// <reference path="../../../../typings/globals/jquery.fileupload/index.d.ts" />
3
4import { Component, ElementRef, OnInit } from '@angular/core';
5import { Router } from '@angular/router-deprecated';
6
7import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
8import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
9
10import { AuthService, User } from '../../shared';
11
12@Component({
13 selector: 'my-videos-add',
14 styles: [ require('./video-add.component.scss') ],
15 template: require('./video-add.component.html'),
16 directives: [ PROGRESSBAR_DIRECTIVES ],
17 pipes: [ BytesPipe ]
18})
19
20export 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}