aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
blob: 1ba3bdfe07c403f368c1e4bcf5b23473b88702bb (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<ng-container [formGroup]="form">

  <div class="row mt-5">
    <div class="col-12 col-lg-4 col-xl-3">
      <h2 i18n class="inner-form-title">LIVE</h2>
      <div i18n class="inner-form-description">
        Enable users of your instance to stream live.
      </div>
    </div>

    <div class="col-12 col-lg-8 col-xl-9">

      <ng-container formGroupName="live">

        <div class="form-group">
          <my-peertube-checkbox inputName="liveEnabled" formControlName="enabled">
            <ng-template ptTemplate="label">
              <ng-container i18n>Allow live streaming</ng-container>
            </ng-template>

            <ng-container ngProjectAs="description">
              <div i18n>⚠️ Enabling live streaming requires trust in your users and extra moderation work</div>
              <div i18n>If enabled, your server needs to accept incoming TCP traffic on port {{ getLiveRTMPPort() }}</div>
            </ng-container>

            <ng-container ngProjectAs="extra">

              <div class="form-group" [ngClass]="getDisabledLiveClass()">
                <my-peertube-checkbox
                  inputName="liveAllowReplay" formControlName="allowReplay"
                  i18n-labelText labelText="Allow your users to automatically publish a replay of their live"
                >
                </my-peertube-checkbox>
              </div>

              <div class="form-group" formGroupName="latencySetting" [ngClass]="getDisabledLiveClass()">
                <my-peertube-checkbox
                  inputName="liveLatencySettingEnabled" formControlName="enabled"
                  i18n-labelText labelText="Allow your users to change live latency"
                >
                  <ng-container ngProjectAs="description" i18n>
                    Small latency disables P2P and high latency can increase P2P ratio
                  </ng-container>
                </my-peertube-checkbox>
              </div>

              <div class="form-group" [ngClass]="getDisabledLiveClass()">
                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>

                <span class="ms-2 small muted">(-1 for "unlimited")</span>

                <div class="number-with-unit">
                  <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
                  <span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
                </div>

                <div *ngIf="formErrors.live.maxInstanceLives" class="form-error">{{ formErrors.live.maxInstanceLives }}</div>
              </div>

              <div class="form-group" [ngClass]="getDisabledLiveClass()">
                <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
                <span class="ms-2 small muted">(-1 for "unlimited")</span>

                <div class="number-with-unit">
                  <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
                  <span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
                </div>

                <div *ngIf="formErrors.live.maxUserLives" class="form-error">{{ formErrors.live.maxUserLives }}</div>
              </div>

              <div class="form-group" [ngClass]="getDisabledLiveClass()">
                <label i18n for="liveMaxDuration">Max live duration</label>

                <my-select-options
                  labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
                  bindLabel="label" bindValue="value" [clearable]="false" [searchable]="true"
                ></my-select-options>

                <div *ngIf="formErrors.live.maxDuration" class="form-error">{{ formErrors.live.maxDuration }}</div>
              </div>

            </ng-container>
          </my-peertube-checkbox>
        </div>
      </ng-container>
    </div>
  </div>

  <div class="row"> <!-- transcoding live streams grid -->
    <div class="col-12 col-lg-4 col-xl-3">
      <h2 i18n class="inner-form-title">TRANSCODING</h2>
      <div i18n class="inner-form-description">
        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.
      </div>
    </div>

    <div class="col-12 col-lg-8 col-xl-9">

      <ng-container formGroupName="live">
        <ng-container formGroupName="transcoding">

          <div class="form-group" [ngClass]="getDisabledLiveClass()">
            <my-peertube-checkbox
              inputName="liveTranscodingEnabled" formControlName="enabled"
            >
              <ng-template ptTemplate="label">
                <ng-container i18n>Transcoding enabled for live streams</ng-container>
              </ng-template>
            </my-peertube-checkbox>
          </div>

          <div class="callout callout-light pt-2 mt-2 pb-0">
            <h3 class="callout-title" i18n>Output formats</h3>

            <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
              <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>

              <div class="ms-2 mt-2 d-flex flex-column">

                <ng-container formGroupName="resolutions">
                  <div class="form-group" *ngFor="let resolution of liveResolutions">
                    <my-peertube-checkbox
                      [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
                      labelText="{{resolution.label}}"
                    >
                      <ng-template *ngIf="resolution.description" ptTemplate="help">
                        <div [innerHTML]="resolution.description"></div>
                      </ng-template>
                    </my-peertube-checkbox>
                  </div>
                </ng-container>

                <div class="form-group">
                  <my-peertube-checkbox
                    inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
                    i18n-labelText labelText="Also transcode original resolution"
                  >
                    <ng-container i18n ngProjectAs="description">
                      Even if it's above your maximum enabled resolution
                    </ng-container>
                  </my-peertube-checkbox>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group mt-4" formGroupName="remoteRunners" [ngClass]="getDisabledLiveTranscodingClass()">
            <my-peertube-checkbox
              inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
              i18n-labelText labelText="Enable remote runners for lives"
            >
              <ng-container ngProjectAs="description">
                <span i18n>
                  Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process live transcoding.
                  Remote runners has to register on your instance first.
                </span>
              </ng-container>
            </my-peertube-checkbox>
          </div>

          <div class="form-group" [ngClass]="getDisabledLiveLocalTranscodingClass()">
            <label i18n for="liveTranscodingThreads">Live transcoding threads</label>

            <span class="small muted ms-1">
              <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
                will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
              </ng-container>

              <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
                will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
              </ng-container>
            </span>

            <my-select-custom-value
              id="liveTranscodingThreads"
              [items]="transcodingThreadOptions"
              formControlName="threads"
              [clearable]="false"
            ></my-select-custom-value>
            <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
          </div>

          <div class="form-group mt-4" [ngClass]="getDisabledLiveLocalTranscodingClass()">
            <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
            <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>

            <my-select-options
              id="liveTranscodingProfile"
              formControlName="profile"
              [items]="transcodingProfiles"
              [clearable]="false"
            >
            </my-select-options>

            <div *ngIf="formErrors.live.transcoding.profile" class="form-error">{{ formErrors.live.transcoding.profile }}</div>
          </div>

        </ng-container>
      </ng-container>

    </div>
  </div>
</ng-container>