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

   1 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
   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'
   6 import { scrollToTop, genericUploadErrorHandler } from '@app/helpers'
   7 import { FormValidatorService } from '@app/shared/shared-forms'
   8 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
   9 import { LoadingBarService } from '@ngx-loading-bar/core'
  10 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
  11 import { VideoPrivacy } from '@shared/models'
  12 import { VideoSend } from './video-send'
  13 import { HttpErrorResponse, HttpEventType, HttpHeaders } from '@angular/common/http'
  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 = {
  38     id: 0,
  39     uuid: ''
  40   }
  41   formData: FormData
  42
  43   previewfileUpload: File
  44
  45   error: string
  46   enableRetryAfterError: boolean
  47
  48   // So that it can be accessed in the template
  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
  55
  56   constructor (
  57     protected formValidatorService: FormValidatorService,
  58     protected loadingBar: LoadingBarService,
  59     protected notifier: Notifier,
  60     protected authService: AuthService,
  61     protected serverService: ServerService,
  62     protected videoService: VideoService,
  63     protected videoCaptionService: VideoCaptionService,
  64     private userService: UserService,
  65     private router: Router,
  66     private hooks: HooksService,
  67     private resumableUploadService: UploadxService
  68   ) {
  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     }
  83   }
  84
  85   get videoExtensions () {
  86     return this.serverConfig.video.file.extensions.join(', ')
  87   }
  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 on hold`)
 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
 137   ngOnInit () {
 138     super.ngOnInit()
 139
 140     this.userService.getMyVideoQuotaUsed()
 141         .subscribe(data => {
 142           this.userVideoQuotaUsed = data.videoQuotaUsed
 143           this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
 144         })
 145
 146     this.resumableUploadService.events
 147       .subscribe(state => this.onUploadVideoOngoing(state))
 148   }
 149
 150   ngAfterViewInit () {
 151     this.hooks.runAction('action:video-upload.init', 'video-edit')
 152   }
 153
 154   ngOnDestroy () {
 155     this.cancelUpload()
 156   }
 157
 158   canDeactivate () {
 159     let text = ''
 160
 161     if (this.videoUploaded === true) {
 162       // FIXME: cannot concatenate strings using $localize
 163       text = $localize`Your video was uploaded to your account and is private.` + ' ' +
 164         $localize`But associated data (tags, description...) will be lost, are you sure you want to leave this page?`
 165     } else {
 166       text = $localize`Your video is not uploaded yet, are you sure you want to leave this page?`
 167     }
 168
 169     return {
 170       canDeactivate: !this.isUploadingVideo,
 171       text
 172     }
 173   }
 174
 175   onFileDropped (files: FileList) {
 176     this.videofileInput.nativeElement.files = files
 177
 178     this.onFileChange({ target: this.videofileInput.nativeElement })
 179   }
 180
 181   onFileChange (event: Event | { target: HTMLInputElement }) {
 182     const file = (event.target as HTMLInputElement).files[0]
 183
 184     if (!file) return
 185
 186     if (!this.checkGlobalUserQuota(file)) return
 187     if (!this.checkDailyUserQuota(file)) return
 188
 189     if (this.isAudioFile(file.name)) {
 190       this.isUploadingAudioFile = true
 191       return
 192     }
 193
 194     this.isUploadingVideo = true
 195     this.fileToUpload = file
 196
 197     this.uploadFile(file)
 198   }
 199
 200   uploadAudio () {
 201     this.uploadFile(this.getInputVideoFile(), this.previewfileUpload)
 202   }
 203
 204   retryUpload () {
 205     this.enableRetryAfterError = false
 206     this.error = ''
 207     this.uploadFile(this.fileToUpload)
 208   }
 209
 210   cancelUpload () {
 211     this.resumableUploadService.control({ action: 'cancel' })
 212   }
 213
 214   isPublishingButtonDisabled () {
 215     return !this.form.valid ||
 216       this.isUpdatingVideo === true ||
 217       this.videoUploaded !== true ||
 218       !this.videoUploadedIds.id
 219   }
 220
 221   getAudioUploadLabel () {
 222     const videofile = this.getInputVideoFile()
 223     if (!videofile) return $localize`Upload`
 224
 225     return $localize`Upload ${videofile.name}`
 226   }
 227
 228   updateSecondStep () {
 229     if (this.isPublishingButtonDisabled() || !this.checkForm()) {
 230       return
 231     }
 232
 233     const video = new VideoEdit()
 234     video.patch(this.form.value)
 235     video.id = this.videoUploadedIds.id
 236     video.uuid = this.videoUploadedIds.uuid
 237
 238     this.isUpdatingVideo = true
 239
 240     this.updateVideoAndCaptions(video)
 241         .subscribe(
 242           () => {
 243             this.isUpdatingVideo = false
 244             this.isUploadingVideo = false
 245
 246             this.notifier.success($localize`Video published.`)
 247             this.router.navigate([ '/w', video.uuid ])
 248           },
 249
 250           err => {
 251             this.error = err.message
 252             scrollToTop()
 253             console.error(err)
 254           }
 255         )
 256   }
 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
 314   private checkGlobalUserQuota (videofile: File) {
 315     const bytePipes = new BytesPipe()
 316
 317     // Check global user quota
 318     const videoQuota = this.authService.getUser().videoQuota
 319     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
 320       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 321       const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
 322       const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
 323
 324       const msg = $localize`Your video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
 325       this.notifier.error(msg)
 326
 327       return false
 328     }
 329
 330     return true
 331   }
 332
 333   private checkDailyUserQuota (videofile: File) {
 334     const bytePipes = new BytesPipe()
 335
 336     // Check daily user quota
 337     const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
 338     if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
 339       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 340       const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
 341       const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
 342       const msg = $localize`Your daily video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
 343       this.notifier.error(msg)
 344
 345       return false
 346     }
 347
 348     return true
 349   }
 350
 351   private isAudioFile (filename: string) {
 352     const extensions = [ '.mp3', '.flac', '.ogg', '.wma', '.wav' ]
 353
 354     return extensions.some(e => filename.endsWith(e))
 355   }
 356 }