diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-04-10 21:15:28 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-04-10 21:16:36 +0200 |
commit | d8e689b864749648d03cf4391fd4a475126f01cd (patch) | |
tree | 299713e3c056873ba6fff5247b8f49a542f0bf45 /client/src/app/videos/video-edit/video-update.component.ts | |
parent | a184c71b526000f60f00649d260638723d426e6a (diff) | |
download | PeerTube-d8e689b864749648d03cf4391fd4a475126f01cd.tar.gz PeerTube-d8e689b864749648d03cf4391fd4a475126f01cd.tar.zst PeerTube-d8e689b864749648d03cf4391fd4a475126f01cd.zip |
Client: add basic support for updating a video
Diffstat (limited to 'client/src/app/videos/video-edit/video-update.component.ts')
-rw-r--r-- | client/src/app/videos/video-edit/video-update.component.ts | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/client/src/app/videos/video-edit/video-update.component.ts b/client/src/app/videos/video-edit/video-update.component.ts new file mode 100644 index 000000000..b45780a41 --- /dev/null +++ b/client/src/app/videos/video-edit/video-update.component.ts | |||
@@ -0,0 +1,170 @@ | |||
1 | import { Component, ElementRef, OnInit } from '@angular/core'; | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms'; | ||
3 | import { ActivatedRoute, Router } from '@angular/router'; | ||
4 | |||
5 | import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; | ||
6 | import { NotificationsService } from 'angular2-notifications'; | ||
7 | |||
8 | import { AuthService } from '../../core'; | ||
9 | import { | ||
10 | FormReactive, | ||
11 | VIDEO_NAME, | ||
12 | VIDEO_CATEGORY, | ||
13 | VIDEO_LICENCE, | ||
14 | VIDEO_LANGUAGE, | ||
15 | VIDEO_DESCRIPTION, | ||
16 | VIDEO_TAGS | ||
17 | } from '../../shared'; | ||
18 | import { Video, VideoService } from '../shared'; | ||
19 | |||
20 | @Component({ | ||
21 | selector: 'my-videos-update', | ||
22 | styleUrls: [ './video-edit.component.scss' ], | ||
23 | templateUrl: './video-update.component.html' | ||
24 | }) | ||
25 | |||
26 | export class VideoUpdateComponent extends FormReactive implements OnInit { | ||
27 | tags: string[] = []; | ||
28 | videoCategories = []; | ||
29 | videoLicences = []; | ||
30 | videoLanguages = []; | ||
31 | video: Video; | ||
32 | |||
33 | error: string = null; | ||
34 | form: FormGroup; | ||
35 | formErrors = { | ||
36 | name: '', | ||
37 | category: '', | ||
38 | licence: '', | ||
39 | language: '', | ||
40 | description: '', | ||
41 | currentTag: '' | ||
42 | }; | ||
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 | ||
50 | }; | ||
51 | |||
52 | // Special error messages | ||
53 | tagsError = ''; | ||
54 | fileError = ''; | ||
55 | |||
56 | constructor( | ||
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 | ||
64 | ) { | ||
65 | super(); | ||
66 | } | ||
67 | |||
68 | buildForm() { | ||
69 | this.form = this.formBuilder.group({ | ||
70 | name: [ '', VIDEO_NAME.VALIDATORS ], | ||
71 | nsfw: [ false ], | ||
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 ] | ||
77 | }); | ||
78 | |||
79 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)); | ||
80 | } | ||
81 | |||
82 | ngOnInit() { | ||
83 | this.buildForm(); | ||
84 | |||
85 | this.videoCategories = this.videoService.videoCategories; | ||
86 | this.videoLicences = this.videoService.videoLicences; | ||
87 | this.videoLanguages = this.videoService.videoLanguages; | ||
88 | |||
89 | const id = this.route.snapshot.params['id']; | ||
90 | this.videoService.getVideo(id) | ||
91 | .subscribe( | ||
92 | video => { | ||
93 | this.video = video; | ||
94 | |||
95 | this.hydrateFormFromVideo(); | ||
96 | }, | ||
97 | |||
98 | err => this.error = 'Cannot fetch video.' | ||
99 | ); | ||
100 | } | ||
101 | |||
102 | checkForm() { | ||
103 | this.forceCheck(); | ||
104 | |||
105 | return this.form.valid === true && this.tagsError === '' && this.fileError === ''; | ||
106 | } | ||
107 | |||
108 | |||
109 | onTagKeyPress(event: KeyboardEvent) { | ||
110 | // Enter press | ||
111 | if (event.keyCode === 13) { | ||
112 | this.addTagIfPossible(); | ||
113 | } | ||
114 | } | ||
115 | |||
116 | removeTag(tag: string) { | ||
117 | this.tags.splice(this.tags.indexOf(tag), 1); | ||
118 | this.form.get('currentTag').enable(); | ||
119 | } | ||
120 | |||
121 | update() { | ||
122 | // Maybe the user forgot to press "enter" when he filled the field | ||
123 | this.addTagIfPossible(); | ||
124 | |||
125 | if (this.checkForm() === false) { | ||
126 | return; | ||
127 | } | ||
128 | |||
129 | this.video.patch(this.form.value); | ||
130 | |||
131 | this.videoService.updateVideo(this.video) | ||
132 | .subscribe( | ||
133 | () => { | ||
134 | this.notificationsService.success('Success', 'Video updated.'); | ||
135 | this.router.navigate([ '/videos/watch', this.video.id ]); | ||
136 | }, | ||
137 | |||
138 | err => { | ||
139 | this.error = 'Cannot update the video.'; | ||
140 | console.error(err); | ||
141 | } | ||
142 | ); | ||
143 | |||
144 | } | ||
145 | |||
146 | private addTagIfPossible() { | ||
147 | const currentTag = this.form.value['currentTag']; | ||
148 | if (currentTag === undefined) return; | ||
149 | |||
150 | // Check if the tag is valid and does not already exist | ||
151 | if ( | ||
152 | currentTag.length >= 2 && | ||
153 | this.form.controls['currentTag'].valid && | ||
154 | this.tags.indexOf(currentTag) === -1 | ||
155 | ) { | ||
156 | this.tags.push(currentTag); | ||
157 | this.form.patchValue({ currentTag: '' }); | ||
158 | |||
159 | if (this.tags.length >= 3) { | ||
160 | this.form.get('currentTag').disable(); | ||
161 | } | ||
162 | |||
163 | this.tagsError = ''; | ||
164 | } | ||
165 | } | ||
166 | |||
167 | private hydrateFormFromVideo() { | ||
168 | this.form.patchValue(this.video.toJSON()); | ||
169 | } | ||
170 | } | ||