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

   1 import { HttpEventType, HttpResponse } from '@angular/common/http'
   2 import { Component, OnInit, ViewChild } from '@angular/core'
   3 import { FormBuilder, FormGroup } from '@angular/forms'
   4 import { Router } from '@angular/router'
   5 import { NotificationsService } from 'angular2-notifications'
   6 import { VideoPrivacy } from '../../../../../shared/models/videos'
   7 import { AuthService, ServerService } from '../../core'
   8 import { FormReactive } from '../../shared'
   9 import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
  10 import { VideoEdit } from '../../shared/video/video-edit.model'
  11 import { VideoService } from '../../shared/video/video.service'
  12
  13 @Component({
  14   selector: 'my-videos-add',
  15   templateUrl: './video-add.component.html',
  16   styleUrls: [
  17     './shared/video-edit.component.scss',
  18     './video-add.component.scss'
  19   ]
  20 })
  21
  22 export class VideoAddComponent extends FormReactive implements OnInit {
  23   @ViewChild('videofileInput') videofileInput
  24
  25   isUploadingVideo = false
  26   videoUploaded = false
  27   videoUploadPercents = 0
  28   videoUploadedIds = {
  29     id: 0,
  30     uuid: ''
  31   }
  32
  33   error: string = null
  34   form: FormGroup
  35   formErrors: { [ id: string ]: string } = {}
  36   validationMessages: ValidatorMessage = {}
  37
  38   userVideoChannels = []
  39   videoPrivacies = []
  40   firstStepPrivacyId = 0
  41   firstStepChannelId = 0
  42
  43   constructor (
  44     private formBuilder: FormBuilder,
  45     private router: Router,
  46     private notificationsService: NotificationsService,
  47     private authService: AuthService,
  48     private serverService: ServerService,
  49     private videoService: VideoService
  50   ) {
  51     super()
  52   }
  53
  54   buildForm () {
  55     this.form = this.formBuilder.group({})
  56     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  57   }
  58
  59   ngOnInit () {
  60     this.buildForm()
  61
  62     this.serverService.videoPrivaciesLoaded
  63       .subscribe(
  64         () => {
  65           this.videoPrivacies = this.serverService.getVideoPrivacies()
  66
  67           // Public by default
  68           this.firstStepPrivacyId = VideoPrivacy.PUBLIC
  69         })
  70
  71     this.authService.userInformationLoaded
  72       .subscribe(
  73         () => {
  74           const user = this.authService.getUser()
  75           if (!user) return
  76
  77           const videoChannels = user.videoChannels
  78           if (Array.isArray(videoChannels) === false) return
  79
  80           this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
  81           this.firstStepChannelId = this.userVideoChannels[0].id
  82         }
  83       )
  84   }
  85
  86   fileChange () {
  87     this.uploadFirstStep()
  88   }
  89
  90   checkForm () {
  91     this.forceCheck()
  92
  93     return this.form.valid
  94   }
  95
  96   uploadFirstStep () {
  97     const videofile = this.videofileInput.nativeElement.files[0]
  98     const name = videofile.name.replace(/\.[^/.]+$/, '')
  99     const privacy = this.firstStepPrivacyId.toString()
 100     const nsfw = false
 101     const channelId = this.firstStepChannelId.toString()
 102
 103     const formData = new FormData()
 104     formData.append('name', name)
 105     // Put the video "private" -> we wait he validates the second step
 106     formData.append('privacy', VideoPrivacy.PRIVATE.toString())
 107     formData.append('nsfw', '' + nsfw)
 108     formData.append('channelId', '' + channelId)
 109     formData.append('videofile', videofile)
 110
 111     this.isUploadingVideo = true
 112     this.form.patchValue({
 113       name,
 114       privacy,
 115       nsfw,
 116       channelId
 117     })
 118
 119     this.videoService.uploadVideo(formData).subscribe(
 120       event => {
 121         if (event.type === HttpEventType.UploadProgress) {
 122           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
 123         } else if (event instanceof HttpResponse) {
 124           console.log('Video uploaded.')
 125
 126           this.videoUploaded = true
 127
 128           this.videoUploadedIds = event.body.video
 129         }
 130       },
 131
 132       err => {
 133         // Reset progress
 134         this.videoUploadPercents = 0
 135         this.error = err.message
 136       }
 137     )
 138   }
 139
 140   updateSecondStep () {
 141     if (this.checkForm() === false) {
 142       return
 143     }
 144
 145     const video = new VideoEdit()
 146     video.patch(this.form.value)
 147     video.channel = this.firstStepChannelId
 148     video.id = this.videoUploadedIds.id
 149     video.uuid = this.videoUploadedIds.uuid
 150
 151     this.videoService.updateVideo(video)
 152       .subscribe(
 153         () => {
 154           this.notificationsService.success('Success', 'Video published.')
 155           this.router.navigate([ '/videos/watch', video.uuid ])
 156         },
 157
 158         err => {
 159           this.error = 'Cannot update the video.'
 160           console.error(err)
 161         }
 162       )
 163
 164   }
 165 }