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

---
 .../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 +-
 4 files changed, 13 insertions(+), 26 deletions(-)
 delete mode 100644 client/src/app/videos/video-list/loader.component.scss

(limited to 'client/src/app/videos')

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'
 })
 
-- 
cgit v1.2.3