Add progress bar for video upload

diff --git a/client/.bootstraprc b/client/.bootstraprc
index 6ceef4fe98db37e33a9dcdcd7b79a9fa760c8fec..cc6768d4318d496638321948ebacefad4ce03bd6 100644 (file)
--- 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 bd9aee345c860795a36eed4d35b0c61fe05e3a3c..74f6f579dcbf12b891465edac1953944984e7c08 100644 (file)
--- 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 78e5bb70e77c937298744eb9bbf67f3b10535130..6883f828023c113dd74b1e49cd8dad06bd2f6228 100644 (file)
--- 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 25dfd40d2a32b58f1cf49cc783d26f0463ad5f07..dfdf7ff73d25029125d128d96155939da9bb84af 100644 (file)
--- 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 c2ee4ae2e41f8de8eb44069a3bc2f10ca301ab70..2409acfda38c3d52fe8078a1dbbc0b78198d1bd8 100644 (file)
--- 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 f58d12dac6e09fea977917024ad53b04d1a52190..1efecdf4dfb29d01c0e07bde34c3fbe250da9079 100644 (file)
--- 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: [