From 315cc0cc1871ab2a6d6c1bb61cf7b9f10511c3a9 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Thu, 14 Sep 2017 23:03:43 +0200
Subject: Add info when server is processing a video at upload

---
 .../src/app/shared/rest/rest-extractor.service.ts  |  4 +---
 .../app/videos/video-edit/video-add.component.html |  7 ++++++-
 .../app/videos/video-edit/video-add.component.ts   |  8 ++++++--
 .../app/videos/video-list/loader.component.scss    | 22 ---------------------
 .../src/app/videos/video-list/loader.component.ts  |  2 +-
 client/src/sass/application.scss                   | 23 ++++++++++++++++++++++
 6 files changed, 37 insertions(+), 29 deletions(-)
 delete mode 100644 client/src/app/videos/video-list/loader.component.scss

(limited to 'client')

diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts
index 1f6222da8..62c600d25 100644
--- a/client/src/app/shared/rest/rest-extractor.service.ts
+++ b/client/src/app/shared/rest/rest-extractor.service.ts
@@ -40,15 +40,13 @@ export class RestExtractor {
   handleError (err: HttpErrorResponse) {
     let errorMessage
 
-    console.log(err)
-
     if (err.error instanceof Error) {
       // A client-side or network error occurred. Handle it accordingly.
       errorMessage = err.error.message
       console.error('An error occurred:', errorMessage)
     } else if (err.status !== undefined) {
       const body = err.error
-      errorMessage = body.error
+      errorMessage = body ? body.error : 'Unknown error.'
       console.error(`Backend returned code ${err.status}, body was: ${errorMessage}`)
     } else {
       errorMessage = err
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 cf8fc2b80..698152ff9 100644
--- a/client/src/app/videos/video-edit/video-add.component.html
+++ b/client/src/app/videos/video-edit/video-add.component.html
@@ -102,7 +102,12 @@
       </div>
 
       <div class="progress">
-        <progressbar [value]="progressPercent" max="100"></progressbar>
+        <progressbar [value]="progressPercent" max="100">
+          <ng-template [ngIf]="progressPercent === 100">
+            <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+            Server is processing the video
+          </ng-template>
+        </progressbar>
       </div>
 
       <div class="form-group">
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 537ef9bc3..21311b184 100644
--- a/client/src/app/videos/video-edit/video-add.component.ts
+++ b/client/src/app/videos/video-edit/video-add.component.ts
@@ -151,11 +151,15 @@ export class VideoAddComponent extends FormReactive implements OnInit {
           this.notificationsService.success('Success', 'Video uploaded.')
 
           // Display all the videos once it's finished
-          this.router.navigate([ '/videos/list '])
+          this.router.navigate([ '/videos/list' ])
         }
       },
 
-      err => this.error = err.message
+      err => {
+        // Reset progress
+        this.progressPercent = 0
+        this.error = err.message
+      }
     )
   }
 }
diff --git a/client/src/app/videos/video-list/loader.component.scss b/client/src/app/videos/video-list/loader.component.scss
deleted file mode 100644
index 44cf1f9da..000000000
--- a/client/src/app/videos/video-list/loader.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
-.glyphicon-refresh-animate {
-    -animation: spin .7s infinite linear;
-    -ms-animation: spin .7s infinite linear;
-    -webkit-animation: spinw .7s infinite linear;
-    -moz-animation: spinm .7s infinite linear;
-}
-
-@keyframes spin {
-    from { transform: scale(1) rotate(0deg);}
-    to { transform: scale(1) rotate(360deg);}
-}
-
-@-webkit-keyframes spinw {
-    from { -webkit-transform: rotate(0deg);}
-    to { -webkit-transform: rotate(360deg);}
-}
-
-@-moz-keyframes spinm {
-    from { -moz-transform: rotate(0deg);}
-    to { -moz-transform: rotate(360deg);}
-}
diff --git a/client/src/app/videos/video-list/loader.component.ts b/client/src/app/videos/video-list/loader.component.ts
index e5780e0fa..f37d70c85 100644
--- a/client/src/app/videos/video-list/loader.component.ts
+++ b/client/src/app/videos/video-list/loader.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ './loader.component.scss' ],
+  styleUrls: [ ],
   templateUrl: './loader.component.html'
 })
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index cd573841d..8e2666944 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -47,6 +47,29 @@ input.readonly {
   }
 }
 
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+  -animation: spin .7s infinite linear;
+  -ms-animation: spin .7s infinite linear;
+  -webkit-animation: spinw .7s infinite linear;
+  -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+  from { transform: scale(1) rotate(0deg);}
+  to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+  from { -webkit-transform: rotate(0deg);}
+  to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+  from { -moz-transform: rotate(0deg);}
+  to { -moz-transform: rotate(360deg);}
+}
+
 /* ngprime data table customizations */
 p-datatable {
   .action-cell {
-- 
cgit v1.2.3