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