]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
5aa6fda3cea39cbadc06065bb92215d6e0499263
[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-custom-config.component.html
1 <form role="form" [formGroup]="form">
2
3 <ngb-tabset class="root-tabset bootstrap">
4
5 <ngb-tab i18n-title title="Instance information">
6 <ng-template ngbTabContent>
7
8 <ng-container formGroupName="instance">
9
10 <div i18n class="inner-form-title">Instance</div>
11
12 <div class="form-group">
13 <label i18n for="instanceName">Name</label>
14 <input
15 type="text" id="instanceName"
16 formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
17 >
18 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
19 </div>
20
21 <div class="form-group">
22 <label i18n for="instanceShortDescription">Short description</label>
23 <textarea
24 id="instanceShortDescription" formControlName="shortDescription"
25 [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
26 ></textarea>
27 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
28 </div>
29
30 <div class="form-group">
31 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
32 <my-markdown-textarea
33 id="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
34 [classes]="{ 'input-error': formErrors['instance.description'] }"
35 ></my-markdown-textarea>
36 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
37 </div>
38
39 <div class="form-group">
40 <label i18n for="instanceCategories">Main instance categories</label>
41
42 <div>
43 <p-multiSelect
44 inputId="instanceCategories" [options]="categoryItems" formControlName="categories" showToggleAll="false"
45 [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()"
46 emptyFilterMessage="No results found" i18n-emptyFilterMessage
47 ></p-multiSelect>
48 </div>
49 </div>
50
51 <div class="form-group">
52 <label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
53
54 <div>
55 <p-multiSelect
56 inputId="instanceLanguages" [options]="languageItems" formControlName="languages" showToggleAll="false"
57 [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
58 emptyFilterMessage="No results found" i18n-emptyFilterMessage
59 ></p-multiSelect>
60 </div>
61 </div>
62
63 <div i18n class="inner-form-title">Moderation & NSFW</div>
64
65 <div class="form-group">
66 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
67 <ng-template ptTemplate="label">
68 <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
69 </ng-template>
70
71 <ng-template ptTemplate="help">
72 <ng-container i18n>
73 Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
74 Moreover, the NSFW checkbox on video upload will be automatically checked by default.
75 </ng-container>
76 </ng-template>
77 </my-peertube-checkbox>
78 </div>
79
80 <div class="form-group">
81 <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
82
83 <my-help>
84 <ng-template ptTemplate="customHtml">
85 <ng-container i18n>
86 With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
87 </ng-container>
88 </ng-template>
89 </my-help>
90
91 <div class="peertube-select-container">
92 <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
93 <option i18n value="do_not_list">Do not list</option>
94 <option i18n value="blur">Blur thumbnails</option>
95 <option i18n value="display">Display</option>
96 </select>
97 </div>
98 <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
99 </div>
100
101 <div class="form-group">
102 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
103 <my-markdown-textarea
104 id="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
105 [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
106 ></my-markdown-textarea>
107 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
108 </div>
109
110 <div class="form-group">
111 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
112 <my-markdown-textarea
113 id="instanceCodeOfConduct" formControlName="codeOfConduct" textareaWidth="500px" [previewColumn]="true"
114 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
115 ></my-markdown-textarea>
116 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
117 </div>
118
119 <div class="form-group">
120 <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
121 <div class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
122
123 <my-markdown-textarea
124 id="instanceModerationInformation" formControlName="moderationInformation" textareaWidth="500px" [previewColumn]="true"
125 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
126 ></my-markdown-textarea>
127 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
128 </div>
129
130 <div i18n class="inner-form-title">You and your instance</div>
131
132 <div class="form-group">
133 <label i18n for="instanceAdministrator">Who is behind the instance? </label>
134 <div class="label-small-info">A single person? A non profit? A company?</div>
135
136 <textarea
137 id="instanceAdministrator" formControlName="administrator"
138 [ngClass]="{ 'input-error': formErrors['instance.administrator'] }"
139 ></textarea>
140 <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
141 </div>
142
143 <div class="form-group">
144 <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
145 <div class="label-small-info">It's important to know for users who want to register on your instance</div>
146
147 <textarea
148 id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
149 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
150 ></textarea>
151 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
152 </div>
153
154 <div class="form-group">
155 <label i18n for="instanceBusinessModel">How will you pay the PeerTube instance server?</label>
156 <div class="label-small-info">With you own funds? With users donations? Advertising?</div>
157
158 <textarea
159 id="instanceBusinessModel" formControlName="businessModel"
160 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
161 ></textarea>
162 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
163 </div>
164
165 </ng-container>
166 </ng-template>
167 </ngb-tab>
168
169 <ngb-tab i18n-title title="Basic configuration">
170 <ng-template ngbTabContent>
171
172 <div i18n class="inner-form-title">Theme & Default route</div>
173
174 <ng-container formGroupName="theme">
175 <div class="form-group">
176 <label i18n for="themeDefault">Global theme</label>
177
178 <div class="peertube-select-container">
179 <select formControlName="default" id="themeDefault">
180 <option i18n value="default">default</option>
181
182 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
183 </select>
184 </div>
185 </div>
186 </ng-container>
187
188
189 <div class="form-group" formGroupName="instance">
190 <label i18n for="instanceDefaultClientRoute">Default client route</label>
191 <div class="peertube-select-container">
192 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
193 <option i18n value="/videos/overview">Videos Discover</option>
194 <option i18n value="/videos/trending">Videos Trending</option>
195 <option i18n value="/videos/recently-added">Videos Recently Added</option>
196 <option i18n value="/videos/local">Local videos</option>
197 </select>
198 </div>
199 <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
200 </div>
201
202 <div i18n class="inner-form-title">Signup</div>
203
204 <ng-container formGroupName="signup">
205 <div class="form-group">
206 <my-peertube-checkbox
207 inputName="signupEnabled" formControlName="enabled"
208 i18n-labelText labelText="Signup enabled"
209 ></my-peertube-checkbox>
210 </div>
211
212 <div class="form-group">
213 <my-peertube-checkbox *ngIf="isSignupEnabled()"
214 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
215 i18n-labelText labelText="Signup requires email verification"
216 ></my-peertube-checkbox>
217 </div>
218
219 <div *ngIf="isSignupEnabled()" class="form-group">
220 <label i18n for="signupLimit">Signup limit</label>
221 <input
222 type="text" id="signupLimit"
223 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
224 >
225 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
226 </div>
227 </ng-container>
228
229
230 <div i18n class="inner-form-title">Users</div>
231
232 <ng-container formGroupName="user">
233 <div class="form-group">
234 <label i18n for="userVideoQuota">User default video quota</label>
235 <div class="peertube-select-container">
236 <select id="userVideoQuota" formControlName="videoQuota">
237 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
238 {{ videoQuotaOption.label }}
239 </option>
240 </select>
241 </div>
242 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
243 </div>
244
245 <div class="form-group">
246 <label i18n for="userVideoQuotaDaily">User default daily upload limit</label>
247 <div class="peertube-select-container">
248 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
249 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
250 {{ videoQuotaDailyOption.label }}
251 </option>
252 </select>
253 </div>
254 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
255 </div>
256 </ng-container>
257
258
259 <div i18n class="inner-form-title">Import</div>
260
261 <ng-container formGroupName="import">
262 <ng-container formGroupName="videos">
263
264 <div class="form-group" formGroupName="http">
265 <my-peertube-checkbox
266 inputName="importVideosHttpEnabled" formControlName="enabled"
267 i18n-labelText labelText="Video import with HTTP URL (i.e. YouTube) enabled"
268 ></my-peertube-checkbox>
269 </div>
270
271 <div class="form-group" formGroupName="torrent">
272 <my-peertube-checkbox
273 inputName="importVideosTorrentEnabled" formControlName="enabled"
274 i18n-labelText labelText="Video import with a torrent file or a magnet URI enabled"
275 ></my-peertube-checkbox>
276 </div>
277
278 </ng-container>
279 </ng-container>
280
281
282 <div i18n class="inner-form-title">Auto-blacklist</div>
283
284 <ng-container formGroupName="autoBlacklist">
285 <ng-container formGroupName="videos">
286 <ng-container formGroupName="ofUsers">
287
288 <div class="form-group">
289 <my-peertube-checkbox
290 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
291 i18n-labelText labelText="New videos of users automatically blacklisted enabled"
292 ></my-peertube-checkbox>
293 </div>
294
295 </ng-container>
296 </ng-container>
297 </ng-container>
298
299
300 <div i18n class="inner-form-title">Instance followers</div>
301
302 <ng-container formGroupName="followers">
303 <ng-container formGroupName="instance">
304
305 <div class="form-group">
306 <my-peertube-checkbox
307 inputName="followersInstanceEnabled" formControlName="enabled"
308 i18n-labelText labelText="Other instances can follow your instance"
309 ></my-peertube-checkbox>
310 </div>
311
312 <div class="form-group">
313 <my-peertube-checkbox
314 inputName="followersInstanceManualApproval" formControlName="manualApproval"
315 i18n-labelText labelText="Manually approve new instance follower"
316 ></my-peertube-checkbox>
317 </div>
318 </ng-container>
319 </ng-container>
320
321 <div i18n class="inner-form-title">Instance followings</div>
322
323 <ng-container formGroupName="followings">
324 <ng-container formGroupName="instance">
325
326 <ng-container formGroupName="autoFollowBack">
327 <div class="form-group">
328 <my-peertube-checkbox
329 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
330 i18n-labelText labelText="Automatically follow other instances that follow you"
331 ></my-peertube-checkbox>
332 </div>
333 </ng-container>
334
335 <ng-container formGroupName="autoFollowIndex">
336 <div class="form-group">
337 <my-peertube-checkbox
338 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
339 i18n-labelText labelText="Automatically follow instance of the public index (below)"
340 ></my-peertube-checkbox>
341 </div>
342
343 <div class="form-group">
344 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
345 <input
346 type="text" id="followingsInstanceAutoFollowIndexUrl"
347 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
348 >
349 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
350 </div>
351
352 </ng-container>
353 </ng-container>
354 </ng-container>
355
356
357 <div i18n class="inner-form-title">Administrator</div>
358
359 <div class="form-group" formGroupName="admin">
360 <label i18n for="adminEmail">Admin email</label>
361 <input
362 type="text" id="adminEmail"
363 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
364 >
365 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
366 </div>
367
368 <div class="form-group" formGroupName="contactForm">
369 <my-peertube-checkbox
370 inputName="enableContactForm" formControlName="enabled"
371 i18n-labelText labelText="Enable contact form"
372 ></my-peertube-checkbox>
373 </div>
374
375 </ng-template>
376 </ngb-tab>
377
378 <ngb-tab i18n-title title="Services">
379 <ng-template ngbTabContent>
380 <div i18n class="inner-form-title">Twitter</div>
381
382 <ng-container formGroupName="services">
383 <ng-container formGroupName="twitter">
384
385 <div class="form-group">
386 <label i18n for="signupLimit">Your Twitter username</label>
387
388 <my-help>
389 <ng-template ptTemplate="customHtml">
390 <ng-container i18n>Indicates the Twitter account for the website or platform on which the content was published.</ng-container>
391 </ng-template>
392 </my-help>
393
394 <input
395 type="text" id="servicesTwitterUsername"
396 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
397 >
398 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
399 </div>
400
401 <div class="form-group">
402 <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
403 <ng-template ptTemplate="label">
404 <ng-container i18n>Instance whitelisted by Twitter</ng-container>
405 </ng-template>
406
407 <ng-template ptTemplate="help">
408 <ng-container i18n>
409 If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
410 If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
411 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
412 <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
413 to see if you instance is whitelisted.
414 </ng-container>
415 </ng-template>
416 </my-peertube-checkbox>
417 </div>
418
419 </ng-container>
420 </ng-container>
421
422 </ng-template>
423 </ngb-tab>
424
425 <ngb-tab i18n-title title="Advanced configuration">
426 <ng-template ngbTabContent>
427
428 <div i18n class="inner-form-title">Transcoding</div>
429
430 <ng-container formGroupName="transcoding">
431 <div class="form-group">
432 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
433 <ng-template ptTemplate="label">
434 <ng-container i18n>Transcoding enabled</ng-container>
435 </ng-template>
436
437 <ng-template ptTemplate="help">
438 <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
439 </ng-template>
440 </my-peertube-checkbox>
441 </div>
442
443 <ng-container *ngIf="isTranscodingEnabled()">
444
445 <div class="form-group">
446 <my-peertube-checkbox
447 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
448 i18n-labelText labelText="Allow additional extensions"
449 >
450 <ng-template ptTemplate="help">
451 <ng-container i18n>Allow your users to upload .mkv, .mov, .avi, .flv videos</ng-container>
452 </ng-template>
453 </my-peertube-checkbox>
454 </div>
455
456 <div class="form-group">
457 <my-peertube-checkbox
458 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
459 i18n-labelText labelText="Allow audio files upload"
460 >
461 <ng-template ptTemplate="help">
462 <ng-container i18n>Allow your users to upload audio files that will be merged with the preview file on upload</ng-container>
463 </ng-template>
464 </my-peertube-checkbox>
465 </div>
466
467 <div class="form-group">
468 <label i18n for="transcodingThreads">Transcoding threads</label>
469 <div class="peertube-select-container">
470 <select id="transcodingThreads" formControlName="threads">
471 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
472 {{ transcodingThreadOption.label }}
473 </option>
474 </select>
475 </div>
476 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
477 </div>
478
479 <ng-container formGroupName="resolutions">
480 <div class="form-group" *ngFor="let resolution of resolutions">
481 <my-peertube-checkbox
482 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
483 i18n-labelText labelText="Resolution {{resolution.label}} enabled"
484 ></my-peertube-checkbox>
485 </div>
486 </ng-container>
487
488 </ng-container>
489 </ng-container>
490
491 <div i18n class="inner-form-title">
492 Cache
493
494 <my-help>
495 <ng-template ptTemplate="customHtml">
496 <ng-container i18n>Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them.</ng-container>
497 </ng-template>
498 </my-help>
499 </div>
500
501 <ng-container formGroupName="cache">
502 <div class="form-group" formGroupName="previews">
503 <label i18n for="cachePreviewsSize">Previews cache size</label>
504 <input
505 type="text" id="cachePreviewsSize"
506 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
507 >
508 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
509 </div>
510
511 <div class="form-group" formGroupName="captions">
512 <label i18n for="cacheCaptionsSize">Video captions cache size</label>
513 <input
514 type="text" id="cacheCaptionsSize"
515 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
516 >
517 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
518 </div>
519 </ng-container>
520
521 <div i18n class="inner-form-title">Customizations</div>
522
523 <ng-container formGroupName="instance">
524 <ng-container formGroupName="customizations">
525 <div class="form-group">
526 <label i18n for="customizationJavascript">JavaScript</label>
527 <my-help>
528 <ng-template ptTemplate="customHtml">
529 <ng-container i18n>
530 Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>
531 </ng-container>
532 </ng-template>
533 </my-help>
534
535 <textarea
536 id="customizationJavascript" formControlName="javascript"
537 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
538 ></textarea>
539
540 <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
541 </div>
542
543 <div class="form-group">
544 <label for="customizationCSS">CSS</label>
545
546 <my-help>
547 <ng-template ptTemplate="customHtml">
548 <ng-container i18n>
549 Write directly CSS code. Example:<br /><br />
550 <pre>
551 #custom-css {{ '{' }}
552 color: red;
553 {{ '}' }}
554 </pre>
555
556 Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
557 <pre>
558 #custom-css .logged-in-email {{ '{' }}
559 color: red;
560 {{ '}' }}
561 </pre>
562 </ng-container>
563 </ng-template>
564 </my-help>
565
566 <textarea
567 id="customizationCSS" formControlName="css"
568 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
569 ></textarea>
570 <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
571 </div>
572 </ng-container>
573 </ng-container>
574
575 </ng-template>
576 </ngb-tab>
577 </ngb-tabset>
578
579 <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
580 <span class="form-error" i18n *ngIf="!form.valid">It seems the configuration is invalid. Please search potential errors in the different tabs.</span>
581 </form>