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

   1 <ng-container [formGroup]="form">
   2
   3   <div class="row mt-5">
   4     <div class="col-12 col-lg-4 col-xl-3">
   5       <h2 i18n class="inner-form-title">LIVE</h2>
   6       <div i18n class="inner-form-description">
   7         Enable users of your instance to stream live.
   8       </div>
   9     </div>
  10
  11     <div class="col-12 col-lg-8 col-xl-9">
  12
  13       <ng-container formGroupName="live">
  14
  15         <div class="form-group">
  16           <my-peertube-checkbox inputName="liveEnabled" formControlName="enabled">
  17             <ng-template ptTemplate="label">
  18               <ng-container i18n>Allow live streaming</ng-container>
  19             </ng-template>
  20
  21             <ng-container ngProjectAs="description">
  22               <div i18n>⚠️ Enabling live streaming requires trust in your users and extra moderation work</div>
  23               <div i18n>If enabled, your server needs to accept incoming TCP traffic on port {{ getLiveRTMPPort() }}</div>
  24             </ng-container>
  25
  26             <ng-container ngProjectAs="extra">
  27
  28               <div class="form-group" [ngClass]="getDisabledLiveClass()">
  29                 <my-peertube-checkbox
  30                   inputName="liveAllowReplay" formControlName="allowReplay"
  31                   i18n-labelText labelText="Allow your users to automatically publish a replay of their live"
  32                 >
  33                 </my-peertube-checkbox>
  34               </div>
  35
  36               <div class="form-group" formGroupName="latencySetting" [ngClass]="getDisabledLiveClass()">
  37                 <my-peertube-checkbox
  38                   inputName="liveLatencySettingEnabled" formControlName="enabled"
  39                   i18n-labelText labelText="Allow your users to change live latency"
  40                 >
  41                   <ng-container ngProjectAs="description" i18n>
  42                     Small latency disables P2P and high latency can increase P2P ratio
  43                   </ng-container>
  44                 </my-peertube-checkbox>
  45               </div>
  46
  47               <div class="form-group" [ngClass]="getDisabledLiveClass()">
  48                 <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>
  49
  50                 <span class="ms-2 small muted">(-1 for "unlimited")</span>
  51
  52                 <div class="number-with-unit">
  53                   <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
  54                   <span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
  55                 </div>
  56
  57                 <div *ngIf="formErrors.live.maxInstanceLives" class="form-error">{{ formErrors.live.maxInstanceLives }}</div>
  58               </div>
  59
  60               <div class="form-group" [ngClass]="getDisabledLiveClass()">
  61                 <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
  62                 <span class="ms-2 small muted">(-1 for "unlimited")</span>
  63
  64                 <div class="number-with-unit">
  65                   <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
  66                   <span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
  67                 </div>
  68
  69                 <div *ngIf="formErrors.live.maxUserLives" class="form-error">{{ formErrors.live.maxUserLives }}</div>
  70               </div>
  71
  72               <div class="form-group" [ngClass]="getDisabledLiveClass()">
  73                 <label i18n for="liveMaxDuration">Max live duration</label>
  74
  75                 <my-select-options
  76                   labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
  77                   bindLabel="label" bindValue="value" [clearable]="false" [searchable]="true"
  78                 ></my-select-options>
  79
  80                 <div *ngIf="formErrors.live.maxDuration" class="form-error">{{ formErrors.live.maxDuration }}</div>
  81               </div>
  82
  83             </ng-container>
  84           </my-peertube-checkbox>
  85         </div>
  86       </ng-container>
  87     </div>
  88   </div>
  89
  90   <div class="row"> <!-- transcoding live streams grid -->
  91     <div class="col-12 col-lg-4 col-xl-3">
  92       <h2 i18n class="inner-form-title">TRANSCODING</h2>
  93       <div i18n class="inner-form-description">
  94         Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
  95       </div>
  96     </div>
  97
  98     <div class="col-12 col-lg-8 col-xl-9">
  99
 100       <ng-container formGroupName="live">
 101         <ng-container formGroupName="transcoding">
 102
 103           <div class="form-group" [ngClass]="getDisabledLiveClass()">
 104             <my-peertube-checkbox
 105               inputName="liveTranscodingEnabled" formControlName="enabled"
 106             >
 107               <ng-template ptTemplate="label">
 108                 <ng-container i18n>Transcoding enabled for live streams</ng-container>
 109               </ng-template>
 110             </my-peertube-checkbox>
 111           </div>
 112
 113           <div class="callout callout-light pt-2 mt-2 pb-0">
 114             <h3 class="callout-title" i18n>Output formats</h3>
 115
 116             <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
 117               <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 118
 119               <div class="ms-2 mt-2 d-flex flex-column">
 120
 121                 <ng-container formGroupName="resolutions">
 122                   <div class="form-group" *ngFor="let resolution of liveResolutions">
 123                     <my-peertube-checkbox
 124                       [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 125                       labelText="{{resolution.label}}"
 126                     >
 127                       <ng-template *ngIf="resolution.description" ptTemplate="help">
 128                         <div [innerHTML]="resolution.description"></div>
 129                       </ng-template>
 130                     </my-peertube-checkbox>
 131                   </div>
 132                 </ng-container>
 133
 134                 <div class="form-group">
 135                   <my-peertube-checkbox
 136                     inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
 137                     i18n-labelText labelText="Also transcode original resolution"
 138                   >
 139                     <ng-container i18n ngProjectAs="description">
 140                       Even if it's above your maximum enabled resolution
 141                     </ng-container>
 142                   </my-peertube-checkbox>
 143                 </div>
 144               </div>
 145             </div>
 146           </div>
 147
 148           <div class="form-group mt-4" formGroupName="remoteRunners" [ngClass]="getDisabledLiveTranscodingClass()">
 149             <my-peertube-checkbox
 150               inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
 151               i18n-labelText labelText="Enable remote runners for lives"
 152             >
 153               <ng-container ngProjectAs="description">
 154                 <span i18n>
 155                   Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process live transcoding.
 156                   Remote runners has to register on your instance first.
 157                 </span>
 158               </ng-container>
 159             </my-peertube-checkbox>
 160           </div>
 161
 162           <div class="form-group" [ngClass]="getDisabledLiveLocalTranscodingClass()">
 163             <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 164
 165             <span class="small muted ms-1">
 166               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
 167                 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
 168               </ng-container>
 169
 170               <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
 171                 will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
 172               </ng-container>
 173             </span>
 174
 175             <my-select-custom-value
 176               id="liveTranscodingThreads"
 177               [items]="transcodingThreadOptions"
 178               formControlName="threads"
 179               [clearable]="false"
 180             ></my-select-custom-value>
 181             <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
 182           </div>
 183
 184           <div class="form-group mt-4" [ngClass]="getDisabledLiveLocalTranscodingClass()">
 185             <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
 186             <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 187
 188             <my-select-options
 189               id="liveTranscodingProfile"
 190               formControlName="profile"
 191               [items]="transcodingProfiles"
 192               [clearable]="false"
 193             >
 194             </my-select-options>
 195
 196             <div *ngIf="formErrors.live.transcoding.profile" class="form-error">{{ formErrors.live.transcoding.profile }}</div>
 197           </div>
 198
 199         </ng-container>
 200       </ng-container>
 201
 202     </div>
 203   </div>
 204 </ng-container>