diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 16:32:06 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 16:32:06 +0100 |
commit | 27e1a06c331278e5d37bc5172ee7e4fc968e4b5e (patch) | |
tree | b00296c59e573a80dc8f826dce6fe857eea123c5 /client/src/app/videos/+video-edit/video-add.component.ts | |
parent | 4cc66133abf1e37873316999b660c93ab92eb4a0 (diff) | |
download | PeerTube-27e1a06c331278e5d37bc5172ee7e4fc968e4b5e.tar.gz PeerTube-27e1a06c331278e5d37bc5172ee7e4fc968e4b5e.tar.zst PeerTube-27e1a06c331278e5d37bc5172ee7e4fc968e4b5e.zip |
First step upload with new design
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 | 126 |
1 files changed, 45 insertions, 81 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 989addbd7..071f9a28b 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts | |||
@@ -6,61 +6,33 @@ import { NotificationsService } from 'angular2-notifications' | |||
6 | import { VideoService } from 'app/shared/video/video.service' | 6 | import { VideoService } from 'app/shared/video/video.service' |
7 | import { VideoCreate } from '../../../../../shared' | 7 | import { VideoCreate } from '../../../../../shared' |
8 | import { AuthService, ServerService } from '../../core' | 8 | import { AuthService, ServerService } from '../../core' |
9 | import { | 9 | import { FormReactive } from '../../shared' |
10 | FormReactive, | 10 | import { ValidatorMessage } from '../../shared/forms/form-validators' |
11 | VIDEO_CATEGORY, | 11 | import { VideoEdit } from '../../shared/video/video-edit.model' |
12 | VIDEO_CHANNEL, | ||
13 | VIDEO_DESCRIPTION, | ||
14 | VIDEO_FILE, | ||
15 | VIDEO_LANGUAGE, | ||
16 | VIDEO_LICENCE, | ||
17 | VIDEO_NAME, | ||
18 | VIDEO_PRIVACY, | ||
19 | VIDEO_TAGS | ||
20 | } from '../../shared' | ||
21 | 12 | ||
22 | @Component({ | 13 | @Component({ |
23 | selector: 'my-videos-add', | 14 | selector: 'my-videos-add', |
24 | styleUrls: [ './shared/video-edit.component.scss' ], | 15 | templateUrl: './video-add.component.html', |
25 | templateUrl: './video-add.component.html' | 16 | styleUrls: [ |
17 | './shared/video-edit.component.scss', | ||
18 | './video-add.component.scss' | ||
19 | ] | ||
26 | }) | 20 | }) |
27 | 21 | ||
28 | export class VideoAddComponent extends FormReactive implements OnInit { | 22 | export class VideoAddComponent extends FormReactive implements OnInit { |
29 | @ViewChild('videofileInput') videofileInput | 23 | @ViewChild('videofileInput') videofileInput |
30 | 24 | ||
25 | isUploadingVideo = false | ||
31 | progressPercent = 0 | 26 | progressPercent = 0 |
32 | tags: string[] = [] | ||
33 | videoCategories = [] | ||
34 | videoLicences = [] | ||
35 | videoLanguages = [] | ||
36 | videoPrivacies = [] | ||
37 | userVideoChannels = [] | ||
38 | |||
39 | tagValidators = VIDEO_TAGS.VALIDATORS | ||
40 | tagValidatorsMessages = VIDEO_TAGS.MESSAGES | ||
41 | 27 | ||
42 | error: string | 28 | error: string = null |
43 | form: FormGroup | 29 | form: FormGroup |
44 | formErrors = { | 30 | formErrors: { [ id: string ]: string } = {} |
45 | name: '', | 31 | validationMessages: ValidatorMessage = {} |
46 | privacy: '', | 32 | userVideoChannels = [] |
47 | category: '', | 33 | videoPrivacies = [] |
48 | licence: '', | 34 | firstStepPrivacy = 0 |
49 | language: '', | 35 | firstStepChannel = 0 |
50 | channelId: '', | ||
51 | description: '', | ||
52 | videofile: '' | ||
53 | } | ||
54 | validationMessages = { | ||
55 | name: VIDEO_NAME.MESSAGES, | ||
56 | privacy: VIDEO_PRIVACY.MESSAGES, | ||
57 | category: VIDEO_CATEGORY.MESSAGES, | ||
58 | licence: VIDEO_LICENCE.MESSAGES, | ||
59 | language: VIDEO_LANGUAGE.MESSAGES, | ||
60 | channelId: VIDEO_CHANNEL.MESSAGES, | ||
61 | description: VIDEO_DESCRIPTION.MESSAGES, | ||
62 | videofile: VIDEO_FILE.MESSAGES | ||
63 | } | ||
64 | 36 | ||
65 | constructor ( | 37 | constructor ( |
66 | private formBuilder: FormBuilder, | 38 | private formBuilder: FormBuilder, |
@@ -73,35 +45,17 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
73 | super() | 45 | super() |
74 | } | 46 | } |
75 | 47 | ||
76 | get filename () { | ||
77 | return this.form.value['videofile'] | ||
78 | } | ||
79 | |||
80 | buildForm () { | 48 | buildForm () { |
81 | this.form = this.formBuilder.group({ | 49 | this.form = this.formBuilder.group({}) |
82 | name: [ '', VIDEO_NAME.VALIDATORS ], | ||
83 | nsfw: [ false ], | ||
84 | privacy: [ '', VIDEO_PRIVACY.VALIDATORS ], | ||
85 | category: [ '', VIDEO_CATEGORY.VALIDATORS ], | ||
86 | licence: [ '', VIDEO_LICENCE.VALIDATORS ], | ||
87 | language: [ '', VIDEO_LANGUAGE.VALIDATORS ], | ||
88 | channelId: [ '', VIDEO_CHANNEL.VALIDATORS ], | ||
89 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], | ||
90 | videofile: [ '', VIDEO_FILE.VALIDATORS ], | ||
91 | tags: [ '' ] | ||
92 | }) | ||
93 | |||
94 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | 50 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) |
95 | } | 51 | } |
96 | 52 | ||
97 | ngOnInit () { | 53 | ngOnInit () { |
98 | this.videoCategories = this.serverService.getVideoCategories() | ||
99 | this.videoLicences = this.serverService.getVideoLicences() | ||
100 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
101 | this.videoPrivacies = this.serverService.getVideoPrivacies() | ||
102 | |||
103 | this.buildForm() | 54 | this.buildForm() |
104 | 55 | ||
56 | this.videoPrivacies = this.serverService.getVideoPrivacies() | ||
57 | this.firstStepPrivacy = this.videoPrivacies[0].id | ||
58 | |||
105 | this.authService.userInformationLoaded | 59 | this.authService.userInformationLoaded |
106 | .subscribe( | 60 | .subscribe( |
107 | () => { | 61 | () => { |
@@ -112,21 +66,13 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
112 | if (Array.isArray(videoChannels) === false) return | 66 | if (Array.isArray(videoChannels) === false) return |
113 | 67 | ||
114 | this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name })) | 68 | this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name })) |
115 | 69 | this.firstStepChannel = this.userVideoChannels[0].id | |
116 | this.form.patchValue({ channelId: this.userVideoChannels[0].id }) | ||
117 | } | 70 | } |
118 | ) | 71 | ) |
119 | } | 72 | } |
120 | 73 | ||
121 | // The goal is to keep reactive form validation (required field) | ||
122 | // https://stackoverflow.com/a/44238894 | ||
123 | fileChange ($event) { | 74 | fileChange ($event) { |
124 | this.form.controls['videofile'].setValue($event.target.files[0].name) | 75 | console.log('uploading file ?') |
125 | } | ||
126 | |||
127 | removeFile () { | ||
128 | this.videofileInput.nativeElement.value = '' | ||
129 | this.form.controls['videofile'].setValue('') | ||
130 | } | 76 | } |
131 | 77 | ||
132 | checkForm () { | 78 | checkForm () { |
@@ -135,11 +81,7 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
135 | return this.form.valid | 81 | return this.form.valid |
136 | } | 82 | } |
137 | 83 | ||
138 | upload () { | 84 | uploadFirstStep () { |
139 | if (this.checkForm() === false) { | ||
140 | return | ||
141 | } | ||
142 | |||
143 | const formValue: VideoCreate = this.form.value | 85 | const formValue: VideoCreate = this.form.value |
144 | 86 | ||
145 | const name = formValue.name | 87 | const name = formValue.name |
@@ -193,4 +135,26 @@ export class VideoAddComponent extends FormReactive implements OnInit { | |||
193 | } | 135 | } |
194 | ) | 136 | ) |
195 | } | 137 | } |
138 | |||
139 | updateSecondStep () { | ||
140 | if (this.checkForm() === false) { | ||
141 | return | ||
142 | } | ||
143 | |||
144 | const video = new VideoEdit(this.form.value) | ||
145 | |||
146 | this.videoService.updateVideo(video) | ||
147 | .subscribe( | ||
148 | () => { | ||
149 | this.notificationsService.success('Success', 'Video published.') | ||
150 | this.router.navigate([ '/videos/watch', video.uuid ]) | ||
151 | }, | ||
152 | |||
153 | err => { | ||
154 | this.error = 'Cannot update the video.' | ||
155 | console.error(err) | ||
156 | } | ||
157 | ) | ||
158 | |||
159 | } | ||
196 | } | 160 | } |