From 68e24d727969a73a13e3c29b4d3bcfe50c3c52be Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 16 Feb 2018 17:24:47 +0100 Subject: [PATCH] Add loading bar when updating a video --- client/package.json | 1 + client/src/app/core/core.module.ts | 11 ++++++++--- client/src/app/shared/shared.module.ts | 5 ----- .../videos/+video-edit/shared/video-edit.module.ts | 2 +- .../app/videos/+video-edit/video-add.component.html | 5 ++++- .../src/app/videos/+video-edit/video-add.component.ts | 11 ++++++++++- .../videos/+video-edit/video-update.component.html | 2 +- .../app/videos/+video-edit/video-update.component.ts | 10 +++++++++- client/yarn.lock | 2 +- 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 @@
Publish will be available when upload is finished
-
+
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 @@ >
-
+
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: -- 2.41.0