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       <div i18n class="inner-form-title">LIVE</div>
   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       <div i18n class="inner-form-title">TRANSCODING</div>
  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="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
 114             <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 115
 116             <div class="ms-2 mt-2 d-flex flex-column">
 117
 118               <ng-container formGroupName="resolutions">
 119                 <div class="form-group" *ngFor="let resolution of liveResolutions">
 120                   <my-peertube-checkbox
 121                     [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
 122                     labelText="{{resolution.label}}"
 123                   >
 124                     <ng-template *ngIf="resolution.description" ptTemplate="help">
 125                       <div [innerHTML]="resolution.description"></div>
 126                     </ng-template>
 127                   </my-peertube-checkbox>
 128                 </div>
 129               </ng-container>
 130
 131               <div class="form-group">
 132                 <my-peertube-checkbox
 133                   inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
 134                   i18n-labelText labelText="Also transcode original resolution"
 135                 >
 136                   <ng-container i18n ngProjectAs="description">
 137                     Even if it's above your maximum enabled resolution
 138                   </ng-container>
 139                 </my-peertube-checkbox>
 140               </div>
 141             </div>
 142           </div>
 143
 144           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
 145             <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 146
 147             <span class="small muted ms-1">
 148               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
 149                 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
 150               </ng-container>
 151
 152               <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
 153                 will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
 154               </ng-container>
 155             </span>
 156
 157             <my-select-custom-value
 158               id="liveTranscodingThreads"
 159               [items]="transcodingThreadOptions"
 160               formControlName="threads"
 161               [clearable]="false"
 162             ></my-select-custom-value>
 163             <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
 164           </div>
 165
 166           <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
 167             <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
 168             <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 169
 170             <my-select-options
 171               id="liveTranscodingProfile"
 172               formControlName="profile"
 173               [items]="transcodingProfiles"
 174               [clearable]="false"
 175             >
 176             </my-select-options>
 177
 178             <div *ngIf="formErrors.live.transcoding.profile" class="form-error">{{ formErrors.live.transcoding.profile }}</div>
 179           </div>
 180
 181         </ng-container>
 182       </ng-container>
 183
 184     </div>
 185   </div>
 186 </ng-container>