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

   1 import { HttpEventType, HttpResponse } from '@angular/common/http'
   2 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
   3 import { Router } from '@angular/router'
   4 import { LoadingBarService } from '@ngx-loading-bar/core'
   5 import { BytesPipe } from 'ngx-pipes'
   6 import { Subscription } from 'rxjs'
   7 import { VideoPrivacy } from '../../../../../../shared/models/videos'
   8 import { AuthService, Notifier, ServerService } from '../../../core'
   9 import { VideoEdit } from '../../../shared/video/video-edit.model'
  10 import { VideoService } from '../../../shared/video/video.service'
  11 import { I18n } from '@ngx-translate/i18n-polyfill'
  12 import { VideoSend } from '@app/videos/+video-edit/video-add-components/video-send'
  13 import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
  14 import { FormValidatorService, UserService } from '@app/shared'
  15 import { VideoCaptionService } from '@app/shared/video-caption'
  16 import { scrollToTop } from '@app/shared/misc/utils'
  17
  18 @Component({
  19   selector: 'my-video-upload',
  20   templateUrl: './video-upload.component.html',
  21   styleUrls: [
  22     '../shared/video-edit.component.scss',
  23     './video-upload.component.scss',
  24     './video-send.scss'
  25   ]
  26 })
  27 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
  28   @Output() firstStepDone = new EventEmitter<string>()
  29   @Output() firstStepError = new EventEmitter<void>()
  30   @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
  31
  32   // So that it can be accessed in the template
  33   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
  34
  35   userVideoQuotaUsed = 0
  36   userVideoQuotaUsedDaily = 0
  37
  38   isUploadingVideo = false
  39   isUpdatingVideo = false
  40   videoUploaded = false
  41   videoUploadObservable: Subscription = null
  42   videoUploadPercents = 0
  43   videoUploadedIds = {
  44     id: 0,
  45     uuid: ''
  46   }
  47   waitTranscodingEnabled = true
  48
  49   error: string
  50
  51   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
  52
  53   constructor (
  54     protected formValidatorService: FormValidatorService,
  55     protected loadingBar: LoadingBarService,
  56     protected notifier: Notifier,
  57     protected authService: AuthService,
  58     protected serverService: ServerService,
  59     protected videoService: VideoService,
  60     protected videoCaptionService: VideoCaptionService,
  61     private userService: UserService,
  62     private router: Router,
  63     private i18n: I18n
  64   ) {
  65     super()
  66   }
  67
  68   get videoExtensions () {
  69     return this.serverService.getConfig().video.file.extensions.join(',')
  70   }
  71
  72   ngOnInit () {
  73     super.ngOnInit()
  74
  75     this.userService.getMyVideoQuotaUsed()
  76         .subscribe(data => {
  77           this.userVideoQuotaUsed = data.videoQuotaUsed
  78           this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
  79         })
  80   }
  81
  82   ngOnDestroy () {
  83     if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
  84   }
  85
  86   canDeactivate () {
  87     let text = ''
  88
  89     if (this.videoUploaded === true) {
  90       // FIXME: cannot concatenate strings inside i18n service :/
  91       text = this.i18n('Your video was uploaded to your account and is private.') + ' ' +
  92         this.i18n('But associated data (tags, description...) will be lost, are you sure you want to leave this page?')
  93     } else {
  94       text = this.i18n('Your video is not uploaded yet, are you sure you want to leave this page?')
  95     }
  96
  97     return {
  98       canDeactivate: !this.isUploadingVideo,
  99       text
 100     }
 101   }
 102
 103   fileChange () {
 104     this.uploadFirstStep()
 105   }
 106
 107   cancelUpload () {
 108     if (this.videoUploadObservable !== null) {
 109       this.videoUploadObservable.unsubscribe()
 110       this.isUploadingVideo = false
 111       this.videoUploadPercents = 0
 112       this.videoUploadObservable = null
 113       this.notifier.info(this.i18n('Upload cancelled'))
 114     }
 115   }
 116
 117   uploadFirstStep () {
 118     const videofile = this.videofileInput.nativeElement.files[0]
 119     if (!videofile) return
 120
 121     // Check global user quota
 122     const bytePipes = new BytesPipe()
 123     const videoQuota = this.authService.getUser().videoQuota
 124     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
 125       const msg = this.i18n(
 126         'Your video quota is exceeded with this video (video size: {{videoSize}}, used: {{videoQuotaUsed}}, quota: {{videoQuota}})',
 127         {
 128           videoSize: bytePipes.transform(videofile.size, 0),
 129           videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
 130           videoQuota: bytePipes.transform(videoQuota, 0)
 131         }
 132       )
 133       this.notifier.error(msg)
 134       return
 135     }
 136
 137     // Check daily user quota
 138     const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
 139     if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
 140       const msg = this.i18n(
 141         'Your daily video quota is exceeded with this video (video size: {{videoSize}}, used: {{quotaUsedDaily}}, quota: {{quotaDaily}})',
 142         {
 143           videoSize: bytePipes.transform(videofile.size, 0),
 144           quotaUsedDaily: bytePipes.transform(this.userVideoQuotaUsedDaily, 0),
 145           quotaDaily: bytePipes.transform(videoQuotaDaily, 0)
 146         }
 147       )
 148       this.notifier.error(msg)
 149       return
 150     }
 151
 152     // Build name field
 153     const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
 154     let name: string
 155
 156     // If the name of the file is very small, keep the extension
 157     if (nameWithoutExtension.length < 3) name = videofile.name
 158     else name = nameWithoutExtension
 159
 160     // Force user to wait transcoding for unsupported video types in web browsers
 161     if (!videofile.name.endsWith('.mp4') && !videofile.name.endsWith('.webm') && !videofile.name.endsWith('.ogv')) {
 162       this.waitTranscodingEnabled = false
 163     }
 164
 165     const privacy = this.firstStepPrivacyId.toString()
 166     const nsfw = false
 167     const waitTranscoding = true
 168     const commentsEnabled = true
 169     const channelId = this.firstStepChannelId.toString()
 170
 171     const formData = new FormData()
 172     formData.append('name', name)
 173     // Put the video "private" -> we are waiting the user validation of the second step
 174     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
 175     formData.append('nsfw', '' + nsfw)
 176     formData.append('commentsEnabled', '' + commentsEnabled)
 177     formData.append('waitTranscoding', '' + waitTranscoding)
 178     formData.append('channelId', '' + channelId)
 179     formData.append('videofile', videofile)
 180
 181     this.isUploadingVideo = true
 182     this.firstStepDone.emit(name)
 183
 184     this.form.patchValue({
 185       name,
 186       privacy,
 187       nsfw,
 188       channelId
 189     })
 190
 191     this.videoPrivacies = this.videoService.explainedPrivacyLabels(this.videoPrivacies)
 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   }
 222
 223   updateSecondStep () {
 224     if (this.checkForm() === false) {
 225       return
 226     }
 227
 228     const video = new VideoEdit()
 229     video.patch(this.form.value)
 230     video.id = this.videoUploadedIds.id
 231     video.uuid = this.videoUploadedIds.uuid
 232
 233     this.isUpdatingVideo = true
 234
 235     this.updateVideoAndCaptions(video)
 236         .subscribe(
 237           () => {
 238             this.isUpdatingVideo = false
 239             this.isUploadingVideo = false
 240
 241             this.notifier.success(this.i18n('Video published.'))
 242             this.router.navigate([ '/videos/watch', video.uuid ])
 243           },
 244
 245           err => {
 246             this.error = err.message
 247             scrollToTop()
 248             console.error(err)
 249           }
 250         )
 251   }
 252 }