client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html

   1 <h1 class="sr-only" i18n>Configuration</h1>
   2 <form role="form" [formGroup]="form">
   3
   4   <div ngbNav #nav="ngbNav" class="nav-tabs">
   5
   6     <ng-container ngbNavItem="instance-information">
   7       <a ngbNavLink i18n>Instance information</a>
   8
   9       <ng-template ngbNavContent>
  10
  11         <ng-container formGroupName="instance">
  12
  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>
  17
  18             <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  19
  20               <div class="form-group">
  21                 <label i18n for="instanceName">Name</label>
  22                 <input
  23                   type="text" id="instanceName" class="form-control"
  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>
  28
  29               <div class="form-group">
  30                 <label i18n for="instanceShortDescription">Short description</label>
  31                 <textarea
  32                   id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
  33                   [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
  34                 ></textarea>
  35                 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
  36               </div>
  37
  38               <div class="form-group">
  39                 <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
  40                 <my-markdown-textarea
  41                   name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
  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>
  46
  47               <div class="form-group">
  48                 <label i18n for="instanceCategories">Main instance categories</label>
  49
  50                 <div>
  51                   <my-select-checkbox
  52                     id="instanceCategories"
  53                     formControlName="categories" [availableItems]="categoryItems"
  54                     [selectableGroup]="false"
  55                     i18n-placeholder placeholder="Add a new category"
  56                   >
  57                   </my-select-checkbox>
  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>
  65                   <my-select-checkbox
  66                     id="instanceLanguages"
  67                     formControlName="languages" [availableItems]="languageItems"
  68                     [selectableGroup]="false"
  69                     i18n-placeholder placeholder="Add a new language"
  70                   >
  71                   </my-select-checkbox>
  72                 </div>
  73               </div>
  74
  75             </div>
  76           </div>
  77
  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>
  81               <div i18n class="inner-for-description">
  82                 Manage <a routerLink="/admin/users">users</a> to build a moderation team.
  83               </div>
  84             </div>
  85
  86             <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  87
  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>
  93
  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>
 102
 103               <div class="form-group">
 104                 <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
 105
 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">
 115                   <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
 116                     <option i18n value="undefined" disabled>Policy for sensitive videos</option>
 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>
 124
 125               <div class="form-group">
 126                 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
 127                 <my-markdown-textarea
 128                   name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
 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>
 133
 134               <div class="form-group">
 135                 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
 136                 <my-markdown-textarea
 137                   name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
 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>
 142
 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
 148                   name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
 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>
 155           </div>
 156
 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>
 161
 162             <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 163
 164               <div class="form-group">
 165                 <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
 166                 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
 167
 168                 <my-markdown-textarea
 169                   name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
 170                   [classes]="{ 'input-error': formErrors['instance.administrator'] }"
 171                 ></my-markdown-textarea>
 172
 173                 <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
 174               </div>
 175
 176               <div class="form-group">
 177                 <label i18n for="instanceCreationReason">Why did you create this instance?</label><my-help helpType="markdownText"></my-help>
 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                 <my-markdown-textarea
 181                   name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
 182                   [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
 183                 ></my-markdown-textarea>
 184                 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
 185               </div>
 186
 187               <div class="form-group">
 188                 <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label><my-help helpType="markdownText"></my-help>
 189                 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
 190
 191                 <my-markdown-textarea
 192                   name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
 193                   [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
 194                 ></my-markdown-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><my-help helpType="markdownText"></my-help>
 200                 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
 201
 202                 <my-markdown-textarea
 203                   name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
 204                   [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
 205                 ></my-markdown-textarea>
 206                 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
 207               </div>
 208
 209             </div>
 210           </div>
 211
 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>
 216
 217             <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 218
 219               <div class="form-group">
 220                 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
 221                 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
 222
 223                 <my-markdown-textarea
 224                   name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px"
 225                   [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
 226                 ></my-markdown-textarea>
 227
 228                 <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
 229               </div>
 230
 231             </div>
 232           </div>
 233
 234         </ng-container>
 235       </ng-template>
 236     </ng-container>
 237
 238     <ng-container ngbNavItem="basic-configuration">
 239       <a ngbNavLink i18n>Basic configuration</a>
 240
 241       <ng-template ngbNavContent>
 242
 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>
 246             <div i18n class="inner-form-description">
 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>.
 248             </div>
 249           </div>
 250
 251           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 252
 253             <ng-container formGroupName="theme">
 254               <div class="form-group">
 255                 <label i18n for="themeDefault">Theme</label>
 256
 257                 <div class="peertube-select-container">
 258                   <select formControlName="default" id="themeDefault" class="form-control">
 259                     <option i18n value="default">default</option>
 260
 261                     <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
 262                   </select>
 263                 </div>
 264               </div>
 265             </ng-container>
 266
 267             <div class="form-group" formGroupName="instance">
 268               <label i18n for="instanceDefaultClientRoute">Landing page</label>
 269               <div class="peertube-select-container">
 270                 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
 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>
 279             </div>
 280
 281           </div>
 282         </div>
 283
 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
 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>
 339             <div i18n class="inner-for-description">
 340               Manage <a routerLink="/admin/users">users</a> to set their quota individually.
 341             </div>
 342           </div>
 343
 344           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 345
 346             <ng-container formGroupName="signup">
 347               <div class="form-group">
 348                 <my-peertube-checkbox
 349                   inputName="signupEnabled" formControlName="enabled"
 350                   i18n-labelText labelText="Enable Signup"
 351                 >
 352                   <ng-container ngProjectAs="description">
 353                     <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 354
 355                     <div class="alert alert-info alert-signup" *ngIf="signupAlertMessage">{{ signupAlertMessage }}</div>
 356                   </ng-container>
 357                   <ng-container ngProjectAs="extra">
 358                     <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
 359                       inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
 360                       i18n-labelText labelText="Signup requires email verification"
 361                     ></my-peertube-checkbox>
 362
 363                     <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
 364                       <label i18n for="signupLimit">Signup limit</label>
 365                       <div class="number-with-unit">
 366                         <input
 367                           type="number" min="-1" id="signupLimit" class="form-control"
 368                           formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
 369                         >
 370                         <span i18n>{form.value['signup']['limit'], plural, =1 {user} other {users}}</span>
 371                       </div>
 372                       <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 373                       <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
 374                     </div>
 375                   </ng-container>
 376                 </my-peertube-checkbox>
 377               </div>
 378             </ng-container>
 379
 380             <ng-container formGroupName="user">
 381               <div class="form-group">
 382                 <label i18n for="userVideoQuota">Default video quota per user</label>
 383                 <div class="peertube-select-container">
 384                   <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
 385                     <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
 386                       {{ videoQuotaOption.label }}
 387                     </option>
 388                   </select>
 389                 </div>
 390                 <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
 391               </div>
 392
 393               <div class="form-group">
 394                 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
 395                 <div class="peertube-select-container">
 396                   <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
 397                     <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
 398                       {{ videoQuotaDailyOption.label }}
 399                     </option>
 400                   </select>
 401                 </div>
 402                 <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
 403               </div>
 404             </ng-container>
 405
 406           </div>
 407         </div>
 408
 409         <div class="form-row mt-4"> <!-- videos grid -->
 410           <div class="form-group col-12 col-lg-4 col-xl-3">
 411             <div i18n class="inner-form-title">VIDEOS</div>
 412           </div>
 413
 414           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 415
 416             <ng-container formGroupName="import">
 417               <ng-container formGroupName="videos">
 418
 419                 <div class="form-group" formGroupName="http">
 420                   <my-peertube-checkbox
 421                     inputName="importVideosHttpEnabled" formControlName="enabled"
 422                     i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
 423                   ></my-peertube-checkbox>
 424                 </div>
 425
 426                 <div class="form-group" formGroupName="torrent">
 427                   <my-peertube-checkbox
 428                     inputName="importVideosTorrentEnabled" formControlName="enabled"
 429                     i18n-labelText labelText="Allow import with a torrent file or a magnet URI"
 430                   ></my-peertube-checkbox>
 431                 </div>
 432
 433               </ng-container>
 434             </ng-container>
 435
 436             <ng-container formGroupName="autoBlacklist">
 437               <ng-container formGroupName="videos">
 438                 <ng-container formGroupName="ofUsers">
 439
 440                   <div class="form-group">
 441                     <my-peertube-checkbox
 442                       inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
 443                       i18n-labelText labelText="Block new videos automatically"
 444                     >
 445                     <ng-container ngProjectAs="description">
 446                       <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
 447                     </ng-container>
 448                   </my-peertube-checkbox>
 449                   </div>
 450
 451                 </ng-container>
 452               </ng-container>
 453             </ng-container>
 454
 455           </div>
 456         </div>
 457
 458         <div class="form-row mt-4"> <!-- search grid -->
 459           <div class="form-group col-12 col-lg-4 col-xl-3">
 460             <div i18n class="inner-form-title">SEARCH</div>
 461           </div>
 462
 463           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 464
 465             <ng-container formGroupName="search">
 466               <ng-container formGroupName="remoteUri">
 467
 468                 <div class="form-group">
 469                   <my-peertube-checkbox
 470                     inputName="searchRemoteUriUsers" formControlName="users"
 471                     i18n-labelText labelText="Allow users to do remote URI/handle search"
 472                   >
 473                     <ng-container ngProjectAs="description">
 474                       <span i18n>Allow <strong>your users</strong> to look up remote videos/actors that may not be federated with your instance</span>
 475                     </ng-container>
 476                   </my-peertube-checkbox>
 477                 </div>
 478
 479                 <div class="form-group">
 480                   <my-peertube-checkbox
 481                     inputName="searchRemoteUriAnonymous" formControlName="anonymous"
 482                     i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
 483                   >
 484                     <ng-container ngProjectAs="description">
 485                       <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors that may not be federated with your instance</span>
 486                     </ng-container>
 487                   </my-peertube-checkbox>
 488                 </div>
 489
 490               </ng-container>
 491
 492               <ng-container formGroupName="searchIndex">
 493                 <div class="form-group">
 494                   <my-peertube-checkbox
 495                     inputName="searchIndexEnabled" formControlName="enabled"
 496                     i18n-labelText labelText="Enable global search"
 497                   >
 498                     <ng-container ngProjectAs="description">
 499                       <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
 500
 501                       <span i18n>
 502                         You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
 503                       </span>
 504                     </ng-container>
 505
 506                     <ng-container ngProjectAs="extra">
 507                       <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
 508                         <label i18n for="searchIndexUrl">Search index URL</label>
 509                         <input
 510                           type="text"  id="searchIndexUrl" class="form-control"
 511                           formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
 512                         >
 513                         <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
 514                       </div>
 515
 516                       <div class="mt-3">
 517                         <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
 518                           inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
 519                           i18n-labelText labelText="Disable local search in search bar"
 520                         ></my-peertube-checkbox>
 521                       </div>
 522
 523                       <div class="mt-3">
 524                         <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
 525                           inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
 526                           i18n-labelText labelText="Search bar uses the global search index by default"
 527                         >
 528                           <ng-container ngProjectAs="description">
 529                             <span i18n>Otherwise the local search stays used by default</span>
 530                           </ng-container>
 531                         </my-peertube-checkbox>
 532                       </div>
 533
 534                     </ng-container>
 535                   </my-peertube-checkbox>
 536                 </div>
 537
 538               </ng-container>
 539
 540             </ng-container>
 541
 542           </div>
 543         </div>
 544
 545         <div class="form-row mt-4"> <!-- federation grid -->
 546           <div class="form-group col-12 col-lg-4 col-xl-3">
 547             <div i18n class="inner-form-title">FEDERATION</div>
 548             <div i18n class="inner-form-description">
 549               Manage <a routerLink="/admin/follows">relations</a> with other instances.
 550             </div>
 551           </div>
 552
 553           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 554
 555             <ng-container formGroupName="followers">
 556               <ng-container formGroupName="instance">
 557
 558                 <div class="form-group">
 559                   <my-peertube-checkbox
 560                     inputName="followersInstanceEnabled" formControlName="enabled"
 561                     i18n-labelText labelText="Other instances can follow yours"
 562                   ></my-peertube-checkbox>
 563                 </div>
 564
 565                 <div class="form-group">
 566                   <my-peertube-checkbox
 567                     inputName="followersInstanceManualApproval" formControlName="manualApproval"
 568                     i18n-labelText labelText="Manually approve new instance followers"
 569                   ></my-peertube-checkbox>
 570                 </div>
 571               </ng-container>
 572             </ng-container>
 573
 574             <ng-container formGroupName="followings">
 575               <ng-container formGroupName="instance">
 576
 577                 <ng-container formGroupName="autoFollowBack">
 578                   <div class="form-group">
 579                     <my-peertube-checkbox
 580                       inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
 581                       i18n-labelText labelText="Automatically follow back instances"
 582                     >
 583                       <ng-container ngProjectAs="description">
 584                         <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
 585                       </ng-container>
 586                     </my-peertube-checkbox>
 587                   </div>
 588                 </ng-container>
 589
 590                 <ng-container formGroupName="autoFollowIndex">
 591                   <div class="form-group">
 592                     <my-peertube-checkbox
 593                       inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
 594                       i18n-labelText labelText="Automatically follow instances of a public index"
 595                     >
 596                       <ng-container ngProjectAs="description">
 597                         <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p>
 598
 599                         <span i18n>
 600                           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>.
 601                         </span>
 602                       </ng-container>
 603
 604                       <ng-container ngProjectAs="extra">
 605                         <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
 606                           <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
 607                           <input
 608                             type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
 609                             formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
 610                           >
 611                           <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
 612                         </div>
 613                       </ng-container>
 614                     </my-peertube-checkbox>
 615                   </div>
 616
 617                 </ng-container>
 618               </ng-container>
 619             </ng-container>
 620
 621           </div>
 622         </div>
 623
 624         <div class="form-row mt-4"> <!-- administrators grid -->
 625           <div class="form-group col-12 col-lg-4 col-xl-3">
 626             <div i18n class="inner-form-title">ADMINISTRATORS</div>
 627           </div>
 628
 629           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 630
 631             <div class="form-group" formGroupName="admin">
 632               <label i18n for="adminEmail">Admin email</label>
 633               <input
 634                 type="text" id="adminEmail" class="form-control"
 635                 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
 636               >
 637               <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
 638             </div>
 639
 640             <div class="form-group" formGroupName="contactForm">
 641               <my-peertube-checkbox
 642                 inputName="enableContactForm" formControlName="enabled"
 643                 i18n-labelText labelText="Enable contact form"
 644               ></my-peertube-checkbox>
 645             </div>
 646
 647           </div>
 648         </div>
 649
 650         <div class="form-row mt-4"> <!-- Twitter grid -->
 651           <div class="form-group col-12 col-lg-4 col-xl-3">
 652             <div i18n class="inner-form-title">TWITTER</div>
 653             <div i18n class="inner-form-description">
 654               Provide the Twitter account representing your instance to improve link previews.
 655               If you don't have a Twitter account, just leave the default value.
 656             </div>
 657           </div>
 658
 659           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 660
 661             <ng-container formGroupName="services">
 662               <ng-container formGroupName="twitter">
 663
 664                 <div class="form-group">
 665                   <label i18n for="signupLimit">Your Twitter username</label>
 666
 667                   <input
 668                     type="text" id="servicesTwitterUsername" class="form-control"
 669                     formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
 670                   >
 671                   <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
 672                 </div>
 673
 674                 <div class="form-group">
 675                   <my-peertube-checkbox inputName="servicesTwitterWhitelisted" formControlName="whitelisted">
 676                     <ng-template ptTemplate="label">
 677                       <ng-container i18n>Instance allowed by Twitter</ng-container>
 678                     </ng-template>
 679
 680                     <ng-template ptTemplate="help">
 681                       <ng-container i18n>
 682                         If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
 683                         If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
 684                         Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on
 685                         <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
 686                         to see if you instance is allowed.
 687                       </ng-container>
 688                     </ng-template>
 689                   </my-peertube-checkbox>
 690                 </div>
 691
 692               </ng-container>
 693             </ng-container>
 694
 695           </div>
 696         </div>
 697       </ng-template>
 698     </ng-container>
 699
 700     <ng-container ngbNavItem="transcoding">
 701       <a ngbNavLink i18n>VOD Transcoding</a>
 702
 703       <ng-template ngbNavContent>
 704
 705         <div class="form-row mt-4"> <!-- transcoding grid -->
 706           <div class="form-group col-12 col-lg-4 col-xl-3"></div>
 707           <div class="form-group form-group-right col-12 col-lg-8">
 708
 709             <div class="callout callout-info">
 710               <span i18n>
 711                 Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
 712               </span>
 713               <span i18n>
 714                 However, you may want to read our guidelines before tweaking the following values.
 715               </span>
 716
 717               <div class="callout-container">
 718                 <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/admin-configuration?id=transcoding" i18n>Read guidelines</a>
 719               </div>
 720             </div>
 721
 722
 723           </div>
 724         </div>
 725
 726         <div class="form-row mt-2"> <!-- transcoding grid -->
 727           <div class="form-group col-12 col-lg-4 col-xl-3">
 728             <div i18n class="inner-form-title">TRANSCODING</div>
 729             <div i18n class="inner-form-description">
 730               Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
 731               resources, this is a critical part of PeerTube, so tread carefully.
 732             </div>
 733           </div>
 734
 735           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 736
 737             <ng-container formGroupName="transcoding">
 738
 739               <div class="form-group mb-0 col-12 col-xl-11">
 740                 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
 741                   <ng-template ptTemplate="label">
 742                     <ng-container i18n>Transcoding enabled</ng-container>
 743                   </ng-template>
 744
 745                   <ng-container ngProjectAs="extra">
 746
 747                     <div class="callout callout-light pt-2 pb-0">
 748                       <label i18n>Input formats</label>
 749
 750                       <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 751                         <my-peertube-checkbox
 752                           inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
 753                           i18n-labelText labelText="Allow additional extensions"
 754                         >
 755                           <ng-container ngProjectAs="description">
 756                             <span i18n>Allows users to upload .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, .m2ts, .mxf, or .nut videos.</span>
 757                           </ng-container>
 758                         </my-peertube-checkbox>
 759                       </div>
 760
 761                       <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 762                         <my-peertube-checkbox
 763                           inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
 764                           i18n-labelText labelText="Allow audio files upload"
 765                         >
 766                           <ng-container ngProjectAs="description">
 767                             <div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
 768                             <div i18n>The file will be merged in a still image video with the preview file on upload.</div>
 769                           </ng-container>
 770                         </my-peertube-checkbox>
 771                       </div>
 772                     </div>
 773
 774                     <div class="callout callout-light pt-2 mt-2 pb-0">
 775                       <label i18n>Output formats</label>
 776
 777                       <ng-container formGroupName="webtorrent">
 778                         <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 779                           <my-peertube-checkbox
 780                             inputName="transcodingWebTorrentEnabled" formControlName="enabled"
 781                             i18n-labelText labelText="WebTorrent enabled"
 782                           >
 783                             <ng-template ptTemplate="help">
 784                               <ng-container i18n>
 785                                 <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
 786
 787                                 <br />
 788
 789                                 <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
 790                               </ng-container>
 791                             </ng-template>
 792                           </my-peertube-checkbox>
 793                         </div>
 794                       </ng-container>
 795
 796                       <ng-container formGroupName="hls">
 797                         <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 798                           <my-peertube-checkbox
 799                             inputName="transcodingHlsEnabled" formControlName="enabled"
 800                             i18n-labelText labelText="HLS with P2P support enabled"
 801                             [recommended]="true"
 802                           >
 803                             <ng-template ptTemplate="help">
 804                               <ng-container i18n>
 805                                 <strong>Requires ffmpeg >= 4.1</strong>
 806
 807                                 <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
 808                                 <ul>
 809                                   <li>Resolution change is smoother</li>
 810                                   <li>Faster playback especially with long videos</li>
 811                                   <li>More stable playback (less bugs/infinite loading)</li>
 812                                 </ul>
 813
 814                                 <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
 815                               </ng-container>
 816                             </ng-template>
 817                           </my-peertube-checkbox>
 818                         </div>
 819                       </ng-container>
 820
 821                       <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 822                         <label i18n>Resolutions to generate per enabled format</label>
 823
 824                         <div class="ml-2 mt-2 d-flex flex-column">
 825                           <ng-container formGroupName="resolutions">
 826                             <div class="form-group" *ngFor="let resolution of resolutions">
 827                               <my-peertube-checkbox
 828                                 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 829                                 labelText="{{ resolution.label }}"
 830                               >
 831                                 <ng-template *ngIf="resolution.description" ptTemplate="help">
 832                                   <div [innerHTML]="resolution.description"></div>
 833                                 </ng-template>
 834                               </my-peertube-checkbox>
 835                             </div>
 836
 837                             <span class="mb-2 text-muted" i18n>
 838                               The original file resolution will be the default target if no option is selected.
 839                             </span>
 840                           </ng-container>
 841                         </div>
 842                       </div>
 843                     </div>
 844
 845                   </ng-container>
 846                 </my-peertube-checkbox>
 847               </div>
 848
 849               <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
 850                 <label i18n for="transcodingThreads">Transcoding threads</label>
 851                 <span class="text-muted ml-1">
 852                   <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding</ng-container>
 853                   <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding</ng-container>
 854                 </span>
 855
 856                 <div class="peertube-select-container">
 857                   <select id="transcodingThreads" formControlName="threads" class="form-control">
 858                     <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
 859                       {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
 860                     </option>
 861                   </select>
 862                 </div>
 863                 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
 864               </div>
 865
 866             </ng-container>
 867
 868           </div>
 869         </div>
 870
 871       </ng-template>
 872     </ng-container>
 873
 874     <ng-container ngbNavItem="live">
 875       <a ngbNavLink i18n>Live streaming</a>
 876
 877       <ng-template ngbNavContent>
 878
 879         <div class="form-row mt-5">
 880           <div class="form-group col-12 col-lg-4 col-xl-3">
 881             <div i18n class="inner-form-title">LIVE</div>
 882             <div i18n class="inner-form-description">
 883               Enable users of your instance to stream live.
 884             </div>
 885           </div>
 886
 887           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 888
 889             <ng-container formGroupName="live">
 890
 891               <div class="form-group">
 892                 <my-peertube-checkbox inputName="liveEnabled" formControlName="enabled">
 893                   <ng-template ptTemplate="label">
 894                     <ng-container i18n>Allow live streaming</ng-container>
 895                   </ng-template>
 896
 897                   <ng-container ngProjectAs="description">
 898                     <div i18n>⚠️ Enabling live streaming requires trust in your users and extra moderation work</div>
 899                     <div i18n>If enabled, your server needs to accept incoming TCP traffic on port {{ liveRTMPPort }}</div>
 900                   </ng-container>
 901
 902                   <ng-container ngProjectAs="extra">
 903
 904                     <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
 905                       <my-peertube-checkbox
 906                         inputName="liveAllowReplay" formControlName="allowReplay"
 907                         i18n-labelText labelText="Allow your users to automatically publish a replay of their live"
 908                       >
 909                         <ng-container ngProjectAs="description" i18n>
 910                           If the user quota is reached, PeerTube will automatically terminate the live streaming
 911                         </ng-container>
 912                       </my-peertube-checkbox>
 913                     </div>
 914
 915                     <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
 916                       <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance <span class="text-muted">(-1 for "unlimited")</span></label>
 917                       <div class="number-with-unit">
 918                         <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
 919                         <span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
 920                       </div>
 921                     </div>
 922
 923                     <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
 924                       <label i18n for="liveMaxUserLives">Max simultaneous lives created per user <span class="text-muted">(-1 for "unlimited")</span></label>
 925                       <div class="number-with-unit">
 926                         <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
 927                         <span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
 928                       </div>
 929                     </div>
 930
 931                     <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
 932                       <label i18n for="liveMaxDuration">Max live duration</label>
 933
 934                       <ng-select
 935                         labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
 936                         bindLabel="label" bindValue="value" [clearable]="false" [searchable]="false"
 937                       ></ng-select>
 938                     </div>
 939
 940                   </ng-container>
 941                 </my-peertube-checkbox>
 942               </div>
 943             </ng-container>
 944           </div>
 945         </div>
 946
 947         <div class="form-row"> <!-- transcoding live streams grid -->
 948           <div class="form-group col-12 col-lg-4 col-xl-3">
 949             <div i18n class="inner-form-title">TRANSCODING</div>
 950             <div i18n class="inner-form-description">
 951               Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
 952             </div>
 953           </div>
 954
 955           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 956
 957             <ng-container formGroupName="live">
 958               <ng-container formGroupName="transcoding">
 959
 960                 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
 961                   <my-peertube-checkbox
 962                     inputName="liveTranscodingEnabled" formControlName="enabled"
 963                   >
 964                     <ng-template ptTemplate="label">
 965                       <ng-container i18n>Transcoding enabled for live streams</ng-container>
 966                     </ng-template>
 967                   </my-peertube-checkbox>
 968                 </div>
 969
 970                 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
 971                   <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 972
 973                   <div class="ml-2 mt-2 d-flex flex-column">
 974                     <ng-container formGroupName="resolutions">
 975                       <div class="form-group" *ngFor="let resolution of liveResolutions">
 976                         <my-peertube-checkbox
 977                           [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 978                           labelText="{{resolution.label}}"
 979                         >
 980                           <ng-template *ngIf="resolution.description" ptTemplate="help">
 981                             <div [innerHTML]="resolution.description"></div>
 982                           </ng-template>
 983                         </my-peertube-checkbox>
 984                       </div>
 985                     </ng-container>
 986                   </div>
 987                 </div>
 988
 989                 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
 990                   <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 991                   <span class="text-muted ml-1">
 992                     <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container>
 993                     <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container>
 994                   </span>
 995
 996                   <div class="peertube-select-container">
 997                     <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
 998                       <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
 999                         {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
1000                       </option>
1001                     </select>
1002                   </div>
1003                   <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
1004                 </div>
1005
1006               </ng-container>
1007             </ng-container>
1008
1009           </div>
1010         </div>
1011
1012       </ng-template>
1013     </ng-container>
1014
1015     <ng-container ngbNavItem="advanced-configuration">
1016       <a ngbNavLink i18n>Advanced configuration</a>
1017
1018       <ng-template ngbNavContent>
1019
1020         <div class="form-row mt-5"> <!-- cache grid -->
1021           <div class="form-group col-12 col-lg-4 col-xl-3">
1022             <div i18n class="inner-form-title">CACHE</div>
1023             <div i18n class="inner-form-description">
1024               Some files are not federated, and fetched when necessary. Define their caching policies.
1025             </div>
1026           </div>
1027
1028           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
1029
1030             <ng-container formGroupName="cache">
1031               <div class="form-group" formGroupName="previews">
1032                 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
1033                 <div class="number-with-unit">
1034                   <input
1035                     type="number" min="0" id="cachePreviewsSize" class="form-control"
1036                     formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
1037                   >
1038                   <span i18n>{form.value['cache']['previews']['size'], plural, =1 {cached image} other {cached images}}</span>
1039                 </div>
1040                 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
1041               </div>
1042
1043               <div class="form-group" formGroupName="captions">
1044                 <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
1045                 <div class="number-with-unit">
1046                   <input
1047                     type="number" min="0" id="cacheCaptionsSize" class="form-control"
1048                     formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
1049                   >
1050                   <span i18n>{form.value['cache']['captions']['size'], plural, =1 {cached image} other {cached images}}</span>
1051                 </div>
1052                 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
1053               </div>
1054             </ng-container>
1055
1056           </div>
1057         </div>
1058
1059         <div class="form-row mt-4"> <!-- cache grid -->
1060           <div class="form-group col-12 col-lg-4 col-xl-3">
1061             <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
1062             <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
1063             <div i18n class="inner-form-description">
1064               Slight modifications to your PeerTube instance for when creating a plugin or theme is overkill.
1065             </div>
1066           </div>
1067
1068           <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
1069
1070             <ng-container formGroupName="instance">
1071               <ng-container formGroupName="customizations">
1072                 <div class="form-group">
1073                   <label i18n for="customizationJavascript">JavaScript</label>
1074                   <my-help>
1075                     <ng-template ptTemplate="customHtml">
1076                       <ng-container i18n>
1077                         Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
1078                       </ng-container>
1079                     </ng-template>
1080                   </my-help>
1081
1082                   <textarea
1083                     id="customizationJavascript" formControlName="javascript" class="form-control"
1084                     [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
1085                   ></textarea>
1086
1087                   <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
1088                 </div>
1089
1090                 <div class="form-group">
1091                   <label for="customizationCSS">CSS</label>
1092
1093                   <my-help>
1094                     <ng-template ptTemplate="customHtml">
1095                       <ng-container i18n>
1096                         Write CSS code directly. Example:<br /><br />
1097     <pre>
1098     #custom-css {{ '{' }}
1099       color: red;
1100     {{ '}' }}
1101     </pre>
1102                         Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
1103     <pre>
1104     #custom-css .logged-in-email {{ '{' }}
1105       color: red;
1106     {{ '}' }}
1107     </pre>
1108                       </ng-container>
1109                     </ng-template>
1110                   </my-help>
1111
1112                   <textarea
1113                     id="customizationCSS" formControlName="css" class="form-control"
1114                     [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
1115                   ></textarea>
1116                   <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
1117                 </div>
1118               </ng-container>
1119             </ng-container>
1120
1121           </div>
1122         </div>
1123
1124       </ng-template>
1125     </ng-container>
1126   </div>
1127
1128   <div [ngbNavOutlet]="nav"></div>
1129
1130   <div class="form-row mt-4"> <!-- submit placement block -->
1131     <div class="col-md-7 col-xl-5"></div>
1132     <div class="col-md-5 col-xl-5">
1133       <span class="form-error submit-error" i18n *ngIf="!form.valid">
1134         It seems like the configuration is invalid. Please search for potential errors in the different tabs.
1135       </span>
1136
1137       <span class="form-error submit-error" i18n *ngIf="!hasLiveAllowReplayConsistentOptions()">
1138         You cannot allow live replay if you don't enable transcoding.
1139       </span>
1140
1141       <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid || !hasConsistentOptions()">
1142     </div>
1143   </div>
1144 </form>