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

   1 import { HttpEventType, HttpResponse } from '@angular/common/http'
   2 import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
   3 import { Router } from '@angular/router'
   4 import { UserService } from '@app/shared'
   5 import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service'
   6 import { LoadingBarService } from '@ngx-loading-bar/core'
   7 import { NotificationsService } from 'angular2-notifications'
   8 import { BytesPipe } from 'ngx-pipes'
   9 import { Subscription } from 'rxjs'
  10 import { VideoPrivacy } from '../../../../../shared/models/videos'
  11 import { AuthService, ServerService } from '../../core'
  12 import { VideoEdit } from '../../shared/video/video-edit.model'
  13 import { VideoService } from '../../shared/video/video.service'
  14 import { I18n } from '@ngx-translate/i18n-polyfill'
  15 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
  16 import { VideoCaptionService } from '@app/shared/video-caption'
  17 import { VideoSend } from '@app/videos/+video-edit/shared/video-send'
  18
  19 @Component({
  20   selector: 'my-video-upload',
  21   templateUrl: './video-upload.component.html',
  22   styleUrls: [
  23     './shared/video-edit.component.scss',
  24     './video-upload.component.scss'
  25   ]
  26 })
  27 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
  28   @Output() firstStepDone = new EventEmitter<string>()
  29   @ViewChild('videofileInput') videofileInput
  30
  31   // So that it can be accessed in the template
  32   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
  33
  34   userVideoQuotaUsed = 0
  35
  36   isUploadingVideo = false
  37   isUpdatingVideo = false
  38   videoUploaded = false
  39   videoUploadObservable: Subscription = null
  40   videoUploadPercents = 0
  41   videoUploadedIds = {
  42     id: 0,
  43     uuid: ''
  44   }
  45
  46   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
  47
  48   constructor (
  49     protected formValidatorService: FormValidatorService,
  50     protected loadingBar: LoadingBarService,
  51     protected notificationsService: NotificationsService,
  52     protected authService: AuthService,
  53     protected serverService: ServerService,
  54     protected videoService: VideoService,
  55     protected videoCaptionService: VideoCaptionService,
  56     private userService: UserService,
  57     private router: Router,
  58     private i18n: I18n
  59   ) {
  60     super()
  61   }
  62
  63   get videoExtensions () {
  64     return this.serverService.getConfig().video.file.extensions.join(',')
  65   }
  66
  67   ngOnInit () {
  68     super.ngOnInit()
  69
  70     this.userService.getMyVideoQuotaUsed()
  71       .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed)
  72   }
  73
  74   ngOnDestroy () {
  75     if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe()
  76   }
  77
  78   canDeactivate () {
  79     let text = ''
  80
  81     if (this.videoUploaded === true) {
  82       // FIXME: cannot concatenate strings inside i18n service :/
  83       text = this.i18n('Your video was uploaded to your account and is private.') +
  84         this.i18n('But associated data (tags, description...) will be lost, are you sure you want to leave this page?')
  85     } else {
  86       text = this.i18n('Your video is not uploaded yet, are you sure you want to leave this page?')
  87     }
  88
  89     return {
  90       canDeactivate: !this.isUploadingVideo,
  91       text
  92     }
  93   }
  94
  95   fileChange () {
  96     this.uploadFirstStep()
  97   }
  98
  99   cancelUpload () {
 100     if (this.videoUploadObservable !== null) {
 101       this.videoUploadObservable.unsubscribe()
 102       this.isUploadingVideo = false
 103       this.videoUploadPercents = 0
 104       this.videoUploadObservable = null
 105       this.notificationsService.info(this.i18n('Info'), this.i18n('Upload cancelled'))
 106     }
 107   }
 108
 109   uploadFirstStep () {
 110     const videofile = this.videofileInput.nativeElement.files[0] as File
 111     if (!videofile) return
 112
 113     // Cannot upload videos > 8GB for now
 114     if (videofile.size > 8 * 1024 * 1024 * 1024) {
 115       this.notificationsService.error(this.i18n('Error'), this.i18n('We are sorry but PeerTube cannot handle videos > 8GB'))
 116       return
 117     }
 118
 119     const videoQuota = this.authService.getUser().videoQuota
 120     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
 121       const bytePipes = new BytesPipe()
 122
 123       const msg = this.i18n(
 124         'Your video quota is exceeded with this video (video size: {{ videoSize }}, used: {{ videoQuotaUsed }}, quota: {{ videoQuota }})',
 125         {
 126           videoSize: bytePipes.transform(videofile.size, 0),
 127           videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
 128           videoQuota: bytePipes.transform(videoQuota, 0)
 129         }
 130       )
 131       this.notificationsService.error(this.i18n('Error'), msg)
 132       return
 133     }
 134
 135     const nameWithoutExtension = videofile.name.replace(/\.[^/.]+$/, '')
 136     let name: string
 137
 138     // If the name of the file is very small, keep the extension
 139     if (nameWithoutExtension.length < 3) name = videofile.name
 140     else name = nameWithoutExtension
 141
 142     const privacy = this.firstStepPrivacyId.toString()
 143     const nsfw = false
 144     const waitTranscoding = true
 145     const commentsEnabled = true
 146     const channelId = this.firstStepChannelId.toString()
 147
 148     const formData = new FormData()
 149     formData.append('name', name)
 150     // Put the video "private" -> we are waiting the user validation of the second step
 151     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
 152     formData.append('nsfw', '' + nsfw)
 153     formData.append('commentsEnabled', '' + commentsEnabled)
 154     formData.append('waitTranscoding', '' + waitTranscoding)
 155     formData.append('channelId', '' + channelId)
 156     formData.append('videofile', videofile)
 157
 158     this.isUploadingVideo = true
 159     this.firstStepDone.emit(name)
 160
 161     this.form.patchValue({
 162       name,
 163       privacy,
 164       nsfw,
 165       channelId
 166     })
 167
 168     this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
 169       event => {
 170         if (event.type === HttpEventType.UploadProgress) {
 171           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
 172         } else if (event instanceof HttpResponse) {
 173           this.videoUploaded = true
 174
 175           this.videoUploadedIds = event.body.video
 176
 177           this.videoUploadObservable = null
 178         }
 179       },
 180
 181       err => {
 182         // Reset progress
 183         this.isUploadingVideo = false
 184         this.videoUploadPercents = 0
 185         this.videoUploadObservable = null
 186         this.notificationsService.error(this.i18n('Error'), err.message)
 187       }
 188     )
 189   }
 190
 191   updateSecondStep () {
 192     if (this.checkForm() === false) {
 193       return
 194     }
 195
 196     const video = new VideoEdit()
 197     video.patch(this.form.value)
 198     video.id = this.videoUploadedIds.id
 199     video.uuid = this.videoUploadedIds.uuid
 200
 201     this.isUpdatingVideo = true
 202
 203     this.updateVideoAndCaptions(video)
 204         .subscribe(
 205           () => {
 206             this.isUpdatingVideo = false
 207             this.isUploadingVideo = false
 208
 209             this.notificationsService.success(this.i18n('Success'), this.i18n('Video published.'))
 210             this.router.navigate([ '/videos/watch', video.uuid ])
 211           },
 212
 213           err => {
 214             this.isUpdatingVideo = false
 215             this.notificationsService.error(this.i18n('Error'), err.message)
 216             console.error(err)
 217           }
 218         )
 219   }
 220 }