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

   1 <ng-container [formGroup]="form">
   2
   3   <div class="row mt-5"> <!-- cache grid -->
   4
   5     <div class="col-12 col-lg-4 col-xl-3">
   6       <div i18n class="inner-form-title">CACHE</div>
   7       <div i18n class="inner-form-description">
   8         Some files are not federated, and fetched when necessary. Define their caching policies.
   9       </div>
  10     </div>
  11
  12     <div class="col-12 col-lg-8 col-xl-9">
  13       <ng-container formGroupName="cache">
  14         <div class="form-group" formGroupName="previews">
  15           <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
  16
  17           <div class="number-with-unit">
  18             <input
  19               type="number" min="0" id="cachePreviewsSize" class="form-control"
  20               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
  21             >
  22             <span i18n>{getCacheSize('previews'), plural, =1 {cached image} other {cached images}}</span>
  23           </div>
  24
  25           <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
  26         </div>
  27
  28         <div class="form-group" formGroupName="captions">
  29           <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
  30
  31           <div class="number-with-unit">
  32             <input
  33               type="number" min="0" id="cacheCaptionsSize" class="form-control"
  34               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
  35             >
  36             <span i18n>{getCacheSize('captions'), plural, =1 {cached caption} other {cached captions}}</span>
  37           </div>
  38
  39           <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
  40         </div>
  41
  42         <div class="form-group" formGroupName="torrents">
  43           <label i18n for="cacheTorrentsSize">Number of video torrents to keep in cache</label>
  44
  45           <div class="number-with-unit">
  46             <input
  47               type="number" min="0" id="cacheTorrentsSize" class="form-control"
  48               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.torrents.size'] }"
  49             >
  50             <span i18n>{getCacheSize('torrents'), plural, =1 {cached torrent} other {cached torrents}}</span>
  51           </div>
  52
  53           <div *ngIf="formErrors.cache.torrents.size" class="form-error">{{ formErrors.cache.torrents.size }}</div>
  54         </div>
  55       </ng-container>
  56
  57     </div>
  58   </div>
  59
  60   <div class="row mt-4"> <!-- cache grid -->
  61     <div class="col-12 col-lg-4 col-xl-3">
  62       <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
  63       <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
  64       <div i18n class="inner-form-description">
  65         Slight modifications to your PeerTube instance for when creating a plugin or theme is overkill.
  66       </div>
  67     </div>
  68
  69     <div class="col-12 col-lg-8 col-xl-9">
  70       <ng-container formGroupName="instance">
  71         <ng-container formGroupName="customizations">
  72           <div class="form-group">
  73             <label i18n for="customizationJavascript">JavaScript</label>
  74             <my-help>
  75               <ng-template ptTemplate="customHtml">
  76                 <ng-container i18n>
  77                   Write JavaScript code directly.<br />Example: <pre>console.log('my instance is amazing');</pre>
  78                 </ng-container>
  79               </ng-template>
  80             </my-help>
  81
  82             <textarea
  83               id="customizationJavascript" formControlName="javascript" class="form-control"
  84               [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
  85             ></textarea>
  86
  87             <div *ngIf="formErrors.instance.customizations.javascript" class="form-error">{{ formErrors.instance.customizations.javascript }}</div>
  88           </div>
  89
  90           <div class="form-group">
  91             <label for="customizationCSS">CSS</label>
  92
  93             <my-help>
  94               <ng-template ptTemplate="customHtml">
  95                 <ng-container i18n>
  96                   Write CSS code directly. Example:<br /><br />
  97 <pre>
  98 #custom-css {{ '{' }}
  99 color: red;
 100 {{ '}' }}
 101 </pre>
 102                   Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
 103 <pre>
 104 #custom-css .logged-in-email {{ '{' }}
 105 color: red;
 106 {{ '}' }}
 107 </pre>
 108                 </ng-container>
 109               </ng-template>
 110             </my-help>
 111
 112             <textarea
 113               id="customizationCSS" formControlName="css" class="form-control"
 114               [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
 115             ></textarea>
 116             <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
 117           </div>
 118         </ng-container>
 119       </ng-container>
 120
 121     </div>
 122   </div>
 123
 124 </ng-container>