]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
projects / github / Chocobozzz / PeerTube.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
Add max lives limit
[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-custom-config.component.html
CommitLineData
c9e3565d 1<h1 class="sr-only" i18n>Configuration</h1>
8a8e02a4 2<form role="form" [formGroup]="form">
fd206f0b 3
45c6bcf3 4 <div ngbNav #nav="ngbNav" class="nav-tabs">
8be1afa1 5
45c6bcf3
C		 6 <ng-container ngbNavItem="instance-information">
7 <a ngbNavLink i18n>Instance information</a>
8
9 <ng-template ngbNavContent>
8be1afa1 10
3866f1a0 11 <ng-container formGroupName="instance">
ccc00cb2 12
482fa503
RK		 13 <div class="form-row mt-5"> <!-- instance grid -->
14 <div class="form-group col-12 col-lg-4 col-xl-3">
15 <div i18n class="inner-form-title">INSTANCE</div>
16 </div>
63347a0f 17
482fa503 18 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
63347a0f 19
482fa503
RK		 20 <div class="form-group">
21 <label i18n for="instanceName">Name</label>
22 <input
a6d5ff76 23 type="text" id="instanceName" class="form-control"
482fa503
RK		 24 formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
25 >
26 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
27 </div>
63347a0f 28
482fa503
RK		 29 <div class="form-group">
30 <label i18n for="instanceShortDescription">Short description</label>
31 <textarea
a6d5ff76 32 id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
482fa503
RK		 33 [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
34 ></textarea>
35 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
36 </div>
ccc00cb2 37
482fa503
RK		 38 <div class="form-group">
39 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
40 <my-markdown-textarea
b15fe00f 41 name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
482fa503
RK		 42 [classes]="{ 'input-error': formErrors['instance.description'] }"
43 ></my-markdown-textarea>
44 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
45 </div>
ccc00cb2 46
482fa503
RK		 47 <div class="form-group">
48 <label i18n for="instanceCategories">Main instance categories</label>
49
50 <div>
52c4976f
C		 51 <my-select-checkbox
52 id="instanceCategories"
53 formControlName="categories" [availableItems]="categoryItems"
54 [selectableGroup]="false"
857961f0 55 i18n-placeholder placeholder="Add a new category"
52c4976f
C		 56 >
57 </my-select-checkbox>
482fa503
RK		 58 </div>
59 </div>
60
61 <div class="form-group">
62 <label i18n for="instanceLanguages">Main languages you/your moderators speak</label>
63
64 <div>
52c4976f
C		 65 <my-select-checkbox
66 id="instanceLanguages"
67 formControlName="languages" [availableItems]="languageItems"
68 [selectableGroup]="false"
857961f0 69 i18n-placeholder placeholder="Add a new language"
52c4976f
C		 70 >
71 </my-select-checkbox>
482fa503
RK		 72 </div>
73 </div>
ccc00cb2 74
ccc00cb2 75 </div>
63347a0f 76 </div>
63347a0f 77
482fa503
RK		 78 <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
79 <div class="form-group col-12 col-lg-4 col-xl-3">
80 <div i18n class="inner-form-title">MODERATION & NSFW</div>
310e95d8
RK		 81 <div i18n class="inner-for-description">
82 Manage <a routerLink="/admin/users">users</a> to build a moderation team.
83 </div>
482fa503 84 </div>
ccc00cb2 85
482fa503 86 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
421d935d 87
482fa503
RK		 88 <div class="form-group">
89 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
90 <ng-template ptTemplate="label">
91 <ng-container i18n>This instance is dedicated to sensitive or NSFW content</ng-container>
92 </ng-template>
f8802489 93
482fa503
RK		 94 <ng-template ptTemplate="help">
95 <ng-container i18n>
96 Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
97 Moreover, the NSFW checkbox on video upload will be automatically checked by default.
98 </ng-container>
99 </ng-template>
100 </my-peertube-checkbox>
101 </div>
421d935d 102
482fa503
RK		 103 <div class="form-group">
104 <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
ccc00cb2 105
482fa503
RK		 106 <my-help>
107 <ng-template ptTemplate="customHtml">
108 <ng-container i18n>
109 With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
110 </ng-container>
111 </ng-template>
112 </my-help>
113
114 <div class="peertube-select-container">
a6d5ff76 115 <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
2bc9bd08 116 <option i18n value="undefined" disabled>Policy for sensitive videos</option>
482fa503
RK		 117 <option i18n value="do_not_list">Do not list</option>
118 <option i18n value="blur">Blur thumbnails</option>
119 <option i18n value="display">Display</option>
120 </select>
121 </div>
122 <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
123 </div>
ccc00cb2 124
482fa503
RK		 125 <div class="form-group">
126 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
127 <my-markdown-textarea
b15fe00f 128 name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
482fa503
RK		 129 [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
130 ></my-markdown-textarea>
131 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
132 </div>
ccc00cb2 133
482fa503
RK		 134 <div class="form-group">
135 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
136 <my-markdown-textarea
b15fe00f 137 name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
482fa503
RK		 138 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
139 ></my-markdown-textarea>
140 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
141 </div>
ccc00cb2 142
482fa503
RK		 143 <div class="form-group">
144 <label i18n for="instanceModerationInformation">Moderation information</label><my-help helpType="markdownText"></my-help>
145 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
146
147 <my-markdown-textarea
b15fe00f 148 name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
482fa503
RK		 149 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
150 ></my-markdown-textarea>
151 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
152 </div>
153
154 </div>
ccc00cb2
C		 155 </div>
156
482fa503
RK		 157 <div class="form-row mt-4"> <!-- you and your instance grid -->
158 <div class="form-group col-12 col-lg-4 col-xl-3">
159 <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
160 </div>
ccc00cb2 161
482fa503 162 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
ccc00cb2 163
482fa503
RK		 164 <div class="form-group">
165 <label i18n for="instanceAdministrator">Who is behind the instance?</label>
166 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
8ae03c37 167
482fa503 168 <my-markdown-textarea
b15fe00f 169 name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px"
482fa503
RK		 170 [classes]="{ 'input-error': formErrors['instance.administrator'] }"
171 ></my-markdown-textarea>
8ae03c37 172
482fa503
RK		 173 <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
174 </div>
8ae03c37 175
482fa503
RK		 176 <div class="form-group">
177 <label i18n for="instanceCreationReason">Why did you create this instance?</label>
178 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
179
180 <textarea
a6d5ff76 181 id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
482fa503
RK		 182 [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
183 ></textarea>
184 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
185 </div>
ccc00cb2 186
482fa503
RK		 187 <div class="form-group">
188 <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
189 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
190
191 <textarea
a6d5ff76 192 id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
482fa503
RK		 193 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
194 ></textarea>
195 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
196 </div>
197
198 <div class="form-group">
199 <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
200 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
201
202 <textarea
a6d5ff76 203 id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
482fa503
RK		 204 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
205 ></textarea>
206 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
207 </div>
ccc00cb2 208
482fa503 209 </div>
ccc00cb2
C		 210 </div>
211
482fa503
RK		 212 <div class="form-row mt-4"> <!-- other information grid -->
213 <div class="form-group col-12 col-lg-4 col-xl-3">
214 <div i18n class="inner-form-title">OTHER INFORMATION</div>
215 </div>
ccc00cb2 216
482fa503 217 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
ccc00cb2 218
482fa503
RK		 219 <div class="form-group">
220 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
45e0d669 221 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
be04c6fd 222
482fa503 223 <my-markdown-textarea
b15fe00f 224 name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" textareaHeight="75px"
482fa503
RK		 225 [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
226 ></my-markdown-textarea>
be04c6fd 227
482fa503
RK		 228 <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
229 </div>
be04c6fd 230
482fa503 231 </div>
be04c6fd
C		 232 </div>
233
3866f1a0 234 </ng-container>
ccc00cb2 235 </ng-template>
45c6bcf3
C		 236 </ng-container>
237
238 <ng-container ngbNavItem="basic-configuration">
239 <a ngbNavLink i18n>Basic configuration</a>
63347a0f 240
45c6bcf3 241 <ng-template ngbNavContent>
0dc64777 242
482fa503
RK		 243 <div class="form-row mt-5"> <!-- appearance grid -->
244 <div class="form-group col-12 col-lg-4 col-xl-3">
245 <div i18n class="inner-form-title">APPEARANCE</div>
310e95d8 246 <div i18n class="inner-for-description">
45e0d669 247 Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="customizations" (click)="gotoAnchor()">add slight customizations</a>.
310e95d8 248 </div>
7cd4d2ba 249 </div>
7cd4d2ba 250
482fa503 251 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
7cd4d2ba 252
482fa503
RK		 253 <ng-container formGroupName="theme">
254 <div class="form-group">
255 <label i18n for="themeDefault">Theme</label>
ccc00cb2 256
482fa503 257 <div class="peertube-select-container">
a6d5ff76 258 <select formControlName="default" id="themeDefault" class="form-control">
482fa503 259 <option i18n value="default">default</option>
63347a0f 260
482fa503
RK		 261 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
262 </select>
96a4a7c3 263 </div>
482fa503
RK		 264 </div>
265 </ng-container>
63347a0f 266
482fa503
RK		 267 <div class="form-group" formGroupName="instance">
268 <label i18n for="instanceDefaultClientRoute">Landing page</label>
269 <div class="peertube-select-container">
a6d5ff76 270 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
482fa503
RK		 271 <option i18n value="/videos/overview">Discover videos</option>
272 <option i18n value="/videos/trending">Trending videos</option>
273 <option i18n value="/videos/most-liked">Most liked videos</option>
274 <option i18n value="/videos/recently-added">Recently added videos</option>
275 <option i18n value="/videos/local">Local videos</option>
276 </select>
277 </div>
278 <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
3866f1a0 279 </div>
482fa503 280
3866f1a0 281 </div>
482fa503 282 </div>
d9eaee39 283
72c33e71
C		 284 <div class="form-row mt-4"> <!-- broadcast grid -->
285 <div class="form-group col-12 col-lg-4 col-xl-3">
286 <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
287 <div i18n class="inner-for-description">
288 Display a message on your instance
289 </div>
290 </div>
291
292 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
293
294 <ng-container formGroupName="broadcastMessage">
295
296 <div class="form-group">
297 <my-peertube-checkbox
298 inputName="broadcastMessageEnabled" formControlName="enabled"
299 i18n-labelText labelText="Enable broadcast message"
300 ></my-peertube-checkbox>
301 </div>
302
303 <div class="form-group">
304 <my-peertube-checkbox
305 inputName="broadcastMessageDismissable" formControlName="dismissable"
306 i18n-labelText labelText="Allow users to dismiss the broadcast message "
307 ></my-peertube-checkbox>
308 </div>
309
310 <div class="form-group">
311 <label i18n for="broadcastMessageLevel">Broadcast message level</label>
312 <div class="peertube-select-container">
313 <select id="broadcastMessageLevel" formControlName="level" class="form-control">
314 <option value="info">info</option>
315 <option value="warning">warning</option>
316 <option value="error">error</option>
317 </select>
318 </div>
319 <div *ngIf="formErrors.broadcastMessage.level" class="form-error">{{ formErrors.broadcastMessage.level }}</div>
320 </div>
321
322 <div class="form-group">
323 <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
324 <my-markdown-textarea
325 name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
326 [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
327 ></my-markdown-textarea>
328 <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
329 </div>
330
331 </ng-container>
332
333 </div>
334 </div>
335
482fa503
RK		 336 <div class="form-row mt-4"> <!-- new users grid -->
337 <div class="form-group col-12 col-lg-4 col-xl-3">
338 <div i18n class="inner-form-title">NEW USERS</div>
310e95d8
RK		 339 <div i18n class="inner-for-description">
340 Manage <a routerLink="/admin/users">users</a> to set their quota individually.
341 </div>
63347a0f 342 </div>
8be1afa1 343
482fa503 344 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
0dc64777 345
482fa503
RK		 346 <ng-container formGroupName="signup">
347 <div class="form-group">
348 <my-peertube-checkbox
349 inputName="signupEnabled" formControlName="enabled"
d840487f 350 i18n-labelText labelText="Enable Signup"
482fa503
RK		 351 >
352 <ng-container ngProjectAs="description">
353 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
354 </ng-container>
355 <ng-container ngProjectAs="extra">
356 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
357 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
358 i18n-labelText labelText="Signup requires email verification"
359 ></my-peertube-checkbox>
63347a0f 360
482fa503
RK		 361 <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
362 <label i18n for="signupLimit">Signup limit</label>
363 <input
a6d5ff76 364 type="number" min="-1" id="signupLimit" class="form-control"
482fa503
RK		 365 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
366 >
367 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
368 <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
369 </div>
370 </ng-container>
371 </my-peertube-checkbox>
372 </div>
373 </ng-container>
8be1afa1 374
482fa503
RK		 375 <ng-container formGroupName="user">
376 <div class="form-group">
377 <label i18n for="userVideoQuota">Default video quota per user</label>
378 <div class="peertube-select-container">
a6d5ff76 379 <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
2bc9bd08 380 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
482fa503
RK		 381 {{ videoQuotaOption.label }}
382 </option>
383 </select>
384 </div>
385 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
386 </div>
3866f1a0 387
482fa503
RK		 388 <div class="form-group">
389 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
390 <div class="peertube-select-container">
a6d5ff76 391 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
2bc9bd08 392 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
482fa503
RK		 393 {{ videoQuotaDailyOption.label }}
394 </option>
395 </select>
396 </div>
397 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
398 </div>
399 </ng-container>
3866f1a0 400
482fa503
RK		 401 </div>
402 </div>
8be1afa1 403
5fb2e288 404 <div class="form-row mt-4"> <!-- videos grid -->
482fa503 405 <div class="form-group col-12 col-lg-4 col-xl-3">
5fb2e288 406 <div i18n class="inner-form-title">VIDEOS</div>
482fa503 407 </div>
0dc64777 408
482fa503 409 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
7ccddd7b 410
482fa503
RK		 411 <ng-container formGroupName="import">
412 <ng-container formGroupName="videos">
45c6bcf3 413
482fa503
RK		 414 <div class="form-group" formGroupName="http">
415 <my-peertube-checkbox
416 inputName="importVideosHttpEnabled" formControlName="enabled"
417 i18n-labelText labelText="Allow import with HTTP URL (i.e. YouTube)"
418 ></my-peertube-checkbox>
419 </div>
7ccddd7b 420
482fa503
RK		 421 <div class="form-group" formGroupName="torrent">
422 <my-peertube-checkbox
423 inputName="importVideosTorrentEnabled" formControlName="enabled"
424 i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
425 ></my-peertube-checkbox>
426 </div>
7ccddd7b 427
482fa503 428 </ng-container>
7ccddd7b 429 </ng-container>
0dc64777 430
482fa503
RK		 431 <ng-container formGroupName="autoBlacklist">
432 <ng-container formGroupName="videos">
433 <ng-container formGroupName="ofUsers">
45c6bcf3 434
482fa503
RK		 435 <div class="form-group">
436 <my-peertube-checkbox
437 inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
5baee5fc 438 i18n-labelText labelText="Block new videos automatically"
482fa503
RK		 439 >
440 <ng-container ngProjectAs="description">
441 <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
442 </ng-container>
443 </my-peertube-checkbox>
444 </div>
45c6bcf3 445
482fa503
RK		 446 </ng-container>
447 </ng-container>
448 </ng-container>
0dc64777 449
482fa503
RK		 450 </div>
451 </div>
0dc64777 452
5fb2e288
C		 453 <div class="form-row mt-4"> <!-- search grid -->
454 <div class="form-group col-12 col-lg-4 col-xl-3">
455 <div i18n class="inner-form-title">SEARCH</div>
456 </div>
457
458 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
459
460 <ng-container formGroupName="search">
461 <ng-container formGroupName="remoteUri">
462
463 <div class="form-group">
464 <my-peertube-checkbox
465 inputName="searchRemoteUriUsers" formControlName="users"
466 i18n-labelText labelText="Allow users to do remote URI/handle search"
467 >
468 <ng-container ngProjectAs="description">
d840487f 469 <span i18n>Allow <strong>your users</strong> to look up remote videos/actors by their URI, that may not be federated with your instance</span>
5fb2e288
C		 470 </ng-container>
471 </my-peertube-checkbox>
472 </div>
473
474 <div class="form-group">
475 <my-peertube-checkbox
476 inputName="searchRemoteUriAnonymous" formControlName="anonymous"
477 i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
478 >
479 <ng-container ngProjectAs="description">
d840487f 480 <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors by their URI, that may not be federated with your instance</span>
5fb2e288
C		 481 </ng-container>
482 </my-peertube-checkbox>
483 </div>
484
485 </ng-container>
486
487 <ng-container formGroupName="searchIndex">
488 <div class="form-group">
489 <my-peertube-checkbox
490 inputName="searchIndexEnabled" formControlName="enabled"
d840487f 491 i18n-labelText labelText="Enable global search"
5fb2e288 492 >
d840487f
RK		 493 <ng-container ngProjectAs="description">
494 <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
5fb2e288 495
d840487f 496 <span i18n>
7e4022a5 497 You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
d840487f
RK		 498 </span>
499 </ng-container>
5fb2e288 500
d840487f
RK		 501 <ng-container ngProjectAs="extra">
502 <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
503 <label i18n for="searchIndexUrl">Search index URL</label>
504 <input
505 type="text" id="searchIndexUrl" class="form-control"
506 formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
507 >
508 <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
509 </div>
510
511 <div class="mt-3">
512 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
513 inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
514 i18n-labelText labelText="Disable local search in search bar"
515 ></my-peertube-checkbox>
516 </div>
517
518 <div class="mt-3">
519 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
520 inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
521 i18n-labelText labelText="Search bar uses the global search index by default"
522 >
523 <ng-container ngProjectAs="description">
524 <span i18n>Otherwise the local search stays used by default</span>
525 </ng-container>
526 </my-peertube-checkbox>
527 </div>
5fb2e288 528
d840487f
RK		 529 </ng-container>
530 </my-peertube-checkbox>
5fb2e288
C		 531 </div>
532
533 </ng-container>
534
535 </ng-container>
536
537 </div>
538 </div>
539
482fa503
RK		 540 <div class="form-row mt-4"> <!-- federation grid -->
541 <div class="form-group col-12 col-lg-4 col-xl-3">
542 <div i18n class="inner-form-title">FEDERATION</div>
45e0d669
RK		 543 <div i18n class="inner-form-description">
544 Manage <a routerLink="/admin/follows">relations</a> with other instances.
545 </div>
482fa503 546 </div>
0dc64777 547
482fa503 548 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
0dc64777 549
482fa503
RK		 550 <ng-container formGroupName="followers">
551 <ng-container formGroupName="instance">
e1b49ee5 552
482fa503
RK		 553 <div class="form-group">
554 <my-peertube-checkbox
555 inputName="followersInstanceEnabled" formControlName="enabled"
556 i18n-labelText labelText="Other instances can follow yours"
557 ></my-peertube-checkbox>
558 </div>
e1b49ee5 559
482fa503
RK		 560 <div class="form-group">
561 <my-peertube-checkbox
562 inputName="followersInstanceManualApproval" formControlName="manualApproval"
563 i18n-labelText labelText="Manually approve new instance followers"
564 ></my-peertube-checkbox>
565 </div>
566 </ng-container>
e1b49ee5
C		 567 </ng-container>
568
482fa503
RK		 569 <ng-container formGroupName="followings">
570 <ng-container formGroupName="instance">
571
572 <ng-container formGroupName="autoFollowBack">
573 <div class="form-group">
574 <my-peertube-checkbox
575 inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
576 i18n-labelText labelText="Automatically follow back instances"
577 >
578 <ng-container ngProjectAs="description">
579 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
580 </ng-container>
581 </my-peertube-checkbox>
582 </div>
583 </ng-container>
96a4a7c3 584
482fa503
RK		 585 <ng-container formGroupName="autoFollowIndex">
586 <div class="form-group">
587 <my-peertube-checkbox
588 inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
2bc9bd08 589 i18n-labelText labelText="Automatically follow instances of a public index"
482fa503
RK		 590 >
591 <ng-container ngProjectAs="description">
2bc9bd08
RK		 592 <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
593
594 <span i18n>
7e4022a5 595 You should only follow moderated indexes in production, or <a href="https://framagit.org/framasoft/peertube/instances-peertube#peertube-auto-follow">host your own</a>.
2bc9bd08 596 </span>
482fa503
RK		 597 </ng-container>
598
599 <ng-container ngProjectAs="extra">
600 <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
601 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
602 <input
a6d5ff76 603 type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
482fa503
RK		 604 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
605 >
606 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
607 </div>
608 </ng-container>
609 </my-peertube-checkbox>
610 </div>
e1b49ee5 611
482fa503
RK		 612 </ng-container>
613 </ng-container>
e1b49ee5 614 </ng-container>
e1b49ee5 615
482fa503
RK		 616 </div>
617 </div>
618
619 <div class="form-row mt-4"> <!-- administrators grid -->
620 <div class="form-group col-12 col-lg-4 col-xl-3">
621 <div i18n class="inner-form-title">ADMINISTRATORS</div>
622 </div>
0dc64777 623
482fa503 624 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
8be1afa1 625
482fa503
RK		 626 <div class="form-group" formGroupName="admin">
627 <label i18n for="adminEmail">Admin email</label>
628 <input
a6d5ff76 629 type="text" id="adminEmail" class="form-control"
482fa503
RK		 630 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
631 >
632 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
633 </div>
634
635 <div class="form-group" formGroupName="contactForm">
636 <my-peertube-checkbox
637 inputName="enableContactForm" formControlName="enabled"
638 i18n-labelText labelText="Enable contact form"
639 ></my-peertube-checkbox>
640 </div>
8be1afa1 641
482fa503 642 </div>
8be1afa1 643 </div>
bee0abff 644
63347a0f 645 </ng-template>
45c6bcf3
C		 646 </ng-container>
647
648 <ng-container ngbNavItem="services">
649 <a ngbNavLink i18n>Services</a>
8be1afa1 650
45c6bcf3 651 <ng-template ngbNavContent>
0f7fedc3 652
482fa503
RK		 653 <div class="form-row mt-5"> <!-- twitter grid -->
654 <div class="form-group col-12 col-lg-4 col-xl-3">
655 <div i18n class="inner-form-title">TWITTER</div>
9b307858
RK		 656 <div i18n class="inner-form-description">
657 Optional. If any, provide the Twitter account representing your instance to improve link previews.
658 </div>
482fa503 659 </div>
3866f1a0 660
482fa503 661 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
421d935d 662
482fa503
RK		 663 <ng-container formGroupName="services">
664 <ng-container formGroupName="twitter">
421d935d 665
482fa503
RK		 666 <div class="form-group">
667 <label i18n for="signupLimit">Your Twitter username</label>
3866f1a0 668
482fa503 669 <input
a6d5ff76 670 type="text" id="servicesTwitterUsername" class="form-control"
482fa503
RK		 671 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
672 >
673 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
674 </div>
3866f1a0 675
482fa503
RK		 676 <div class="form-group">
677 <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
678 <ng-template ptTemplate="label">
5baee5fc 679 <ng-container i18n>Instance allowed by Twitter</ng-container>
482fa503
RK		 680 </ng-template>
681
682 <ng-template ptTemplate="help">
683 <ng-container i18n>
5baee5fc
RK		 684 If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
685 If the instance is not, we use an image link card that will redirect on your PeerTube instance.<br /><br />
482fa503
RK		 686 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
687 <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
5baee5fc 688 to see if you instance is allowed.
482fa503
RK		 689 </ng-container>
690 </ng-template>
691 </my-peertube-checkbox>
692 </div>
693
694 </ng-container>
695 </ng-container>
696
697 </div>
698 </div>
45c6bcf3
C		 699 </ng-template>
700 </ng-container>
8be1afa1 701
fb719404 702 <div ngbNavItem="live">
c6c0fa6c
C		 703 <a ngbNavLink i18n>Live streaming</a>
704
705 <ng-template ngbNavContent>
706
707 <div class="form-row mt-5">
708 <div class="form-group col-12 col-lg-4 col-xl-3">
709 <div i18n class="inner-form-title">LIVE</div>
710 <div i18n class="inner-form-description">
711 Add ability for your users to do live streaming on your instance.
712 </div>
713 </div>
714
715 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
716
717 <ng-container formGroupName="live">
718
719 <div class="form-group">
720 <my-peertube-checkbox inputName="liveEnabled" formControlName="enabled">
721 <ng-template ptTemplate="label">
722 <ng-container i18n>Allow live streaming</ng-container>
723 </ng-template>
724
fb719404
C		 725 <ng-container ngProjectAs="description" i18n>
726 ⚠️ Enabling live streaming requires trust in your users and extra moderation work
727 </ng-container>
c6c0fa6c 728
fb719404 729 <ng-container ngProjectAs="extra">
c6c0fa6c
C		 730
731 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
732 <my-peertube-checkbox
fb719404
C		 733 inputName="liveAllowReplay" formControlName="allowReplay"
734 i18n-labelText labelText="Allow your users to automatically publish a replay of their live"
c6c0fa6c 735 >
fb719404
C		 736 <ng-container ngProjectAs="description" i18n>
737 If the user quota is reached, PeerTube will automatically terminate the live streaming
c6c0fa6c
C		 738 </ng-container>
739 </my-peertube-checkbox>
740 </div>
741
a056ca48
C		 742 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
743 <label i18n for="liveMaxInstanceLives">Max lives created on your instance (-1 for "unlimited")</label>
744 <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
745 </div>
746
747 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
748 <label i18n for="liveMaxUserLives">Max lives created per user (-1 for "unlimited")</label>
749 <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
750 </div>
751
fb719404
C		 752 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
753 <label i18n for="liveMaxDuration">Max live duration</label>
c6c0fa6c 754 <div class="peertube-select-container">
fb719404
C		 755 <select id="liveMaxDuration" formControlName="maxDuration" class="form-control">
756 <option *ngFor="let liveMaxDurationOption of liveMaxDurationOptions" [value]="liveMaxDurationOption.value">
757 {{ liveMaxDurationOption.label }}
c6c0fa6c
C		 758 </option>
759 </select>
760 </div>
c6c0fa6c
C		 761 </div>
762
fb719404
C		 763 <ng-container formGroupName="transcoding">
764
765 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
766 <my-peertube-checkbox
767 inputName="liveTranscodingEnabled" formControlName="enabled"
768 i18n-labelText labelText="Enable live transcoding"
769 >
770 <ng-container ngProjectAs="description" i18n>
771 Requires a lot of CPU!
772 </ng-container>
773 </my-peertube-checkbox>
c6c0fa6c 774 </div>
fb719404
C		 775
776 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
777 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
778 <div class="peertube-select-container">
779 <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
780 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
781 {{ transcodingThreadOption.label }}
782 </option>
783 </select>
784 </div>
785 <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
786 </div>
787
788 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
789 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
790
791 <div class="ml-2 mt-2 d-flex flex-column">
792 <ng-container formGroupName="resolutions">
793 <div class="form-group" *ngFor="let resolution of liveResolutions">
794 <my-peertube-checkbox
795 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
796 labelText="{{resolution.label}}"
797 >
798 <ng-template *ngIf="resolution.description" ptTemplate="help">
799 <div [innerHTML]="resolution.description"></div>
800 </ng-template>
801 </my-peertube-checkbox>
802 </div>
803 </ng-container>
804 </div>
805 </div>
806 </ng-container>
c6c0fa6c
C		 807 </ng-container>
808 </my-peertube-checkbox>
809 </div>
810 </ng-container>
811 </div>
812 </div>
813
814 </ng-template>
fb719404 815 </div>
c6c0fa6c 816
45c6bcf3
C		 817 <ng-container ngbNavItem="advanced-configuration">
818 <a ngbNavLink i18n>Advanced configuration</a>
63347a0f 819
45c6bcf3 820 <ng-template ngbNavContent>
63347a0f 821
482fa503
RK		 822 <div class="form-row mt-5"> <!-- transcoding grid -->
823 <div class="form-group col-12 col-lg-4 col-xl-3">
824 <div i18n class="inner-form-title">TRANSCODING</div>
9b307858
RK		 825 <div i18n class="inner-form-description">
826 Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
827 resources, this is a critical part of PeerTube, so tread carefully.
828 </div>
14e2014a
C		 829 </div>
830
482fa503 831 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
3866f1a0 832
482fa503 833 <ng-container formGroupName="transcoding">
536598cf 834
482fa503
RK		 835 <div class="form-group">
836 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
837 <ng-template ptTemplate="label">
838 <ng-container i18n>Transcoding enabled</ng-container>
839 </ng-template>
45c6bcf3 840
5a71acd2 841 <ng-template ptTemplate="help">
482fa503
RK		 842 <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
843 </ng-template>
5a71acd2 844
482fa503 845 <ng-container ngProjectAs="extra">
04cda1d7 846
482fa503
RK		 847 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
848 <my-peertube-checkbox
849 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
850 i18n-labelText labelText="Allow additional extensions"
851 >
9b307858 852 <ng-container ngProjectAs="description">
fccbbc1a 853 <span i18n>Allows users to upload .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, m2ts, .mxf, .nut videos.</span>
9b307858 854 </ng-container>
482fa503
RK		 855 </my-peertube-checkbox>
856 </div>
45c6bcf3 857
482fa503
RK		 858 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
859 <my-peertube-checkbox
860 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
861 i18n-labelText labelText="Allow audio files upload"
862 >
9b307858 863 <ng-container ngProjectAs="description">
76314386 864 <span i18n>Allows users to upload audio files that will be merged with the preview file on upload.</span>
9b307858 865 </ng-container>
482fa503
RK		 866 </my-peertube-checkbox>
867 </div>
04cda1d7 868
482fa503
RK		 869 <ng-container formGroupName="webtorrent">
870 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
871 <my-peertube-checkbox
872 inputName="transcodingWebTorrentEnabled" formControlName="enabled"
873 i18n-labelText labelText="WebTorrent support enabled"
874 >
875 <ng-template ptTemplate="help">
876 <ng-container i18n>
877 <strong>Experimental, we suggest you to not disable webtorrent support for now</strong>
45c6bcf3 878
482fa503
RK		 879 <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
880
881 <br />
882
883 <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
884 </ng-container>
885 </ng-template>
886 </my-peertube-checkbox>
887 </div>
5a71acd2 888 </ng-container>
482fa503
RK		 889
890 <ng-container formGroupName="hls">
891 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
892 <my-peertube-checkbox
893 inputName="transcodingHlsEnabled" formControlName="enabled"
f6f371ae 894 i18n-labelText labelText="HLS with P2P support enabled"
482fa503
RK		 895 >
896 <ng-template ptTemplate="help">
897 <ng-container i18n>
898 <strong>Requires ffmpeg >= 4.1</strong>
45c6bcf3 899
482fa503
RK		 900 <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:</p>
901 <ul>
902 <li>Resolution change is smoother</li>
903 <li>Faster playback in particular with long videos</li>
904 <li>More stable playback (less bugs/infinite loading)</li>
905 </ul>
45c6bcf3 906
482fa503
RK		 907 <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
908 </ng-container>
909 </ng-template>
910 </my-peertube-checkbox>
911 </div>
912 </ng-container>
482fa503
RK		 913
914 </ng-container>
5a71acd2
C		 915 </my-peertube-checkbox>
916 </div>
482fa503 917
2bc9bd08
RK		 918 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
919 <label i18n for="transcodingThreads">Transcoding threads</label>
920 <div class="peertube-select-container">
921 <select id="transcodingThreads" formControlName="threads" class="form-control">
922 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
923 {{ transcodingThreadOption.label }}
924 </option>
925 </select>
9b307858 926 </div>
2bc9bd08 927 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
9b307858
RK		 928 </div>
929
930 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
931
c6c0fa6c 932 <label i18n>Resolutions to generate</label>
9b307858
RK		 933
934 <div class="ml-2 mt-2 d-flex flex-column">
935 <ng-container formGroupName="resolutions">
936 <div class="form-group" *ngFor="let resolution of resolutions">
937 <my-peertube-checkbox
938 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
939 labelText="{{resolution.label}}"
940 >
941 <ng-template *ngIf="resolution.description" ptTemplate="help">
942 <div [innerHTML]="resolution.description"></div>
943 </ng-template>
944 </my-peertube-checkbox>
945 </div>
946 </ng-container>
947 </div>
948
949 </div>
950
5a71acd2
C		 951 </ng-container>
952
482fa503
RK		 953 </div>
954 </div>
5d9e4eaa 955
482fa503
RK		 956 <div class="form-row mt-4"> <!-- cache grid -->
957 <div class="form-group col-12 col-lg-4 col-xl-3">
9b307858
RK		 958 <div i18n class="inner-form-title">CACHE</div>
959 <div i18n class="inner-form-description">
960 Some files are not federated, and fetched when necessary. Define their caching policies.
482fa503
RK		 961 </div>
962 </div>
5a71acd2 963
482fa503 964 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
5d9e4eaa 965
482fa503
RK		 966 <ng-container formGroupName="cache">
967 <div class="form-group" formGroupName="previews">
968 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
969 <input
a6d5ff76 970 type="number" min="0" id="cachePreviewsSize" class="form-control"
482fa503
RK		 971 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
972 >
973 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
3866f1a0 974 </div>
63347a0f 975
482fa503
RK		 976 <div class="form-group" formGroupName="captions">
977 <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
978 <input
a6d5ff76 979 type="number" min="0" id="cacheCaptionsSize" class="form-control"
482fa503 980 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
46db9430 981 >
482fa503 982 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
3866f1a0
C		 983 </div>
984 </ng-container>
985
63347a0f 986 </div>
482fa503 987 </div>
63347a0f 988
482fa503
RK		 989 <div class="form-row mt-4"> <!-- cache grid -->
990 <div class="form-group col-12 col-lg-4 col-xl-3">
45e0d669 991 <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
482fa503 992 <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
9b307858
RK		 993 <div i18n class="inner-form-description">
994 Slight modifications to your PeerTube instance for when creating a plugin or theme is overkill.
995 </div>
63347a0f 996 </div>
63347a0f 997
482fa503
RK		 998 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
999
1000 <ng-container formGroupName="instance">
1001 <ng-container formGroupName="customizations">
1002 <div class="form-group">
1003 <label i18n for="customizationJavascript">JavaScript</label>
1004 <my-help>
1005 <ng-template ptTemplate="customHtml">
1006 <ng-container i18n>
1007 Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
1008 </ng-container>
1009 </ng-template>
1010 </my-help>
1011
1012 <textarea
a6d5ff76 1013 id="customizationJavascript" formControlName="javascript" class="form-control"
482fa503
RK		 1014 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
1015 ></textarea>
1016
1017 <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
1018 </div>
421d935d 1019
482fa503
RK		 1020 <div class="form-group">
1021 <label for="customizationCSS">CSS</label>
1022
1023 <my-help>
1024 <ng-template ptTemplate="customHtml">
1025 <ng-container i18n>
1026 Write CSS code directly. Example:<br /><br />
1027 <pre>
1028 #custom-css {{ '{' }}
1029 color: red;
1030 {{ '}' }}
1031 </pre>
1032 Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
1033 <pre>
1034 #custom-css .logged-in-email {{ '{' }}
1035 color: red;
1036 {{ '}' }}
1037 </pre>
1038 </ng-container>
1039 </ng-template>
1040 </my-help>
1041
1042 <textarea
a6d5ff76 1043 id="customizationCSS" formControlName="css" class="form-control"
482fa503
RK		 1044 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
1045 ></textarea>
1046 <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
1047 </div>
1048 </ng-container>
1049 </ng-container>
421d935d 1050
482fa503
RK		 1051 </div>
1052 </div>
63347a0f 1053
63347a0f 1054 </ng-template>
45c6bcf3
C		 1055 </ng-container>
1056 </div>
1057
1058 <div [ngbNavOutlet]="nav"></div>
00b5556c 1059
482fa503
RK		 1060 <div class="form-row mt-4"> <!-- submit placement block -->
1061 <div class="col-md-7 col-xl-5"></div>
1062 <div class="col-md-5 col-xl-5">
fb719404
C		 1063 <span class="form-error submit-error" i18n *ngIf="!form.valid">
1064 It seems like the configuration is invalid. Please search for potential errors in the different tabs.
1065 </span>
1066
1067 <span class="form-error submit-error" i18n *ngIf="!hasLiveAllowReplayConsistentOptions()">
1068 You cannot allow live replay if you don't enable transcoding.
1069 </span>
72c33e71 1070
fb719404 1071 <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid || !hasConsistentOptions()">
482fa503
RK		 1072 </div>
1073 </div>
fd206f0b 1074</form>
ActivityPub-federated video streaming platform using P2P directly in your web browser