aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
blob: c11f560dd7e9d49b0e787474b09f37c985d1112e (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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<ng-container [formGroup]="form">

  <div class="row mt-4"> <!-- transcoding grid -->
    <div class="col-12 col-lg-4 col-xl-3"></div>
    <div class="col-12 col-lg-8">

      <div class="callout callout-orange">
        <span i18n>
          Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
        </span>

        <span i18n>
          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.
        </span>
      </div>
    </div>
  </div>

  <div class="row mt-4"> <!-- transcoding grid -->
    <div class="col-12 col-lg-4 col-xl-3">
      <div i18n class="inner-form-title">TRANSCODING</div>
      <div i18n class="inner-form-description">
        Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
        resources, this is a critical part of PeerTube, so tread carefully.
      </div>
    </div>

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

      <ng-container formGroupName="transcoding">

        <div class="col-12 col-xl-11">
          <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
            <ng-template ptTemplate="label">
              <ng-container i18n>Transcoding enabled</ng-container>
            </ng-template>

            <ng-container ngProjectAs="extra">

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

              <div class="callout callout-light pt-2 pb-0">
                <label i18n>Input formats</label>

                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                  <my-peertube-checkbox
                    inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
                    i18n-labelText labelText="Allow additional extensions"
                  >
                    <ng-container ngProjectAs="description">
                      <span i18n>Allows users to upload videos with additional extensions than .mp4, .ogv and .webm (for example: .avi, .mov, .mkv etc).</span>
                    </ng-container>
                  </my-peertube-checkbox>
                </div>

                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                  <my-peertube-checkbox
                    inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
                    i18n-labelText labelText="Allow audio files upload"
                  >
                    <ng-container ngProjectAs="description">
                      <div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
                      <div i18n>The file will be merged in a still image video with the preview file on upload.</div>
                    </ng-container>
                  </my-peertube-checkbox>
                </div>
              </div>

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

                <ng-container formGroupName="webtorrent">
                  <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                    <my-peertube-checkbox
                      inputName="transcodingWebTorrentEnabled" formControlName="enabled"
                      i18n-labelText labelText="WebTorrent enabled"
                    >
                      <ng-template ptTemplate="help">
                        <ng-container>
                          <p i18n>If you also enabled HLS support, it will multiply videos storage by 2</p>
                        </ng-container>
                      </ng-template>
                    </my-peertube-checkbox>
                  </div>
                </ng-container>

                <ng-container formGroupName="hls">
                  <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                    <my-peertube-checkbox
                      inputName="transcodingHlsEnabled" formControlName="enabled"
                      i18n-labelText labelText="HLS with P2P support enabled"
                      [recommended]="true"
                    >
                      <ng-template ptTemplate="help">
                        <ng-container i18n>
                          <strong>Requires ffmpeg >= 4.1</strong>

                          <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
                          <ul>
                            <li>Resolution change is smoother</li>
                            <li>Faster playback especially with long videos</li>
                            <li>More stable playback (less bugs/infinite loading)</li>
                          </ul>

                          <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
                        </ng-container>
                      </ng-template>
                    </my-peertube-checkbox>
                  </div>
                </ng-container>

                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                  <label i18n>Resolutions to generate</label>

                  <div class="ms-2 d-flex flex-column">
                    <my-peertube-checkbox
                      inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
                      i18n-labelText labelText="Always transcode original resolution"
                    >
                    </my-peertube-checkbox>

                    <span class="mt-3 mb-2 small muted" i18n>
                      The original file resolution will be the default target if no option is selected.
                    </span>

                    <ng-container formGroupName="resolutions">
                      <div class="form-group" *ngFor="let resolution of resolutions">
                        <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>
                </div>
              </div>

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

        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
          <label i18n for="transcodingThreads">Transcoding threads</label>

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

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

          <my-select-custom-value
            id="transcodingThreads"
            [items]="transcodingThreadOptions"
            formControlName="threads"
            [clearable]="false"
          ></my-select-custom-value>

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

        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
          <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
          <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>

          <div class="number-with-unit">
            <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
            <span i18n>jobs in parallel</span>
          </div>

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

        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
          <label i18n for="transcodingProfile">Transcoding profile</label>
          <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>

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

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

      </ng-container>

    </div>
  </div>

  <div class="row mt-2"> <!-- video studio grid -->
    <div class="col-12 col-lg-4 col-xl-3">
      <div i18n class="inner-form-title">VIDEO STUDIO</div>
      <div i18n class="inner-form-description">
        Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
      </div>
    </div>

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

      <ng-container formGroupName="videoStudio">
        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
          <my-peertube-checkbox
            inputName="videoStudioEnabled" formControlName="enabled"
            i18n-labelText labelText="Enable video studio"
          >
            <ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
              <span i18n>⚠️ You need to enable transcoding first to enable video studio</span>
            </ng-container>
          </my-peertube-checkbox>
        </div>
      </ng-container>
    </div>
  </div>
</ng-container>