Add progress bar for video upload

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:
   navs: true
   navbar: false
   breadcrumbs: false
-  pagination: true
+  pagination: false
   pager: false
-  labels: true
+  labels: false
   badges: false
   jumbotron: false
-  thumbnails: true
+  thumbnails: false
   alerts: true
-  progress-bars: true
+  progress-bars: false
   media: true
   list-group: false
   panels: true
   wells: false
-  responsive-embed: true
+  responsive-embed: false
   close: true
 
   # 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'
 
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
 import { ModalModule } from 'ngx-bootstrap/modal'
-import { ProgressbarModule } from 'ngx-bootstrap/progressbar'
 import { InfiniteScrollModule } from 'ngx-infinite-scroll'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -34,7 +33,6 @@ import { VideoService } from './video/video.service'
 
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
-    ProgressbarModule.forRoot(),
 
     DataTableModule,
     PrimeSharedModule,
@@ -59,7 +57,6 @@ import { VideoService } from './video/video.service'
 
     BsDropdownModule,
     ModalModule,
-    ProgressbarModule,
     DataTableModule,
     PrimeSharedModule,
     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 @@
     </div>
   </div>
 
+  <p-progressBar *ngIf="isUploadingVideo" [value]="videoUploadPercents"></p-progressBar>
+
   <!-- Hidden because we need to load the component -->
   <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
     <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 @@
   }
 }
 
+p-progressBar {
+  margin-top: 50px;
+  margin-bottom: 40px;
+
+  /deep/ .ui-progressbar {
+    font-size: 15px !important;
+    color: #fff !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    border-radius: 3px !important;
+    background-color: rgba(11, 204, 41, 0.16) !important;
+
+    .ui-progressbar-value {
+      background-color: #0BCC29 !important;
+    }
+
+    .ui-progressbar-label {
+      text-align: left;
+      padding-left: 18px;
+    }
+  }
+}
+
 
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 {
 
   isUploadingVideo = false
   videoUploaded = false
-  progressPercent = 0
+  videoUploadPercents = 0
 
   error: string = null
   form: FormGroup
@@ -55,7 +55,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   ngOnInit () {
     this.buildForm()
 
-    this.serverService.videoCategoriesLoaded
+    this.serverService.videoPrivaciesLoaded
       .subscribe(
         () => {
           this.videoPrivacies = this.serverService.getVideoPrivacies()
@@ -112,7 +112,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.videoService.uploadVideo(formData).subscribe(
       event => {
         if (event.type === HttpEventType.UploadProgress) {
-          this.progressPercent = Math.round(100 * event.loaded / event.total)
+          this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
         } else if (event instanceof HttpResponse) {
           console.log('Video uploaded.')
 
@@ -122,7 +122,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
       err => {
         // Reset progress
-        this.progressPercent = 0
+        this.videoUploadPercents = 0
         this.error = err.message
       }
     )
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 @@
 import { NgModule } from '@angular/core'
+import { ProgressBarModule } from 'primeng/primeng'
 import { SharedModule } from '../../shared'
 import { VideoEditModule } from './shared/video-edit.module'
 import { VideoAddRoutingModule } from './video-add-routing.module'
@@ -8,7 +9,8 @@ import { VideoAddComponent } from './video-add.component'
   imports: [
     VideoAddRoutingModule,
     VideoEditModule,
-    SharedModule
+    SharedModule,
+    ProgressBarModule
   ],
 
   declarations: [