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

   1 <ng-container [formGroup]="form">
   2
   3   <div class="row mt-4"> <!-- transcoding grid -->
   4     <div class="col-12 col-lg-4 col-xl-3"></div>
   5     <div class="col-12 col-lg-8">
   6
   7       <div class="callout callout-orange">
   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
  12         <span i18n>
  13           However, you may want to read <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin/configuration#vod-transcoding">our guidelines</a> before tweaking the following values.
  14         </span>
  15       </div>
  16     </div>
  17   </div>
  18
  19   <div class="row mt-4"> <!-- transcoding grid -->
  20     <div class="col-12 col-lg-4 col-xl-3">
  21       <div i18n class="inner-form-title">TRANSCODING</div>
  22       <div i18n class="inner-form-description">
  23         Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
  24         resources, this is a critical part of PeerTube, so tread carefully.
  25       </div>
  26     </div>
  27
  28     <div class="col-12 col-lg-8 col-xl-9">
  29
  30       <ng-container formGroupName="transcoding">
  31
  32         <div class="col-12 col-xl-11">
  33           <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
  34             <ng-template ptTemplate="label">
  35               <ng-container i18n>Transcoding enabled</ng-container>
  36             </ng-template>
  37
  38             <ng-container ngProjectAs="extra">
  39
  40               <div class="form-group" formGroupName="remoteRunners" [ngClass]="getTranscodingDisabledClass()">
  41                 <my-peertube-checkbox
  42                   inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
  43                   i18n-labelText labelText="Enable remote runners"
  44                 >
  45                   <ng-container ngProjectAs="description">
  46                     <span i18n>
  47                       Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process VOD transcoding.
  48                       Remote runners has to register on your instance first.
  49                     </span>
  50                   </ng-container>
  51                 </my-peertube-checkbox>
  52               </div>
  53
  54               <div class="callout callout-light pt-2 pb-0">
  55                 <label i18n>Input formats</label>
  56
  57                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  58                   <my-peertube-checkbox
  59                     inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
  60                     i18n-labelText labelText="Allow additional extensions"
  61                   >
  62                     <ng-container ngProjectAs="description">
  63                       <span i18n>Allows users to upload videos with additional extensions than .mp4, .ogv and .webm (for example: .avi, .mov, .mkv etc).</span>
  64                     </ng-container>
  65                   </my-peertube-checkbox>
  66                 </div>
  67
  68                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  69                   <my-peertube-checkbox
  70                     inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
  71                     i18n-labelText labelText="Allow audio files upload"
  72                   >
  73                     <ng-container ngProjectAs="description">
  74                       <div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
  75                       <div i18n>The file will be merged in a still image video with the preview file on upload.</div>
  76                     </ng-container>
  77                   </my-peertube-checkbox>
  78                 </div>
  79               </div>
  80
  81               <div class="callout callout-light pt-2 mt-2 pb-0">
  82                 <label i18n>Output formats</label>
  83
  84                 <ng-container formGroupName="webtorrent">
  85                   <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
  86                     <my-peertube-checkbox
  87                       inputName="transcodingWebTorrentEnabled" formControlName="enabled"
  88                       i18n-labelText labelText="WebTorrent enabled"
  89                     >
  90                       <ng-template ptTemplate="help">
  91                         <ng-container>
  92                           <p i18n>If you also enabled HLS support, it will multiply videos storage by 2</p>
  93                         </ng-container>
  94                       </ng-template>
  95                     </my-peertube-checkbox>
  96                   </div>
  97                 </ng-container>
  98
  99                 <ng-container formGroupName="hls">
 100                   <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
 101                     <my-peertube-checkbox
 102                       inputName="transcodingHlsEnabled" formControlName="enabled"
 103                       i18n-labelText labelText="HLS with P2P support enabled"
 104                       [recommended]="true"
 105                     >
 106                       <ng-template ptTemplate="help">
 107                         <ng-container i18n>
 108                           <strong>Requires ffmpeg >= 4.1</strong>
 109
 110                           <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
 111                           <ul>
 112                             <li>Resolution change is smoother</li>
 113                             <li>Faster playback especially with long videos</li>
 114                             <li>More stable playback (less bugs/infinite loading)</li>
 115                           </ul>
 116
 117                           <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
 118                         </ng-container>
 119                       </ng-template>
 120                     </my-peertube-checkbox>
 121                   </div>
 122                 </ng-container>
 123
 124                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
 125                   <label i18n>Resolutions to generate</label>
 126
 127                   <div class="ms-2 d-flex flex-column">
 128                     <my-peertube-checkbox
 129                       inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
 130                       i18n-labelText labelText="Always transcode original resolution"
 131                     >
 132                     </my-peertube-checkbox>
 133
 134                     <span class="mt-3 mb-2 small muted" i18n>
 135                       The original file resolution will be the default target if no option is selected.
 136                     </span>
 137
 138                     <ng-container formGroupName="resolutions">
 139                       <div class="form-group" *ngFor="let resolution of resolutions">
 140                         <my-peertube-checkbox
 141                           [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 142                           labelText="{{ resolution.label }}"
 143                         >
 144                           <ng-template *ngIf="resolution.description" ptTemplate="help">
 145                             <div [innerHTML]="resolution.description"></div>
 146                           </ng-template>
 147                         </my-peertube-checkbox>
 148                       </div>
 149                     </ng-container>
 150                   </div>
 151                 </div>
 152               </div>
 153
 154             </ng-container>
 155           </my-peertube-checkbox>
 156         </div>
 157
 158         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
 159           <label i18n for="transcodingThreads">Transcoding threads</label>
 160
 161           <span class="small muted ms-1">
 162             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
 163               will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
 164             </ng-container>
 165
 166             <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
 167               will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
 168             </ng-container>
 169           </span>
 170
 171           <my-select-custom-value
 172             id="transcodingThreads"
 173             [items]="transcodingThreadOptions"
 174             formControlName="threads"
 175             [clearable]="false"
 176           ></my-select-custom-value>
 177
 178           <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
 179         </div>
 180
 181         <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
 182           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
 183           <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 184
 185           <div class="number-with-unit">
 186             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
 187             <span i18n>jobs in parallel</span>
 188           </div>
 189
 190           <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
 191         </div>
 192
 193         <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
 194           <label i18n for="transcodingProfile">Transcoding profile</label>
 195           <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 196
 197           <my-select-options
 198             id="transcodingProfile"
 199             formControlName="profile"
 200             [items]="transcodingProfiles"
 201             [clearable]="false"
 202           ></my-select-options>
 203
 204           <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
 205         </div>
 206
 207       </ng-container>
 208
 209     </div>
 210   </div>
 211
 212   <div class="row mt-2"> <!-- video studio grid -->
 213     <div class="col-12 col-lg-4 col-xl-3">
 214       <div i18n class="inner-form-title">VIDEO STUDIO</div>
 215       <div i18n class="inner-form-description">
 216         Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
 217       </div>
 218     </div>
 219
 220     <div class="col-12 col-lg-8 col-xl-9">
 221
 222       <ng-container formGroupName="videoStudio">
 223         <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
 224           <my-peertube-checkbox
 225             inputName="videoStudioEnabled" formControlName="enabled"
 226             i18n-labelText labelText="Enable video studio"
 227           >
 228             <ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
 229               <span i18n>⚠️ You need to enable transcoding first to enable video studio</span>
 230             </ng-container>
 231           </my-peertube-checkbox>
 232         </div>
 233
 234         <div class="form-group" formGroupName="remoteRunners" [ngClass]="getStudioDisabledClass()">
 235           <my-peertube-checkbox
 236             inputName="videoStudioRemoteRunnersEnabled" formControlName="enabled"
 237             i18n-labelText labelText="Enable remote runners"
 238           >
 239             <ng-container ngProjectAs="description">
 240               <span i18n>
 241                 Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process studio transcoding tasks.
 242                 Remote runners has to register on your instance first.
 243               </span>
 244             </ng-container>
 245           </my-peertube-checkbox>
 246         </div>
 247       </ng-container>
 248     </div>
 249   </div>
 250 </ng-container>