aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/app/videos/video-add
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-05-27 16:23:10 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-05-27 16:23:10 +0200
commit41a2aee38cf812510010da09de9bae53590ec119 (patch)
tree79d55d6ae0ef6f66ccb88890cf1ef1946dc65fb4 /client/app/videos/video-add
parent157cb9c9713e08ff70078660a32dd77ecb87eabc (diff)
downloadPeerTube-41a2aee38cf812510010da09de9bae53590ec119.tar.gz
PeerTube-41a2aee38cf812510010da09de9bae53590ec119.tar.zst
PeerTube-41a2aee38cf812510010da09de9bae53590ec119.zip
Follow the angular styleguide for the directories structure
Diffstat (limited to 'client/app/videos/video-add')
-rw-r--r--client/app/videos/video-add/index.ts1
-rw-r--r--client/app/videos/video-add/video-add.component.html41
-rw-r--r--client/app/videos/video-add/video-add.component.scss33
-rw-r--r--client/app/videos/video-add/video-add.component.ts68
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 @@
1import { Component, ElementRef, OnInit } from '@angular/core';
2import { Router } from '@angular/router-deprecated';
3
4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
5import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
6
7import { AuthService, User } from '../../users/index';
8
9// TODO: import it with systemjs
10declare 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
20export 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}