]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
Channel sync (#5135)
[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-basic-configuration.component.html
1 <ng-container [formGroup]="form">
2 <div class="row mt-5"> <!-- appearance grid -->
3 <div class="col-12 col-lg-4 col-xl-3">
4 <div i18n class="inner-form-title">APPEARANCE</div>
5 <div i18n class="inner-form-description">
6 Use <a class="link-orange" routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or add slight <a class="link-orange" routerLink="/admin/config/edit-custom" fragment="advanced-configuration">customizations</a>.
7 </div>
8 </div>
9
10 <div class="col-12 col-lg-8 col-xl-9">
11
12 <ng-container formGroupName="theme">
13 <div class="form-group">
14 <label i18n for="themeDefault">Theme</label>
15
16 <div class="peertube-select-container">
17 <select formControlName="default" id="themeDefault" class="form-control">
18 <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
19
20 <option *ngFor="let theme of availableThemes" [value]="theme.id">{{ theme.label }}</option>
21 </select>
22 </div>
23 </div>
24 </ng-container>
25
26 <div class="form-group" formGroupName="instance">
27 <label i18n for="instanceDefaultClientRoute">Landing page</label>
28
29 <my-select-custom-value
30 id="instanceDefaultClientRoute"
31 [items]="defaultLandingPageOptions"
32 formControlName="defaultClientRoute"
33 inputType="text"
34 [clearable]="false"
35 ></my-select-custom-value>
36
37 <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
38 </div>
39
40 <div class="form-group" formGroupName="trending">
41 <ng-container formGroupName="videos">
42 <ng-container formGroupName="algorithms">
43 <label i18n for="trendingVideosAlgorithmsDefault">Default trending page</label>
44
45 <div class="peertube-select-container">
46 <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
47 <option i18n value="hot">Hot videos</option>
48 <option i18n value="most-viewed">Most viewed videos</option>
49 <option i18n value="most-liked">Most liked videos</option>
50 </select>
51 </div>
52
53 <div *ngIf="formErrors.trending.videos.algorithms.default" class="form-error">{{ formErrors.trending.videos.algorithms.default }}</div>
54 </ng-container>
55 </ng-container>
56 </div>
57
58 <ng-container formGroupName="client">
59
60 <ng-container formGroupName="videos">
61 <ng-container formGroupName="miniature">
62 <div class="form-group">
63 <my-peertube-checkbox
64 inputName="clientVideosMiniaturePreferAuthorDisplayName" formControlName="preferAuthorDisplayName"
65 i18n-labelText labelText="Prefer author display name in video miniature"
66 ></my-peertube-checkbox>
67 </div>
68 </ng-container>
69 </ng-container>
70
71 <ng-container formGroupName="menu">
72 <ng-container formGroupName="login">
73 <div class="form-group">
74 <my-peertube-checkbox
75 inputName="clientMenuLoginRedirectOnSingleExternalAuth" formControlName="redirectOnSingleExternalAuth"
76 i18n-labelText labelText="Redirect users on single external auth when users click on the login button in menu"
77 >
78 <ng-container ngProjectAs="description">
79 <span *ngIf="countExternalAuth() === 0" i18n>⚠️ You don't have any external auth plugin enabled.</span>
80 <span *ngIf="countExternalAuth() > 1" i18n>⚠️ You have multiple external auth plugins enabled.</span>
81 </ng-container>
82 </my-peertube-checkbox>
83 </div>
84 </ng-container>
85 </ng-container>
86 </ng-container>
87
88 </div>
89 </div>
90
91 <div class="row mt-4"> <!-- broadcast grid -->
92 <div class="col-12 col-lg-4 col-xl-3">
93 <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
94 <div i18n class="inner-form-description">
95 Display a message on your instance
96 </div>
97 </div>
98
99 <div class="col-12 col-lg-8 col-xl-9">
100
101 <ng-container formGroupName="broadcastMessage">
102
103 <div class="form-group">
104 <my-peertube-checkbox
105 inputName="broadcastMessageEnabled" formControlName="enabled"
106 i18n-labelText labelText="Enable broadcast message"
107 ></my-peertube-checkbox>
108 </div>
109
110 <div class="form-group">
111 <my-peertube-checkbox
112 inputName="broadcastMessageDismissable" formControlName="dismissable"
113 i18n-labelText labelText="Allow users to dismiss the broadcast message "
114 ></my-peertube-checkbox>
115 </div>
116
117 <div class="form-group">
118 <label i18n for="broadcastMessageLevel">Broadcast message level</label>
119
120 <div class="peertube-select-container">
121 <select id="broadcastMessageLevel" formControlName="level" class="form-control">
122 <option value="info">info</option>
123 <option value="warning">warning</option>
124 <option value="error">error</option>
125 </select>
126 </div>
127
128 <div *ngIf="formErrors.broadcastMessage.level" class="form-error">{{ formErrors.broadcastMessage.level }}</div>
129 </div>
130
131 <div class="form-group">
132 <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
133
134 <my-markdown-textarea
135 name="broadcastMessageMessage" formControlName="message"
136 [formError]="formErrors['broadcastMessage.message']"
137 ></my-markdown-textarea>
138
139 <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
140 </div>
141
142 </ng-container>
143
144 </div>
145 </div>
146
147 <div class="row mt-4"> <!-- new users grid -->
148 <div class="col-12 col-lg-4 col-xl-3">
149 <div i18n class="inner-form-title">NEW USERS</div>
150 <div i18n class="inner-form-description">
151 Manage <a class="link-orange" routerLink="/admin/users">users</a> to set their quota individually.
152 </div>
153 </div>
154
155 <div class="col-12 col-lg-8 col-xl-9">
156
157 <ng-container formGroupName="signup">
158 <div class="form-group">
159 <my-peertube-checkbox
160 inputName="signupEnabled" formControlName="enabled"
161 i18n-labelText labelText="Enable Signup"
162 >
163 <ng-container ngProjectAs="description">
164 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
165
166 <div class="alert pt-alert-primary alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
167 </ng-container>
168
169 <ng-container ngProjectAs="extra">
170 <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
171 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
172 i18n-labelText labelText="Signup requires email verification"
173 ></my-peertube-checkbox>
174
175 <div [ngClass]="getDisabledSignupClass()" class="mt-3">
176 <label i18n for="signupLimit">Signup limit</label>
177
178 <div class="number-with-unit">
179 <input
180 type="number" min="-1" id="signupLimit" class="form-control"
181 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
182 >
183 <span i18n>{form.value['signup']['limit'], plural, =1 {user} other {users}}</span>
184 </div>
185
186 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
187
188 <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users.</small>
189 </div>
190
191 <div [ngClass]="getDisabledSignupClass()" class="mt-3">
192 <label i18n for="signupMinimumAge">Minimum required age to create an account</label>
193
194 <div class="number-with-unit">
195 <input
196 type="number" min="1" id="signupMinimumAge" class="form-control"
197 formControlName="minimumAge" [ngClass]="{ 'input-error': formErrors['signup.minimumAge'] }"
198 >
199 <span i18n>{form.value['signup']['minimumAge'], plural, =1 {year old} other {years old}}</span>
200 </div>
201
202 <div *ngIf="formErrors.signup.minimumAge" class="form-error">{{ formErrors.signup.minimumAge }}</div>
203 </div>
204 </ng-container>
205 </my-peertube-checkbox>
206 </div>
207 </ng-container>
208
209 <ng-container formGroupName="user">
210 <div class="form-group">
211 <label i18n for="userVideoQuota">Default video quota per user</label>
212
213 <my-select-custom-value
214 id="userVideoQuota"
215 [items]="getVideoQuotaOptions()"
216 formControlName="videoQuota"
217 i18n-inputSuffix inputSuffix="bytes" inputType="number"
218 [clearable]="false"
219 ></my-select-custom-value>
220
221 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
222 </div>
223
224 <div class="form-group">
225 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
226
227 <my-select-custom-value
228 id="userVideoQuotaDaily"
229 [items]="getVideoQuotaDailyOptions()"
230 formControlName="videoQuotaDaily"
231 i18n-inputSuffix inputSuffix="bytes" inputType="number"
232 [clearable]="false"
233 ></my-select-custom-value>
234
235 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
236 </div>
237 </ng-container>
238
239 </div>
240 </div>
241
242 <div class="row mt-4"> <!-- videos grid -->
243 <div class="col-12 col-lg-4 col-xl-3">
244 <div i18n class="inner-form-title">VIDEOS</div>
245 </div>
246
247 <div class="col-12 col-lg-8 col-xl-9">
248
249 <ng-container formGroupName="import">
250
251 <ng-container formGroupName="videos">
252
253 <div class="form-group">
254 <label i18n for="importConcurrency">Import jobs concurrency</label>
255 <span i18n class="small muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
256
257 <div class="number-with-unit">
258 <input type="number" name="importConcurrency" formControlName="concurrency" />
259 <span i18n>jobs in parallel</span>
260 </div>
261
262 <div *ngIf="formErrors.import.concurrency" class="form-error">{{ formErrors.import.concurrency }}</div>
263 </div>
264
265 <div class="form-group" formGroupName="http">
266 <my-peertube-checkbox
267 inputName="importVideosHttpEnabled" formControlName="enabled"
268 i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
269 >
270 <ng-container ngProjectAs="description">
271 <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
272 </ng-container>
273 </my-peertube-checkbox>
274 </div>
275
276 <div class="form-group" formGroupName="torrent">
277 <my-peertube-checkbox
278 inputName="importVideosTorrentEnabled" formControlName="enabled"
279 i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
280 >
281 <ng-container ngProjectAs="description">
282 <span i18n>⚠️ We don't recommend to enable this feature if you don't trust your users</span>
283 </ng-container>
284 </my-peertube-checkbox>
285 </div>
286
287 </ng-container>
288
289 <ng-container formGroupName="videoChannelSynchronization">
290 <div class="form-group">
291 <my-peertube-checkbox
292 inputName="importSynchronizationEnabled" formControlName="enabled"
293 i18n-labelText labelText="Allow channel synchronization with channel of other platforms like YouTube (requires allowing import with HTTP URL)"
294 >
295 <ng-container ngProjectAs="description">
296 <span i18n [hidden]="isImportVideosHttpEnabled()">
297 ⛔ You need to allow import with HTTP URL to be able to activate this feature.
298 </span>
299 </ng-container>
300 </my-peertube-checkbox>
301 </div>
302 </ng-container>
303
304 </ng-container>
305
306 <ng-container formGroupName="autoBlacklist">
307 <ng-container formGroupName="videos">
308 <ng-container formGroupName="ofUsers">
309
310 <div class="form-group">
311 <my-peertube-checkbox
312 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
313 i18n-labelText labelText="Block new videos automatically"
314 >
315 <ng-container ngProjectAs="description">
316 <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
317 </ng-container>
318 </my-peertube-checkbox>
319 </div>
320
321 </ng-container>
322 </ng-container>
323 </ng-container>
324
325 </div>
326 </div>
327
328 <div class="row mt-4"> <!-- video channels grid -->
329 <div class="col-12 col-lg-4 col-xl-3">
330 <div i18n class="inner-form-title">VIDEO CHANNELS</div>
331 </div>
332
333 <div class="col-12 col-lg-8 col-xl-9">
334 <div class="form-group" formGroupName="videoChannels">
335 <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
336
337 <div class="number-with-unit">
338 <input
339 type="number" min="1" id="videoChannelsMaxPerUser" class="form-control"
340 formControlName="maxPerUser" [ngClass]="{ 'input-error': formErrors['videoChannels.maxPerUser'] }"
341 >
342 <span i18n>{form.value['videoChannels']['maxPerUser'], plural, =1 {channel} other {channels}}</span>
343 </div>
344
345 <div *ngIf="formErrors.videoChannels.maxPerUser" class="form-error">{{ formErrors.videoChannels.maxPerUser }}</div>
346 </div>
347 </div>
348 </div>
349
350 <div class="row mt-4"> <!-- search grid -->
351 <div class="col-12 col-lg-4 col-xl-3">
352 <div i18n class="inner-form-title">SEARCH</div>
353 </div>
354
355 <div class="col-12 col-lg-8 col-xl-9">
356
357 <ng-container formGroupName="search">
358 <ng-container formGroupName="remoteUri">
359
360 <div class="form-group">
361 <my-peertube-checkbox
362 inputName="searchRemoteUriUsers" formControlName="users"
363 i18n-labelText labelText="Allow users to do remote URI/handle search"
364 >
365 <ng-container ngProjectAs="description">
366 <span i18n>Allow <strong>your users</strong> to look up remote videos/actors that may not be federated with your instance</span>
367 </ng-container>
368 </my-peertube-checkbox>
369 </div>
370
371 <div class="form-group">
372 <my-peertube-checkbox
373 inputName="searchRemoteUriAnonymous" formControlName="anonymous"
374 i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
375 >
376 <ng-container ngProjectAs="description">
377 <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors that may not be federated with your instance</span>
378 </ng-container>
379 </my-peertube-checkbox>
380 </div>
381
382 </ng-container>
383
384 <ng-container formGroupName="searchIndex">
385 <div class="form-group">
386 <my-peertube-checkbox
387 inputName="searchIndexEnabled" formControlName="enabled"
388 i18n-labelText labelText="Enable global search"
389 >
390 <ng-container ngProjectAs="description">
391 <div i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</div>
392
393 <div i18n>
394 You should only use moderated search indexes in production, or <a class="link-orange" href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
395 </div>
396 </ng-container>
397
398 <ng-container ngProjectAs="extra">
399 <div [ngClass]="getDisabledSearchIndexClass()">
400 <label i18n for="searchIndexUrl">Search index URL</label>
401
402 <input
403 type="text" id="searchIndexUrl" class="form-control"
404 formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
405 >
406
407 <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
408 </div>
409
410 <div class="mt-3">
411 <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
412 inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
413 i18n-labelText labelText="Disable local search in search bar"
414 ></my-peertube-checkbox>
415 </div>
416
417 <div class="mt-3">
418 <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
419 inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
420 i18n-labelText labelText="Search bar uses the global search index by default"
421 >
422 <ng-container ngProjectAs="description">
423 <span i18n>Otherwise the local search stays used by default</span>
424 </ng-container>
425 </my-peertube-checkbox>
426 </div>
427
428 </ng-container>
429 </my-peertube-checkbox>
430 </div>
431
432 </ng-container>
433
434 </ng-container>
435
436 </div>
437 </div>
438
439 <div class="row mt-4"> <!-- federation grid -->
440 <div class="col-12 col-lg-4 col-xl-3">
441 <div i18n class="inner-form-title">FEDERATION</div>
442 <div i18n class="inner-form-description">
443 Manage <a class="link-orange" routerLink="/admin/follows">relations</a> with other instances.
444 </div>
445 </div>
446
447 <div class="col-12 col-lg-8 col-xl-9">
448
449 <ng-container formGroupName="followers">
450 <ng-container formGroupName="instance">
451
452 <div class="form-group">
453 <my-peertube-checkbox
454 inputName="followersInstanceEnabled" formControlName="enabled"
455 i18n-labelText labelText="Other instances can follow yours"
456 ></my-peertube-checkbox>
457 </div>
458
459 <div class="form-group">
460 <my-peertube-checkbox
461 inputName="followersInstanceManualApproval" formControlName="manualApproval"
462 i18n-labelText labelText="Manually approve new instance followers"
463 ></my-peertube-checkbox>
464 </div>
465 </ng-container>
466 </ng-container>
467
468 <ng-container formGroupName="followings">
469 <ng-container formGroupName="instance">
470
471 <ng-container formGroupName="autoFollowBack">
472 <div class="form-group">
473 <my-peertube-checkbox
474 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
475 i18n-labelText labelText="Automatically follow back instances"
476 >
477 <ng-container ngProjectAs="description">
478 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
479 </ng-container>
480 </my-peertube-checkbox>
481 </div>
482 </ng-container>
483
484 <ng-container formGroupName="autoFollowIndex">
485 <div class="form-group">
486 <my-peertube-checkbox
487 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
488 i18n-labelText labelText="Automatically follow instances of a public index"
489 >
490 <ng-container ngProjectAs="description">
491 <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
492
493 <span i18n>
494 See <a class="link-orange" href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
495 </span>
496 </ng-container>
497
498 <ng-container ngProjectAs="extra">
499 <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
500 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
501 <input
502 type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
503 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
504 >
505 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
506 </div>
507 </ng-container>
508 </my-peertube-checkbox>
509 </div>
510
511 </ng-container>
512 </ng-container>
513 </ng-container>
514
515 </div>
516 </div>
517
518 <div class="row mt-4"> <!-- administrators grid -->
519 <div class="col-12 col-lg-4 col-xl-3">
520 <div i18n class="inner-form-title">ADMINISTRATORS</div>
521 </div>
522
523 <div class="col-12 col-lg-8 col-xl-9">
524
525 <div class="form-group" formGroupName="admin">
526 <label i18n for="adminEmail">Admin email</label>
527
528 <input
529 type="text" id="adminEmail" class="form-control"
530 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
531 >
532
533 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
534 </div>
535
536 <div class="form-group" formGroupName="contactForm">
537 <my-peertube-checkbox
538 inputName="enableContactForm" formControlName="enabled"
539 i18n-labelText labelText="Enable contact form"
540 ></my-peertube-checkbox>
541 </div>
542
543 </div>
544 </div>
545
546 <div class="row mt-4"> <!-- Twitter grid -->
547 <div class="col-12 col-lg-4 col-xl-3">
548 <div i18n class="inner-form-title">TWITTER</div>
549 <div i18n class="inner-form-description">
550 Provide the Twitter account representing your instance to improve link previews.
551 If you don't have a Twitter account, just leave the default value.
552 </div>
553 </div>
554
555 <div class="col-12 col-lg-8 col-xl-9">
556
557 <ng-container formGroupName="services">
558 <ng-container formGroupName="twitter">
559
560 <div class="form-group">
561 <label for="servicesTwitterUsername" i18n>Your Twitter username</label>
562
563 <input
564 type="text" id="servicesTwitterUsername" class="form-control"
565 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
566 >
567
568 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
569 </div>
570
571 <div class="form-group">
572 <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
573 <ng-template ptTemplate="label">
574 <ng-container i18n>Instance allowed by Twitter</ng-container>
575 </ng-template>
576
577 <ng-template ptTemplate="help">
578 <ng-container i18n>
579 If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
580 If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
581 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on
582 <a class="link-orange" target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
583 to see if you instance is allowed.
584 </ng-container>
585 </ng-template>
586 </my-peertube-checkbox>
587 </div>
588
589 </ng-container>
590 </ng-container>
591
592 </div>
593 </div>
594 </ng-container>