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

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