diff options
Diffstat (limited to 'client/src/app/+admin/config/edit-custom-config')
4 files changed, 303 insertions, 0 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html new file mode 100644 index 000000000..c568a43b4 --- /dev/null +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html | |||
@@ -0,0 +1,97 @@ | |||
1 | <div class="admin-sub-title">Update PeerTube configuration</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> | ||
4 | |||
5 | <div class="inner-form-title">Cache</div> | ||
6 | |||
7 | <div class="form-group"> | ||
8 | <label for="cachePreviewsSize">Preview cache size</label> | ||
9 | <input | ||
10 | type="text" id="cachePreviewsSize" | ||
11 | formControlName="cachePreviewsSize" [ngClass]="{ 'input-error': formErrors['cachePreviewsSize'] }" | ||
12 | > | ||
13 | <div *ngIf="formErrors.cachePreviewsSize" class="form-error"> | ||
14 | {{ formErrors.cachePreviewsSize }} | ||
15 | </div> | ||
16 | </div> | ||
17 | |||
18 | <div class="inner-form-title">Signup</div> | ||
19 | |||
20 | <div class="form-group"> | ||
21 | <input type="checkbox" id="signupEnabled" formControlName="signupEnabled"> | ||
22 | |||
23 | <label for="signupEnabled"></label> | ||
24 | <label for="signupEnabled">Signup enabled</label> | ||
25 | </div> | ||
26 | |||
27 | <div *ngIf="isSignupEnabled()" class="form-group"> | ||
28 | <label for="signupLimit">Signup limit</label> | ||
29 | <input | ||
30 | type="text" id="signupLimit" | ||
31 | formControlName="signupLimit" [ngClass]="{ 'input-error': formErrors['signupLimit'] }" | ||
32 | > | ||
33 | <div *ngIf="formErrors.signupLimit" class="form-error"> | ||
34 | {{ formErrors.signupLimit }} | ||
35 | </div> | ||
36 | </div> | ||
37 | |||
38 | <div class="inner-form-title">Administrator</div> | ||
39 | |||
40 | <div class="form-group"> | ||
41 | <label for="adminEmail">Admin email</label> | ||
42 | <input | ||
43 | type="text" id="adminEmail" | ||
44 | formControlName="adminEmail" [ngClass]="{ 'input-error': formErrors['adminEmail'] }" | ||
45 | > | ||
46 | <div *ngIf="formErrors.adminEmail" class="form-error"> | ||
47 | {{ formErrors.adminEmail }} | ||
48 | </div> | ||
49 | </div> | ||
50 | |||
51 | <div class="inner-form-title">Users</div> | ||
52 | |||
53 | <div class="form-group"> | ||
54 | <label for="userVideoQuota">User default video quota</label> | ||
55 | <div class="peertube-select-container"> | ||
56 | <select id="userVideoQuota" formControlName="userVideoQuota"> | ||
57 | <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> | ||
58 | {{ videoQuotaOption.label }} | ||
59 | </option> | ||
60 | </select> | ||
61 | </div> | ||
62 | </div> | ||
63 | |||
64 | <div class="inner-form-title">Transcoding</div> | ||
65 | |||
66 | <div class="form-group"> | ||
67 | <input type="checkbox" id="transcodingEnabled" formControlName="transcodingEnabled"> | ||
68 | |||
69 | <label for="transcodingEnabled"></label> | ||
70 | <label for="transcodingEnabled">Transcoding enabled</label> | ||
71 | </div> | ||
72 | |||
73 | <ng-template [ngIf]="isTranscodingEnabled()"> | ||
74 | |||
75 | <div class="form-group"> | ||
76 | <label for="transcodingThreads">Transcoding threads</label> | ||
77 | <div class="peertube-select-container"> | ||
78 | <select id="transcodingThreads" formControlName="transcodingThreads"> | ||
79 | <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> | ||
80 | {{ transcodingThreadOption.label }} | ||
81 | </option> | ||
82 | </select> | ||
83 | </div> | ||
84 | </div> | ||
85 | |||
86 | <div class="form-group" *ngFor="let resolution of resolutions"> | ||
87 | <input | ||
88 | type="checkbox" [id]="getResolutionKey(resolution)" | ||
89 | [formControlName]="getResolutionKey(resolution)" | ||
90 | > | ||
91 | <label [for]="getResolutionKey(resolution)"></label> | ||
92 | <label [for]="getResolutionKey(resolution)">Resolution {{ resolution }} enabled</label> | ||
93 | </div> | ||
94 | </ng-template> | ||
95 | |||
96 | <input type="submit" value="Update configuration" [disabled]="!form.valid"> | ||
97 | </form> | ||
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss new file mode 100644 index 000000000..0195f44eb --- /dev/null +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss | |||
@@ -0,0 +1,31 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | input[type=text] { | ||
5 | @include peertube-input-text(340px); | ||
6 | display: block; | ||
7 | } | ||
8 | |||
9 | input[type=checkbox] { | ||
10 | @include peertube-checkbox(1px); | ||
11 | } | ||
12 | |||
13 | .peertube-select-container { | ||
14 | @include peertube-select-container(340px); | ||
15 | } | ||
16 | |||
17 | input[type=submit] { | ||
18 | @include peertube-button; | ||
19 | @include orange-button; | ||
20 | |||
21 | margin-top: 20px; | ||
22 | } | ||
23 | |||
24 | .inner-form-title { | ||
25 | text-transform: uppercase; | ||
26 | color: $orange-color; | ||
27 | font-weight: $font-bold; | ||
28 | font-size: 13px; | ||
29 | margin-top: 30px; | ||
30 | margin-bottom: 10px; | ||
31 | } | ||
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts new file mode 100644 index 000000000..1b3522786 --- /dev/null +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts | |||
@@ -0,0 +1,174 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { Router } from '@angular/router' | ||
4 | import { ConfigService } from '@app/+admin/config/shared/config.service' | ||
5 | import { ServerService } from '@app/core/server/server.service' | ||
6 | import { FormReactive, USER_VIDEO_QUOTA } from '@app/shared' | ||
7 | import { ADMIN_EMAIL, CACHE_PREVIEWS_SIZE, SIGNUP_LIMIT, TRANSCODING_THREADS } from '@app/shared/forms/form-validators/custom-config' | ||
8 | import { NotificationsService } from 'angular2-notifications' | ||
9 | import { CustomConfig } from '../../../../../../shared/models/config/custom-config.model' | ||
10 | |||
11 | @Component({ | ||
12 | selector: 'my-edit-custom-config', | ||
13 | templateUrl: './edit-custom-config.component.html', | ||
14 | styleUrls: [ './edit-custom-config.component.scss' ] | ||
15 | }) | ||
16 | export class EditCustomConfigComponent extends FormReactive implements OnInit { | ||
17 | customConfig: CustomConfig | ||
18 | resolutions = [ '240p', '360p', '480p', '720p', '1080p' ] | ||
19 | |||
20 | videoQuotaOptions = [ | ||
21 | { value: -1, label: 'Unlimited' }, | ||
22 | { value: 0, label: '0' }, | ||
23 | { value: 100 * 1024 * 1024, label: '100MB' }, | ||
24 | { value: 500 * 1024 * 1024, label: '500MB' }, | ||
25 | { value: 1024 * 1024 * 1024, label: '1GB' }, | ||
26 | { value: 5 * 1024 * 1024 * 1024, label: '5GB' }, | ||
27 | { value: 20 * 1024 * 1024 * 1024, label: '20GB' }, | ||
28 | { value: 50 * 1024 * 1024 * 1024, label: '50GB' } | ||
29 | ] | ||
30 | transcodingThreadOptions = [ | ||
31 | { value: 1, label: '1' }, | ||
32 | { value: 2, label: '2' }, | ||
33 | { value: 4, label: '4' }, | ||
34 | { value: 8, label: '8' } | ||
35 | ] | ||
36 | |||
37 | form: FormGroup | ||
38 | formErrors = { | ||
39 | cachePreviewsSize: '', | ||
40 | signupLimit: '', | ||
41 | adminEmail: '', | ||
42 | userVideoQuota: '', | ||
43 | transcodingThreads: '' | ||
44 | } | ||
45 | validationMessages = { | ||
46 | cachePreviewsSize: CACHE_PREVIEWS_SIZE.MESSAGES, | ||
47 | signupLimit: SIGNUP_LIMIT.MESSAGES, | ||
48 | adminEmail: ADMIN_EMAIL.MESSAGES, | ||
49 | userVideoQuota: USER_VIDEO_QUOTA.MESSAGES | ||
50 | } | ||
51 | |||
52 | constructor ( | ||
53 | private formBuilder: FormBuilder, | ||
54 | private router: Router, | ||
55 | private notificationsService: NotificationsService, | ||
56 | private configService: ConfigService, | ||
57 | private serverService: ServerService | ||
58 | ) { | ||
59 | super() | ||
60 | } | ||
61 | |||
62 | getResolutionKey (resolution: string) { | ||
63 | return 'transcodingResolution' + resolution | ||
64 | } | ||
65 | |||
66 | buildForm () { | ||
67 | const formGroupData = { | ||
68 | cachePreviewsSize: [ '', CACHE_PREVIEWS_SIZE.VALIDATORS ], | ||
69 | signupEnabled: [ ], | ||
70 | signupLimit: [ '', SIGNUP_LIMIT.VALIDATORS ], | ||
71 | adminEmail: [ '', ADMIN_EMAIL.VALIDATORS ], | ||
72 | userVideoQuota: [ '', USER_VIDEO_QUOTA.VALIDATORS ], | ||
73 | transcodingThreads: [ '', TRANSCODING_THREADS.VALIDATORS ], | ||
74 | transcodingEnabled: [ ] | ||
75 | } | ||
76 | |||
77 | for (const resolution of this.resolutions) { | ||
78 | const key = this.getResolutionKey(resolution) | ||
79 | formGroupData[key] = [ false ] | ||
80 | } | ||
81 | |||
82 | this.form = this.formBuilder.group(formGroupData) | ||
83 | |||
84 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
85 | } | ||
86 | |||
87 | ngOnInit () { | ||
88 | this.buildForm() | ||
89 | |||
90 | this.configService.getCustomConfig() | ||
91 | .subscribe( | ||
92 | res => { | ||
93 | this.customConfig = res | ||
94 | |||
95 | this.updateForm() | ||
96 | }, | ||
97 | |||
98 | err => this.notificationsService.error('Error', err.message) | ||
99 | ) | ||
100 | } | ||
101 | |||
102 | isTranscodingEnabled () { | ||
103 | return this.form.value['transcodingEnabled'] === true | ||
104 | } | ||
105 | |||
106 | isSignupEnabled () { | ||
107 | return this.form.value['signupEnabled'] === true | ||
108 | } | ||
109 | |||
110 | formValidated () { | ||
111 | const data = { | ||
112 | cache: { | ||
113 | previews: { | ||
114 | size: this.form.value['cachePreviewsSize'] | ||
115 | } | ||
116 | }, | ||
117 | signup: { | ||
118 | enabled: this.form.value['signupEnabled'], | ||
119 | limit: this.form.value['signupLimit'] | ||
120 | }, | ||
121 | admin: { | ||
122 | email: this.form.value['adminEmail'] | ||
123 | }, | ||
124 | user: { | ||
125 | videoQuota: this.form.value['userVideoQuota'] | ||
126 | }, | ||
127 | transcoding: { | ||
128 | enabled: this.form.value['transcodingEnabled'], | ||
129 | threads: this.form.value['transcodingThreads'], | ||
130 | resolutions: { | ||
131 | '240p': this.form.value[this.getResolutionKey('240p')], | ||
132 | '360p': this.form.value[this.getResolutionKey('360p')], | ||
133 | '480p': this.form.value[this.getResolutionKey('480p')], | ||
134 | '720p': this.form.value[this.getResolutionKey('720p')], | ||
135 | '1080p': this.form.value[this.getResolutionKey('1080p')] | ||
136 | } | ||
137 | } | ||
138 | } | ||
139 | |||
140 | this.configService.updateCustomConfig(data) | ||
141 | .subscribe( | ||
142 | res => { | ||
143 | this.customConfig = res | ||
144 | |||
145 | // Reload general configuration | ||
146 | this.serverService.loadConfig() | ||
147 | |||
148 | this.updateForm() | ||
149 | }, | ||
150 | |||
151 | err => this.notificationsService.error('Error', err.message) | ||
152 | ) | ||
153 | } | ||
154 | |||
155 | private updateForm () { | ||
156 | const data = { | ||
157 | cachePreviewsSize: this.customConfig.cache.previews.size, | ||
158 | signupEnabled: this.customConfig.signup.enabled, | ||
159 | signupLimit: this.customConfig.signup.limit, | ||
160 | adminEmail: this.customConfig.admin.email, | ||
161 | userVideoQuota: this.customConfig.user.videoQuota, | ||
162 | transcodingThreads: this.customConfig.transcoding.threads, | ||
163 | transcodingEnabled: this.customConfig.transcoding.enabled | ||
164 | } | ||
165 | |||
166 | for (const resolution of this.resolutions) { | ||
167 | const key = this.getResolutionKey(resolution) | ||
168 | data[key] = this.customConfig.transcoding.resolutions[resolution] | ||
169 | } | ||
170 | |||
171 | this.form.patchValue(data) | ||
172 | } | ||
173 | |||
174 | } | ||
diff --git a/client/src/app/+admin/config/edit-custom-config/index.ts b/client/src/app/+admin/config/edit-custom-config/index.ts new file mode 100644 index 000000000..1ec12631f --- /dev/null +++ b/client/src/app/+admin/config/edit-custom-config/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './edit-custom-config.component' | |||