1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import { Component, ElementRef, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { NotificationsService } from 'angular2-notifications';
import { AuthService } from '../../core';
import {
FormReactive,
VIDEO_NAME,
VIDEO_CATEGORY,
VIDEO_LICENCE,
VIDEO_LANGUAGE,
VIDEO_DESCRIPTION,
VIDEO_TAGS
} from '../../shared';
import { Video, VideoService } from '../shared';
@Component({
selector: 'my-videos-update',
styleUrls: [ './video-edit.component.scss' ],
templateUrl: './video-update.component.html'
})
export class VideoUpdateComponent extends FormReactive implements OnInit {
tags: string[] = [];
videoCategories = [];
videoLicences = [];
videoLanguages = [];
video: Video;
tagValidators = VIDEO_TAGS.VALIDATORS;
tagValidatorsMessages = VIDEO_TAGS.MESSAGES;
error: string = null;
form: FormGroup;
formErrors = {
name: '',
category: '',
licence: '',
language: '',
description: ''
};
validationMessages = {
name: VIDEO_NAME.MESSAGES,
category: VIDEO_CATEGORY.MESSAGES,
licence: VIDEO_LICENCE.MESSAGES,
language: VIDEO_LANGUAGE.MESSAGES,
description: VIDEO_DESCRIPTION.MESSAGES
};
fileError = '';
constructor(
private authService: AuthService,
private elementRef: ElementRef,
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private notificationsService: NotificationsService,
private videoService: VideoService
) {
super();
}
buildForm() {
this.form = this.formBuilder.group({
name: [ '', VIDEO_NAME.VALIDATORS ],
nsfw: [ false ],
category: [ '', VIDEO_CATEGORY.VALIDATORS ],
licence: [ '', VIDEO_LICENCE.VALIDATORS ],
language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
tags: [ '' ]
});
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
}
ngOnInit() {
this.buildForm();
this.videoCategories = this.videoService.videoCategories;
this.videoLicences = this.videoService.videoLicences;
this.videoLanguages = this.videoService.videoLanguages;
const id = this.route.snapshot.params['id'];
this.videoService.getVideo(id)
.subscribe(
video => {
this.video = video;
this.hydrateFormFromVideo();
},
err => this.error = 'Cannot fetch video.'
);
}
update() {
this.video.patch(this.form.value);
this.videoService.updateVideo(this.video)
.subscribe(
() => {
this.notificationsService.success('Success', 'Video updated.');
this.router.navigate([ '/videos/watch', this.video.id ]);
},
err => {
this.error = 'Cannot update the video.';
console.error(err);
}
);
}
private hydrateFormFromVideo() {
this.form.patchValue(this.video.toJSON());
}
}
|
