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 { AuthService, ServerService } from '../../core'
   9 import { FormReactive } from '../../shared'
  10 import { ValidatorMessage } from '../../shared/forms/form-validators'
  11 import { VideoEdit } from '../../shared/video/video-edit.model'
  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
  29   error: string = null
  30   form: FormGroup
  31   formErrors: { [ id: string ]: string } = {}
  32   validationMessages: ValidatorMessage = {}
  33
  34   userVideoChannels = []
  35   videoPrivacies = []
  36   firstStepPrivacy = 0
  37   firstStepChannel = 0
  38
  39   constructor (
  40     private formBuilder: FormBuilder,
  41     private router: Router,
  42     private notificationsService: NotificationsService,
  43     private authService: AuthService,
  44     private serverService: ServerService,
  45     private videoService: VideoService
  46   ) {
  47     super()
  48   }
  49
  50   buildForm () {
  51     this.form = this.formBuilder.group({})
  52     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  53   }
  54
  55   ngOnInit () {
  56     this.buildForm()
  57
  58     this.serverService.videoPrivaciesLoaded
  59       .subscribe(
  60         () => {
  61           this.videoPrivacies = this.serverService.getVideoPrivacies()
  62           this.firstStepPrivacy = this.videoPrivacies[0].id
  63         })
  64
  65     this.authService.userInformationLoaded
  66       .subscribe(
  67         () => {
  68           const user = this.authService.getUser()
  69           if (!user) return
  70
  71           const videoChannels = user.videoChannels
  72           if (Array.isArray(videoChannels) === false) return
  73
  74           this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
  75           this.firstStepChannel = this.userVideoChannels[0].id
  76         }
  77       )
  78   }
  79
  80   fileChange () {
  81     this.uploadFirstStep()
  82   }
  83
  84   checkForm () {
  85     this.forceCheck()
  86
  87     return this.form.valid
  88   }
  89
  90   uploadFirstStep () {
  91     const videofile = this.videofileInput.nativeElement.files[0]
  92     const name = videofile.name
  93     const privacy = this.firstStepPrivacy.toString()
  94     const nsfw = false
  95     const channelId = this.firstStepChannel.toString()
  96
  97     const formData = new FormData()
  98     formData.append('name', name)
  99     formData.append('privacy', privacy.toString())
 100     formData.append('nsfw', '' + nsfw)
 101     formData.append('channelId', '' + channelId)
 102     formData.append('videofile', videofile)
 103
 104     this.isUploadingVideo = true
 105     this.form.patchValue({
 106       name,
 107       privacy,
 108       nsfw,
 109       channelId
 110     })
 111
 112     this.videoService.uploadVideo(formData).subscribe(
 113       event => {
 114         if (event.type === HttpEventType.UploadProgress) {
 115           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
 116         } else if (event instanceof HttpResponse) {
 117           console.log('Video uploaded.')
 118
 119           this.videoUploaded = true
 120         }
 121       },
 122
 123       err => {
 124         // Reset progress
 125         this.videoUploadPercents = 0
 126         this.error = err.message
 127       }
 128     )
 129   }
 130
 131   updateSecondStep () {
 132     if (this.checkForm() === false) {
 133       return
 134     }
 135
 136     const video = new VideoEdit(this.form.value)
 137
 138     this.videoService.updateVideo(video)
 139       .subscribe(
 140         () => {
 141           this.notificationsService.success('Success', 'Video published.')
 142           this.router.navigate([ '/videos/watch', video.uuid ])
 143         },
 144
 145         err => {
 146           this.error = 'Cannot update the video.'
 147           console.error(err)
 148         }
 149       )
 150
 151   }
 152 }