aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html201
1 files changed, 201 insertions, 0 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
new file mode 100644
index 000000000..a51909865
--- /dev/null
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -0,0 +1,201 @@
1<ng-container [formGroup]="form">
2
3 <div class="form-row mt-4"> <!-- transcoding grid -->
4 <div class="form-group col-12 col-lg-4 col-xl-3"></div>
5 <div class="form-group form-group-right col-12 col-lg-8">
6
7 <div class="callout callout-info">
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 <span i18n>
12 However, you may want to read our guidelines before tweaking the following values.
13 </span>
14
15 <div class="callout-container">
16 <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/admin-configuration?id=transcoding" i18n>Read guidelines</a>
17 </div>
18 </div>
19 </div>
20 </div>
21
22 <div class="form-row mt-2"> <!-- transcoding grid -->
23 <div class="form-group col-12 col-lg-4 col-xl-3">
24 <div i18n class="inner-form-title">TRANSCODING</div>
25 <div i18n class="inner-form-description">
26 Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
27 resources, this is a critical part of PeerTube, so tread carefully.
28 </div>
29 </div>
30
31 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
32
33 <ng-container formGroupName="transcoding">
34
35 <div class="form-group mb-0 col-12 col-xl-11">
36 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
37 <ng-template ptTemplate="label">
38 <ng-container i18n>Transcoding enabled</ng-container>
39 </ng-template>
40
41 <ng-container ngProjectAs="extra">
42
43 <div class="callout callout-light pt-2 pb-0">
44 <label i18n>Input formats</label>
45
46 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
47 <my-peertube-checkbox
48 inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
49 i18n-labelText labelText="Allow additional extensions"
50 >
51 <ng-container ngProjectAs="description">
52 <span i18n>Allows users to upload .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, .m2ts, .mxf, or .nut videos.</span>
53 </ng-container>
54 </my-peertube-checkbox>
55 </div>
56
57 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
58 <my-peertube-checkbox
59 inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
60 i18n-labelText labelText="Allow audio files upload"
61 >
62 <ng-container ngProjectAs="description">
63 <div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
64 <div i18n>The file will be merged in a still image video with the preview file on upload.</div>
65 </ng-container>
66 </my-peertube-checkbox>
67 </div>
68 </div>
69
70 <div class="callout callout-light pt-2 mt-2 pb-0">
71 <label i18n>Output formats</label>
72
73 <ng-container formGroupName="webtorrent">
74 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
75 <my-peertube-checkbox
76 inputName="transcodingWebTorrentEnabled" formControlName="enabled"
77 i18n-labelText labelText="WebTorrent enabled"
78 >
79 <ng-template ptTemplate="help">
80 <ng-container i18n>
81 <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
82
83 <br />
84
85 <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
86 </ng-container>
87 </ng-template>
88 </my-peertube-checkbox>
89 </div>
90 </ng-container>
91
92 <ng-container formGroupName="hls">
93 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
94 <my-peertube-checkbox
95 inputName="transcodingHlsEnabled" formControlName="enabled"
96 i18n-labelText labelText="HLS with P2P support enabled"
97 [recommended]="true"
98 >
99 <ng-template ptTemplate="help">
100 <ng-container i18n>
101 <strong>Requires ffmpeg >= 4.1</strong>
102
103 <p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:</p>
104 <ul>
105 <li>Resolution change is smoother</li>
106 <li>Faster playback especially with long videos</li>
107 <li>More stable playback (less bugs/infinite loading)</li>
108 </ul>
109
110 <p>If you also enabled WebTorrent support, it will multiply videos storage by 2</p>
111 </ng-container>
112 </ng-template>
113 </my-peertube-checkbox>
114 </div>
115 </ng-container>
116
117 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
118 <label i18n>Resolutions to generate per enabled format</label>
119
120 <div class="ml-2 mt-2 d-flex flex-column">
121 <ng-container formGroupName="resolutions">
122 <div class="form-group" *ngFor="let resolution of resolutions">
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
133 <span class="mb-2 text-muted" i18n>
134 The original file resolution will be the default target if no option is selected.
135 </span>
136 </ng-container>
137 </div>
138 </div>
139 </div>
140
141 </ng-container>
142 </my-peertube-checkbox>
143 </div>
144
145 <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
146 <label i18n for="transcodingThreads">Transcoding threads</label>
147 <span class="text-muted ml-1">
148 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding</ng-container>
149 <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding</ng-container>
150 </span>
151
152 <my-select-custom-value
153 id="transcodingThreads"
154 [items]="transcodingThreadOptions"
155 formControlName="threads"
156 [clearable]="false"
157 ></my-select-custom-value>
158
159 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
160 </div>
161
162 <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
163 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
164 <span class="text-muted ml-1">
165 <span i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart.</span>
166 </span>
167
168 <div class="number-with-unit">
169 <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
170 <span i18n>jobs in parallel</span>
171 </div>
172
173 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
174 </div>
175
176 <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
177 <label i18n for="transcodingProfile">Transcoding profile</label>
178 <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
179
180 <my-select-options
181 id="transcodingProfile"
182 formControlName="profile"
183 [items]="getAvailableTranscodingProfile()"
184 [clearable]="false"
185 >
186 <ng-template ng-option-tmp let-item="item" let-index="index">
187 {{ item }}
188 <ng-container *ngIf="item === 'default'">
189 <br>
190 <span class="text-muted" i18n>x264, targeting maximum device compatibility</span>
191 </ng-container>
192 </ng-template>
193 </my-select-options>
194 <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
195 </div>
196
197 </ng-container>
198
199 </div>
200 </div>
201</ng-container>
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-13 12:03:28 +0000