diff options
Diffstat (limited to 'client/src/app/+videos')
8 files changed, 283 insertions, 228 deletions
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html index 094b4d3b3..16233f9e0 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html | |||
@@ -5,7 +5,7 @@ | |||
5 | <a ngbNavLink i18n>Basic info</a> | 5 | <a ngbNavLink i18n>Basic info</a> |
6 | 6 | ||
7 | <ng-template ngbNavContent> | 7 | <ng-template ngbNavContent> |
8 | <div class="row"> | 8 | <div class="form-columns"> |
9 | <div class="col-video-edit"> | 9 | <div class="col-video-edit"> |
10 | <div class="form-group"> | 10 | <div class="form-group"> |
11 | <label i18n for="name">Title</label> | 11 | <label i18n for="name">Title</label> |
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss index bc32d7964..c1c7c686d 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss | |||
@@ -1,9 +1,3 @@ | |||
1 | // Bootstrap grid utilities require functions, variables and mixins | ||
2 | @import 'node_modules/bootstrap/scss/functions'; | ||
3 | @import 'node_modules/bootstrap/scss/variables'; | ||
4 | @import 'node_modules/bootstrap/scss/mixins'; | ||
5 | @import 'node_modules/bootstrap/scss/grid'; | ||
6 | |||
7 | @import 'variables'; | 1 | @import 'variables'; |
8 | @import 'mixins'; | 2 | @import 'mixins'; |
9 | 3 | ||
@@ -57,65 +51,62 @@ my-peertube-checkbox { | |||
57 | } | 51 | } |
58 | } | 52 | } |
59 | 53 | ||
60 | .captions { | 54 | .captions-header { |
61 | 55 | text-align: right; | |
62 | .captions-header { | 56 | margin-bottom: 1rem; |
63 | text-align: right; | 57 | } |
64 | margin-bottom: 1rem; | ||
65 | 58 | ||
66 | .create-caption { | 59 | .create-caption { |
67 | @include create-button; | 60 | @include create-button; |
68 | } | 61 | } |
69 | } | ||
70 | 62 | ||
71 | .caption-entry { | 63 | .caption-entry { |
72 | display: flex; | 64 | display: flex; |
73 | height: 40px; | 65 | height: 40px; |
74 | align-items: center; | 66 | align-items: center; |
75 | 67 | ||
76 | a.caption-entry-label { | 68 | a.caption-entry-label { |
77 | @include disable-default-a-behaviour; | 69 | @include disable-default-a-behaviour; |
78 | 70 | ||
79 | flex-grow: 1; | 71 | flex-grow: 1; |
80 | color: #000; | 72 | color: #000; |
81 | 73 | ||
82 | &:hover { | 74 | &:hover { |
83 | opacity: 0.8; | 75 | opacity: 0.8; |
84 | } | ||
85 | } | 76 | } |
77 | } | ||
86 | 78 | ||
87 | .caption-entry-label { | 79 | .caption-entry-label { |
88 | font-size: 15px; | 80 | font-size: 15px; |
89 | font-weight: bold; | 81 | font-weight: bold; |
90 | |||
91 | margin-right: 20px; | ||
92 | width: 150px; | ||
93 | } | ||
94 | 82 | ||
95 | .caption-entry-state { | 83 | margin-right: 20px; |
96 | width: 200px; | 84 | width: 150px; |
85 | } | ||
97 | 86 | ||
98 | &.caption-entry-state-create { | 87 | .caption-entry-state { |
99 | color: #39CC0B; | 88 | width: 200px; |
100 | } | ||
101 | 89 | ||
102 | &.caption-entry-state-delete { | 90 | &.caption-entry-state-create { |
103 | color: #FF0000; | 91 | color: #39CC0B; |
104 | } | ||
105 | } | 92 | } |
106 | 93 | ||
107 | .caption-entry-delete { | 94 | &.caption-entry-state-delete { |
108 | @include peertube-button; | 95 | color: #FF0000; |
109 | @include grey-button; | ||
110 | } | 96 | } |
111 | } | 97 | } |
112 | 98 | ||
113 | .no-caption { | 99 | .caption-entry-delete { |
114 | text-align: center; | 100 | @include peertube-button; |
115 | font-size: 15px; | 101 | @include grey-button; |
116 | } | 102 | } |
117 | } | 103 | } |
118 | 104 | ||
105 | .no-caption { | ||
106 | text-align: center; | ||
107 | font-size: 15px; | ||
108 | } | ||
109 | |||
119 | .submit-container { | 110 | .submit-container { |
120 | text-align: right; | 111 | text-align: right; |
121 | 112 | ||
@@ -143,35 +134,15 @@ p-calendar { | |||
143 | } | 134 | } |
144 | } | 135 | } |
145 | 136 | ||
146 | // columns for the video | 137 | .form-columns { |
147 | .col-video-edit { | 138 | display: grid; |
148 | @include make-col-ready(); | ||
149 | 139 | ||
150 | @include media-breakpoint-up(md) { | 140 | grid-template-columns: 66% 1fr; |
151 | @include make-col(7); | 141 | grid-gap: 30px; |
152 | |||
153 | + .col-video-edit { | ||
154 | @include make-col(5); | ||
155 | } | ||
156 | } | ||
157 | |||
158 | @include media-breakpoint-up(xl) { | ||
159 | @include make-col(8); | ||
160 | |||
161 | + .col-video-edit { | ||
162 | @include make-col(4); | ||
163 | } | ||
164 | } | ||
165 | } | 142 | } |
166 | 143 | ||
167 | :host-context(.expanded) { | 144 | @include on-small-main-col { |
168 | .col-video-edit { | 145 | .form-columns { |
169 | @include media-breakpoint-up(md) { | 146 | grid-template-columns: 1fr; |
170 | @include make-col(8); | ||
171 | |||
172 | + .col-video-edit { | ||
173 | @include make-col(4); | ||
174 | } | ||
175 | } | ||
176 | } | 147 | } |
177 | } | 148 | } |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/uploaderx-form-data.ts b/client/src/app/+videos/+video-edit/video-add-components/uploaderx-form-data.ts new file mode 100644 index 000000000..3392a0d8a --- /dev/null +++ b/client/src/app/+videos/+video-edit/video-add-components/uploaderx-form-data.ts | |||
@@ -0,0 +1,48 @@ | |||
1 | import { objectToFormData } from '@app/helpers' | ||
2 | import { resolveUrl, UploaderX } from 'ngx-uploadx' | ||
3 | |||
4 | /** | ||
5 | * multipart/form-data uploader extending the UploaderX implementation of Google Resumable | ||
6 | * for use with multer | ||
7 | * | ||
8 | * @see https://github.com/kukhariev/ngx-uploadx/blob/637e258fe366b8095203f387a6101a230ee4f8e6/src/uploadx/lib/uploaderx.ts | ||
9 | * @example | ||
10 | * | ||
11 | * options: UploadxOptions = { | ||
12 | * uploaderClass: UploaderXFormData | ||
13 | * }; | ||
14 | */ | ||
15 | export class UploaderXFormData extends UploaderX { | ||
16 | |||
17 | async getFileUrl (): Promise<string> { | ||
18 | const headers = { | ||
19 | 'X-Upload-Content-Length': this.size.toString(), | ||
20 | 'X-Upload-Content-Type': this.file.type || 'application/octet-stream' | ||
21 | } | ||
22 | |||
23 | const previewfile = this.metadata.previewfile as any as File | ||
24 | delete this.metadata.previewfile | ||
25 | |||
26 | const data = objectToFormData(this.metadata) | ||
27 | if (previewfile !== undefined) { | ||
28 | data.append('previewfile', previewfile, previewfile.name) | ||
29 | data.append('thumbnailfile', previewfile, previewfile.name) | ||
30 | } | ||
31 | |||
32 | await this.request({ | ||
33 | method: 'POST', | ||
34 | body: data, | ||
35 | url: this.endpoint, | ||
36 | headers | ||
37 | }) | ||
38 | |||
39 | const location = this.getValueFromResponse('location') | ||
40 | if (!location) { | ||
41 | throw new Error('Invalid or missing Location header') | ||
42 | } | ||
43 | |||
44 | this.offset = this.responseStatus === 201 ? 0 : undefined | ||
45 | |||
46 | return resolveUrl(location, this.endpoint) | ||
47 | } | ||
48 | } | ||
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 4c0b09894..86a779f8a 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 | |||
@@ -1,12 +1,17 @@ | |||
1 | <div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="setVideoFile($event)"> | 1 | <div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="onFileDropped($event)"> |
2 | <div class="first-step-block"> | 2 | <div class="first-step-block"> |
3 | <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon> | 3 | <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon> |
4 | 4 | ||
5 | <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'"> | 5 | <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'"> |
6 | <span i18n>Select the file to upload</span> | 6 | <span i18n>Select the file to upload</span> |
7 | <input | 7 | <input |
8 | aria-label="Select the file to upload" i18n-aria-label | 8 | aria-label="Select the file to upload" |
9 | #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus | 9 | i18n-aria-label |
10 | #videofileInput | ||
11 | [accept]="videoExtensions" | ||
12 | (change)="onFileChange($event)" | ||
13 | id="videofile" | ||
14 | type="file" | ||
10 | /> | 15 | /> |
11 | </div> | 16 | </div> |
12 | 17 | ||
@@ -41,7 +46,13 @@ | |||
41 | </div> | 46 | </div> |
42 | 47 | ||
43 | <div class="form-group upload-audio-button"> | 48 | <div class="form-group upload-audio-button"> |
44 | <my-button className="orange-button" i18n-label [label]="getAudioUploadLabel()" icon="upload" (click)="uploadFirstStep(true)"></my-button> | 49 | <my-button |
50 | className="orange-button" | ||
51 | [label]="getAudioUploadLabel()" | ||
52 | icon="upload" | ||
53 | (click)="uploadAudio()" | ||
54 | > | ||
55 | </my-button> | ||
45 | </div> | 56 | </div> |
46 | </ng-container> | 57 | </ng-container> |
47 | </div> | 58 | </div> |
@@ -64,6 +75,7 @@ | |||
64 | <span>{{ error }}</span> | 75 | <span>{{ error }}</span> |
65 | </div> | 76 | </div> |
66 | </div> | 77 | </div> |
78 | |||
67 | <div class="btn-group" role="group"> | 79 | <div class="btn-group" role="group"> |
68 | <input type="button" class="btn" i18n-value="Retry failed upload of a video" value="Retry" (click)="retryUpload()" /> | 80 | <input type="button" class="btn" i18n-value="Retry failed upload of a video" value="Retry" (click)="retryUpload()" /> |
69 | <input type="button" class="btn" i18n-value="Cancel ongoing upload of a video" value="Cancel" (click)="cancelUpload()" /> | 81 | <input type="button" class="btn" i18n-value="Cancel ongoing upload of a video" value="Cancel" (click)="cancelUpload()" /> |
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 9549257f6..d9f348a70 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 | |||
@@ -47,8 +47,4 @@ | |||
47 | 47 | ||
48 | margin-left: 10px; | 48 | margin-left: 10px; |
49 | } | 49 | } |
50 | |||
51 | .btn-group > input:not(:first-child) { | ||
52 | margin-left: 0; | ||
53 | } | ||
54 | } | 50 | } |
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 effb37077..2d3fc3578 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 | |||
@@ -1,15 +1,16 @@ | |||
1 | import { Subscription } from 'rxjs' | ||
2 | import { HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http' | ||
3 | import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core' | 1 | import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core' |
4 | import { Router } from '@angular/router' | 2 | import { Router } from '@angular/router' |
3 | import { UploadxOptions, UploadState, UploadxService } from 'ngx-uploadx' | ||
4 | import { UploaderXFormData } from './uploaderx-form-data' | ||
5 | import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core' | 5 | import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core' |
6 | import { scrollToTop, uploadErrorHandler } from '@app/helpers' | 6 | import { scrollToTop, genericUploadErrorHandler } from '@app/helpers' |
7 | import { FormValidatorService } from '@app/shared/shared-forms' | 7 | import { FormValidatorService } from '@app/shared/shared-forms' |
8 | import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main' | 8 | import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main' |
9 | import { LoadingBarService } from '@ngx-loading-bar/core' | 9 | import { LoadingBarService } from '@ngx-loading-bar/core' |
10 | import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' | 10 | import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' |
11 | import { VideoPrivacy } from '@shared/models' | 11 | import { VideoPrivacy } from '@shared/models' |
12 | import { VideoSend } from './video-send' | 12 | import { VideoSend } from './video-send' |
13 | import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http' | ||
13 | 14 | ||
14 | @Component({ | 15 | @Component({ |
15 | selector: 'my-video-upload', | 16 | selector: 'my-video-upload', |
@@ -20,23 +21,18 @@ import { VideoSend } from './video-send' | |||
20 | './video-send.scss' | 21 | './video-send.scss' |
21 | ] | 22 | ] |
22 | }) | 23 | }) |
23 | export class VideoUploadComponent extends VideoSend implements OnInit, AfterViewInit, OnDestroy, CanComponentDeactivate { | 24 | export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, AfterViewInit, CanComponentDeactivate { |
24 | @Output() firstStepDone = new EventEmitter<string>() | 25 | @Output() firstStepDone = new EventEmitter<string>() |
25 | @Output() firstStepError = new EventEmitter<void>() | 26 | @Output() firstStepError = new EventEmitter<void>() |
26 | @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement> | 27 | @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement> |
27 | 28 | ||
28 | // So that it can be accessed in the template | ||
29 | readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY | ||
30 | |||
31 | userVideoQuotaUsed = 0 | 29 | userVideoQuotaUsed = 0 |
32 | userVideoQuotaUsedDaily = 0 | 30 | userVideoQuotaUsedDaily = 0 |
33 | 31 | ||
34 | isUploadingAudioFile = false | 32 | isUploadingAudioFile = false |
35 | isUploadingVideo = false | 33 | isUploadingVideo = false |
36 | isUpdatingVideo = false | ||
37 | 34 | ||
38 | videoUploaded = false | 35 | videoUploaded = false |
39 | videoUploadObservable: Subscription = null | ||
40 | videoUploadPercents = 0 | 36 | videoUploadPercents = 0 |
41 | videoUploadedIds = { | 37 | videoUploadedIds = { |
42 | id: 0, | 38 | id: 0, |
@@ -49,7 +45,13 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
49 | error: string | 45 | error: string |
50 | enableRetryAfterError: boolean | 46 | enableRetryAfterError: boolean |
51 | 47 | ||
48 | // So that it can be accessed in the template | ||
52 | protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC | 49 | protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC |
50 | protected readonly BASE_VIDEO_UPLOAD_URL = VideoService.BASE_VIDEO_URL + 'upload-resumable' | ||
51 | |||
52 | private uploadxOptions: UploadxOptions | ||
53 | private isUpdatingVideo = false | ||
54 | private fileToUpload: File | ||
53 | 55 | ||
54 | constructor ( | 56 | constructor ( |
55 | protected formValidatorService: FormValidatorService, | 57 | protected formValidatorService: FormValidatorService, |
@@ -61,15 +63,77 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
61 | protected videoCaptionService: VideoCaptionService, | 63 | protected videoCaptionService: VideoCaptionService, |
62 | private userService: UserService, | 64 | private userService: UserService, |
63 | private router: Router, | 65 | private router: Router, |
64 | private hooks: HooksService | 66 | private hooks: HooksService, |
65 | ) { | 67 | private resumableUploadService: UploadxService |
68 | ) { | ||
66 | super() | 69 | super() |
70 | |||
71 | this.uploadxOptions = { | ||
72 | endpoint: this.BASE_VIDEO_UPLOAD_URL, | ||
73 | multiple: false, | ||
74 | token: this.authService.getAccessToken(), | ||
75 | uploaderClass: UploaderXFormData, | ||
76 | retryConfig: { | ||
77 | maxAttempts: 6, | ||
78 | shouldRetry: (code: number) => { | ||
79 | return code < 400 || code >= 501 | ||
80 | } | ||
81 | } | ||
82 | } | ||
67 | } | 83 | } |
68 | 84 | ||
69 | get videoExtensions () { | 85 | get videoExtensions () { |
70 | return this.serverConfig.video.file.extensions.join(', ') | 86 | return this.serverConfig.video.file.extensions.join(', ') |
71 | } | 87 | } |
72 | 88 | ||
89 | onUploadVideoOngoing (state: UploadState) { | ||
90 | switch (state.status) { | ||
91 | case 'error': | ||
92 | const error = state.response?.error || 'Unknow error' | ||
93 | |||
94 | this.handleUploadError({ | ||
95 | error: new Error(error), | ||
96 | name: 'HttpErrorResponse', | ||
97 | message: error, | ||
98 | ok: false, | ||
99 | headers: new HttpHeaders(state.responseHeaders), | ||
100 | status: +state.responseStatus, | ||
101 | statusText: error, | ||
102 | type: HttpEventType.Response, | ||
103 | url: state.url | ||
104 | }) | ||
105 | break | ||
106 | |||
107 | case 'cancelled': | ||
108 | this.isUploadingVideo = false | ||
109 | this.videoUploadPercents = 0 | ||
110 | |||
111 | this.firstStepError.emit() | ||
112 | this.enableRetryAfterError = false | ||
113 | this.error = '' | ||
114 | break | ||
115 | |||
116 | case 'queue': | ||
117 | this.closeFirstStep(state.name) | ||
118 | break | ||
119 | |||
120 | case 'uploading': | ||
121 | this.videoUploadPercents = state.progress | ||
122 | break | ||
123 | |||
124 | case 'paused': | ||
125 | this.notifier.info($localize`Upload cancelled`) | ||
126 | break | ||
127 | |||
128 | case 'complete': | ||
129 | this.videoUploaded = true | ||
130 | this.videoUploadPercents = 100 | ||
131 | |||
132 | this.videoUploadedIds = state?.response.video | ||
133 | break | ||
134 | } | ||
135 | } | ||
136 | |||
73 | ngOnInit () { | 137 | ngOnInit () { |
74 | super.ngOnInit() | 138 | super.ngOnInit() |
75 | 139 | ||
@@ -78,6 +142,9 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
78 | this.userVideoQuotaUsed = data.videoQuotaUsed | 142 | this.userVideoQuotaUsed = data.videoQuotaUsed |
79 | this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily | 143 | this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily |
80 | }) | 144 | }) |
145 | |||
146 | this.resumableUploadService.events | ||
147 | .subscribe(state => this.onUploadVideoOngoing(state)) | ||
81 | } | 148 | } |
82 | 149 | ||
83 | ngAfterViewInit () { | 150 | ngAfterViewInit () { |
@@ -85,7 +152,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
85 | } | 152 | } |
86 | 153 | ||
87 | ngOnDestroy () { | 154 | ngOnDestroy () { |
88 | if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe() | 155 | this.cancelUpload() |
89 | } | 156 | } |
90 | 157 | ||
91 | canDeactivate () { | 158 | canDeactivate () { |
@@ -105,137 +172,43 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
105 | } | 172 | } |
106 | } | 173 | } |
107 | 174 | ||
108 | getVideoFile () { | 175 | onFileDropped (files: FileList) { |
109 | return this.videofileInput.nativeElement.files[0] | ||
110 | } | ||
111 | |||
112 | setVideoFile (files: FileList) { | ||
113 | this.videofileInput.nativeElement.files = files | 176 | this.videofileInput.nativeElement.files = files |
114 | this.fileChange() | ||
115 | } | ||
116 | |||
117 | getAudioUploadLabel () { | ||
118 | const videofile = this.getVideoFile() | ||
119 | if (!videofile) return $localize`Upload` | ||
120 | 177 | ||
121 | return $localize`Upload ${videofile.name}` | 178 | this.onFileChange({ target: this.videofileInput.nativeElement }) |
122 | } | 179 | } |
123 | 180 | ||
124 | fileChange () { | 181 | onFileChange (event: Event | { target: HTMLInputElement }) { |
125 | this.uploadFirstStep() | 182 | const file = (event.target as HTMLInputElement).files[0] |
126 | } | ||
127 | |||
128 | retryUpload () { | ||
129 | this.enableRetryAfterError = false | ||
130 | this.error = '' | ||
131 | this.uploadVideo() | ||
132 | } | ||
133 | |||
134 | cancelUpload () { | ||
135 | if (this.videoUploadObservable !== null) { | ||
136 | this.videoUploadObservable.unsubscribe() | ||
137 | } | ||
138 | |||
139 | this.isUploadingVideo = false | ||
140 | this.videoUploadPercents = 0 | ||
141 | this.videoUploadObservable = null | ||
142 | 183 | ||
143 | this.firstStepError.emit() | 184 | if (!file) return |
144 | this.enableRetryAfterError = false | ||
145 | this.error = '' | ||
146 | 185 | ||
147 | this.notifier.info($localize`Upload cancelled`) | 186 | if (!this.checkGlobalUserQuota(file)) return |
148 | } | 187 | if (!this.checkDailyUserQuota(file)) return |
149 | 188 | ||
150 | uploadFirstStep (clickedOnButton = false) { | 189 | if (this.isAudioFile(file.name)) { |
151 | const videofile = this.getVideoFile() | ||
152 | if (!videofile) return | ||
153 | |||
154 | if (!this.checkGlobalUserQuota(videofile)) return | ||
155 | if (!this.checkDailyUserQuota(videofile)) return | ||
156 | |||
157 | if (clickedOnButton === false && this.isAudioFile(videofile.name)) { | ||
158 | this.isUploadingAudioFile = true | 190 | this.isUploadingAudioFile = true |
159 | return | 191 | return |
160 | } | 192 | } |
161 | 193 | ||
162 | // Build name field | ||
163 | const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '') | ||
164 | let name: string | ||
165 | |||
166 | // If the name of the file is very small, keep the extension | ||
167 | if (nameWithoutExtension.length < 3) name = videofile.name | ||
168 | else name = nameWithoutExtension | ||
169 | |||
170 | const nsfw = this.serverConfig.instance.isNSFW | ||
171 | const waitTranscoding = true | ||
172 | const commentsEnabled = true | ||
173 | const downloadEnabled = true | ||
174 | const channelId = this.firstStepChannelId.toString() | ||
175 | |||
176 | this.formData = new FormData() | ||
177 | this.formData.append('name', name) | ||
178 | // Put the video "private" -> we are waiting the user validation of the second step | ||
179 | this.formData.append('privacy', VideoPrivacy.PRIVATE.toString()) | ||
180 | this.formData.append('nsfw', '' + nsfw) | ||
181 | this.formData.append('commentsEnabled', '' + commentsEnabled) | ||
182 | this.formData.append('downloadEnabled', '' + downloadEnabled) | ||
183 | this.formData.append('waitTranscoding', '' + waitTranscoding) | ||
184 | this.formData.append('channelId', '' + channelId) | ||
185 | this.formData.append('videofile', videofile) | ||
186 | |||
187 | if (this.previewfileUpload) { | ||
188 | this.formData.append('previewfile', this.previewfileUpload) | ||
189 | this.formData.append('thumbnailfile', this.previewfileUpload) | ||
190 | } | ||
191 | |||
192 | this.isUploadingVideo = true | 194 | this.isUploadingVideo = true |
193 | this.firstStepDone.emit(name) | 195 | this.fileToUpload = file |
194 | |||
195 | this.form.patchValue({ | ||
196 | name, | ||
197 | privacy: this.firstStepPrivacyId, | ||
198 | nsfw, | ||
199 | channelId: this.firstStepChannelId, | ||
200 | previewfile: this.previewfileUpload | ||
201 | }) | ||
202 | 196 | ||
203 | this.uploadVideo() | 197 | this.uploadFile(file) |
204 | } | 198 | } |
205 | 199 | ||
206 | uploadVideo () { | 200 | uploadAudio () { |
207 | this.videoUploadObservable = this.videoService.uploadVideo(this.formData).subscribe( | 201 | this.uploadFile(this.getInputVideoFile(), this.previewfileUpload) |
208 | event => { | 202 | } |
209 | if (event.type === HttpEventType.UploadProgress) { | ||
210 | this.videoUploadPercents = Math.round(100 * event.loaded / event.total) | ||
211 | } else if (event instanceof HttpResponse) { | ||
212 | this.videoUploaded = true | ||
213 | |||
214 | this.videoUploadedIds = event.body.video | ||
215 | |||
216 | this.videoUploadObservable = null | ||
217 | } | ||
218 | }, | ||
219 | 203 | ||
220 | (err: HttpErrorResponse) => { | 204 | retryUpload () { |
221 | // Reset progress (but keep isUploadingVideo true) | 205 | this.enableRetryAfterError = false |
222 | this.videoUploadPercents = 0 | 206 | this.error = '' |
223 | this.videoUploadObservable = null | 207 | this.uploadFile(this.fileToUpload) |
224 | this.enableRetryAfterError = true | 208 | } |
225 | |||
226 | this.error = uploadErrorHandler({ | ||
227 | err, | ||
228 | name: $localize`video`, | ||
229 | notifier: this.notifier, | ||
230 | sticky: false | ||
231 | }) | ||
232 | 209 | ||
233 | if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413 || | 210 | cancelUpload () { |
234 | err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) { | 211 | this.resumableUploadService.control({ action: 'cancel' }) |
235 | this.cancelUpload() | ||
236 | } | ||
237 | } | ||
238 | ) | ||
239 | } | 212 | } |
240 | 213 | ||
241 | isPublishingButtonDisabled () { | 214 | isPublishingButtonDisabled () { |
@@ -245,6 +218,13 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
245 | !this.videoUploadedIds.id | 218 | !this.videoUploadedIds.id |
246 | } | 219 | } |
247 | 220 | ||
221 | getAudioUploadLabel () { | ||
222 | const videofile = this.getInputVideoFile() | ||
223 | if (!videofile) return $localize`Upload` | ||
224 | |||
225 | return $localize`Upload ${videofile.name}` | ||
226 | } | ||
227 | |||
248 | updateSecondStep () { | 228 | updateSecondStep () { |
249 | if (this.isPublishingButtonDisabled() || !this.checkForm()) { | 229 | if (this.isPublishingButtonDisabled() || !this.checkForm()) { |
250 | return | 230 | return |
@@ -275,6 +255,62 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
275 | ) | 255 | ) |
276 | } | 256 | } |
277 | 257 | ||
258 | private getInputVideoFile () { | ||
259 | return this.videofileInput.nativeElement.files[0] | ||
260 | } | ||
261 | |||
262 | private uploadFile (file: File, previewfile?: File) { | ||
263 | const metadata = { | ||
264 | waitTranscoding: true, | ||
265 | commentsEnabled: true, | ||
266 | downloadEnabled: true, | ||
267 | channelId: this.firstStepChannelId, | ||
268 | nsfw: this.serverConfig.instance.isNSFW, | ||
269 | privacy: VideoPrivacy.PRIVATE.toString(), | ||
270 | filename: file.name, | ||
271 | previewfile: previewfile as any | ||
272 | } | ||
273 | |||
274 | this.resumableUploadService.handleFiles(file, { | ||
275 | ...this.uploadxOptions, | ||
276 | metadata | ||
277 | }) | ||
278 | |||
279 | this.isUploadingVideo = true | ||
280 | } | ||
281 | |||
282 | private handleUploadError (err: HttpErrorResponse) { | ||
283 | // Reset progress (but keep isUploadingVideo true) | ||
284 | this.videoUploadPercents = 0 | ||
285 | this.enableRetryAfterError = true | ||
286 | |||
287 | this.error = genericUploadErrorHandler({ | ||
288 | err, | ||
289 | name: $localize`video`, | ||
290 | notifier: this.notifier, | ||
291 | sticky: false | ||
292 | }) | ||
293 | |||
294 | if (err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) { | ||
295 | this.cancelUpload() | ||
296 | } | ||
297 | } | ||
298 | |||
299 | private closeFirstStep (filename: string) { | ||
300 | const nameWithoutExtension = filename.replace(/\.[^/.]+$/, '') | ||
301 | const name = nameWithoutExtension.length < 3 ? filename : nameWithoutExtension | ||
302 | |||
303 | this.form.patchValue({ | ||
304 | name, | ||
305 | privacy: this.firstStepPrivacyId, | ||
306 | nsfw: this.serverConfig.instance.isNSFW, | ||
307 | channelId: this.firstStepChannelId, | ||
308 | previewfile: this.previewfileUpload | ||
309 | }) | ||
310 | |||
311 | this.firstStepDone.emit(name) | ||
312 | } | ||
313 | |||
278 | private checkGlobalUserQuota (videofile: File) { | 314 | private checkGlobalUserQuota (videofile: File) { |
279 | const bytePipes = new BytesPipe() | 315 | const bytePipes = new BytesPipe() |
280 | 316 | ||
@@ -285,8 +321,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, AfterView | |||
285 | const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0) | 321 | const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0) |
286 | const videoQuotaBytes = bytePipes.transform(videoQuota, 0) | 322 | const videoQuotaBytes = bytePipes.transform(videoQuota, 0) |
287 | 323 | ||
288 | const msg = $localize`Your video quota is exceeded with this video ( | 324 | const msg = $localize`Your video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})` |
289 | video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})` | ||
290 | this.notifier.error(msg) | 325 | this.notifier.error(msg) |
291 | 326 | ||
292 | return false | 327 | return false |
@@ -304,9 +339,7 @@ video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuota | |||
304 | const videoSizeBytes = bytePipes.transform(videofile.size, 0) | 339 | const videoSizeBytes = bytePipes.transform(videofile.size, 0) |
305 | const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0) | 340 | const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0) |
306 | const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0) | 341 | const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0) |
307 | 342 | const msg = $localize`Your daily video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})` | |
308 | const msg = $localize`Your daily video quota is exceeded with this video ( | ||
309 | video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})` | ||
310 | this.notifier.error(msg) | 343 | this.notifier.error(msg) |
311 | 344 | ||
312 | return false | 345 | return false |
diff --git a/client/src/app/+videos/+video-edit/video-add.module.ts b/client/src/app/+videos/+video-edit/video-add.module.ts index da651119b..e836cf81e 100644 --- a/client/src/app/+videos/+video-edit/video-add.module.ts +++ b/client/src/app/+videos/+video-edit/video-add.module.ts | |||
@@ -1,5 +1,6 @@ | |||
1 | import { NgModule } from '@angular/core' | 1 | import { NgModule } from '@angular/core' |
2 | import { CanDeactivateGuard } from '@app/core' | 2 | import { CanDeactivateGuard } from '@app/core' |
3 | import { UploadxModule } from 'ngx-uploadx' | ||
3 | import { VideoEditModule } from './shared/video-edit.module' | 4 | import { VideoEditModule } from './shared/video-edit.module' |
4 | import { DragDropDirective } from './video-add-components/drag-drop.directive' | 5 | import { DragDropDirective } from './video-add-components/drag-drop.directive' |
5 | import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component' | 6 | import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component' |
@@ -13,7 +14,9 @@ import { VideoAddComponent } from './video-add.component' | |||
13 | imports: [ | 14 | imports: [ |
14 | VideoAddRoutingModule, | 15 | VideoAddRoutingModule, |
15 | 16 | ||
16 | VideoEditModule | 17 | VideoEditModule, |
18 | |||
19 | UploadxModule | ||
17 | ], | 20 | ], |
18 | 21 | ||
19 | declarations: [ | 22 | declarations: [ |
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts index 276548b79..9172b78a8 100644 --- a/client/src/app/+videos/+video-edit/video-update.resolver.ts +++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts | |||
@@ -2,7 +2,9 @@ import { forkJoin, of } from 'rxjs' | |||
2 | import { map, switchMap } from 'rxjs/operators' | 2 | import { map, switchMap } from 'rxjs/operators' |
3 | import { Injectable } from '@angular/core' | 3 | import { Injectable } from '@angular/core' |
4 | import { ActivatedRouteSnapshot, Resolve } from '@angular/router' | 4 | import { ActivatedRouteSnapshot, Resolve } from '@angular/router' |
5 | import { VideoCaptionService, VideoChannelService, VideoDetails, VideoService } from '@app/shared/shared-main' | 5 | import { AuthService } from '@app/core' |
6 | import { listUserChannels } from '@app/helpers' | ||
7 | import { VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' | ||
6 | import { LiveVideoService } from '@app/shared/shared-video-live' | 8 | import { LiveVideoService } from '@app/shared/shared-video-live' |
7 | 9 | ||
8 | @Injectable() | 10 | @Injectable() |
@@ -10,7 +12,7 @@ export class VideoUpdateResolver implements Resolve<any> { | |||
10 | constructor ( | 12 | constructor ( |
11 | private videoService: VideoService, | 13 | private videoService: VideoService, |
12 | private liveVideoService: LiveVideoService, | 14 | private liveVideoService: LiveVideoService, |
13 | private videoChannelService: VideoChannelService, | 15 | private authService: AuthService, |
14 | private videoCaptionService: VideoCaptionService | 16 | private videoCaptionService: VideoCaptionService |
15 | ) { | 17 | ) { |
16 | } | 18 | } |
@@ -31,17 +33,7 @@ export class VideoUpdateResolver implements Resolve<any> { | |||
31 | .loadCompleteDescription(video.descriptionPath) | 33 | .loadCompleteDescription(video.descriptionPath) |
32 | .pipe(map(description => Object.assign(video, { description }))), | 34 | .pipe(map(description => Object.assign(video, { description }))), |
33 | 35 | ||
34 | this.videoChannelService | 36 | listUserChannels(this.authService), |
35 | .listAccountVideoChannels(video.account) | ||
36 | .pipe( | ||
37 | map(result => result.data), | ||
38 | map(videoChannels => videoChannels.map(c => ({ | ||
39 | id: c.id, | ||
40 | label: c.displayName, | ||
41 | support: c.support, | ||
42 | avatarPath: c.avatar?.path | ||
43 | }))) | ||
44 | ), | ||
45 | 37 | ||
46 | this.videoCaptionService | 38 | this.videoCaptionService |
47 | .listCaptions(video.id) | 39 | .listCaptions(video.id) |