aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorDimitri Gilbert <dimitri.gilbert@gmail.com>2018-01-23 15:01:38 +0100
committerChocobozzz <me@florianbigard.com>2018-01-23 15:01:38 +0100
commit8c4890cbfe3b5c742ed8756d7a0fd2f533534c6a (patch)
tree0c45c4c7aa183d12636399e9d0827ffe68c9afbb /client/src/app/videos
parentf8b8c36b2a92bfee435747ab5a0283924be76281 (diff)
downloadPeerTube-8c4890cbfe3b5c742ed8756d7a0fd2f533534c6a.tar.gz
PeerTube-8c4890cbfe3b5c742ed8756d7a0fd2f533534c6a.tar.zst
PeerTube-8c4890cbfe3b5c742ed8756d7a0fd2f533534c6a.zip
Issue #196 : Allow to cancel an upload (#221)
* issue #196 * fixed missattribution of var * fix styling issue * renamed videoUpload to videoUploadObservable * added created path to gitignore * changed uploadCancel method name to cancelUpload
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html11
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts16
2 files changed, 23 insertions, 4 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 34291c6c6..4e9b78cf2 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -32,10 +32,15 @@
32 </div> 32 </div>
33 </div> 33 </div>
34 34
35 <p-progressBar 35 <div
36 *ngIf="isUploadingVideo" [value]="videoUploadPercents" 36 *ngIf="isUploadingVideo"
37 >
38 <p-progressBar
39 [value]="videoUploadPercents"
37 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }" 40 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
38 ></p-progressBar> 41 ></p-progressBar>
42 <input type="button" value="Cancel" (click)="cancelUpload()" />
43 </div>
39 44
40 <!-- Hidden because we need to load the component --> 45 <!-- Hidden because we need to load the component -->
41 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 46 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
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 d0d17fa86..6e0830ab7 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -27,6 +27,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
27 27
28 isUploadingVideo = false 28 isUploadingVideo = false
29 videoUploaded = false 29 videoUploaded = false
30 videoUploadObservable = null
30 videoUploadPercents = 0 31 videoUploadPercents = 0
31 videoUploadedIds = { 32 videoUploadedIds = {
32 id: 0, 33 id: 0,
@@ -93,6 +94,16 @@ export class VideoAddComponent extends FormReactive implements OnInit {
93 return this.form.valid 94 return this.form.valid
94 } 95 }
95 96
97 cancelUpload () {
98 if (this.videoUploadObservable !== null) {
99 this.videoUploadObservable.unsubscribe()
100 this.isUploadingVideo = false
101 this.videoUploadPercents = 0
102 this.notificationsService.error('Error', 'Upload cancelled')
103 this.videoUploadObservable = null
104 }
105 }
106
96 uploadFirstStep () { 107 uploadFirstStep () {
97 const videofile = this.videofileInput.nativeElement.files[0] 108 const videofile = this.videofileInput.nativeElement.files[0]
98 if (!videofile) return 109 if (!videofile) return
@@ -132,7 +143,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
132 channelId 143 channelId
133 }) 144 })
134 145
135 this.videoService.uploadVideo(formData).subscribe( 146 this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
136 event => { 147 event => {
137 if (event.type === HttpEventType.UploadProgress) { 148 if (event.type === HttpEventType.UploadProgress) {
138 this.videoUploadPercents = Math.round(100 * event.loaded / event.total) 149 this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
@@ -142,6 +153,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
142 this.videoUploaded = true 153 this.videoUploaded = true
143 154
144 this.videoUploadedIds = event.body.video 155 this.videoUploadedIds = event.body.video
156
157 this.videoUploadObservable = null
145 } 158 }
146 }, 159 },
147 160
@@ -149,6 +162,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
149 // Reset progress 162 // Reset progress
150 this.isUploadingVideo = false 163 this.isUploadingVideo = false
151 this.videoUploadPercents = 0 164 this.videoUploadPercents = 0
165 this.videoUploadObservable = null
152 this.notificationsService.error('Error', err.message) 166 this.notificationsService.error('Error', err.message)
153 } 167 }
154 ) 168 )