Add loading bar when updating a video

9 files changed, 35 insertions, 14 deletions

diff --git a/client/package.json b/client/package.json
index b3de9a19a..6ef4d7050 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "@angular/router": "~5.2.2",
     "@angular/service-worker": "^5.2.4",
     "@angularclass/hmr": "^2.1.3",
+    "@ngx-loading-bar/core": "^1.1.1",
     "@ngx-loading-bar/http-client": "^1.0.0-rc.1",
     "@ngx-meta/core": "^5.0.0",
     "@types/core-js": "^0.9.28",
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index a58fe6ebe..93c9741a7 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -1,8 +1,9 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { HttpModule } from '@angular/http'
 import { RouterModule } from '@angular/router'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { LoadingBarModule } from '@ngx-loading-bar/core'
+import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 
 import { SimpleNotificationsModule } from 'angular2-notifications'
 import { ModalModule } from 'ngx-bootstrap/modal'
@@ -16,12 +17,14 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 @NgModule({
   imports: [
     CommonModule,
-    HttpModule,
     RouterModule,
     BrowserAnimationsModule,
 
     ModalModule,
-    SimpleNotificationsModule.forRoot()
+    SimpleNotificationsModule.forRoot(),
+
+    LoadingBarHttpClientModule,
+    LoadingBarModule.forRoot()
   ],
 
   declarations: [
@@ -30,6 +33,8 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 
   exports: [
     SimpleNotificationsModule,
+    LoadingBarHttpClientModule,
+    LoadingBarModule,
 
     ConfirmComponent
   ],
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 2a9426479..b1dfdd747 100644
--- 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 { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { MarkdownService } from '@app/videos/shared'
-import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
 import { ModalModule } from 'ngx-bootstrap/modal'
@@ -36,8 +35,6 @@ import { VideoService } from './video/video.service'
     RouterModule,
     HttpClientModule,
 
-    LoadingBarHttpClientModule,
-
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
     TabsModule.forRoot(),
@@ -65,8 +62,6 @@ import { VideoService } from './video/video.service'
     RouterModule,
     HttpClientModule,
 
-    LoadingBarHttpClientModule,
-
     BsDropdownModule,
     ModalModule,
     TabsModule,
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 1b82281bf..29beb2230 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { VideoImageComponent } from '@app/videos/+video-edit/shared/video-image.component'
+import { VideoImageComponent } from './video-image.component'
 import { TabsModule } from 'ngx-bootstrap/tabs'
 import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared'
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 a3a41aa12..6dcf5bf75 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -50,7 +50,10 @@
     <div class="submit-container">
       <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
 
-      <div class="submit-button" (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || videoUploaded !== true }">
+      <div class="submit-button"
+         (click)="updateSecondStep()"
+         [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true || videoUploaded !== true }"
+      >
         <span class="icon icon-validate"></span>
         <input type="button" value="Publish" />
       </div>
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 3a9d932b8..75d608162 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { UserService } from '@app/shared'
 import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
+import { LoadingBarService } from '@ngx-loading-bar/core'
 import { NotificationsService } from 'angular2-notifications'
 import { BytesPipe } from 'ngx-pipes'
 import { Subscription } from 'rxjs/Subscription'
@@ -28,6 +29,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
   @ViewChild('videofileInput') videofileInput
 
   isUploadingVideo = false
+  isUpdatingVideo = false
   videoUploaded = false
   videoUploadObservable: Subscription = null
   videoUploadPercents = 0
@@ -53,7 +55,8 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
     private authService: AuthService,
     private userService: UserService,
     private serverService: ServerService,
-    private videoService: VideoService
+    private videoService: VideoService,
+    private loadingBar: LoadingBarService
   ) {
     super()
   }
@@ -203,15 +206,21 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
     video.id = this.videoUploadedIds.id
     video.uuid = this.videoUploadedIds.uuid
 
+    this.isUpdatingVideo = true
+    this.loadingBar.start()
     this.videoService.updateVideo(video)
       .subscribe(
         () => {
+          this.isUpdatingVideo = false
           this.isUploadingVideo = false
+          this.loadingBar.complete()
+
           this.notificationsService.success('Success', 'Video published.')
           this.router.navigate([ '/videos/watch', video.uuid ])
         },
 
         err => {
+          this.isUpdatingVideo = false
           this.notificationsService.error('Error', err.message)
           console.error(err)
         }
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 158138bb3..a1b4707be 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -11,7 +11,7 @@
     ></my-video-edit>
 
     <div class="submit-container">
-      <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid }">
+      <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
         <span class="icon icon-validate"></span>
         <input type="button" value="Update" />
       </div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index ad6452835..de34555ab 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
+import { LoadingBarService } from '@ngx-loading-bar/core'
 import { NotificationsService } from 'angular2-notifications'
 import 'rxjs/add/observable/forkJoin'
 import { VideoPrivacy } from '../../../../../shared/models/videos'
@@ -21,6 +22,7 @@ import { VideoService } from '../../shared/video/video.service'
 export class VideoUpdateComponent extends FormReactive implements OnInit {
   video: VideoEdit
 
+  isUpdatingVideo = false
   form: FormGroup
   formErrors: { [ id: string ]: string } = {}
   validationMessages: ValidatorMessage = {}
@@ -34,7 +36,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     private notificationsService: NotificationsService,
     private serverService: ServerService,
     private videoService: VideoService,
-    private authService: AuthService
+    private authService: AuthService,
+    private loadingBar: LoadingBarService
   ) {
     super()
   }
@@ -98,14 +101,19 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
 
     this.video.patch(this.form.value)
 
+    this.loadingBar.start()
+    this.isUpdatingVideo = true
     this.videoService.updateVideo(this.video)
                      .subscribe(
                        () => {
+                         this.isUpdatingVideo = false
+                         this.loadingBar.complete()
                          this.notificationsService.success('Success', 'Video updated.')
                          this.router.navigate([ '/videos/watch', this.video.uuid ])
                        },
 
                        err => {
+                         this.isUpdatingVideo = false
                          this.notificationsService.error('Error', err.message)
                          console.error(err)
                        }
diff --git a/client/yarn.lock b/client/yarn.lock
index dd0a6bb9c..a27aacfcb 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -184,7 +184,7 @@
     tree-kill "^1.0.0"
     webpack-sources "^1.1.0"
 
-"@ngx-loading-bar/core@1.1.1":
+"@ngx-loading-bar/core@1.1.1", "@ngx-loading-bar/core@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@ngx-loading-bar/core/-/core-1.1.1.tgz#bcfc8e968f121ca431b4926dfd3465739f7076cd"
   dependencies: