1 import { Component, ElementRef, OnInit } from '@angular/core';
2 import { FormBuilder, FormGroup } from '@angular/forms';
3 import { ActivatedRoute, Router } from '@angular/router';
5 import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
6 import { NotificationsService } from 'angular2-notifications';
8 import { AuthService } from '../../core';
17 } from '../../shared';
18 import { Video, VideoService } from '../shared';
21 selector: 'my-videos-update',
22 styleUrls: [ './video-edit.component.scss' ],
23 templateUrl: './video-update.component.html'
26 export class VideoUpdateComponent extends FormReactive implements OnInit {
43 validationMessages = {
44 name: VIDEO_NAME.MESSAGES,
45 category: VIDEO_CATEGORY.MESSAGES,
46 licence: VIDEO_LICENCE.MESSAGES,
47 language: VIDEO_LANGUAGE.MESSAGES,
48 description: VIDEO_DESCRIPTION.MESSAGES,
49 currentTag: VIDEO_TAGS.MESSAGES
52 // Special error messages
57 private authService: AuthService,
58 private elementRef: ElementRef,
59 private formBuilder: FormBuilder,
60 private route: ActivatedRoute,
61 private router: Router,
62 private notificationsService: NotificationsService,
63 private videoService: VideoService
69 this.form = this.formBuilder.group({
70 name: [ '', VIDEO_NAME.VALIDATORS ],
72 category: [ '', VIDEO_CATEGORY.VALIDATORS ],
73 licence: [ '', VIDEO_LICENCE.VALIDATORS ],
74 language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
75 description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
76 currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
79 this.form.valueChanges.subscribe(data => this.onValueChanged(data));
85 this.videoCategories = this.videoService.videoCategories;
86 this.videoLicences = this.videoService.videoLicences;
87 this.videoLanguages = this.videoService.videoLanguages;
89 const id = this.route.snapshot.params['id'];
90 this.videoService.getVideo(id)
95 this.hydrateFormFromVideo();
98 err => this.error = 'Cannot fetch video.'
105 return this.form.valid === true && this.tagsError === '' && this.fileError === '';
109 onTagKeyPress(event: KeyboardEvent) {
111 if (event.keyCode === 13) {
112 this.addTagIfPossible();
116 removeTag(tag: string) {
117 this.tags.splice(this.tags.indexOf(tag), 1);
118 this.form.get('currentTag').enable();
122 // Maybe the user forgot to press "enter" when he filled the field
123 this.addTagIfPossible();
125 if (this.checkForm() === false) {
129 this.video.patch(this.form.value);
131 this.videoService.updateVideo(this.video)
134 this.notificationsService.success('Success', 'Video updated.');
135 this.router.navigate([ '/videos/watch', this.video.id ]);
139 this.error = 'Cannot update the video.';
146 private addTagIfPossible() {
147 const currentTag = this.form.value['currentTag'];
148 if (currentTag === undefined) return;
150 // Check if the tag is valid and does not already exist
152 currentTag.length >= 2 &&
153 this.form.controls['currentTag'].valid &&
154 this.tags.indexOf(currentTag) === -1
156 this.tags.push(currentTag);
157 this.form.patchValue({ currentTag: '' });
159 if (this.tags.length >= 3) {
160 this.form.get('currentTag').disable();
167 private hydrateFormFromVideo() {
168 this.form.patchValue(this.video.toJSON());