]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
Merge branch 'release/4.2.0' into develop
[github/Chocobozzz/PeerTube.git] / 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?id=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="callout callout-light pt-2 pb-0">
41 <label i18n>Input formats</label>
42
43 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
44 <my-peertube-checkbox
45 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
46 i18n-labelText labelText="Allow additional extensions"
47 >
48 <ng-container ngProjectAs="description">
49 <span i18n>Allows users to upload videos with additional extensions than .mp4, .ogv and .webm (for example: .avi, .mov, .mkv etc).</span>
50 </ng-container>
51 </my-peertube-checkbox>
52 </div>
53
54 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
55 <my-peertube-checkbox
56 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
57 i18n-labelText labelText="Allow audio files upload"
58 >
59 <ng-container ngProjectAs="description">
60 <div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
61 <div i18n>The file will be merged in a still image video with the preview file on upload.</div>
62 </ng-container>
63 </my-peertube-checkbox>
64 </div>
65 </div>
66
67 <div class="callout callout-light pt-2 mt-2 pb-0">
68 <label i18n>Output formats</label>
69
70 <ng-container formGroupName="webtorrent">
71 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
72 <my-peertube-checkbox
73 inputName="transcodingWebTorrentEnabled" formControlName="enabled"
74 i18n-labelText labelText="WebTorrent enabled"
75 >
76 <ng-template ptTemplate="help">
77 <ng-container>
78 <p i18n>If you also enabled HLS support, it will multiply videos storage by 2</p>
79 </ng-container>
80 </ng-template>
81 </my-peertube-checkbox>
82 </div>
83 </ng-container>
84
85 <ng-container formGroupName="hls">
86 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
87 <my-peertube-checkbox
88 inputName="transcodingHlsEnabled" formControlName="enabled"
89 i18n-labelText labelText="HLS with P2P support enabled"
90 [recommended]="true"
91 >
92 <ng-template ptTemplate="help">
93 <ng-container i18n>
94 <strong>Requires ffmpeg >= 4.1</strong>
95
96 <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
97 <ul>
98 <li>Resolution change is smoother</li>
99 <li>Faster playback especially with long videos</li>
100 <li>More stable playback (less bugs/infinite loading)</li>
101 </ul>
102
103 <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
104 </ng-container>
105 </ng-template>
106 </my-peertube-checkbox>
107 </div>
108 </ng-container>
109
110 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
111 <label i18n>Resolutions to generate per enabled format</label>
112
113 <div class="ms-2 d-flex flex-column">
114 <span class="mb-3 small muted" i18n>
115 The original file resolution will be the default target if no option is selected.
116 </span>
117
118 <ng-container formGroupName="resolutions">
119 <div class="form-group" *ngFor="let resolution of resolutions">
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 </div>
131 </div>
132 </div>
133
134 </ng-container>
135 </my-peertube-checkbox>
136 </div>
137
138 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
139 <label i18n for="transcodingThreads">Transcoding threads</label>
140
141 <span class="small muted ms-1">
142 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
143 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
144 </ng-container>
145
146 <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
147 will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
148 </ng-container>
149 </span>
150
151 <my-select-custom-value
152 id="transcodingThreads"
153 [items]="transcodingThreadOptions"
154 formControlName="threads"
155 [clearable]="false"
156 ></my-select-custom-value>
157
158 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
159 </div>
160
161 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
162 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
163 <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
164
165 <div class="number-with-unit">
166 <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
167 <span i18n>jobs in parallel</span>
168 </div>
169
170 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
171 </div>
172
173 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
174 <label i18n for="transcodingProfile">Transcoding profile</label>
175 <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
176
177 <my-select-options
178 id="transcodingProfile"
179 formControlName="profile"
180 [items]="transcodingProfiles"
181 [clearable]="false"
182 ></my-select-options>
183
184 <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
185 </div>
186
187 </ng-container>
188
189 </div>
190 </div>
191
192 <div class="row mt-2"> <!-- video studio grid -->
193 <div class="col-12 col-lg-4 col-xl-3">
194 <div i18n class="inner-form-title">VIDEO STUDIO</div>
195 <div i18n class="inner-form-description">
196 Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
197 </div>
198 </div>
199
200 <div class="col-12 col-lg-8 col-xl-9">
201
202 <ng-container formGroupName="videoStudio">
203 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
204 <my-peertube-checkbox
205 inputName="videoStudioEnabled" formControlName="enabled"
206 i18n-labelText labelText="Enable video studio"
207 >
208 <ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
209 <span i18n>⚠️ You need to enable transcoding first to enable video studio</span>
210 </ng-container>
211 </my-peertube-checkbox>
212 </div>
213 </ng-container>
214 </div>
215 </div>
216 </ng-container>