client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts

   1 import { UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx'
   2 import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
   3 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
   4 import { Router } from '@angular/router'
   5 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService, UserService } from '@app/core'
   6 import { genericUploadErrorHandler, scrollToTop } from '@app/helpers'
   7 import { FormValidatorService } from '@app/shared/shared-forms'
   8 import { BytesPipe, Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
   9 import { LoadingBarService } from '@ngx-loading-bar/core'
  10 import { HttpStatusCode, VideoCreateResult, VideoPrivacy } from '@shared/models'
  11 import { UploaderXFormData } from './uploaderx-form-data'
  12 import { VideoSend } from './video-send'
  13 import { isIOS } from 'src/assets/player/utils'
  14
  15 @Component({
  16   selector: 'my-video-upload',
  17   templateUrl: './video-upload.component.html',
  18   styleUrls: [
  19     '../shared/video-edit.component.scss',
  20     './video-upload.component.scss',
  21     './video-send.scss'
  22   ]
  23 })
  24 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, AfterViewInit, CanComponentDeactivate {
  25   @Output() firstStepDone = new EventEmitter<string>()
  26   @Output() firstStepError = new EventEmitter<void>()
  27   @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
  28
  29   userVideoQuotaUsed = 0
  30   userVideoQuotaUsedDaily = 0
  31
  32   isUploadingAudioFile = false
  33   isUploadingVideo = false
  34
  35   videoUploaded = false
  36   videoUploadPercents = 0
  37   videoUploadedIds: VideoCreateResult = {
  38     id: 0,
  39     uuid: '',
  40     shortUUID: ''
  41   }
  42   formData: FormData
  43
  44   previewfileUpload: File
  45
  46   error: string
  47   enableRetryAfterError: boolean
  48
  49   schedulePublicationPossible = false
  50
  51   // So that it can be accessed in the template
  52   protected readonly BASE_VIDEO_UPLOAD_URL = VideoService.BASE_VIDEO_URL + 'upload-resumable'
  53
  54   private uploadxOptions: UploadxOptions
  55   private isUpdatingVideo = false
  56   private fileToUpload: File
  57
  58   constructor (
  59     protected formValidatorService: FormValidatorService,
  60     protected loadingBar: LoadingBarService,
  61     protected notifier: Notifier,
  62     protected authService: AuthService,
  63     protected serverService: ServerService,
  64     protected videoService: VideoService,
  65     protected videoCaptionService: VideoCaptionService,
  66     private userService: UserService,
  67     private router: Router,
  68     private hooks: HooksService,
  69     private resumableUploadService: UploadxService
  70   ) {
  71     super()
  72
  73     // FIXME: https://github.com/Chocobozzz/PeerTube/issues/4382#issuecomment-915854167
  74     const chunkSize = isIOS()
  75       ? 0
  76       : undefined // Auto chunk size
  77
  78     this.uploadxOptions = {
  79       endpoint: this.BASE_VIDEO_UPLOAD_URL,
  80       multiple: false,
  81       token: this.authService.getAccessToken(),
  82       uploaderClass: UploaderXFormData,
  83       chunkSize,
  84       retryConfig: {
  85         maxAttempts: 30, // maximum attempts for 503 codes, otherwise set to 6, see below
  86         maxDelay: 120_000, // 2 min
  87         shouldRetry: (code: number, attempts: number) => {
  88           return code === HttpStatusCode.SERVICE_UNAVAILABLE_503 || ((code < 400 || code > 500) && attempts < 6)
  89         }
  90       }
  91     }
  92   }
  93
  94   get videoExtensions () {
  95     return this.serverConfig.video.file.extensions.join(', ')
  96   }
  97
  98   ngOnInit () {
  99     super.ngOnInit()
 100
 101     this.userService.getMyVideoQuotaUsed()
 102         .subscribe(data => {
 103           this.userVideoQuotaUsed = data.videoQuotaUsed
 104           this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
 105         })
 106
 107     this.resumableUploadService.events
 108       .subscribe(state => this.onUploadVideoOngoing(state))
 109
 110     this.schedulePublicationPossible = this.videoPrivacies.some(p => p.id === VideoPrivacy.PRIVATE)
 111   }
 112
 113   ngAfterViewInit () {
 114     this.hooks.runAction('action:video-upload.init', 'video-edit')
 115   }
 116
 117   ngOnDestroy () {
 118     this.cancelUpload()
 119   }
 120
 121   canDeactivate () {
 122     let text = ''
 123
 124     if (this.videoUploaded === true) {
 125       // We can't concatenate strings using $localize
 126       text = $localize`Your video was uploaded to your account and is private.` + ' ' +
 127         $localize`But associated data (tags, description...) will be lost, are you sure you want to leave this page?`
 128     } else {
 129       text = $localize`Your video is not uploaded yet, are you sure you want to leave this page?`
 130     }
 131
 132     return {
 133       canDeactivate: !this.isUploadingVideo,
 134       text
 135     }
 136   }
 137
 138   onUploadVideoOngoing (state: UploadState) {
 139     switch (state.status) {
 140       case 'error': {
 141         const error = state.response?.error || 'Unknow error'
 142
 143         this.handleUploadError({
 144           error: new Error(error),
 145           name: 'HttpErrorResponse',
 146           message: error,
 147           ok: false,
 148           headers: new HttpHeaders(state.responseHeaders),
 149           status: +state.responseStatus,
 150           statusText: error,
 151           type: HttpEventType.Response,
 152           url: state.url
 153         })
 154         break
 155       }
 156
 157       case 'cancelled':
 158         this.isUploadingVideo = false
 159         this.videoUploadPercents = 0
 160
 161         this.firstStepError.emit()
 162         this.enableRetryAfterError = false
 163         this.error = ''
 164         break
 165
 166       case 'queue':
 167         this.closeFirstStep(state.name)
 168         break
 169
 170       case 'uploading':
 171         this.videoUploadPercents = state.progress
 172         break
 173
 174       case 'paused':
 175         this.notifier.info($localize`Upload on hold`)
 176         break
 177
 178       case 'complete':
 179         this.videoUploaded = true
 180         this.videoUploadPercents = 100
 181
 182         this.videoUploadedIds = state?.response.video
 183         break
 184     }
 185   }
 186
 187   onFileDropped (files: FileList) {
 188     this.videofileInput.nativeElement.files = files
 189
 190     this.onFileChange({ target: this.videofileInput.nativeElement })
 191   }
 192
 193   onFileChange (event: Event | { target: HTMLInputElement }) {
 194     const file = (event.target as HTMLInputElement).files[0]
 195
 196     if (!file) return
 197
 198     if (!this.checkGlobalUserQuota(file)) return
 199     if (!this.checkDailyUserQuota(file)) return
 200
 201     if (this.isAudioFile(file.name)) {
 202       this.isUploadingAudioFile = true
 203       return
 204     }
 205
 206     this.isUploadingVideo = true
 207     this.fileToUpload = file
 208
 209     this.uploadFile(file)
 210   }
 211
 212   uploadAudio () {
 213     this.uploadFile(this.getInputVideoFile(), this.previewfileUpload)
 214   }
 215
 216   retryUpload () {
 217     this.enableRetryAfterError = false
 218     this.error = ''
 219     this.uploadFile(this.fileToUpload)
 220   }
 221
 222   cancelUpload () {
 223     this.resumableUploadService.control({ action: 'cancel' })
 224   }
 225
 226   isPublishingButtonDisabled () {
 227     return !this.form.valid ||
 228       this.isUpdatingVideo === true ||
 229       this.videoUploaded !== true ||
 230       !this.videoUploadedIds.id
 231   }
 232
 233   getAudioUploadLabel () {
 234     const videofile = this.getInputVideoFile()
 235     if (!videofile) return $localize`Upload`
 236
 237     return $localize`Upload ${videofile.name}`
 238   }
 239
 240   updateSecondStep () {
 241     if (this.isPublishingButtonDisabled() || !this.checkForm()) {
 242       return
 243     }
 244
 245     const video = new VideoEdit()
 246     video.patch(this.form.value)
 247     video.id = this.videoUploadedIds.id
 248     video.uuid = this.videoUploadedIds.uuid
 249     video.shortUUID = this.videoUploadedIds.shortUUID
 250
 251     this.isUpdatingVideo = true
 252
 253     this.updateVideoAndCaptions(video)
 254         .subscribe({
 255           next: () => {
 256             this.isUpdatingVideo = false
 257             this.isUploadingVideo = false
 258
 259             this.notifier.success($localize`Video published.`)
 260             this.router.navigateByUrl(Video.buildWatchUrl(video))
 261           },
 262
 263           error: err => {
 264             this.error = err.message
 265             scrollToTop()
 266             console.error(err)
 267           }
 268         })
 269   }
 270
 271   private getInputVideoFile () {
 272     return this.videofileInput.nativeElement.files[0]
 273   }
 274
 275   private uploadFile (file: File, previewfile?: File) {
 276     const metadata = {
 277       waitTranscoding: true,
 278       commentsEnabled: true,
 279       downloadEnabled: true,
 280       channelId: this.firstStepChannelId,
 281       nsfw: this.serverConfig.instance.isNSFW,
 282       privacy: this.highestPrivacy.toString(),
 283       filename: file.name,
 284       previewfile: previewfile as any
 285     }
 286
 287     this.resumableUploadService.handleFiles(file, {
 288       ...this.uploadxOptions,
 289       metadata
 290     })
 291
 292     this.isUploadingVideo = true
 293   }
 294
 295   private handleUploadError (err: HttpErrorResponse) {
 296     // Reset progress (but keep isUploadingVideo true)
 297     this.videoUploadPercents = 0
 298     this.enableRetryAfterError = true
 299
 300     this.error = genericUploadErrorHandler({
 301       err,
 302       name: $localize`video`,
 303       notifier: this.notifier,
 304       sticky: false
 305     })
 306
 307     if (err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) {
 308       this.cancelUpload()
 309     }
 310   }
 311
 312   private closeFirstStep (filename: string) {
 313     const nameWithoutExtension = filename.replace(/\.[^/.]+$/, '')
 314     const name = nameWithoutExtension.length < 3 ? filename : nameWithoutExtension
 315
 316     this.form.patchValue({
 317       name,
 318       privacy: this.firstStepPrivacyId,
 319       nsfw: this.serverConfig.instance.isNSFW,
 320       channelId: this.firstStepChannelId,
 321       previewfile: this.previewfileUpload
 322     })
 323
 324     this.firstStepDone.emit(name)
 325   }
 326
 327   private checkGlobalUserQuota (videofile: File) {
 328     const bytePipes = new BytesPipe()
 329
 330     // Check global user quota
 331     const videoQuota = this.authService.getUser().videoQuota
 332     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
 333       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 334       const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
 335       const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
 336
 337       // eslint-disable-next-line max-len
 338       const msg = $localize`Your video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
 339       this.notifier.error(msg)
 340
 341       return false
 342     }
 343
 344     return true
 345   }
 346
 347   private checkDailyUserQuota (videofile: File) {
 348     const bytePipes = new BytesPipe()
 349
 350     // Check daily user quota
 351     const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
 352     if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
 353       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 354       const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
 355       const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
 356       // eslint-disable-next-line max-len
 357       const msg = $localize`Your daily video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
 358       this.notifier.error(msg)
 359
 360       return false
 361     }
 362
 363     return true
 364   }
 365
 366   private isAudioFile (filename: string) {
 367     const extensions = [ '.mp3', '.flac', '.ogg', '.wma', '.wav' ]
 368
 369     return extensions.some(e => filename.endsWith(e))
 370   }
 371 }