diff options
Diffstat (limited to 'client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html')
-rw-r--r-- | client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html | 140 |
1 files changed, 78 insertions, 62 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 index 8a1e33c56..4263b7b5f 100644 --- 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 | |||
@@ -4,13 +4,13 @@ | |||
4 | 4 | ||
5 | <tab heading="Basic configuration"> | 5 | <tab heading="Basic configuration"> |
6 | 6 | ||
7 | <div class="inner-form-title">Instance</div> | 7 | <div i18n class="inner-form-title">Instance</div> |
8 | 8 | ||
9 | <div class="form-group"> | 9 | <div class="form-group"> |
10 | <label for="instanceName">Name</label> | 10 | <label i18n for="instanceName">Name</label> |
11 | <input | 11 | <input |
12 | type="text" id="instanceName" | 12 | type="text" id="instanceName" |
13 | formControlName="instanceName" [ngClass]="{ 'input-error': formErrors['instanceName'] }" | 13 | formControlName="instanceName" [ngClass]="{ 'input-error': formErrors['instanceName'] }" |
14 | > | 14 | > |
15 | <div *ngIf="formErrors.instanceName" class="form-error"> | 15 | <div *ngIf="formErrors.instanceName" class="form-error"> |
16 | {{ formErrors.instanceName }} | 16 | {{ formErrors.instanceName }} |
@@ -18,10 +18,10 @@ | |||
18 | </div> | 18 | </div> |
19 | 19 | ||
20 | <div class="form-group"> | 20 | <div class="form-group"> |
21 | <label for="instanceShortDescription">Short description</label> | 21 | <label i18n for="instanceShortDescription">Short description</label> |
22 | <textarea | 22 | <textarea |
23 | id="instanceShortDescription" formControlName="instanceShortDescription" | 23 | id="instanceShortDescription" formControlName="instanceShortDescription" |
24 | [ngClass]="{ 'input-error': formErrors['instanceShortDescription'] }" | 24 | [ngClass]="{ 'input-error': formErrors['instanceShortDescription'] }" |
25 | ></textarea> | 25 | ></textarea> |
26 | <div *ngIf="formErrors.instanceShortDescription" class="form-error"> | 26 | <div *ngIf="formErrors.instanceShortDescription" class="form-error"> |
27 | {{ formErrors.instanceShortDescription }} | 27 | {{ formErrors.instanceShortDescription }} |
@@ -29,10 +29,10 @@ | |||
29 | </div> | 29 | </div> |
30 | 30 | ||
31 | <div class="form-group"> | 31 | <div class="form-group"> |
32 | <label for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help> | 32 | <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help> |
33 | <my-markdown-textarea | 33 | <my-markdown-textarea |
34 | id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true" | 34 | id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true" |
35 | [classes]="{ 'input-error': formErrors['instanceDescription'] }" | 35 | [classes]="{ 'input-error': formErrors['instanceDescription'] }" |
36 | ></my-markdown-textarea> | 36 | ></my-markdown-textarea> |
37 | <div *ngIf="formErrors.instanceDescription" class="form-error"> | 37 | <div *ngIf="formErrors.instanceDescription" class="form-error"> |
38 | {{ formErrors.instanceDescription }} | 38 | {{ formErrors.instanceDescription }} |
@@ -40,10 +40,10 @@ | |||
40 | </div> | 40 | </div> |
41 | 41 | ||
42 | <div class="form-group"> | 42 | <div class="form-group"> |
43 | <label for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> | 43 | <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> |
44 | <my-markdown-textarea | 44 | <my-markdown-textarea |
45 | id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true" | 45 | id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true" |
46 | [ngClass]="{ 'input-error': formErrors['instanceTerms'] }" | 46 | [ngClass]="{ 'input-error': formErrors['instanceTerms'] }" |
47 | ></my-markdown-textarea> | 47 | ></my-markdown-textarea> |
48 | <div *ngIf="formErrors.instanceTerms" class="form-error"> | 48 | <div *ngIf="formErrors.instanceTerms" class="form-error"> |
49 | {{ formErrors.instanceTerms }} | 49 | {{ formErrors.instanceTerms }} |
@@ -51,12 +51,12 @@ | |||
51 | </div> | 51 | </div> |
52 | 52 | ||
53 | <div class="form-group"> | 53 | <div class="form-group"> |
54 | <label for="instanceDefaultClientRoute">Default client route</label> | 54 | <label i18n for="instanceDefaultClientRoute">Default client route</label> |
55 | <div class="peertube-select-container"> | 55 | <div class="peertube-select-container"> |
56 | <select id="instanceDefaultClientRoute" formControlName="instanceDefaultClientRoute"> | 56 | <select id="instanceDefaultClientRoute" formControlName="instanceDefaultClientRoute"> |
57 | <option value="/videos/trending">Videos Trending</option> | 57 | <option i18n value="/videos/trending">Videos Trending</option> |
58 | <option value="/videos/recently-added">Videos Recently Added</option> | 58 | <option i18n value="/videos/recently-added">Videos Recently Added</option> |
59 | <option value="/videos/local">Local videos</option> | 59 | <option i18n value="/videos/local">Local videos</option> |
60 | </select> | 60 | </select> |
61 | </div> | 61 | </div> |
62 | <div *ngIf="formErrors.instanceDefaultClientRoute" class="form-error"> | 62 | <div *ngIf="formErrors.instanceDefaultClientRoute" class="form-error"> |
@@ -65,14 +65,17 @@ | |||
65 | </div> | 65 | </div> |
66 | 66 | ||
67 | <div class="form-group"> | 67 | <div class="form-group"> |
68 | <label for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label> | 68 | <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label> |
69 | <my-help helpType="custom" customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."></my-help> | 69 | <my-help |
70 | helpType="custom" i18n-customHtml | ||
71 | customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video." | ||
72 | ></my-help> | ||
70 | 73 | ||
71 | <div class="peertube-select-container"> | 74 | <div class="peertube-select-container"> |
72 | <select id="instanceDefaultNSFWPolicy" formControlName="instanceDefaultNSFWPolicy"> | 75 | <select id="instanceDefaultNSFWPolicy" formControlName="instanceDefaultNSFWPolicy"> |
73 | <option value="do_not_list">Do not list</option> | 76 | <option i18n value="do_not_list">Do not list</option> |
74 | <option value="blur">Blur thumbnails</option> | 77 | <option i18n value="blur">Blur thumbnails</option> |
75 | <option value="display">Display</option> | 78 | <option i18n value="display">Display</option> |
76 | </select> | 79 | </select> |
77 | </div> | 80 | </div> |
78 | <div *ngIf="formErrors.instanceDefaultNSFWPolicy" class="form-error"> | 81 | <div *ngIf="formErrors.instanceDefaultNSFWPolicy" class="form-error"> |
@@ -80,43 +83,43 @@ | |||
80 | </div> | 83 | </div> |
81 | </div> | 84 | </div> |
82 | 85 | ||
83 | <div class="inner-form-title">Signup</div> | 86 | <div i18n class="inner-form-title">Signup</div> |
84 | 87 | ||
85 | <div class="form-group"> | 88 | <div class="form-group"> |
86 | <input type="checkbox" id="signupEnabled" formControlName="signupEnabled"> | 89 | <input type="checkbox" id="signupEnabled" formControlName="signupEnabled"> |
87 | 90 | ||
88 | <label for="signupEnabled"></label> | 91 | <label for="signupEnabled"></label> |
89 | <label for="signupEnabled">Signup enabled</label> | 92 | <label i18n for="signupEnabled">Signup enabled</label> |
90 | </div> | 93 | </div> |
91 | 94 | ||
92 | <div *ngIf="isSignupEnabled()" class="form-group"> | 95 | <div *ngIf="isSignupEnabled()" class="form-group"> |
93 | <label for="signupLimit">Signup limit</label> | 96 | <label i18n for="signupLimit">Signup limit</label> |
94 | <input | 97 | <input |
95 | type="text" id="signupLimit" | 98 | type="text" id="signupLimit" |
96 | formControlName="signupLimit" [ngClass]="{ 'input-error': formErrors['signupLimit'] }" | 99 | formControlName="signupLimit" [ngClass]="{ 'input-error': formErrors['signupLimit'] }" |
97 | > | 100 | > |
98 | <div *ngIf="formErrors.signupLimit" class="form-error"> | 101 | <div *ngIf="formErrors.signupLimit" class="form-error"> |
99 | {{ formErrors.signupLimit }} | 102 | {{ formErrors.signupLimit }} |
100 | </div> | 103 | </div> |
101 | </div> | 104 | </div> |
102 | 105 | ||
103 | <div class="inner-form-title">Administrator</div> | 106 | <div i18n class="inner-form-title">Administrator</div> |
104 | 107 | ||
105 | <div class="form-group"> | 108 | <div class="form-group"> |
106 | <label for="adminEmail">Admin email</label> | 109 | <label i18n for="adminEmail">Admin email</label> |
107 | <input | 110 | <input |
108 | type="text" id="adminEmail" | 111 | type="text" id="adminEmail" |
109 | formControlName="adminEmail" [ngClass]="{ 'input-error': formErrors['adminEmail'] }" | 112 | formControlName="adminEmail" [ngClass]="{ 'input-error': formErrors['adminEmail'] }" |
110 | > | 113 | > |
111 | <div *ngIf="formErrors.adminEmail" class="form-error"> | 114 | <div *ngIf="formErrors.adminEmail" class="form-error"> |
112 | {{ formErrors.adminEmail }} | 115 | {{ formErrors.adminEmail }} |
113 | </div> | 116 | </div> |
114 | </div> | 117 | </div> |
115 | 118 | ||
116 | <div class="inner-form-title">Users</div> | 119 | <div i18n class="inner-form-title">Users</div> |
117 | 120 | ||
118 | <div class="form-group"> | 121 | <div class="form-group"> |
119 | <label for="userVideoQuota">User default video quota</label> | 122 | <label i18n for="userVideoQuota">User default video quota</label> |
120 | <div class="peertube-select-container"> | 123 | <div class="peertube-select-container"> |
121 | <select id="userVideoQuota" formControlName="userVideoQuota"> | 124 | <select id="userVideoQuota" formControlName="userVideoQuota"> |
122 | <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> | 125 | <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> |
@@ -132,14 +135,17 @@ | |||
132 | 135 | ||
133 | <tab heading="Services"> | 136 | <tab heading="Services"> |
134 | 137 | ||
135 | <div class="inner-form-title">Twitter</div> | 138 | <div i18n class="inner-form-title">Twitter</div> |
136 | 139 | ||
137 | <div class="form-group"> | 140 | <div class="form-group"> |
138 | <label for="signupLimit">Your Twitter username</label> | 141 | <label i18n for="signupLimit">Your Twitter username</label> |
139 | <my-help helpType="custom" customHtml="Indicates the Twitter account for the website or platform on which the content was published."></my-help> | 142 | <my-help |
143 | helpType="custom" i18n-customHtml | ||
144 | customHtml="Indicates the Twitter account for the website or platform on which the content was published." | ||
145 | ></my-help> | ||
140 | <input | 146 | <input |
141 | type="text" id="servicesTwitterUsername" | 147 | type="text" id="servicesTwitterUsername" |
142 | formControlName="servicesTwitterUsername" [ngClass]="{ 'input-error': formErrors['servicesTwitterUsername'] }" | 148 | formControlName="servicesTwitterUsername" [ngClass]="{ 'input-error': formErrors['servicesTwitterUsername'] }" |
143 | > | 149 | > |
144 | <div *ngIf="formErrors.servicesTwitterUsername" class="form-error"> | 150 | <div *ngIf="formErrors.servicesTwitterUsername" class="form-error"> |
145 | {{ formErrors.servicesTwitterUsername }} | 151 | {{ formErrors.servicesTwitterUsername }} |
@@ -150,29 +156,32 @@ | |||
150 | <input type="checkbox" id="servicesTwitterWhitelisted" formControlName="servicesTwitterWhitelisted"> | 156 | <input type="checkbox" id="servicesTwitterWhitelisted" formControlName="servicesTwitterWhitelisted"> |
151 | 157 | ||
152 | <label for="servicesTwitterWhitelisted"></label> | 158 | <label for="servicesTwitterWhitelisted"></label> |
153 | <label for="servicesTwitterWhitelisted">Instance whitelisted by Twitter</label> | 159 | <label i18n for="servicesTwitterWhitelisted">Instance whitelisted by Twitter</label> |
154 | <my-help helpType="custom" customHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br /> | 160 | <my-help |
161 | helpType="custom" i18n-customHtml | ||
162 | customHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br /> | ||
155 | If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br /> | 163 | If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br /> |
156 | Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted."></my-help> | 164 | Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted." |
165 | ></my-help> | ||
157 | 166 | ||
158 | </div> | 167 | </div> |
159 | </tab> | 168 | </tab> |
160 | 169 | ||
161 | <tab heading="Advanced configuration"> | 170 | <tab heading="Advanced configuration"> |
162 | 171 | ||
163 | <div class="inner-form-title">Transcoding</div> | 172 | <div i18n class="inner-form-title">Transcoding</div> |
164 | 173 | ||
165 | <div class="form-group"> | 174 | <div class="form-group"> |
166 | <input type="checkbox" id="transcodingEnabled" formControlName="transcodingEnabled"> | 175 | <input type="checkbox" id="transcodingEnabled" formControlName="transcodingEnabled"> |
167 | 176 | ||
168 | <label for="transcodingEnabled"></label> | 177 | <label for="transcodingEnabled"></label> |
169 | <label for="transcodingEnabled">Transcoding enabled</label> | 178 | <label i18n for="transcodingEnabled">Transcoding enabled</label> |
170 | </div> | 179 | </div> |
171 | 180 | ||
172 | <ng-template [ngIf]="isTranscodingEnabled()"> | 181 | <ng-template [ngIf]="isTranscodingEnabled()"> |
173 | 182 | ||
174 | <div class="form-group"> | 183 | <div class="form-group"> |
175 | <label for="transcodingThreads">Transcoding threads</label> | 184 | <label i18n for="transcodingThreads">Transcoding threads</label> |
176 | <div class="peertube-select-container"> | 185 | <div class="peertube-select-container"> |
177 | <select id="transcodingThreads" formControlName="transcodingThreads"> | 186 | <select id="transcodingThreads" formControlName="transcodingThreads"> |
178 | <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> | 187 | <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> |
@@ -191,33 +200,39 @@ Check this checkbox, save the configuration and test with a video URL of your in | |||
191 | [formControlName]="getResolutionKey(resolution)" | 200 | [formControlName]="getResolutionKey(resolution)" |
192 | > | 201 | > |
193 | <label [for]="getResolutionKey(resolution)"></label> | 202 | <label [for]="getResolutionKey(resolution)"></label> |
194 | <label [for]="getResolutionKey(resolution)">Resolution {{ resolution }} enabled</label> | 203 | <label i18n [for]="getResolutionKey(resolution)">Resolution {{ resolution }} enabled</label> |
195 | </div> | 204 | </div> |
196 | </ng-template> | 205 | </ng-template> |
197 | 206 | ||
198 | <div class="inner-form-title">Cache</div> | 207 | <div i18n class="inner-form-title">Cache</div> |
199 | 208 | ||
200 | <div class="form-group"> | 209 | <div class="form-group"> |
201 | <label for="cachePreviewsSize">Preview cache size</label> | 210 | <label i18n for="cachePreviewsSize">Preview cache size</label> |
202 | <my-help helpType="custom" customHtml="Previews are not federated. We fetch them directly from the origin instance and cache them."></my-help> | 211 | <my-help |
212 | helpType="custom" i18n-customHtml | ||
213 | customHtml="Previews are not federated. We fetch them directly from the origin instance and cache them." | ||
214 | ></my-help> | ||
203 | 215 | ||
204 | <input | 216 | <input |
205 | type="text" id="cachePreviewsSize" | 217 | type="text" id="cachePreviewsSize" |
206 | formControlName="cachePreviewsSize" [ngClass]="{ 'input-error': formErrors['cachePreviewsSize'] }" | 218 | formControlName="cachePreviewsSize" [ngClass]="{ 'input-error': formErrors['cachePreviewsSize'] }" |
207 | > | 219 | > |
208 | <div *ngIf="formErrors.cachePreviewsSize" class="form-error"> | 220 | <div *ngIf="formErrors.cachePreviewsSize" class="form-error"> |
209 | {{ formErrors.cachePreviewsSize }} | 221 | {{ formErrors.cachePreviewsSize }} |
210 | </div> | 222 | </div> |
211 | </div> | 223 | </div> |
212 | 224 | ||
213 | <div class="inner-form-title">Customizations</div> | 225 | <div i18n class="inner-form-title">Customizations</div> |
214 | 226 | ||
215 | <div class="form-group"> | 227 | <div class="form-group"> |
216 | <label for="customizationJavascript">JavaScript</label> | 228 | <label i18n for="customizationJavascript">JavaScript</label> |
217 | <my-help helpType="custom" customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>"></my-help> | 229 | <my-help |
230 | helpType="custom" i18n-customHtml | ||
231 | customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>" | ||
232 | ></my-help> | ||
218 | <textarea | 233 | <textarea |
219 | id="customizationJavascript" formControlName="customizationJavascript" | 234 | id="customizationJavascript" formControlName="customizationJavascript" |
220 | [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }" | 235 | [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }" |
221 | ></textarea> | 236 | ></textarea> |
222 | <div *ngIf="formErrors.customizationJavascript" class="form-error"> | 237 | <div *ngIf="formErrors.customizationJavascript" class="form-error"> |
223 | {{ formErrors.customizationJavascript }} | 238 | {{ formErrors.customizationJavascript }} |
@@ -228,25 +243,26 @@ Check this checkbox, save the configuration and test with a video URL of your in | |||
228 | <label for="customizationCSS">CSS</label> | 243 | <label for="customizationCSS">CSS</label> |
229 | <my-help | 244 | <my-help |
230 | helpType="custom" | 245 | helpType="custom" |
246 | i18n-customHtml | ||
231 | customHtml=" | 247 | customHtml=" |
232 | Write directly CSS code. Example:<br /> | 248 | Write directly CSS code. Example:<br /> |
233 | <pre> | 249 | <pre> |
234 | body { | 250 | body {{ '{' }} |
235 | background-color: red; | 251 | background-color: red; |
236 | } | 252 | {{ '}' }} |
237 | </pre> | 253 | </pre> |
238 | 254 | ||
239 | Prepend with <em>#custom-css</em> to override styles. Example: | 255 | Prepend with <em>#custom-css</em> to override styles. Example: |
240 | <pre> | 256 | <pre> |
241 | #custom-css .logged-in-email { | 257 | #custom-css .logged-in-email {{ '{' }} |
242 | color: red; | 258 | color: red; |
243 | } | 259 | {{ '}' }} |
244 | </pre> | 260 | </pre> |
245 | " | 261 | " |
246 | ></my-help> | 262 | ></my-help> |
247 | <textarea | 263 | <textarea |
248 | id="customizationCSS" formControlName="customizationCSS" | 264 | id="customizationCSS" formControlName="customizationCSS" |
249 | [ngClass]="{ 'input-error': formErrors['customizationCSS'] }" | 265 | [ngClass]="{ 'input-error': formErrors['customizationCSS'] }" |
250 | ></textarea> | 266 | ></textarea> |
251 | <div *ngIf="formErrors.customizationCSS" class="form-error"> | 267 | <div *ngIf="formErrors.customizationCSS" class="form-error"> |
252 | {{ formErrors.customizationCSS }} | 268 | {{ formErrors.customizationCSS }} |
@@ -255,5 +271,5 @@ Check this checkbox, save the configuration and test with a video URL of your in | |||
255 | </tab> | 271 | </tab> |
256 | </tabset> | 272 | </tabset> |
257 | 273 | ||
258 | <input (click)="formValidated()" type="submit" value="Update configuration" [disabled]="!form.valid"> | 274 | <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid"> |
259 | </form> | 275 | </form> |