1 import { Component, OnInit, ViewChild } from '@angular/core'
2 import { FormBuilder, FormGroup } from '@angular/forms'
3 import { Router } from '@angular/router'
5 import { NotificationsService } from 'angular2-notifications'
17 import { ServerService } from '../../core'
18 import { VideoService } from '../shared'
19 import { VideoCreate } from '../../../../../shared'
20 import { HttpEventType, HttpResponse } from '@angular/common/http'
23 selector: 'my-videos-add',
24 styleUrls: [ './video-edit.component.scss' ],
25 templateUrl: './video-add.component.html'
28 export class VideoAddComponent extends FormReactive implements OnInit {
29 @ViewChild('videofileInput') videofileInput
37 tagValidators = VIDEO_TAGS.VALIDATORS
38 tagValidatorsMessages = VIDEO_TAGS.MESSAGES
50 validationMessages = {
51 name: VIDEO_NAME.MESSAGES,
52 category: VIDEO_CATEGORY.MESSAGES,
53 licence: VIDEO_LICENCE.MESSAGES,
54 language: VIDEO_LANGUAGE.MESSAGES,
55 description: VIDEO_DESCRIPTION.MESSAGES,
56 videofile: VIDEO_FILE.MESSAGES
60 private formBuilder: FormBuilder,
61 private router: Router,
62 private notificationsService: NotificationsService,
63 private serverService: ServerService,
64 private videoService: VideoService
70 return this.form.value['videofile']
74 this.form = this.formBuilder.group({
75 name: [ '', VIDEO_NAME.VALIDATORS ],
77 category: [ '', VIDEO_CATEGORY.VALIDATORS ],
78 licence: [ '', VIDEO_LICENCE.VALIDATORS ],
79 language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
80 description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
81 videofile: [ '', VIDEO_FILE.VALIDATORS ],
85 this.form.valueChanges.subscribe(data => this.onValueChanged(data))
89 this.videoCategories = this.serverService.getVideoCategories()
90 this.videoLicences = this.serverService.getVideoLicences()
91 this.videoLanguages = this.serverService.getVideoLanguages()
96 // The goal is to keep reactive form validation (required field)
97 // https://stackoverflow.com/a/44238894
99 this.form.controls['videofile'].setValue($event.target.files[0].name)
103 this.videofileInput.nativeElement.value = ''
104 this.form.controls['videofile'].setValue('')
110 return this.form.valid
114 if (this.checkForm() === false) {
118 const formValue: VideoCreate = this.form.value
120 const name = formValue.name
121 const nsfw = formValue.nsfw
122 const category = formValue.category
123 const licence = formValue.licence
124 const language = formValue.language
125 const description = formValue.description
126 const tags = formValue.tags
127 const videofile = this.videofileInput.nativeElement.files[0]
129 const formData = new FormData()
130 formData.append('name', name)
131 formData.append('category', '' + category)
132 formData.append('nsfw', '' + nsfw)
133 formData.append('licence', '' + licence)
134 formData.append('videofile', videofile)
136 // Language is optional
138 formData.append('language', '' + language)
141 formData.append('description', description)
143 for (let i = 0; i < tags.length; i++) {
144 formData.append(`tags[${i}]`, tags[i])
147 this.videoService.uploadVideo(formData).subscribe(
149 if (event.type === HttpEventType.UploadProgress) {
150 this.progressPercent = Math.round(100 * event.loaded / event.total)
151 } else if (event instanceof HttpResponse) {
152 console.log('Video uploaded.')
153 this.notificationsService.success('Success', 'Video uploaded.')
155 // Display all the videos once it's finished
156 this.router.navigate([ '/videos/list' ])
162 this.progressPercent = 0
163 this.error = err.message