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

   1 <ng-container [formGroup]="form">
   2
   3   <div class="form-row mt-4"> <!-- transcoding grid -->
   4     <div class="form-group col-12 col-lg-4 col-xl-3"></div>
   5     <div class="form-group form-group-right col-12 col-lg-8">
   6
   7       <div class="callout callout-info">
   8         <span i18n>
   9           Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
  10         </span>
  11         <span i18n>
  12           However, you may want to read our guidelines before tweaking the following values.
  13         </span>
  14
  15         <div class="callout-container">
  16           <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding" i18n>
  17             Read guidelines
  18           </a>
  19         </div>
  20       </div>
  21     </div>
  22   </div>
  23
  24   <div class="form-row mt-2"> <!-- transcoding grid -->
  25     <div class="form-group col-12 col-lg-4 col-xl-3">
  26       <div i18n class="inner-form-title">TRANSCODING</div>
  27       <div i18n class="inner-form-description">
  28         Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
  29         resources, this is a critical part of PeerTube, so tread carefully.
  30       </div>
  31     </div>
  32
  33     <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  34
  35       <ng-container formGroupName="transcoding">
  36
  37         <div class="form-group mb-0 col-12 col-xl-11">
  38           <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
  39             <ng-template ptTemplate="label">
  40               <ng-container i18n>Transcoding enabled</ng-container>
  41             </ng-template>
  42
  43             <ng-container ngProjectAs="extra">
  44
  45               <div class="callout callout-light pt-2 pb-0">
  46                 <label i18n>Input formats</label>
  47
  48                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  49                   <my-peertube-checkbox
  50                     inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
  51                     i18n-labelText labelText="Allow additional extensions"
  52                   >
  53                     <ng-container ngProjectAs="description">
  54                       <span i18n>Allows users to upload videos with additional extensions than .mp4, .ogv and .webm (for example: .avi, .mov, .mkv etc).</span>
  55                     </ng-container>
  56                   </my-peertube-checkbox>
  57                 </div>
  58
  59                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  60                   <my-peertube-checkbox
  61                     inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
  62                     i18n-labelText labelText="Allow audio files upload"
  63                   >
  64                     <ng-container ngProjectAs="description">
  65                       <div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
  66                       <div i18n>The file will be merged in a still image video with the preview file on upload.</div>
  67                     </ng-container>
  68                   </my-peertube-checkbox>
  69                 </div>
  70               </div>
  71
  72               <div class="callout callout-light pt-2 mt-2 pb-0">
  73                 <label i18n>Output formats</label>
  74
  75                 <ng-container formGroupName="webtorrent">
  76                   <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  77                     <my-peertube-checkbox
  78                       inputName="transcodingWebTorrentEnabled" formControlName="enabled"
  79                       i18n-labelText labelText="WebTorrent enabled"
  80                     >
  81                       <ng-template ptTemplate="help">
  82                         <ng-container>
  83                           <p i18n>If you also enabled HLS support, it will multiply videos storage by 2</p>
  84                         </ng-container>
  85                       </ng-template>
  86                     </my-peertube-checkbox>
  87                   </div>
  88                 </ng-container>
  89
  90                 <ng-container formGroupName="hls">
  91                   <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  92                     <my-peertube-checkbox
  93                       inputName="transcodingHlsEnabled" formControlName="enabled"
  94                       i18n-labelText labelText="HLS with P2P support enabled"
  95                       [recommended]="true"
  96                     >
  97                       <ng-template ptTemplate="help">
  98                         <ng-container i18n>
  99                           <strong>Requires ffmpeg >= 4.1</strong>
 100
 101                           <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
 102                           <ul>
 103                             <li>Resolution change is smoother</li>
 104                             <li>Faster playback especially with long videos</li>
 105                             <li>More stable playback (less bugs/infinite loading)</li>
 106                           </ul>
 107
 108                           <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
 109                         </ng-container>
 110                       </ng-template>
 111                     </my-peertube-checkbox>
 112                   </div>
 113                 </ng-container>
 114
 115                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
 116                   <label i18n>Resolutions to generate per enabled format</label>
 117
 118                   <div class="ml-2 mt-2 d-flex flex-column">
 119                     <ng-container formGroupName="resolutions">
 120                       <div class="form-group" *ngFor="let resolution of resolutions">
 121                         <my-peertube-checkbox
 122                           [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 123                           labelText="{{ resolution.label }}"
 124                         >
 125                           <ng-template *ngIf="resolution.description" ptTemplate="help">
 126                             <div [innerHTML]="resolution.description"></div>
 127                           </ng-template>
 128                         </my-peertube-checkbox>
 129                       </div>
 130
 131                       <span class="mb-2 text-muted" i18n>
 132                         The original file resolution will be the default target if no option is selected.
 133                       </span>
 134                     </ng-container>
 135                   </div>
 136                 </div>
 137               </div>
 138
 139             </ng-container>
 140           </my-peertube-checkbox>
 141         </div>
 142
 143         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
 144           <label i18n for="transcodingThreads">Transcoding threads</label>
 145           <span class="text-muted ml-1">
 146             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
 147               will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
 148             </ng-container>
 149
 150             <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
 151               will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
 152             </ng-container>
 153           </span>
 154
 155           <my-select-custom-value
 156             id="transcodingThreads"
 157             [items]="transcodingThreadOptions"
 158             formControlName="threads"
 159             [clearable]="false"
 160           ></my-select-custom-value>
 161
 162           <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
 163         </div>
 164
 165         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
 166           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
 167           <span class="text-muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 168
 169           <div class="number-with-unit">
 170             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
 171             <span i18n>jobs in parallel</span>
 172           </div>
 173
 174           <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
 175         </div>
 176
 177         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
 178           <label i18n for="transcodingProfile">Transcoding profile</label>
 179           <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 180
 181           <my-select-options
 182             id="transcodingProfile"
 183             formControlName="profile"
 184             [items]="transcodingProfiles"
 185             [clearable]="false"
 186           ></my-select-options>
 187
 188           <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
 189         </div>
 190
 191       </ng-container>
 192
 193     </div>
 194   </div>
 195 </ng-container>