Use progress bar from bootstrap for the upload

diff --git a/client/angular/videos/components/add/videos-add.component.html b/client/angular/videos/components/add/videos-add.component.html
index 7336ad0c05886563bab688cf3b75c584749c76e4..80d229cb8863141f03115ba5c83a370c36daf39f 100644 (file)
--- a/client/angular/videos/components/add/videos-add.component.html
+++ b/client/angular/videos/components/add/videos-add.component.html
@@ -34,7 +34,7 @@
   </div>
 
   <div id="progress" *ngIf="progressBar.max !== 0">
-    <progress [value]="progressBar.value" [max]="progressBar.max"></progress>
+    <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
   </div>
 
   <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">

diff --git a/client/angular/videos/components/add/videos-add.component.ts b/client/angular/videos/components/add/videos-add.component.ts
index f801cecbb1075ced77aaa5ba1de6e731d4d977f2..f1652be19cc492b1f084abc1cf8fd2f886881661 100644 (file)
--- a/client/angular/videos/components/add/videos-add.component.ts
+++ b/client/angular/videos/components/add/videos-add.component.ts
@@ -1,6 +1,9 @@
 import { Component, ElementRef, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 
+import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
+import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
+
 import { AuthService } from '../../../users/services/auth.service';
 import { User } from '../../../users/models/user';
 
@@ -10,7 +13,9 @@ declare var jQuery:any;
 @Component({
   selector: 'my-videos-add',
   styleUrls: [ 'app/angular/videos/components/add/videos-add.component.css' ],
-  templateUrl: 'app/angular/videos/components/add/videos-add.component.html'
+  templateUrl: 'app/angular/videos/components/add/videos-add.component.html',
+  directives: [ PROGRESSBAR_DIRECTIVES ],
+  pipes: [ BytesPipe ]
 })
 
 export class VideosAddComponent implements OnInit {

diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index 3eb005d07b4debd23ca197fa8a646729703fe10f..6e212e8bc8afa72ec69fa9ba977d434c4ec3a6fd 100644 (file)
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, ElementRef } from '@angular/core';
 import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/router-deprecated';
+
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 
 // TODO import it with systemjs