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

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