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 } from '@shared/core-utils/miscs/http-error-codes'
  11 import { VideoPrivacy } from '@shared/models'
  12 import { UploaderXFormData } from './uploaderx-form-data'
  13 import { VideoSend } from './video-send'
  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 BASE_VIDEO_UPLOAD_URL = VideoService.BASE_VIDEO_URL + 'upload-resumable'
  50
  51   private uploadxOptions: UploadxOptions
  52   private isUpdatingVideo = false
  53   private fileToUpload: File
  54
  55   constructor (
  56     protected formValidatorService: FormValidatorService,
  57     protected loadingBar: LoadingBarService,
  58     protected notifier: Notifier,
  59     protected authService: AuthService,
  60     protected serverService: ServerService,
  61     protected videoService: VideoService,
  62     protected videoCaptionService: VideoCaptionService,
  63     private userService: UserService,
  64     private router: Router,
  65     private hooks: HooksService,
  66     private resumableUploadService: UploadxService
  67   ) {
  68     super()
  69
  70     this.uploadxOptions = {
  71       endpoint: this.BASE_VIDEO_UPLOAD_URL,
  72       multiple: false,
  73       token: this.authService.getAccessToken(),
  74       uploaderClass: UploaderXFormData,
  75       retryConfig: {
  76         maxAttempts: 6,
  77         shouldRetry: (code: number) => {
  78           return code < 400 || code >= 501
  79         }
  80       }
  81     }
  82   }
  83
  84   get videoExtensions () {
  85     return this.serverConfig.video.file.extensions.join(', ')
  86   }
  87
  88   onUploadVideoOngoing (state: UploadState) {
  89     switch (state.status) {
  90       case 'error':
  91         const error = state.response?.error || 'Unknow error'
  92
  93         this.handleUploadError({
  94           error: new Error(error),
  95           name: 'HttpErrorResponse',
  96           message: error,
  97           ok: false,
  98           headers: new HttpHeaders(state.responseHeaders),
  99           status: +state.responseStatus,
 100           statusText: error,
 101           type: HttpEventType.Response,
 102           url: state.url
 103         })
 104         break
 105
 106       case 'cancelled':
 107         this.isUploadingVideo = false
 108         this.videoUploadPercents = 0
 109
 110         this.firstStepError.emit()
 111         this.enableRetryAfterError = false
 112         this.error = ''
 113         break
 114
 115       case 'queue':
 116         this.closeFirstStep(state.name)
 117         break
 118
 119       case 'uploading':
 120         this.videoUploadPercents = state.progress
 121         break
 122
 123       case 'paused':
 124         this.notifier.info($localize`Upload on hold`)
 125         break
 126
 127       case 'complete':
 128         this.videoUploaded = true
 129         this.videoUploadPercents = 100
 130
 131         this.videoUploadedIds = state?.response.video
 132         break
 133     }
 134   }
 135
 136   ngOnInit () {
 137     super.ngOnInit()
 138
 139     this.userService.getMyVideoQuotaUsed()
 140         .subscribe(data => {
 141           this.userVideoQuotaUsed = data.videoQuotaUsed
 142           this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
 143         })
 144
 145     this.resumableUploadService.events
 146       .subscribe(state => this.onUploadVideoOngoing(state))
 147   }
 148
 149   ngAfterViewInit () {
 150     this.hooks.runAction('action:video-upload.init', 'video-edit')
 151   }
 152
 153   ngOnDestroy () {
 154     this.cancelUpload()
 155   }
 156
 157   canDeactivate () {
 158     let text = ''
 159
 160     if (this.videoUploaded === true) {
 161       // FIXME: cannot concatenate strings using $localize
 162       text = $localize`Your video was uploaded to your account and is private.` + ' ' +
 163         $localize`But associated data (tags, description...) will be lost, are you sure you want to leave this page?`
 164     } else {
 165       text = $localize`Your video is not uploaded yet, are you sure you want to leave this page?`
 166     }
 167
 168     return {
 169       canDeactivate: !this.isUploadingVideo,
 170       text
 171     }
 172   }
 173
 174   onFileDropped (files: FileList) {
 175     this.videofileInput.nativeElement.files = files
 176
 177     this.onFileChange({ target: this.videofileInput.nativeElement })
 178   }
 179
 180   onFileChange (event: Event | { target: HTMLInputElement }) {
 181     const file = (event.target as HTMLInputElement).files[0]
 182
 183     if (!file) return
 184
 185     if (!this.checkGlobalUserQuota(file)) return
 186     if (!this.checkDailyUserQuota(file)) return
 187
 188     if (this.isAudioFile(file.name)) {
 189       this.isUploadingAudioFile = true
 190       return
 191     }
 192
 193     this.isUploadingVideo = true
 194     this.fileToUpload = file
 195
 196     this.uploadFile(file)
 197   }
 198
 199   uploadAudio () {
 200     this.uploadFile(this.getInputVideoFile(), this.previewfileUpload)
 201   }
 202
 203   retryUpload () {
 204     this.enableRetryAfterError = false
 205     this.error = ''
 206     this.uploadFile(this.fileToUpload)
 207   }
 208
 209   cancelUpload () {
 210     this.resumableUploadService.control({ action: 'cancel' })
 211   }
 212
 213   isPublishingButtonDisabled () {
 214     return !this.form.valid ||
 215       this.isUpdatingVideo === true ||
 216       this.videoUploaded !== true ||
 217       !this.videoUploadedIds.id
 218   }
 219
 220   getAudioUploadLabel () {
 221     const videofile = this.getInputVideoFile()
 222     if (!videofile) return $localize`Upload`
 223
 224     return $localize`Upload ${videofile.name}`
 225   }
 226
 227   updateSecondStep () {
 228     if (this.isPublishingButtonDisabled() || !this.checkForm()) {
 229       return
 230     }
 231
 232     const video = new VideoEdit()
 233     video.patch(this.form.value)
 234     video.id = this.videoUploadedIds.id
 235     video.uuid = this.videoUploadedIds.uuid
 236
 237     this.isUpdatingVideo = true
 238
 239     this.updateVideoAndCaptions(video)
 240         .subscribe(
 241           () => {
 242             this.isUpdatingVideo = false
 243             this.isUploadingVideo = false
 244
 245             this.notifier.success($localize`Video published.`)
 246             this.router.navigateByUrl(Video.buildWatchUrl(video))
 247           },
 248
 249           err => {
 250             this.error = err.message
 251             scrollToTop()
 252             console.error(err)
 253           }
 254         )
 255   }
 256
 257   private getInputVideoFile () {
 258     return this.videofileInput.nativeElement.files[0]
 259   }
 260
 261   private uploadFile (file: File, previewfile?: File) {
 262     const metadata = {
 263       waitTranscoding: true,
 264       commentsEnabled: true,
 265       downloadEnabled: true,
 266       channelId: this.firstStepChannelId,
 267       nsfw: this.serverConfig.instance.isNSFW,
 268       privacy: this.highestPrivacy.toString(),
 269       filename: file.name,
 270       previewfile: previewfile as any
 271     }
 272
 273     this.resumableUploadService.handleFiles(file, {
 274       ...this.uploadxOptions,
 275       metadata
 276     })
 277
 278     this.isUploadingVideo = true
 279   }
 280
 281   private handleUploadError (err: HttpErrorResponse) {
 282     // Reset progress (but keep isUploadingVideo true)
 283     this.videoUploadPercents = 0
 284     this.enableRetryAfterError = true
 285
 286     this.error = genericUploadErrorHandler({
 287       err,
 288       name: $localize`video`,
 289       notifier: this.notifier,
 290       sticky: false
 291     })
 292
 293     if (err.status === HttpStatusCode.UNSUPPORTED_MEDIA_TYPE_415) {
 294       this.cancelUpload()
 295     }
 296   }
 297
 298   private closeFirstStep (filename: string) {
 299     const nameWithoutExtension = filename.replace(/\.[^/.]+$/, '')
 300     const name = nameWithoutExtension.length < 3 ? filename : nameWithoutExtension
 301
 302     this.form.patchValue({
 303       name,
 304       privacy: this.firstStepPrivacyId,
 305       nsfw: this.serverConfig.instance.isNSFW,
 306       channelId: this.firstStepChannelId,
 307       previewfile: this.previewfileUpload
 308     })
 309
 310     this.firstStepDone.emit(name)
 311   }
 312
 313   private checkGlobalUserQuota (videofile: File) {
 314     const bytePipes = new BytesPipe()
 315
 316     // Check global user quota
 317     const videoQuota = this.authService.getUser().videoQuota
 318     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
 319       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 320       const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
 321       const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
 322
 323       const msg = $localize`Your video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
 324       this.notifier.error(msg)
 325
 326       return false
 327     }
 328
 329     return true
 330   }
 331
 332   private checkDailyUserQuota (videofile: File) {
 333     const bytePipes = new BytesPipe()
 334
 335     // Check daily user quota
 336     const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
 337     if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
 338       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 339       const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
 340       const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
 341       const msg = $localize`Your daily video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
 342       this.notifier.error(msg)
 343
 344       return false
 345     }
 346
 347     return true
 348   }
 349
 350   private isAudioFile (filename: string) {
 351     const extensions = [ '.mp3', '.flac', '.ogg', '.wma', '.wav' ]
 352
 353     return extensions.some(e => filename.endsWith(e))
 354   }
 355 }