1 import { BytesPipe } from 'ngx-pipes'
2 import { Subscription } from 'rxjs'
3 import { HttpEventType, HttpResponse } from '@angular/common/http'
4 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
5 import { Router } from '@angular/router'
6 import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
7 import { scrollToTop } from '@app/helpers'
8 import { FormValidatorService } from '@app/shared/shared-forms'
9 import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
10 import { LoadingBarService } from '@ngx-loading-bar/core'
11 import { I18n } from '@ngx-translate/i18n-polyfill'
12 import { VideoPrivacy } from '@shared/models'
13 import { VideoSend } from './video-send'
16 selector: 'my-video-upload',
17 templateUrl: './video-upload.component.html',
19 '../shared/video-edit.component.scss',
20 './video-upload.component.scss',
24 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
25 @Output() firstStepDone = new EventEmitter<string>()
26 @Output() firstStepError = new EventEmitter<void>()
27 @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
29 // So that it can be accessed in the template
30 readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
32 userVideoQuotaUsed = 0
33 userVideoQuotaUsedDaily = 0
35 isUploadingAudioFile = false
36 isUploadingVideo = false
37 isUpdatingVideo = false
40 videoUploadObservable: Subscription = null
41 videoUploadPercents = 0
47 waitTranscodingEnabled = true
48 previewfileUpload: File
52 protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
55 protected formValidatorService: FormValidatorService,
56 protected loadingBar: LoadingBarService,
57 protected notifier: Notifier,
58 protected authService: AuthService,
59 protected serverService: ServerService,
60 protected videoService: VideoService,
61 protected videoCaptionService: VideoCaptionService,
62 private userService: UserService,
63 private router: Router,
69 get videoExtensions () {
70 return this.serverConfig.video.file.extensions.join(', ')
76 this.userService.getMyVideoQuotaUsed()
78 this.userVideoQuotaUsed = data.videoQuotaUsed
79 this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
84 if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
90 if (this.videoUploaded === true) {
91 // FIXME: cannot concatenate strings inside i18n service :/
92 text = this.i18n('Your video was uploaded to your account and is private.') + ' ' +
93 this.i18n('But associated data (tags, description...) will be lost, are you sure you want to leave this page?')
95 text = this.i18n('Your video is not uploaded yet, are you sure you want to leave this page?')
99 canDeactivate: !this.isUploadingVideo,
105 return this.videofileInput.nativeElement.files[0]
108 setVideoFile (files: FileList) {
109 this.videofileInput.nativeElement.files = files
113 getAudioUploadLabel () {
114 const videofile = this.getVideoFile()
115 if (!videofile) return this.i18n('Upload')
117 return this.i18n('Upload {{videofileName}}', { videofileName: videofile.name })
121 this.uploadFirstStep()
125 if (this.videoUploadObservable !== null) {
126 this.videoUploadObservable.unsubscribe()
128 this.isUploadingVideo = false
129 this.videoUploadPercents = 0
130 this.videoUploadObservable = null
132 this.firstStepError.emit()
134 this.notifier.info(this.i18n('Upload cancelled'))
138 uploadFirstStep (clickedOnButton = false) {
139 const videofile = this.getVideoFile()
140 if (!videofile) return
142 if (!this.checkGlobalUserQuota(videofile)) return
143 if (!this.checkDailyUserQuota(videofile)) return
145 if (clickedOnButton === false && this.isAudioFile(videofile.name)) {
146 this.isUploadingAudioFile = true
151 const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
154 // If the name of the file is very small, keep the extension
155 if (nameWithoutExtension.length < 3) name = videofile.name
156 else name = nameWithoutExtension
158 // Force user to wait transcoding for unsupported video types in web browsers
159 if (!videofile.name.endsWith('.mp4') && !videofile.name.endsWith('.webm') && !videofile.name.endsWith('.ogv')) {
160 this.waitTranscodingEnabled = false
163 const privacy = this.firstStepPrivacyId.toString()
164 const nsfw = this.serverConfig.instance.isNSFW
165 const waitTranscoding = true
166 const commentsEnabled = true
167 const downloadEnabled = true
168 const channelId = this.firstStepChannelId.toString()
170 const formData = new FormData()
171 formData.append('name', name)
172 // Put the video "private" -> we are waiting the user validation of the second step
173 formData.append('privacy', VideoPrivacy.PRIVATE.toString())
174 formData.append('nsfw', '' + nsfw)
175 formData.append('commentsEnabled', '' + commentsEnabled)
176 formData.append('downloadEnabled', '' + downloadEnabled)
177 formData.append('waitTranscoding', '' + waitTranscoding)
178 formData.append('channelId', '' + channelId)
179 formData.append('videofile', videofile)
181 if (this.previewfileUpload) {
182 formData.append('previewfile', this.previewfileUpload)
183 formData.append('thumbnailfile', this.previewfileUpload)
186 this.isUploadingVideo = true
187 this.firstStepDone.emit(name)
189 this.form.patchValue({
194 previewfile: this.previewfileUpload
197 this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
199 if (event.type === HttpEventType.UploadProgress) {
200 this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
201 } else if (event instanceof HttpResponse) {
202 this.videoUploaded = true
204 this.videoUploadedIds = event.body.video
206 this.videoUploadObservable = null
212 this.isUploadingVideo = false
213 this.videoUploadPercents = 0
214 this.videoUploadObservable = null
215 this.firstStepError.emit()
216 this.notifier.error(err.message)
221 isPublishingButtonDisabled () {
222 return !this.form.valid ||
223 this.isUpdatingVideo === true ||
224 this.videoUploaded !== true ||
225 !this.videoUploadedIds.id
228 updateSecondStep () {
229 if (this.isPublishingButtonDisabled() || !this.checkForm()) {
233 const video = new VideoEdit()
234 video.patch(this.form.value)
235 video.id = this.videoUploadedIds.id
236 video.uuid = this.videoUploadedIds.uuid
238 this.isUpdatingVideo = true
240 this.updateVideoAndCaptions(video)
243 this.isUpdatingVideo = false
244 this.isUploadingVideo = false
246 this.notifier.success(this.i18n('Video published.'))
247 this.router.navigate([ '/videos/watch', video.uuid ])
251 this.error = err.message
258 private checkGlobalUserQuota (videofile: File) {
259 const bytePipes = new BytesPipe()
261 // Check global user quota
262 const videoQuota = this.authService.getUser().videoQuota
263 if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
264 const msg = this.i18n(
265 'Your video quota is exceeded with this video (video size: {{videoSize}}, used: {{videoQuotaUsed}}, quota: {{videoQuota}})',
267 videoSize: bytePipes.transform(videofile.size, 0),
268 videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
269 videoQuota: bytePipes.transform(videoQuota, 0)
272 this.notifier.error(msg)
280 private checkDailyUserQuota (videofile: File) {
281 const bytePipes = new BytesPipe()
283 // Check daily user quota
284 const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
285 if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
286 const msg = this.i18n(
287 'Your daily video quota is exceeded with this video (video size: {{videoSize}}, used: {{quotaUsedDaily}}, quota: {{quotaDaily}})',
289 videoSize: bytePipes.transform(videofile.size, 0),
290 quotaUsedDaily: bytePipes.transform(this.userVideoQuotaUsedDaily, 0),
291 quotaDaily: bytePipes.transform(videoQuotaDaily, 0)
294 this.notifier.error(msg)
302 private isAudioFile (filename: string) {
303 const extensions = [ '.mp3', '.flac', '.ogg', '.wma', '.wav' ]
305 return extensions.some(e => filename.endsWith(e))