aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-16 17:24:47 +0100
committerChocobozzz <me@florianbigard.com>2018-02-16 17:24:47 +0100
commit68e24d727969a73a13e3c29b4d3bcfe50c3c52be (patch)
tree9908a5b6f26dfc0fd80aa123e843ea11f39c7501 /client/src/app/videos
parent6de36768980ef6063b8fcd730b59fa685dd2b99c (diff)
downloadPeerTube-68e24d727969a73a13e3c29b4d3bcfe50c3c52be.tar.gz
PeerTube-68e24d727969a73a13e3c29b4d3bcfe50c3c52be.tar.zst
PeerTube-68e24d727969a73a13e3c29b4d3bcfe50c3c52be.zip
Add loading bar when updating a video
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts2
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html5
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts11
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts10
5 files changed, 25 insertions, 5 deletions
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 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { VideoImageComponent } from '@app/videos/+video-edit/shared/video-image.component' 2import { VideoImageComponent } from './video-image.component'
3import { TabsModule } from 'ngx-bootstrap/tabs' 3import { TabsModule } from 'ngx-bootstrap/tabs'
4import { TagInputModule } from 'ngx-chips' 4import { TagInputModule } from 'ngx-chips'
5import { SharedModule } from '../../../shared' 5import { 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 @@
50 <div class="submit-container"> 50 <div class="submit-container">
51 <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div> 51 <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
52 52
53 <div class="submit-button" (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || videoUploaded !== true }"> 53 <div class="submit-button"
54 (click)="updateSecondStep()"
55 [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true || videoUploaded !== true }"
56 >
54 <span class="icon icon-validate"></span> 57 <span class="icon icon-validate"></span>
55 <input type="button" value="Publish" /> 58 <input type="button" value="Publish" />
56 </div> 59 </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'
4import { Router } from '@angular/router' 4import { Router } from '@angular/router'
5import { UserService } from '@app/shared' 5import { UserService } from '@app/shared'
6import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' 6import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
7import { LoadingBarService } from '@ngx-loading-bar/core'
7import { NotificationsService } from 'angular2-notifications' 8import { NotificationsService } from 'angular2-notifications'
8import { BytesPipe } from 'ngx-pipes' 9import { BytesPipe } from 'ngx-pipes'
9import { Subscription } from 'rxjs/Subscription' 10import { Subscription } from 'rxjs/Subscription'
@@ -28,6 +29,7 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
28 @ViewChild('videofileInput') videofileInput 29 @ViewChild('videofileInput') videofileInput
29 30
30 isUploadingVideo = false 31 isUploadingVideo = false
32 isUpdatingVideo = false
31 videoUploaded = false 33 videoUploaded = false
32 videoUploadObservable: Subscription = null 34 videoUploadObservable: Subscription = null
33 videoUploadPercents = 0 35 videoUploadPercents = 0
@@ -53,7 +55,8 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
53 private authService: AuthService, 55 private authService: AuthService,
54 private userService: UserService, 56 private userService: UserService,
55 private serverService: ServerService, 57 private serverService: ServerService,
56 private videoService: VideoService 58 private videoService: VideoService,
59 private loadingBar: LoadingBarService
57 ) { 60 ) {
58 super() 61 super()
59 } 62 }
@@ -203,15 +206,21 @@ export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy
203 video.id = this.videoUploadedIds.id 206 video.id = this.videoUploadedIds.id
204 video.uuid = this.videoUploadedIds.uuid 207 video.uuid = this.videoUploadedIds.uuid
205 208
209 this.isUpdatingVideo = true
210 this.loadingBar.start()
206 this.videoService.updateVideo(video) 211 this.videoService.updateVideo(video)
207 .subscribe( 212 .subscribe(
208 () => { 213 () => {
214 this.isUpdatingVideo = false
209 this.isUploadingVideo = false 215 this.isUploadingVideo = false
216 this.loadingBar.complete()
217
210 this.notificationsService.success('Success', 'Video published.') 218 this.notificationsService.success('Success', 'Video published.')
211 this.router.navigate([ '/videos/watch', video.uuid ]) 219 this.router.navigate([ '/videos/watch', video.uuid ])
212 }, 220 },
213 221
214 err => { 222 err => {
223 this.isUpdatingVideo = false
215 this.notificationsService.error('Error', err.message) 224 this.notificationsService.error('Error', err.message)
216 console.error(err) 225 console.error(err)
217 } 226 }
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 @@
11 ></my-video-edit> 11 ></my-video-edit>
12 12
13 <div class="submit-container"> 13 <div class="submit-container">
14 <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid }"> 14 <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }">
15 <span class="icon icon-validate"></span> 15 <span class="icon icon-validate"></span>
16 <input type="button" value="Update" /> 16 <input type="button" value="Update" />
17 </div> 17 </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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms' 2import { FormBuilder, FormGroup } from '@angular/forms'
3import { ActivatedRoute, Router } from '@angular/router' 3import { ActivatedRoute, Router } from '@angular/router'
4import { LoadingBarService } from '@ngx-loading-bar/core'
4import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
5import 'rxjs/add/observable/forkJoin' 6import 'rxjs/add/observable/forkJoin'
6import { VideoPrivacy } from '../../../../../shared/models/videos' 7import { VideoPrivacy } from '../../../../../shared/models/videos'
@@ -21,6 +22,7 @@ import { VideoService } from '../../shared/video/video.service'
21export class VideoUpdateComponent extends FormReactive implements OnInit { 22export class VideoUpdateComponent extends FormReactive implements OnInit {
22 video: VideoEdit 23 video: VideoEdit
23 24
25 isUpdatingVideo = false
24 form: FormGroup 26 form: FormGroup
25 formErrors: { [ id: string ]: string } = {} 27 formErrors: { [ id: string ]: string } = {}
26 validationMessages: ValidatorMessage = {} 28 validationMessages: ValidatorMessage = {}
@@ -34,7 +36,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
34 private notificationsService: NotificationsService, 36 private notificationsService: NotificationsService,
35 private serverService: ServerService, 37 private serverService: ServerService,
36 private videoService: VideoService, 38 private videoService: VideoService,
37 private authService: AuthService 39 private authService: AuthService,
40 private loadingBar: LoadingBarService
38 ) { 41 ) {
39 super() 42 super()
40 } 43 }
@@ -98,14 +101,19 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
98 101
99 this.video.patch(this.form.value) 102 this.video.patch(this.form.value)
100 103
104 this.loadingBar.start()
105 this.isUpdatingVideo = true
101 this.videoService.updateVideo(this.video) 106 this.videoService.updateVideo(this.video)
102 .subscribe( 107 .subscribe(
103 () => { 108 () => {
109 this.isUpdatingVideo = false
110 this.loadingBar.complete()
104 this.notificationsService.success('Success', 'Video updated.') 111 this.notificationsService.success('Success', 'Video updated.')
105 this.router.navigate([ '/videos/watch', this.video.uuid ]) 112 this.router.navigate([ '/videos/watch', this.video.uuid ])
106 }, 113 },
107 114
108 err => { 115 err => {
116 this.isUpdatingVideo = false
109 this.notificationsService.error('Error', err.message) 117 this.notificationsService.error('Error', err.message)
110 console.error(err) 118 console.error(err)
111 } 119 }