From ea5cdc11ff76d6292351ffc5dbbd00e44bfd7cca Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 14 Dec 2020 12:47:10 +0100 Subject: slightly clearer layout of transcoding configuration --- .../edit-custom-config.component.html | 320 ++++++++++++--------- .../edit-custom-config.component.scss | 20 ++ .../edit-custom-config.component.ts | 24 ++ client/src/sass/bootstrap.scss | 22 ++ 4 files changed, 258 insertions(+), 128 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index c1a46a373..f041101bf 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -701,7 +701,28 @@ -
+
+
+
+ +
+ + Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically. + + + However, you may want to read our guidelines before tweaking the following values. + + + +
+ + +
+
+ +
TRANSCODING
@@ -714,89 +735,179 @@ -
- +
+ Transcoding enabled - - If you disable transcoding, many videos from your users will not work! - - -
- - - Allows users to upload .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, m2ts, .mxf, .nut videos. - - -
+
+ -
- - - Allows users to upload audio files that will be merged with the preview file on upload. - - -
- -
- - -

If you also enabled HLS support, it will multiply videos storage by 2

- -
- - If disabled, breaks federation with PeerTube instances < 2.1 -
-
+ + Allows users to upload .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, m2ts, .mxf, or .nut videos. +
-
- - +
- - - Requires ffmpeg >= 4.1 - -

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:

-
    -
  • Resolution change is smoother
  • -
  • Faster playback in particular with long videos
  • -
  • More stable playback (less bugs/infinite loading)
  • -
- -

If you also enabled WebTorrent support, it will multiply videos storage by 2

-
-
+ +
Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.
+
The file will be merged in a still image video with the preview file on upload.
+
-
+
+ +
+ + + +
+ + + +

If you also enabled HLS support, it will multiply videos storage by 2

+ +
+ + If disabled, breaks federation with PeerTube instances < 2.1 +
+
+
+
+
+ + +
+ + + + Requires ffmpeg >= 4.1 + +

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with plain WebTorrent:

+
    +
  • Resolution change is smoother
  • +
  • Faster playback especially with long videos
  • +
  • More stable playback (less bugs/infinite loading)
  • +
+ +

If you also enabled WebTorrent support, it will multiply videos storage by 2

+
+
+
+
+
+ +
+ + +
+ +
+ + +
+
+
+
+
+
+
+
+ + +
+
+ +
+
+
TRANSCODING LIVE STREAMS
+
+ Same as above, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some. +
+
+ +
+ + + + +
+ + + Transcoding enabled for live streams + + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
LOAD REPARTITION
+
+ Share CPU power to prioritize one or the other. The total should not be above the number of available threads. +
+
+ +
+ +
+
+ + +
+
{{ formErrors.live.transcoding.threads }}
- -
- + +
Transcoding will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }}.
+
Transcoding will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }}.
+
+
@@ -877,7 +986,7 @@
- +
{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}} @@ -885,7 +994,7 @@
- +
{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}} @@ -903,51 +1012,6 @@ >
- - - -
- - - Requires a lot of CPU! - - -
- -
- -
- -
-
{{ formErrors.live.transcoding.threads }}
-
- -
- - -
- -
- - -
-
-
-
-
-
-
-
@@ -963,7 +1027,7 @@ -
+
CACHE
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index d5352b472..6743879e7 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -103,3 +103,23 @@ ngb-tabset:not(.previews) ::ng-deep { width: fit-content; margin-top: 10px; } + +.callout-container { + position: absolute; + display: flex; + height: 0; + width: 100%; + justify-content: right; + + .callout-link { + @include peertube-button-link; + + position: relative; + right: 3.3em; + top: .3em; + font-size: 90%; + color: pvar(--mainColor); + background-color: pvar(--mainBackgroundColor); + padding: 0 .3em; + } +} diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts index 7db65d038..7920600fc 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts @@ -119,6 +119,30 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A .map(t => t.name) } + getTotalTranscodingThreads () { + const transcodingEnabled = this.form.value['transcoding']['enabled'] + const transcodingThreads = this.form.value['transcoding']['threads'] + const liveTranscodingEnabled = this.form.value['live']['transcoding']['enabled'] + const liveTranscodingThreads = this.form.value['live']['transcoding']['threads'] + + // checks whether all enabled method are on fixed values and not on auto (= 0) + let noneOnAuto = !transcodingEnabled || +transcodingThreads > 0 + noneOnAuto &&= !liveTranscodingEnabled || +liveTranscodingThreads > 0 + + // count total of fixed value, repalcing auto by a single thread (knowing it will display "at least") + let value = 0 + if (transcodingEnabled) value += +transcodingThreads || 1 + if (liveTranscodingEnabled) value += +liveTranscodingThreads || 1 + + return { + value, + atMost: noneOnAuto, // auto switches everything to a least estimation since ffmpeg will take as many threads as possible + unit: value > 1 + ? $localize`threads` + : $localize`thread` + } + } + getResolutionKey (resolution: string) { return 'transcoding.resolutions.' + resolution } diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 208c7f582..0bb349a45 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -361,3 +361,25 @@ ngb-tooltip-window { display: none; } } + +.callout { + padding: 1.25rem; + border: 1px solid #eee; + border-radius: .25rem; + + & > label { + position: relative; + top: -5px; + left: -10px; + color: #6c757d !important; + } + + &:not(.callout-light) { + border-left-width: .25rem; + } + + &.callout-info { + border-color: pvar(--mainColorLightest); + border-left-color: pvar(--mainColor); + } +} -- cgit v1.2.3