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

   1 import { Subscription } from 'rxjs'
   2 import { HttpEventType, HttpResponse } from '@angular/common/http'
   3 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
   4 import { Router } from '@angular/router'
   5 import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
   6 import { scrollToTop } 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 { VideoPrivacy } from '@shared/models'
  11 import { VideoSend } from './video-send'
  12
  13 @Component({
  14   selector: 'my-video-upload',
  15   templateUrl: './video-upload.component.html',
  16   styleUrls: [
  17     '../shared/video-edit.component.scss',
  18     './video-upload.component.scss',
  19     './video-send.scss'
  20   ]
  21 })
  22 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
  23   @Output() firstStepDone = new EventEmitter<string>()
  24   @Output() firstStepError = new EventEmitter<void>()
  25   @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
  26
  27   // So that it can be accessed in the template
  28   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
  29
  30   userVideoQuotaUsed = 0
  31   userVideoQuotaUsedDaily = 0
  32
  33   isUploadingAudioFile = false
  34   isUploadingVideo = false
  35   isUpdatingVideo = false
  36
  37   videoUploaded = false
  38   videoUploadObservable: Subscription = null
  39   videoUploadPercents = 0
  40   videoUploadedIds = {
  41     id: 0,
  42     uuid: ''
  43   }
  44
  45   waitTranscodingEnabled = true
  46   previewfileUpload: File
  47
  48   error: string
  49
  50   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
  51
  52   constructor (
  53     protected formValidatorService: FormValidatorService,
  54     protected loadingBar: LoadingBarService,
  55     protected notifier: Notifier,
  56     protected authService: AuthService,
  57     protected serverService: ServerService,
  58     protected videoService: VideoService,
  59     protected videoCaptionService: VideoCaptionService,
  60     private userService: UserService,
  61     private router: Router
  62     ) {
  63     super()
  64   }
  65
  66   get videoExtensions () {
  67     return this.serverConfig.video.file.extensions.join(', ')
  68   }
  69
  70   ngOnInit () {
  71     super.ngOnInit()
  72
  73     this.userService.getMyVideoQuotaUsed()
  74         .subscribe(data => {
  75           this.userVideoQuotaUsed = data.videoQuotaUsed
  76           this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
  77         })
  78   }
  79
  80   ngOnDestroy () {
  81     if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
  82   }
  83
  84   canDeactivate () {
  85     let text = ''
  86
  87     if (this.videoUploaded === true) {
  88       // FIXME: cannot concatenate strings inside i18n service :/
  89       text = $localize`Your video was uploaded to your account and is private.` + ' ' +
  90         $localize`But associated data (tags, description...) will be lost, are you sure you want to leave this page?`
  91     } else {
  92       text = $localize`Your video is not uploaded yet, are you sure you want to leave this page?`
  93     }
  94
  95     return {
  96       canDeactivate: !this.isUploadingVideo,
  97       text
  98     }
  99   }
 100
 101   getVideoFile () {
 102     return this.videofileInput.nativeElement.files[0]
 103   }
 104
 105   setVideoFile (files: FileList) {
 106     this.videofileInput.nativeElement.files = files
 107     this.fileChange()
 108   }
 109
 110   getAudioUploadLabel () {
 111     const videofile = this.getVideoFile()
 112     if (!videofile) return $localize`Upload`
 113
 114     return $localize`Upload ${videofile.name}`
 115   }
 116
 117   fileChange () {
 118     this.uploadFirstStep()
 119   }
 120
 121   cancelUpload () {
 122     if (this.videoUploadObservable !== null) {
 123       this.videoUploadObservable.unsubscribe()
 124
 125       this.isUploadingVideo = false
 126       this.videoUploadPercents = 0
 127       this.videoUploadObservable = null
 128
 129       this.firstStepError.emit()
 130
 131       this.notifier.info($localize`Upload cancelled`)
 132     }
 133   }
 134
 135   uploadFirstStep (clickedOnButton = false) {
 136     const videofile = this.getVideoFile()
 137     if (!videofile) return
 138
 139     if (!this.checkGlobalUserQuota(videofile)) return
 140     if (!this.checkDailyUserQuota(videofile)) return
 141
 142     if (clickedOnButton === false && this.isAudioFile(videofile.name)) {
 143       this.isUploadingAudioFile = true
 144       return
 145     }
 146
 147     // Build name field
 148     const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
 149     let name: string
 150
 151     // If the name of the file is very small, keep the extension
 152     if (nameWithoutExtension.length < 3) name = videofile.name
 153     else name = nameWithoutExtension
 154
 155     // Force user to wait transcoding for unsupported video types in web browsers
 156     if (!videofile.name.endsWith('.mp4') && !videofile.name.endsWith('.webm') && !videofile.name.endsWith('.ogv')) {
 157       this.waitTranscodingEnabled = false
 158     }
 159
 160     const nsfw = this.serverConfig.instance.isNSFW
 161     const waitTranscoding = true
 162     const commentsEnabled = true
 163     const downloadEnabled = true
 164     const channelId = this.firstStepChannelId.toString()
 165
 166     const formData = new FormData()
 167     formData.append('name', name)
 168     // Put the video "private" -> we are waiting the user validation of the second step
 169     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
 170     formData.append('nsfw', '' + nsfw)
 171     formData.append('commentsEnabled', '' + commentsEnabled)
 172     formData.append('downloadEnabled', '' + downloadEnabled)
 173     formData.append('waitTranscoding', '' + waitTranscoding)
 174     formData.append('channelId', '' + channelId)
 175     formData.append('videofile', videofile)
 176
 177     if (this.previewfileUpload) {
 178       formData.append('previewfile', this.previewfileUpload)
 179       formData.append('thumbnailfile', this.previewfileUpload)
 180     }
 181
 182     this.isUploadingVideo = true
 183     this.firstStepDone.emit(name)
 184
 185     this.form.patchValue({
 186       name,
 187       privacy: this.firstStepPrivacyId,
 188       nsfw,
 189       channelId: this.firstStepChannelId,
 190       previewfile: this.previewfileUpload
 191     })
 192
 193     this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
 194       event => {
 195         if (event.type === HttpEventType.UploadProgress) {
 196           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
 197         } else if (event instanceof HttpResponse) {
 198           this.videoUploaded = true
 199
 200           this.videoUploadedIds = event.body.video
 201
 202           this.videoUploadObservable = null
 203         }
 204       },
 205
 206       err => {
 207         // Reset progress
 208         this.isUploadingVideo = false
 209         this.videoUploadPercents = 0
 210         this.videoUploadObservable = null
 211         this.firstStepError.emit()
 212         this.notifier.error(err.message)
 213       }
 214     )
 215   }
 216
 217   isPublishingButtonDisabled () {
 218     return !this.form.valid ||
 219       this.isUpdatingVideo === true ||
 220       this.videoUploaded !== true ||
 221       !this.videoUploadedIds.id
 222   }
 223
 224   updateSecondStep () {
 225     if (this.isPublishingButtonDisabled() || !this.checkForm()) {
 226       return
 227     }
 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
 234     this.isUpdatingVideo = true
 235
 236     this.updateVideoAndCaptions(video)
 237         .subscribe(
 238           () => {
 239             this.isUpdatingVideo = false
 240             this.isUploadingVideo = false
 241
 242             this.notifier.success($localize`Video published.`)
 243             this.router.navigate([ '/videos/watch', video.uuid ])
 244           },
 245
 246           err => {
 247             this.error = err.message
 248             scrollToTop()
 249             console.error(err)
 250           }
 251         )
 252   }
 253
 254   private checkGlobalUserQuota (videofile: File) {
 255     const bytePipes = new BytesPipe()
 256
 257     // Check global user quota
 258     const videoQuota = this.authService.getUser().videoQuota
 259     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
 260       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 261       const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
 262       const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
 263
 264       const msg = $localize`Your video quota is exceeded with this video (
 265 video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
 266       this.notifier.error(msg)
 267
 268       return false
 269     }
 270
 271     return true
 272   }
 273
 274   private checkDailyUserQuota (videofile: File) {
 275     const bytePipes = new BytesPipe()
 276
 277     // Check daily user quota
 278     const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
 279     if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
 280       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
 281       const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
 282       const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
 283
 284       const msg = $localize`Your daily video quota is exceeded with this video (
 285 video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
 286       this.notifier.error(msg)
 287
 288       return false
 289     }
 290
 291     return true
 292   }
 293
 294   private isAudioFile (filename: string) {
 295     const extensions = [ '.mp3', '.flac', '.ogg', '.wma', '.wav' ]
 296
 297     return extensions.some(e => filename.endsWith(e))
 298   }
 299 }