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

   1 <form role="form" [formGroup]="form">
   2
   3   <ngb-tabset class="root-tabset bootstrap">
   4
   5     <ngb-tab i18n-title title="Basic configuration">
   6       <ng-template ngbTabContent>
   7
   8         <div i18n class="inner-form-title">Instance</div>
   9
  10         <ng-container formGroupName="instance">
  11           <div class="form-group">
  12             <label i18n for="instanceName">Name</label>
  13             <input
  14               type="text" id="instanceName"
  15               formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
  16             >
  17             <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
  18           </div>
  19
  20           <div class="form-group">
  21             <label i18n for="instanceShortDescription">Short description</label>
  22             <textarea
  23               id="instanceShortDescription" formControlName="shortDescription"
  24               [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
  25             ></textarea>
  26             <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
  27           </div>
  28
  29           <div class="form-group">
  30             <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
  31             <my-markdown-textarea
  32               id="instanceDescription" formControlName="description" textareaWidth="500px" [previewColumn]="true"
  33               [classes]="{ 'input-error': formErrors['instance.description'] }"
  34             ></my-markdown-textarea>
  35             <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
  36           </div>
  37
  38           <div class="form-group">
  39             <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
  40             <my-markdown-textarea
  41               id="instanceTerms" formControlName="terms" textareaWidth="500px" [previewColumn]="true"
  42               [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
  43             ></my-markdown-textarea>
  44             <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
  45           </div>
  46
  47           <div class="form-group">
  48             <my-peertube-checkbox
  49               inputName="instanceIsNSFW" formControlName="isNSFW"
  50               i18n-labelText labelText="Dedicated to sensitive or NSFW content"
  51               i18n-helpHtml helpHtml="Enabling it will allow other administrators to know that you are mainly federating sensitive content.<br /><br />
  52               Moreover, the NSFW checkbox on video upload will be automatically checked by default."
  53             ></my-peertube-checkbox>
  54           </div>
  55
  56           <div class="form-group">
  57             <label i18n for="instanceDefaultClientRoute">Default client route</label>
  58             <div class="peertube-select-container">
  59               <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
  60                 <option i18n value="/videos/overview">Videos Overview</option>
  61                 <option i18n value="/videos/trending">Videos Trending</option>
  62                 <option i18n value="/videos/recently-added">Videos Recently Added</option>
  63                 <option i18n value="/videos/local">Local videos</option>
  64               </select>
  65             </div>
  66             <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
  67           </div>
  68
  69           <div class="form-group">
  70             <label i18n for="instanceDefaultNSFWPolicy">Policy on videos containing sensitive content</label>
  71             <my-help
  72               helpType="custom" i18n-customHtml
  73               customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."
  74             ></my-help>
  75
  76             <div class="peertube-select-container">
  77               <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy">
  78                 <option i18n value="do_not_list">Do not list</option>
  79                 <option i18n value="blur">Blur thumbnails</option>
  80                 <option i18n value="display">Display</option>
  81               </select>
  82             </div>
  83             <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
  84           </div>
  85         </ng-container>
  86
  87
  88         <div i18n class="inner-form-title">Theme</div>
  89
  90         <ng-container formGroupName="theme">
  91           <div class="form-group">
  92             <label i18n for="themeDefault">Global theme</label>
  93
  94             <div class="peertube-select-container">
  95               <select formControlName="default" id="themeDefault">
  96                 <option i18n value="default">default</option>
  97
  98                 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
  99               </select>
 100             </div>
 101           </div>
 102         </ng-container>
 103
 104
 105         <div i18n class="inner-form-title">Signup</div>
 106
 107         <ng-container formGroupName="signup">
 108           <div class="form-group">
 109             <my-peertube-checkbox
 110               inputName="signupEnabled" formControlName="enabled"
 111               i18n-labelText labelText="Signup enabled"
 112             ></my-peertube-checkbox>
 113           </div>
 114
 115           <div class="form-group">
 116             <my-peertube-checkbox *ngIf="isSignupEnabled()"
 117               inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
 118               i18n-labelText labelText="Signup requires email verification"
 119             ></my-peertube-checkbox>
 120           </div>
 121
 122           <div *ngIf="isSignupEnabled()" class="form-group">
 123             <label i18n for="signupLimit">Signup limit</label>
 124             <input
 125               type="text" id="signupLimit"
 126               formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
 127             >
 128             <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
 129           </div>
 130         </ng-container>
 131
 132
 133         <div i18n class="inner-form-title">Users</div>
 134
 135         <ng-container formGroupName="user">
 136           <div class="form-group">
 137             <label i18n for="userVideoQuota">User default video quota</label>
 138             <div class="peertube-select-container">
 139               <select id="userVideoQuota" formControlName="videoQuota">
 140                 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
 141                   {{ videoQuotaOption.label }}
 142                 </option>
 143               </select>
 144             </div>
 145             <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
 146           </div>
 147
 148           <div class="form-group">
 149             <label i18n for="userVideoQuotaDaily">User default daily upload limit</label>
 150             <div class="peertube-select-container">
 151               <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily">
 152                 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
 153                   {{ videoQuotaDailyOption.label }}
 154                 </option>
 155               </select>
 156             </div>
 157             <div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
 158           </div>
 159         </ng-container>
 160
 161
 162         <div i18n class="inner-form-title">Import</div>
 163
 164         <ng-container formGroupName="import">
 165           <ng-container formGroupName="videos">
 166
 167             <div class="form-group" formGroupName="http">
 168               <my-peertube-checkbox
 169                 inputName="importVideosHttpEnabled" formControlName="enabled"
 170                 i18n-labelText labelText="Video import with HTTP URL (i.e. YouTube) enabled"
 171               ></my-peertube-checkbox>
 172             </div>
 173
 174             <div class="form-group" formGroupName="torrent">
 175               <my-peertube-checkbox
 176                 inputName="importVideosTorrentEnabled" formControlName="enabled"
 177                 i18n-labelText labelText="Video import with a torrent file or a magnet URI enabled"
 178               ></my-peertube-checkbox>
 179             </div>
 180
 181           </ng-container>
 182         </ng-container>
 183
 184
 185         <div i18n class="inner-form-title">Auto-blacklist</div>
 186
 187         <ng-container formGroupName="autoBlacklist">
 188           <ng-container formGroupName="videos">
 189             <ng-container formGroupName="ofUsers">
 190
 191               <div class="form-group">
 192                 <my-peertube-checkbox
 193                   inputName="autoBlacklistVideosOfUsersEnabled" formControlName="enabled"
 194                   i18n-labelText labelText="New videos of users automatically blacklisted enabled"
 195                 ></my-peertube-checkbox>
 196               </div>
 197
 198             </ng-container>
 199           </ng-container>
 200         </ng-container>
 201
 202
 203         <div i18n class="inner-form-title">Instance followers</div>
 204
 205         <ng-container formGroupName="followers">
 206           <ng-container formGroupName="instance">
 207
 208             <div class="form-group">
 209               <my-peertube-checkbox
 210                 inputName="followersInstanceEnabled" formControlName="enabled"
 211                 i18n-labelText labelText="Other instances can follow your instance"
 212               ></my-peertube-checkbox>
 213             </div>
 214
 215             <div class="form-group">
 216               <my-peertube-checkbox
 217                 inputName="followersInstanceManualApproval" formControlName="manualApproval"
 218                 i18n-labelText labelText="Manually approve new instance follower"
 219               ></my-peertube-checkbox>
 220             </div>
 221           </ng-container>
 222         </ng-container>
 223
 224         <div i18n class="inner-form-title">Instance followings</div>
 225
 226         <ng-container formGroupName="followings">
 227           <ng-container formGroupName="instance">
 228
 229             <ng-container formGroupName="autoFollowBack">
 230               <div class="form-group">
 231                 <my-peertube-checkbox
 232                   inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
 233                   i18n-labelText labelText="Automatically follow other instances that follow you"
 234                 ></my-peertube-checkbox>
 235               </div>
 236             </ng-container>
 237
 238             <ng-container formGroupName="autoFollowIndex">
 239               <div class="form-group">
 240                 <my-peertube-checkbox
 241                   inputName="followingsInstanceAutoFollowIndexEnabled" formControlName="enabled"
 242                   i18n-labelText labelText="Automatically follow instance of the public index (below)"
 243                 ></my-peertube-checkbox>
 244               </div>
 245
 246               <div class="form-group">
 247                 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
 248                 <input
 249                   type="text" id="followingsInstanceAutoFollowIndexUrl"
 250                   formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
 251                 >
 252                 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
 253               </div>
 254
 255             </ng-container>
 256           </ng-container>
 257         </ng-container>
 258
 259
 260         <div i18n class="inner-form-title">Administrator</div>
 261
 262         <div class="form-group" formGroupName="admin">
 263           <label i18n for="adminEmail">Admin email</label>
 264           <input
 265             type="text" id="adminEmail"
 266             formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
 267           >
 268           <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
 269         </div>
 270
 271         <div class="form-group" formGroupName="contactForm">
 272           <my-peertube-checkbox
 273             inputName="enableContactForm" formControlName="enabled"
 274             i18n-labelText labelText="Enable contact form"
 275           ></my-peertube-checkbox>
 276         </div>
 277
 278       </ng-template>
 279     </ngb-tab>
 280
 281     <ngb-tab i18n-title title="Services">
 282       <ng-template ngbTabContent>
 283         <div i18n class="inner-form-title">Twitter</div>
 284
 285         <ng-container formGroupName="services">
 286           <ng-container formGroupName="twitter">
 287
 288             <div class="form-group">
 289               <label i18n for="signupLimit">Your Twitter username</label>
 290               <my-help
 291                 helpType="custom" i18n-customHtml
 292                 customHtml="Indicates the Twitter account for the website or platform on which the content was published."
 293               ></my-help>
 294               <input
 295                 type="text" id="servicesTwitterUsername"
 296                 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
 297               >
 298               <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
 299             </div>
 300
 301             <div class="form-group">
 302               <my-peertube-checkbox
 303                 inputName="servicesTwitterWhitelisted" formControlName="whitelisted"
 304                 i18n-labelText labelText="Instance whitelisted by Twitter"
 305                 i18n-helpHtml helpHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
 306         If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
 307         Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted."
 308               ></my-peertube-checkbox>
 309             </div>
 310
 311           </ng-container>
 312         </ng-container>
 313
 314     </ng-template>
 315     </ngb-tab>
 316
 317     <ngb-tab i18n-title title="Advanced configuration">
 318       <ng-template ngbTabContent>
 319
 320         <div i18n class="inner-form-title">Transcoding</div>
 321
 322         <ng-container formGroupName="transcoding">
 323           <div class="form-group">
 324             <my-peertube-checkbox
 325               inputName="transcodingEnabled" formControlName="enabled"
 326               i18n-labelText labelText="Transcoding enabled"
 327               i18n-helpHtml helpHtml="If you disable transcoding, many videos from your users will not work!"
 328             ></my-peertube-checkbox>
 329           </div>
 330
 331           <ng-container *ngIf="isTranscodingEnabled()">
 332
 333             <div class="form-group">
 334               <my-peertube-checkbox
 335                 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
 336                 i18n-labelText labelText="Allow additional extensions"
 337                 i18n-helpHtml helpHtml="Allow your users to upload .mkv, .mov, .avi, .flv videos"
 338               ></my-peertube-checkbox>
 339             </div>
 340
 341             <div class="form-group">
 342               <my-peertube-checkbox
 343                 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
 344                 i18n-labelText labelText="Allow audio files upload"
 345                 i18n-helpHtml helpHtml="Allow your users to upload audio files that will be merged with the preview file on upload"
 346               ></my-peertube-checkbox>
 347             </div>
 348
 349             <div class="form-group">
 350               <label i18n for="transcodingThreads">Transcoding threads</label>
 351               <div class="peertube-select-container">
 352                 <select id="transcodingThreads" formControlName="threads">
 353                   <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
 354                     {{ transcodingThreadOption.label }}
 355                   </option>
 356                 </select>
 357               </div>
 358               <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
 359             </div>
 360
 361             <ng-container formGroupName="resolutions">
 362               <div class="form-group" *ngFor="let resolution of resolutions">
 363                 <my-peertube-checkbox
 364                   [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 365                   i18n-labelText labelText="Resolution {{resolution.label}} enabled"
 366                 ></my-peertube-checkbox>
 367               </div>
 368             </ng-container>
 369
 370           </ng-container>
 371         </ng-container>
 372
 373         <div i18n class="inner-form-title">
 374           Cache
 375
 376           <my-help
 377             helpType="custom" i18n-customHtml
 378             customHtml="Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them."
 379           ></my-help>
 380         </div>
 381
 382         <ng-container formGroupName="cache">
 383           <div class="form-group" formGroupName="previews">
 384             <label i18n for="cachePreviewsSize">Previews cache size</label>
 385             <input
 386               type="text" id="cachePreviewsSize"
 387               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
 388             >
 389             <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
 390           </div>
 391
 392           <div class="form-group" formGroupName="captions">
 393             <label i18n for="cacheCaptionsSize">Video captions cache size</label>
 394             <input
 395               type="text" id="cacheCaptionsSize"
 396               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
 397             >
 398             <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
 399           </div>
 400         </ng-container>
 401
 402         <div i18n class="inner-form-title">Customizations</div>
 403
 404         <ng-container formGroupName="instance">
 405           <ng-container formGroupName="customizations">
 406             <div class="form-group">
 407               <label i18n for="customizationJavascript">JavaScript</label>
 408               <my-help
 409                 helpType="custom" i18n-customHtml
 410                 customHtml="Write directly JavaScript code.<br />Example: <pre>console.log('my instance is amazing');</pre>"
 411               ></my-help>
 412               <textarea
 413                 id="customizationJavascript" formControlName="javascript"
 414                 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
 415               ></textarea>
 416               <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
 417             </div>
 418
 419             <div class="form-group">
 420               <label for="customizationCSS">CSS</label>
 421               <my-help
 422                   helpType="custom"
 423                   i18n-customHtml
 424                   customHtml="
 425                     Write directly CSS code. Example:<br /><br />
 426                     <pre>
 427   #custom-css {{ '{' }}
 428     color: red;
 429   {{ '}' }}
 430                     </pre>
 431
 432                     Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
 433                     <pre>
 434   #custom-css .logged-in-email {{ '{' }}
 435     color: red;
 436   {{ '}' }}
 437                     </pre>
 438                   "
 439               ></my-help>
 440               <textarea
 441                 id="customizationCSS" formControlName="css"
 442                 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
 443               ></textarea>
 444               <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
 445             </div>
 446           </ng-container>
 447         </ng-container>
 448
 449       </ng-template>
 450     </ngb-tab>
 451   </ngb-tabset>
 452
 453   <input (click)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
 454   <span class="form-error" i18n *ngIf="!form.valid">It seems the configuration is invalid. Please search potential errors in the different tabs.</span>
 455 </form>