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