2017-09-14 15:06:31 +00:00
|
|
|
import { Component, OnInit, ViewChild } from '@angular/core'
|
2017-06-16 12:32:15 +00:00
|
|
|
import { FormBuilder, FormGroup } from '@angular/forms'
|
|
|
|
import { Router } from '@angular/router'
|
2016-03-14 12:50:19 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
import { NotificationsService } from 'angular2-notifications'
|
2016-05-23 07:50:26 +00:00
|
|
|
|
2017-03-22 20:15:55 +00:00
|
|
|
import {
|
|
|
|
FormReactive,
|
|
|
|
VIDEO_NAME,
|
|
|
|
VIDEO_CATEGORY,
|
2017-03-27 19:11:37 +00:00
|
|
|
VIDEO_LICENCE,
|
2017-04-07 12:57:05 +00:00
|
|
|
VIDEO_LANGUAGE,
|
2017-03-22 20:15:55 +00:00
|
|
|
VIDEO_DESCRIPTION,
|
2017-10-09 17:12:40 +00:00
|
|
|
VIDEO_TAGS,
|
2017-10-25 15:31:11 +00:00
|
|
|
VIDEO_CHANNEL,
|
2017-10-09 17:12:40 +00:00
|
|
|
VIDEO_FILE
|
2017-06-16 12:32:15 +00:00
|
|
|
} from '../../shared'
|
2017-10-25 15:31:11 +00:00
|
|
|
import { AuthService, ServerService } from '../../core'
|
2017-06-16 12:32:15 +00:00
|
|
|
import { VideoService } from '../shared'
|
2017-07-10 17:43:21 +00:00
|
|
|
import { VideoCreate } from '../../../../../shared'
|
2017-09-14 15:06:31 +00:00
|
|
|
import { HttpEventType, HttpResponse } from '@angular/common/http'
|
2016-04-14 20:07:46 +00:00
|
|
|
|
2016-03-14 12:50:19 +00:00
|
|
|
@Component({
|
|
|
|
selector: 'my-videos-add',
|
2017-04-10 19:15:28 +00:00
|
|
|
styleUrls: [ './video-edit.component.scss' ],
|
2016-09-19 20:49:31 +00:00
|
|
|
templateUrl: './video-add.component.html'
|
2016-03-14 12:50:19 +00:00
|
|
|
})
|
|
|
|
|
2016-09-09 20:16:51 +00:00
|
|
|
export class VideoAddComponent extends FormReactive implements OnInit {
|
2017-09-14 15:06:31 +00:00
|
|
|
@ViewChild('videofileInput') videofileInput
|
|
|
|
|
|
|
|
progressPercent = 0
|
2017-06-16 12:32:15 +00:00
|
|
|
tags: string[] = []
|
|
|
|
videoCategories = []
|
|
|
|
videoLicences = []
|
|
|
|
videoLanguages = []
|
2017-10-25 15:31:11 +00:00
|
|
|
userVideoChannels = []
|
2016-09-09 20:16:51 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
tagValidators = VIDEO_TAGS.VALIDATORS
|
|
|
|
tagValidatorsMessages = VIDEO_TAGS.MESSAGES
|
2017-04-16 12:06:48 +00:00
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
error: string
|
2017-06-16 12:32:15 +00:00
|
|
|
form: FormGroup
|
2016-09-09 20:16:51 +00:00
|
|
|
formErrors = {
|
2016-06-07 20:34:02 +00:00
|
|
|
name: '',
|
2017-03-22 20:15:55 +00:00
|
|
|
category: '',
|
2017-03-27 19:11:37 +00:00
|
|
|
licence: '',
|
2017-04-07 12:57:05 +00:00
|
|
|
language: '',
|
2017-10-25 15:31:11 +00:00
|
|
|
channelId: '',
|
2017-09-14 15:06:31 +00:00
|
|
|
description: '',
|
|
|
|
videofile: ''
|
2017-06-16 12:32:15 +00:00
|
|
|
}
|
2016-09-09 20:16:51 +00:00
|
|
|
validationMessages = {
|
|
|
|
name: VIDEO_NAME.MESSAGES,
|
2017-03-22 20:15:55 +00:00
|
|
|
category: VIDEO_CATEGORY.MESSAGES,
|
2017-03-27 19:11:37 +00:00
|
|
|
licence: VIDEO_LICENCE.MESSAGES,
|
2017-04-07 12:57:05 +00:00
|
|
|
language: VIDEO_LANGUAGE.MESSAGES,
|
2017-10-25 15:31:11 +00:00
|
|
|
channelId: VIDEO_CHANNEL.MESSAGES,
|
2017-09-14 15:06:31 +00:00
|
|
|
description: VIDEO_DESCRIPTION.MESSAGES,
|
|
|
|
videofile: VIDEO_FILE.MESSAGES
|
2017-06-16 12:32:15 +00:00
|
|
|
}
|
2016-03-14 12:50:19 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
constructor (
|
2016-09-09 20:16:51 +00:00
|
|
|
private formBuilder: FormBuilder,
|
2017-01-27 15:14:11 +00:00
|
|
|
private router: Router,
|
2017-03-22 20:15:55 +00:00
|
|
|
private notificationsService: NotificationsService,
|
2017-10-25 15:31:11 +00:00
|
|
|
private authService: AuthService,
|
2017-10-09 17:12:40 +00:00
|
|
|
private serverService: ServerService,
|
2017-03-22 20:15:55 +00:00
|
|
|
private videoService: VideoService
|
2016-09-09 20:16:51 +00:00
|
|
|
) {
|
2017-06-16 12:32:15 +00:00
|
|
|
super()
|
2016-09-09 20:16:51 +00:00
|
|
|
}
|
2016-03-14 12:50:19 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
get filename () {
|
2017-09-14 15:06:31 +00:00
|
|
|
return this.form.value['videofile']
|
2016-06-07 20:34:02 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
buildForm () {
|
2016-09-09 20:16:51 +00:00
|
|
|
this.form = this.formBuilder.group({
|
|
|
|
name: [ '', VIDEO_NAME.VALIDATORS ],
|
2017-04-04 19:37:03 +00:00
|
|
|
nsfw: [ false ],
|
2017-03-22 20:15:55 +00:00
|
|
|
category: [ '', VIDEO_CATEGORY.VALIDATORS ],
|
2017-03-27 19:11:37 +00:00
|
|
|
licence: [ '', VIDEO_LICENCE.VALIDATORS ],
|
2017-04-07 12:57:05 +00:00
|
|
|
language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
|
2017-10-25 15:31:11 +00:00
|
|
|
channelId: [ this.userVideoChannels[0].id, VIDEO_CHANNEL.VALIDATORS ],
|
2016-09-09 20:16:51 +00:00
|
|
|
description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
|
2017-09-14 15:06:31 +00:00
|
|
|
videofile: [ '', VIDEO_FILE.VALIDATORS ],
|
|
|
|
tags: [ '' ]
|
2017-06-16 12:32:15 +00:00
|
|
|
})
|
2016-09-09 20:16:51 +00:00
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.form.valueChanges.subscribe(data => this.onValueChanged(data))
|
2016-06-07 20:34:02 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
ngOnInit () {
|
2017-10-09 17:12:40 +00:00
|
|
|
this.videoCategories = this.serverService.getVideoCategories()
|
|
|
|
this.videoLicences = this.serverService.getVideoLicences()
|
|
|
|
this.videoLanguages = this.serverService.getVideoLanguages()
|
2017-03-22 20:15:55 +00:00
|
|
|
|
2017-10-25 15:31:11 +00:00
|
|
|
const user = this.authService.getUser()
|
|
|
|
this.userVideoChannels = user.videoChannels.map(v => ({ id: v.id, label: v.name }))
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
this.buildForm()
|
2016-06-07 20:34:02 +00:00
|
|
|
}
|
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
// The goal is to keep reactive form validation (required field)
|
|
|
|
// https://stackoverflow.com/a/44238894
|
|
|
|
fileChange ($event) {
|
|
|
|
this.form.controls['videofile'].setValue($event.target.files[0].name)
|
2016-11-27 17:10:26 +00:00
|
|
|
}
|
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
removeFile () {
|
|
|
|
this.videofileInput.nativeElement.value = ''
|
|
|
|
this.form.controls['videofile'].setValue('')
|
2016-11-27 17:10:26 +00:00
|
|
|
}
|
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
checkForm () {
|
|
|
|
this.forceCheck()
|
|
|
|
|
|
|
|
return this.form.valid
|
2016-06-07 20:34:02 +00:00
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
upload () {
|
2016-11-27 17:10:26 +00:00
|
|
|
if (this.checkForm() === false) {
|
2017-06-16 12:32:15 +00:00
|
|
|
return
|
2016-11-27 17:10:26 +00:00
|
|
|
}
|
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
const formValue: VideoCreate = this.form.value
|
|
|
|
|
|
|
|
const name = formValue.name
|
|
|
|
const nsfw = formValue.nsfw
|
|
|
|
const category = formValue.category
|
|
|
|
const licence = formValue.licence
|
|
|
|
const language = formValue.language
|
2017-10-25 15:31:11 +00:00
|
|
|
const channelId = formValue.channelId
|
2017-09-14 15:06:31 +00:00
|
|
|
const description = formValue.description
|
|
|
|
const tags = formValue.tags
|
|
|
|
const videofile = this.videofileInput.nativeElement.files[0]
|
|
|
|
|
|
|
|
const formData = new FormData()
|
|
|
|
formData.append('name', name)
|
|
|
|
formData.append('category', '' + category)
|
|
|
|
formData.append('nsfw', '' + nsfw)
|
|
|
|
formData.append('licence', '' + licence)
|
2017-10-25 15:31:11 +00:00
|
|
|
formData.append('channelId', '' + channelId)
|
2017-09-14 15:06:31 +00:00
|
|
|
formData.append('videofile', videofile)
|
|
|
|
|
|
|
|
// Language is optional
|
|
|
|
if (language) {
|
|
|
|
formData.append('language', '' + language)
|
2017-06-16 12:32:15 +00:00
|
|
|
}
|
2016-06-07 20:34:02 +00:00
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
formData.append('description', description)
|
|
|
|
|
|
|
|
for (let i = 0; i < tags.length; i++) {
|
|
|
|
formData.append(`tags[${i}]`, tags[i])
|
2017-06-16 12:32:15 +00:00
|
|
|
}
|
2016-06-07 20:34:02 +00:00
|
|
|
|
2017-09-14 15:06:31 +00:00
|
|
|
this.videoService.uploadVideo(formData).subscribe(
|
|
|
|
event => {
|
|
|
|
if (event.type === HttpEventType.UploadProgress) {
|
|
|
|
this.progressPercent = Math.round(100 * event.loaded / event.total)
|
|
|
|
} else if (event instanceof HttpResponse) {
|
|
|
|
console.log('Video uploaded.')
|
|
|
|
this.notificationsService.success('Success', 'Video uploaded.')
|
|
|
|
|
|
|
|
// Display all the videos once it's finished
|
2017-09-14 21:03:43 +00:00
|
|
|
this.router.navigate([ '/videos/list' ])
|
2017-09-14 15:06:31 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-09-14 21:03:43 +00:00
|
|
|
err => {
|
|
|
|
// Reset progress
|
|
|
|
this.progressPercent = 0
|
|
|
|
this.error = err.message
|
|
|
|
}
|
2017-09-14 15:06:31 +00:00
|
|
|
)
|
2016-03-14 12:50:19 +00:00
|
|
|
}
|
|
|
|
}
|