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

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