diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-11 11:06:32 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-11 11:06:32 +0100 |
commit | fada8d75550dc7365f7e18ee1569b9406251d660 (patch) | |
tree | db9dc01c18693824f83fce5020f4c1f3ae7c0865 /client/src/app/videos/+video-edit/video-add.component.ts | |
parent | 492fd28167f770d79a430fc57451b5a9e075d8e7 (diff) | |
parent | c2830fa8f84f61462098bf36add824f89436dfa9 (diff) | |
download | PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.gz PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.zst PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.zip |
Merge branch 'feature/design' into develop
Diffstat (limited to 'client/src/app/videos/+video-edit/video-add.component.ts')
-rw-r--r-- | client/src/app/videos/+video-edit/video-add.component.ts | 198 |
1 files changed, 81 insertions, 117 deletions
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 1704cf486..2bbc3de17 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts | |||
@@ -1,68 +1,42 @@ | |||
1 | import { HttpEventType, HttpResponse } from '@angular/common/http' | ||
1 | import { Component, OnInit, ViewChild } from '@angular/core' | 2 | import { Component, OnInit, ViewChild } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | 3 | import { FormBuilder, FormGroup } from '@angular/forms' |
3 | import { Router } from '@angular/router' | 4 | import { Router } from '@angular/router' |
4 | |||
5 | import { NotificationsService } from 'angular2-notifications' | 5 | import { NotificationsService } from 'angular2-notifications' |
6 | 6 | import { VideoService } from 'app/shared/video/video.service' | |
7 | import { | ||
8 | FormReactive, | ||
9 | VIDEO_NAME, | ||
10 | VIDEO_CATEGORY, | ||
11 | VIDEO_LICENCE, | ||
12 | VIDEO_LANGUAGE, | ||
13 | VIDEO_DESCRIPTION, | ||
14 | VIDEO_TAGS, | ||
15 | VIDEO_CHANNEL, | ||
16 | VIDEO_FILE, | ||
17 | VIDEO_PRIVACY | ||
18 | } from '../../shared' | ||
19 | import { AuthService, ServerService } from '../../core' | ||
20 | import { VideoService } from '../shared' | ||
21 | import { VideoCreate } from '../../../../../shared' | 7 | import { VideoCreate } from '../../../../../shared' |
22 | import { HttpEventType, HttpResponse } from '@angular/common/http' | 8 | import { VideoPrivacy } from '../../../../../shared/models/videos' |
9 | import { AuthService, ServerService } from '../../core' | ||
10 | import { FormReactive } from '../../shared' | ||
11 | import { ValidatorMessage } from '../../shared/forms/form-validators' | ||
12 | import { VideoEdit } from '../../shared/video/video-edit.model' | ||
23 | 13 | ||
24 | @Component({ | 14 | @Component({ |
25 | selector: 'my-videos-add', | 15 | selector: 'my-videos-add', |
26 | styleUrls: [ './shared/video-edit.component.scss' ], | 16 | templateUrl: './video-add.component.html', |
27 | templateUrl: './video-add.component.html' | 17 | styleUrls: [ |
18 | './shared/video-edit.component.scss', | ||
19 | './video-add.component.scss' | ||
20 | ] | ||
28 | }) | 21 | }) |
29 | 22 | ||
30 | export class VideoAddComponent extends FormReactive implements OnInit { | 23 | export class VideoAddComponent extends FormReactive implements OnInit { |
31 | @ViewChild('videofileInput') videofileInput | 24 | @ViewChild('videofileInput') videofileInput |
32 | 25 | ||
33 | progressPercent = 0 | 26 | isUploadingVideo = false |
34 | tags: string[] = [] | 27 | videoUploaded = false |
35 | videoCategories = [] | 28 | videoUploadPercents = 0 |
36 | videoLicences = [] | 29 | videoUploadedId = 0 |
37 | videoLanguages = [] | ||
38 | videoPrivacies = [] | ||
39 | userVideoChannels = [] | ||
40 | |||
41 | tagValidators = VIDEO_TAGS.VALIDATORS | ||
42 | tagValidatorsMessages = VIDEO_TAGS.MESSAGES | ||
43 | 30 | ||
44 | error: string | 31 | error: string = null |
45 | form: FormGroup | 32 | form: FormGroup |
46 | formErrors = { | 33 | formErrors: { [ id: string ]: string } = {} |
47 | name: '', | 34 | validationMessages: ValidatorMessage = {} |
48 | privacy: '', | 35 | |
49 | category: '', | 36 | userVideoChannels = [] |
50 | licence: '', | 37 | videoPrivacies = [] |
51 | language: '', | 38 | firstStepPrivacyId = 0 |
52 | channelId: '', | 39 | firstStepChannelId = 0 |
53 | description: '', | ||
54 | videofile: '' | ||
55 | } | ||
56 | validationMessages = { | ||
57 | name: VIDEO_NAME.MESSAGES, | ||
58 | privacy: VIDEO_PRIVACY.MESSAGES, | ||
59 | category: VIDEO_CATEGORY.MESSAGES, | ||
60 | licence: VIDEO_LICENCE.MESSAGES, | ||
61 | language: VIDEO_LANGUAGE.MESSAGES, | ||
62 | channelId: VIDEO_CHANNEL.MESSAGES, | ||
63 | description: VIDEO_DESCRIPTION.MESSAGES, | ||
64 | videofile: VIDEO_FILE.MESSAGES | ||
65 | } | ||
66 | 40 | ||
67 | constructor ( | 41 | constructor ( |
68 | private formBuilder: FormBuilder, | 42 | private formBuilder: FormBuilder, |
@@ -75,35 +49,23 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
75 | super() | 49 | super() |
76 | } | 50 | } |
77 | 51 | ||
78 | get filename () { | ||
79 | return this.form.value['videofile'] | ||
80 | } | ||
81 | |||
82 | buildForm () { | 52 | buildForm () { |
83 | this.form = this.formBuilder.group({ | 53 | this.form = this.formBuilder.group({}) |
84 | name: [ '', VIDEO_NAME.VALIDATORS ], | ||
85 | nsfw: [ false ], | ||
86 | privacy: [ '', VIDEO_PRIVACY.VALIDATORS ], | ||
87 | category: [ '', VIDEO_CATEGORY.VALIDATORS ], | ||
88 | licence: [ '', VIDEO_LICENCE.VALIDATORS ], | ||
89 | language: [ '', VIDEO_LANGUAGE.VALIDATORS ], | ||
90 | channelId: [ '', VIDEO_CHANNEL.VALIDATORS ], | ||
91 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], | ||
92 | videofile: [ '', VIDEO_FILE.VALIDATORS ], | ||
93 | tags: [ '' ] | ||
94 | }) | ||
95 | |||
96 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | 54 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) |
97 | } | 55 | } |
98 | 56 | ||
99 | ngOnInit () { | 57 | ngOnInit () { |
100 | this.videoCategories = this.serverService.getVideoCategories() | ||
101 | this.videoLicences = this.serverService.getVideoLicences() | ||
102 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
103 | this.videoPrivacies = this.serverService.getVideoPrivacies() | ||
104 | |||
105 | this.buildForm() | 58 | this.buildForm() |
106 | 59 | ||
60 | this.serverService.videoPrivaciesLoaded | ||
61 | .subscribe( | ||
62 | () => { | ||
63 | this.videoPrivacies = this.serverService.getVideoPrivacies() | ||
64 | |||
65 | // Public by default | ||
66 | this.firstStepPrivacyId = VideoPrivacy.PUBLIC | ||
67 | }) | ||
68 | |||
107 | this.authService.userInformationLoaded | 69 | this.authService.userInformationLoaded |
108 | .subscribe( | 70 | .subscribe( |
109 | () => { | 71 | () => { |
@@ -114,21 +76,13 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
114 | if (Array.isArray(videoChannels) === false) return | 76 | if (Array.isArray(videoChannels) === false) return |
115 | 77 | ||
116 | this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name })) | 78 | this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name })) |
117 | 79 | this.firstStepChannelId = this.userVideoChannels[0].id | |
118 | this.form.patchValue({ channelId: this.userVideoChannels[0].id }) | ||
119 | } | 80 | } |
120 | ) | 81 | ) |
121 | } | 82 | } |
122 | 83 | ||
123 | // The goal is to keep reactive form validation (required field) | 84 | fileChange () { |
124 | // https://stackoverflow.com/a/44238894 | 85 | this.uploadFirstStep() |
125 | fileChange ($event) { | ||
126 | this.form.controls['videofile'].setValue($event.target.files[0].name) | ||
127 | } | ||
128 | |||
129 | removeFile () { | ||
130 | this.videofileInput.nativeElement.value = '' | ||
131 | this.form.controls['videofile'].setValue('') | ||
132 | } | 86 | } |
133 | 87 | ||
134 | checkForm () { | 88 | checkForm () { |
@@ -137,62 +91,72 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
137 | return this.form.valid | 91 | return this.form.valid |
138 | } | 92 | } |
139 | 93 | ||
140 | upload () { | 94 | uploadFirstStep () { |
141 | if (this.checkForm() === false) { | ||
142 | return | ||
143 | } | ||
144 | |||
145 | const formValue: VideoCreate = this.form.value | ||
146 | |||
147 | const name = formValue.name | ||
148 | const privacy = formValue.privacy | ||
149 | const nsfw = formValue.nsfw | ||
150 | const category = formValue.category | ||
151 | const licence = formValue.licence | ||
152 | const language = formValue.language | ||
153 | const channelId = formValue.channelId | ||
154 | const description = formValue.description | ||
155 | const tags = formValue.tags | ||
156 | const videofile = this.videofileInput.nativeElement.files[0] | 95 | const videofile = this.videofileInput.nativeElement.files[0] |
96 | const name = videofile.name.replace(/\.[^/.]+$/, '') | ||
97 | const privacy = this.firstStepPrivacyId.toString() | ||
98 | const nsfw = false | ||
99 | const channelId = this.firstStepChannelId.toString() | ||
157 | 100 | ||
158 | const formData = new FormData() | 101 | const formData = new FormData() |
159 | formData.append('name', name) | 102 | formData.append('name', name) |
160 | formData.append('privacy', privacy.toString()) | 103 | // Put the video "private" -> we wait he validates the second step |
161 | formData.append('category', '' + category) | 104 | formData.append('privacy', VideoPrivacy.PRIVATE.toString()) |
162 | formData.append('nsfw', '' + nsfw) | 105 | formData.append('nsfw', '' + nsfw) |
163 | formData.append('licence', '' + licence) | ||
164 | formData.append('channelId', '' + channelId) | 106 | formData.append('channelId', '' + channelId) |
165 | formData.append('videofile', videofile) | 107 | formData.append('videofile', videofile) |
166 | 108 | ||
167 | // Language is optional | 109 | this.isUploadingVideo = true |
168 | if (language) { | 110 | this.form.patchValue({ |
169 | formData.append('language', '' + language) | 111 | name, |
170 | } | 112 | privacy, |
171 | 113 | nsfw, | |
172 | formData.append('description', description) | 114 | channelId |
173 | 115 | }) | |
174 | for (let i = 0; i < tags.length; i++) { | ||
175 | formData.append(`tags[${i}]`, tags[i]) | ||
176 | } | ||
177 | 116 | ||
178 | this.videoService.uploadVideo(formData).subscribe( | 117 | this.videoService.uploadVideo(formData).subscribe( |
179 | event => { | 118 | event => { |
180 | if (event.type === HttpEventType.UploadProgress) { | 119 | if (event.type === HttpEventType.UploadProgress) { |
181 | this.progressPercent = Math.round(100 * event.loaded / event.total) | 120 | this.videoUploadPercents = Math.round(100 * event.loaded / event.total) |
182 | } else if (event instanceof HttpResponse) { | 121 | } else if (event instanceof HttpResponse) { |
183 | console.log('Video uploaded.') | 122 | console.log('Video uploaded.') |
184 | this.notificationsService.success('Success', 'Video uploaded.') | ||
185 | 123 | ||
186 | // Display all the videos once it's finished | 124 | this.videoUploaded = true |
187 | this.router.navigate([ '/videos/list' ]) | 125 | |
126 | this.videoUploadedId = event.body.video.id | ||
188 | } | 127 | } |
189 | }, | 128 | }, |
190 | 129 | ||
191 | err => { | 130 | err => { |
192 | // Reset progress | 131 | // Reset progress |
193 | this.progressPercent = 0 | 132 | this.videoUploadPercents = 0 |
194 | this.error = err.message | 133 | this.error = err.message |
195 | } | 134 | } |
196 | ) | 135 | ) |
197 | } | 136 | } |
137 | |||
138 | updateSecondStep () { | ||
139 | if (this.checkForm() === false) { | ||
140 | return | ||
141 | } | ||
142 | |||
143 | const video = new VideoEdit() | ||
144 | video.patch(this.form.value) | ||
145 | video.channel = this.firstStepChannelId | ||
146 | video.id = this.videoUploadedId | ||
147 | |||
148 | this.videoService.updateVideo(video) | ||
149 | .subscribe( | ||
150 | () => { | ||
151 | this.notificationsService.success('Success', 'Video published.') | ||
152 | this.router.navigate([ '/videos/watch', video.id ]) | ||
153 | }, | ||
154 | |||
155 | err => { | ||
156 | this.error = 'Cannot update the video.' | ||
157 | console.error(err) | ||
158 | } | ||
159 | ) | ||
160 | |||
161 | } | ||
198 | } | 162 | } |