<ng-container [formGroup]="form">
- <div class="form-row mt-4"> <!-- transcoding grid -->
- <div class="form-group col-12 col-lg-4 col-xl-3"></div>
- <div class="form-group form-group-right col-12 col-lg-8">
+ <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-info">
+ <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 our guidelines before tweaking the following values.
+ 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.
</span>
-
- <div class="callout-container">
- <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/admin-configuration?id=transcoding" i18n>Read guidelines</a>
- </div>
</div>
</div>
</div>
- <div class="form-row mt-2"> <!-- transcoding grid -->
- <div class="form-group col-12 col-lg-4 col-xl-3">
+ <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
</div>
</div>
- <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+ <div class="col-12 col-lg-8 col-xl-9">
<ng-container formGroupName="transcoding">
- <div class="form-group mb-0 col-12 col-xl-11">
+ <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>
<div class="callout callout-light pt-2 pb-0">
<label i18n>Input formats</label>
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <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 .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, .m2ts, .mxf, or .nut videos.</span>
+ <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]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
i18n-labelText labelText="Allow audio files upload"
<label i18n>Output formats</label>
<ng-container formGroupName="webtorrent">
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingWebTorrentEnabled" formControlName="enabled"
i18n-labelText labelText="WebTorrent enabled"
>
<ng-template ptTemplate="help">
- <ng-container i18n>
- <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
-
- <br />
-
- <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
+ <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>
</ng-container>
<ng-container formGroupName="hls">
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingHlsEnabled" formControlName="enabled"
i18n-labelText labelText="HLS with P2P support enabled"
</div>
</ng-container>
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<label i18n>Resolutions to generate per enabled format</label>
- <div class="ml-2 mt-2 d-flex flex-column">
+ <div class="ms-2 d-flex flex-column">
+ <span class="mb-3 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
</ng-template>
</my-peertube-checkbox>
</div>
-
- <span class="mb-2 text-muted" i18n>
- The original file resolution will be the default target if no option is selected.
- </span>
</ng-container>
</div>
</div>
</my-peertube-checkbox>
</div>
- <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingThreads">Transcoding threads</label>
- <span class="text-muted ml-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 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
<div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
</div>
- <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
- <span class="text-muted ml-1">
- <span i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart.</span>
- </span>
+ <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" />
<div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
</div>
- <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingProfile">Transcoding profile</label>
- <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
+ <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]="getAvailableTranscodingProfile()"
+ [items]="transcodingProfiles"
[clearable]="false"
- >
- <ng-template ng-option-tmp let-item="item" let-index="index">
- {{ item }}
- <ng-container *ngIf="item === 'default'">
- <br>
- <span class="text-muted" i18n>x264, targeting maximum device compatibility</span>
- </ng-container>
- </ng-template>
- </my-select-options>
+ ></my-select-options>
+
<div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
</div>
</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>
projects / github / Chocobozzz / PeerTube.git / blobdiff