Add info when server is processing a video at upload

2 files changed, 12 insertions, 3 deletions

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
+      }
     )
   }
 }