aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-edit
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-11-16 10:05:25 +0100
committerChocobozzz <me@florianbigard.com>2018-11-16 10:05:25 +0100
commit7373507fa830b0f18cb4cd95dfd923b1600e501d (patch)
tree112fc5b4bc0cabd599a39452962cefb9733f97ec /client/src/app/videos/+video-edit
parentfe05c3acbd48c72ac7e503bebde91830121a0bf1 (diff)
downloadPeerTube-7373507fa830b0f18cb4cd95dfd923b1600e501d.tar.gz
PeerTube-7373507fa830b0f18cb4cd95dfd923b1600e501d.tar.zst
PeerTube-7373507fa830b0f18cb4cd95dfd923b1600e501d.zip
Improve video upload error handling
Diffstat (limited to 'client/src/app/videos/+video-edit')
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html7
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss8
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts9
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html8
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss8
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts9
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-send.ts1
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.html9
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss10
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts9
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html8
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts5
12 files changed, 74 insertions, 17 deletions
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
index a933a64f0..11a81ad66 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -45,7 +45,12 @@
45 </div> 45 </div>
46</div> 46</div>
47 47
48<div *ngIf="hasImportedVideo" class="alert alert-info" i18n> 48<div *ngIf="error" class="alert alert-danger">
49 <div i18n>Sorry, but something went wrong</div>
50 {{ error }}
51</div>
52
53<div *ngIf="hasImportedVideo && !error" class="alert alert-info" i18n>
49 Congratulations, the video will be imported with BitTorrent! You can already add information about this video. 54 Congratulations, the video will be imported with BitTorrent! You can already add information about this video.
50</div> 55</div>
51 56
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 262b0b68e..00626cd7b 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -7,6 +7,14 @@ $width-size: 190px;
7 @include peertube-select-container($width-size); 7 @include peertube-select-container($width-size);
8} 8}
9 9
10.alert.alert-danger {
11 text-align: center;
12
13 & > div {
14 font-weight: $font-semibold;
15 }
16}
17
10.import-video-torrent { 18.import-video-torrent {
11 display: flex; 19 display: flex;
12 flex-direction: column; 20 flex-direction: column;
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index e13c06ce9..13776ae36 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -12,6 +12,7 @@ import { VideoEdit } from '@app/shared/video/video-edit.model'
12import { FormValidatorService } from '@app/shared' 12import { FormValidatorService } from '@app/shared'
13import { VideoCaptionService } from '@app/shared/video-caption' 13import { VideoCaptionService } from '@app/shared/video-caption'
14import { VideoImportService } from '@app/shared/video-import' 14import { VideoImportService } from '@app/shared/video-import'
15import { scrollToTop } from '@app/shared/misc/utils'
15 16
16@Component({ 17@Component({
17 selector: 'my-video-import-torrent', 18 selector: 'my-video-import-torrent',
@@ -23,9 +24,9 @@ import { VideoImportService } from '@app/shared/video-import'
23}) 24})
24export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate { 25export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
25 @Output() firstStepDone = new EventEmitter<string>() 26 @Output() firstStepDone = new EventEmitter<string>()
27 @Output() firstStepError = new EventEmitter<void>()
26 @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement> 28 @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
27 29
28 videoFileName: string
29 magnetUri = '' 30 magnetUri = ''
30 31
31 isImportingVideo = false 32 isImportingVideo = false
@@ -33,6 +34,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
33 isUpdatingVideo = false 34 isUpdatingVideo = false
34 35
35 video: VideoEdit 36 video: VideoEdit
37 error: string
36 38
37 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC 39 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
38 40
@@ -104,6 +106,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
104 err => { 106 err => {
105 this.loadingBar.complete() 107 this.loadingBar.complete()
106 this.isImportingVideo = false 108 this.isImportingVideo = false
109 this.firstStepError.emit()
107 this.notificationsService.error(this.i18n('Error'), err.message) 110 this.notificationsService.error(this.i18n('Error'), err.message)
108 } 111 }
109 ) 112 )
@@ -129,8 +132,8 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
129 }, 132 },
130 133
131 err => { 134 err => {
132 this.isUpdatingVideo = false 135 this.error = err.message
133 this.notificationsService.error(this.i18n('Error'), err.message) 136 scrollToTop()
134 console.error(err) 137 console.error(err)
135 } 138 }
136 ) 139 )
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
index 9f5fc6d22..533446672 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html
@@ -37,7 +37,13 @@
37 </div> 37 </div>
38</div> 38</div>
39 39
40<div *ngIf="hasImportedVideo" class="alert alert-info" i18n> 40
41<div *ngIf="error" class="alert alert-danger">
42 <div i18n>Sorry, but something went wrong</div>
43 {{ error }}
44</div>
45
46<div *ngIf="!error && hasImportedVideo" class="alert alert-info" i18n>
41 Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video. 47 Congratulations, the video behind {{ targetUrl }} will be imported! You can already add information about this video.
42</div> 48</div>
43 49
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss
index 7c6deda1d..e907edc70 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss
@@ -7,6 +7,14 @@ $width-size: 190px;
7 @include peertube-select-container($width-size); 7 @include peertube-select-container($width-size);
8} 8}
9 9
10.alert.alert-danger {
11 text-align: center;
12
13 & > div {
14 font-weight: $font-semibold;
15 }
16}
17
10.import-video-url { 18.import-video-url {
11 display: flex; 19 display: flex;
12 flex-direction: column; 20 flex-direction: column;
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
index 031e557ed..9cdface75 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -12,6 +12,7 @@ import { VideoEdit } from '@app/shared/video/video-edit.model'
12import { FormValidatorService } from '@app/shared' 12import { FormValidatorService } from '@app/shared'
13import { VideoCaptionService } from '@app/shared/video-caption' 13import { VideoCaptionService } from '@app/shared/video-caption'
14import { VideoImportService } from '@app/shared/video-import' 14import { VideoImportService } from '@app/shared/video-import'
15import { scrollToTop } from '@app/shared/misc/utils'
15 16
16@Component({ 17@Component({
17 selector: 'my-video-import-url', 18 selector: 'my-video-import-url',
@@ -23,15 +24,16 @@ import { VideoImportService } from '@app/shared/video-import'
23}) 24})
24export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate { 25export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate {
25 @Output() firstStepDone = new EventEmitter<string>() 26 @Output() firstStepDone = new EventEmitter<string>()
27 @Output() firstStepError = new EventEmitter<void>()
26 28
27 targetUrl = '' 29 targetUrl = ''
28 videoFileName: string
29 30
30 isImportingVideo = false 31 isImportingVideo = false
31 hasImportedVideo = false 32 hasImportedVideo = false
32 isUpdatingVideo = false 33 isUpdatingVideo = false
33 34
34 video: VideoEdit 35 video: VideoEdit
36 error: string
35 37
36 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC 38 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
37 39
@@ -96,6 +98,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
96 err => { 98 err => {
97 this.loadingBar.complete() 99 this.loadingBar.complete()
98 this.isImportingVideo = false 100 this.isImportingVideo = false
101 this.firstStepError.emit()
99 this.notificationsService.error(this.i18n('Error'), err.message) 102 this.notificationsService.error(this.i18n('Error'), err.message)
100 } 103 }
101 ) 104 )
@@ -121,8 +124,8 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
121 }, 124 },
122 125
123 err => { 126 err => {
124 this.isUpdatingVideo = false 127 this.error = err.message
125 this.notificationsService.error(this.i18n('Error'), err.message) 128 scrollToTop()
126 console.error(err) 129 console.error(err)
127 } 130 }
128 ) 131 )
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.ts b/client/src/app/videos/+video-edit/video-add-components/video-send.ts
index 1bf22e1a9..71d2544d8 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-send.ts
@@ -21,6 +21,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
21 firstStepChannelId = 0 21 firstStepChannelId = 0
22 22
23 abstract firstStepDone: EventEmitter<string> 23 abstract firstStepDone: EventEmitter<string>
24 abstract firstStepError: EventEmitter<void>
24 protected abstract readonly DEFAULT_VIDEO_PRIVACY: VideoPrivacy 25 protected abstract readonly DEFAULT_VIDEO_PRIVACY: VideoPrivacy
25 26
26 protected loadingBar: LoadingBarService 27 protected loadingBar: LoadingBarService
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index fa57c8cb5..a09f54dfc 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -29,7 +29,7 @@
29 </div> 29 </div>
30</div> 30</div>
31 31
32<div *ngIf="isUploadingVideo" class="upload-progress-cancel"> 32<div *ngIf="isUploadingVideo && !error" class="upload-progress-cancel">
33 <p-progressBar 33 <p-progressBar
34 [value]="videoUploadPercents" 34 [value]="videoUploadPercents"
35 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }" 35 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
@@ -37,6 +37,11 @@
37 <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" /> 37 <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
38</div> 38</div>
39 39
40<div *ngIf="error" class="alert alert-danger">
41 <div i18n>Sorry, but something went wrong</div>
42 {{ error }}
43</div>
44
40<!-- Hidden because we want to load the component --> 45<!-- Hidden because we want to load the component -->
41<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 46<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
42 <my-video-edit 47 <my-video-edit
@@ -55,4 +60,4 @@
55 <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" /> 60 <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" />
56 </div> 61 </div>
57 </div> 62 </div>
58</form> \ No newline at end of file 63</form>
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index dbae5230d..cf1725ef9 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -5,6 +5,14 @@
5 @include peertube-select-container(190px); 5 @include peertube-select-container(190px);
6} 6}
7 7
8.alert.alert-danger {
9 text-align: center;
10
11 & > div {
12 font-weight: $font-semibold;
13 }
14}
15
8.upload-video { 16.upload-video {
9 display: flex; 17 display: flex;
10 flex-direction: column; 18 flex-direction: column;
@@ -82,4 +90,4 @@
82 90
83 margin-left: 10px; 91 margin-left: 10px;
84 } 92 }
85} \ No newline at end of file 93}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
index 8e2d0deaf..3fcb71ac3 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
@@ -14,6 +14,7 @@ import { VideoSend } from '@app/videos/+video-edit/video-add-components/video-se
14import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' 14import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
15import { FormValidatorService, UserService } from '@app/shared' 15import { FormValidatorService, UserService } from '@app/shared'
16import { VideoCaptionService } from '@app/shared/video-caption' 16import { VideoCaptionService } from '@app/shared/video-caption'
17import { scrollToTop } from '@app/shared/misc/utils'
17 18
18@Component({ 19@Component({
19 selector: 'my-video-upload', 20 selector: 'my-video-upload',
@@ -25,6 +26,7 @@ import { VideoCaptionService } from '@app/shared/video-caption'
25}) 26})
26export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { 27export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
27 @Output() firstStepDone = new EventEmitter<string>() 28 @Output() firstStepDone = new EventEmitter<string>()
29 @Output() firstStepError = new EventEmitter<void>()
28 @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement> 30 @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
29 31
30 // So that it can be accessed in the template 32 // So that it can be accessed in the template
@@ -43,6 +45,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
43 uuid: '' 45 uuid: ''
44 } 46 }
45 47
48 error: string
49
46 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC 50 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
47 51
48 constructor ( 52 constructor (
@@ -201,6 +205,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
201 this.isUploadingVideo = false 205 this.isUploadingVideo = false
202 this.videoUploadPercents = 0 206 this.videoUploadPercents = 0
203 this.videoUploadObservable = null 207 this.videoUploadObservable = null
208 this.firstStepError.emit()
204 this.notificationsService.error(this.i18n('Error'), err.message) 209 this.notificationsService.error(this.i18n('Error'), err.message)
205 } 210 }
206 ) 211 )
@@ -235,8 +240,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
235 }, 240 },
236 241
237 err => { 242 err => {
238 this.isUpdatingVideo = false 243 this.error = err.message
239 this.notificationsService.error(this.i18n('Error'), err.message) 244 scrollToTop()
240 console.error(err) 245 console.error(err)
241 } 246 }
242 ) 247 )
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 e14e23aed..72a233b72 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -6,24 +6,24 @@
6 6
7 <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }"> 7 <ngb-tabset class="video-add-tabset root-tabset bootstrap" [ngClass]="{ 'hide-nav': secondStepType !== undefined }">
8 8
9 <ngb-tab i18n-title title=""> 9 <ngb-tab>
10 <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template> 10 <ng-template ngbTabTitle><span i18n>Upload a file</span></ng-template>
11 <ng-template ngbTabContent> 11 <ng-template ngbTabContent>
12 <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)"></my-video-upload> 12 <my-video-upload #videoUpload (firstStepDone)="onFirstStepDone('upload', $event)" (firstStepError)="onError()"></my-video-upload>
13 </ng-template> 13 </ng-template>
14 </ngb-tab> 14 </ngb-tab>
15 15
16 <ngb-tab *ngIf="isVideoImportHttpEnabled()"> 16 <ngb-tab *ngIf="isVideoImportHttpEnabled()">
17 <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template> 17 <ng-template ngbTabTitle><span i18n>Import with URL</span></ng-template>
18 <ng-template ngbTabContent> 18 <ng-template ngbTabContent>
19 <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)"></my-video-import-url> 19 <my-video-import-url #videoImportUrl (firstStepDone)="onFirstStepDone('import-url', $event)" (firstStepError)="onError()"></my-video-import-url>
20 </ng-template> 20 </ng-template>
21 </ngb-tab> 21 </ngb-tab>
22 22
23 <ngb-tab *ngIf="isVideoImportTorrentEnabled()"> 23 <ngb-tab *ngIf="isVideoImportTorrentEnabled()">
24 <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template> 24 <ng-template ngbTabTitle><span i18n>Import with torrent</span></ng-template>
25 <ng-template ngbTabContent> 25 <ng-template ngbTabContent>
26 <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)"></my-video-import-torrent> 26 <my-video-import-torrent #videoImportTorrent (firstStepDone)="onFirstStepDone('import-torrent', $event)" (firstStepError)="onError()"></my-video-import-torrent>
27 </ng-template> 27 </ng-template>
28 </ngb-tab> 28 </ngb-tab>
29 </ngb-tabset> 29 </ngb-tabset>
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 1a9247dbe..57a9d0ca7 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,11 @@ export class VideoAddComponent implements CanComponentDeactivate {
27 this.videoName = videoName 27 this.videoName = videoName
28 } 28 }
29 29
30 onError () {
31 this.videoName = undefined
32 this.secondStepType = undefined
33 }
34
30 canDeactivate () { 35 canDeactivate () {
31 if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate() 36 if (this.secondStepType === 'upload') return this.videoUpload.canDeactivate()
32 if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate() 37 if (this.secondStepType === 'import-url') return this.videoImportUrl.canDeactivate()