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