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