aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-07 17:56:59 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-07 17:56:59 +0100
commitc182778e26b8478fae9d7dd0bf0687baf7b72fd1 (patch)
tree1ab51871575ce7da97eb63346d62d2a52332d82e
parentbaeefe22caf8ae6cb58dc40754e5db14b50168bf (diff)
downloadPeerTube-c182778e26b8478fae9d7dd0bf0687baf7b72fd1.tar.gz
PeerTube-c182778e26b8478fae9d7dd0bf0687baf7b72fd1.tar.zst
PeerTube-c182778e26b8478fae9d7dd0bf0687baf7b72fd1.zip
Add progress bar for video upload
-rw-r--r--client/.bootstraprc10
-rw-r--r--client/src/app/shared/shared.module.ts3
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss23
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts8
-rw-r--r--client/src/app/videos/+video-edit/video-add.module.ts4
6 files changed, 37 insertions, 13 deletions
diff --git a/client/.bootstraprc b/client/.bootstraprc
index 6ceef4fe9..cc6768d43 100644
--- a/client/.bootstraprc
+++ b/client/.bootstraprc
@@ -84,19 +84,19 @@ styles:
84 navs: true 84 navs: true
85 navbar: false 85 navbar: false
86 breadcrumbs: false 86 breadcrumbs: false
87 pagination: true 87 pagination: false
88 pager: false 88 pager: false
89 labels: true 89 labels: false
90 badges: false 90 badges: false
91 jumbotron: false 91 jumbotron: false
92 thumbnails: true 92 thumbnails: false
93 alerts: true 93 alerts: true
94 progress-bars: true 94 progress-bars: false
95 media: true 95 media: true
96 list-group: false 96 list-group: false
97 panels: true 97 panels: true
98 wells: false 98 wells: false
99 responsive-embed: true 99 responsive-embed: false
100 close: true 100 close: true
101 101
102 # Components w/ JavaScript 102 # Components w/ JavaScript
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index bd9aee345..74f6f579d 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { RouterModule } from '@angular/router'
6 6
7import { BsDropdownModule } from 'ngx-bootstrap/dropdown' 7import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
8import { ModalModule } from 'ngx-bootstrap/modal' 8import { ModalModule } from 'ngx-bootstrap/modal'
9import { ProgressbarModule } from 'ngx-bootstrap/progressbar'
10import { InfiniteScrollModule } from 'ngx-infinite-scroll' 9import { InfiniteScrollModule } from 'ngx-infinite-scroll'
11import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes' 10import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
12import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' 11import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -34,7 +33,6 @@ import { VideoService } from './video/video.service'
34 33
35 BsDropdownModule.forRoot(), 34 BsDropdownModule.forRoot(),
36 ModalModule.forRoot(), 35 ModalModule.forRoot(),
37 ProgressbarModule.forRoot(),
38 36
39 DataTableModule, 37 DataTableModule,
40 PrimeSharedModule, 38 PrimeSharedModule,
@@ -59,7 +57,6 @@ import { VideoService } from './video/video.service'
59 57
60 BsDropdownModule, 58 BsDropdownModule,
61 ModalModule, 59 ModalModule,
62 ProgressbarModule,
63 DataTableModule, 60 DataTableModule,
64 PrimeSharedModule, 61 PrimeSharedModule,
65 InfiniteScrollModule, 62 InfiniteScrollModule,
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 78e5bb70e..6883f8280 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -28,6 +28,8 @@
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 <p-progressBar *ngIf="isUploadingVideo" [value]="videoUploadPercents"></p-progressBar>
32
31 <!-- Hidden because we need to load the component --> 33 <!-- Hidden because we need to load the component -->
32 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 34 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
33 <my-video-edit 35 <my-video-edit
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 25dfd40d2..dfdf7ff73 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -57,4 +57,27 @@
57 } 57 }
58} 58}
59 59
60p-progressBar {
61 margin-top: 50px;
62 margin-bottom: 40px;
63
64 /deep/ .ui-progressbar {
65 font-size: 15px !important;
66 color: #fff !important;
67 height: 30px !important;
68 line-height: 30px !important;
69 border-radius: 3px !important;
70 background-color: rgba(11, 204, 41, 0.16) !important;
71
72 .ui-progressbar-value {
73 background-color: #0BCC29 !important;
74 }
75
76 .ui-progressbar-label {
77 text-align: left;
78 padding-left: 18px;
79 }
80 }
81}
82
60 83
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index c2ee4ae2e..2409acfda 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -24,7 +24,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
24 24
25 isUploadingVideo = false 25 isUploadingVideo = false
26 videoUploaded = false 26 videoUploaded = false
27 progressPercent = 0 27 videoUploadPercents = 0
28 28
29 error: string = null 29 error: string = null
30 form: FormGroup 30 form: FormGroup
@@ -55,7 +55,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
55 ngOnInit () { 55 ngOnInit () {
56 this.buildForm() 56 this.buildForm()
57 57
58 this.serverService.videoCategoriesLoaded 58 this.serverService.videoPrivaciesLoaded
59 .subscribe( 59 .subscribe(
60 () => { 60 () => {
61 this.videoPrivacies = this.serverService.getVideoPrivacies() 61 this.videoPrivacies = this.serverService.getVideoPrivacies()
@@ -112,7 +112,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
112 this.videoService.uploadVideo(formData).subscribe( 112 this.videoService.uploadVideo(formData).subscribe(
113 event => { 113 event => {
114 if (event.type === HttpEventType.UploadProgress) { 114 if (event.type === HttpEventType.UploadProgress) {
115 this.progressPercent = Math.round(100 * event.loaded / event.total) 115 this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
116 } else if (event instanceof HttpResponse) { 116 } else if (event instanceof HttpResponse) {
117 console.log('Video uploaded.') 117 console.log('Video uploaded.')
118 118
@@ -122,7 +122,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
122 122
123 err => { 123 err => {
124 // Reset progress 124 // Reset progress
125 this.progressPercent = 0 125 this.videoUploadPercents = 0
126 this.error = err.message 126 this.error = err.message
127 } 127 }
128 ) 128 )
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
index f58d12dac..1efecdf4d 100644
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -1,4 +1,5 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { ProgressBarModule } from 'primeng/primeng'
2import { SharedModule } from '../../shared' 3import { SharedModule } from '../../shared'
3import { VideoEditModule } from './shared/video-edit.module' 4import { VideoEditModule } from './shared/video-edit.module'
4import { VideoAddRoutingModule } from './video-add-routing.module' 5import { VideoAddRoutingModule } from './video-add-routing.module'
@@ -8,7 +9,8 @@ import { VideoAddComponent } from './video-add.component'
8 imports: [ 9 imports: [
9 VideoAddRoutingModule, 10 VideoAddRoutingModule,
10 VideoEditModule, 11 VideoEditModule,
11 SharedModule 12 SharedModule,
13 ProgressBarModule
12 ], 14 ],
13 15
14 declarations: [ 16 declarations: [