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