From 728a1236aece26bce6452c440cf85622548afab9 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Mon, 14 Dec 2020 16:31:10 +0100
Subject: [PATCH] restore live transcoding to live streaming tab
---
.../edit-custom-config.component.html | 155 ++++++++----------
.../select/select-custom-input.component.html | 14 ++
.../select/select-custom-input.component.scss | 0
.../select/select-custom-input.component.ts | 44 +++++
client/src/sass/bootstrap.scss | 4 +-
5 files changed, 131 insertions(+), 86 deletions(-)
create mode 100644 client/src/app/shared/shared-forms/select/select-custom-input.component.html
create mode 100644 client/src/app/shared/shared-forms/select/select-custom-input.component.scss
create mode 100644 client/src/app/shared/shared-forms/select/select-custom-input.component.ts
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 f041101bf..e2f3a196e 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
@@ -841,72 +841,12 @@
</my-peertube-checkbox>
</div>
- </ng-container>
-
- </div>
- </div>
-
- <div class="form-row mt-5"> <!-- transcoding live streams grid -->
- <div class="form-group col-12 col-lg-4 col-xl-3">
- <div i18n class="inner-form-title">TRANSCODING LIVE STREAMS</div>
- <div i18n class="inner-form-description">
- 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.
- </div>
- </div>
-
- <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
- <ng-container formGroupName="live">
- <ng-container formGroupName="transcoding">
-
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
- <my-peertube-checkbox
- inputName="liveTranscodingEnabled" formControlName="enabled"
- >
- <ng-template ptTemplate="label">
- <ng-container i18n>Transcoding enabled for live streams</ng-container>
- </ng-template>
- </my-peertube-checkbox>
- </div>
-
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
- <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
-
- <div class="ml-2 mt-2 d-flex flex-column">
- <ng-container formGroupName="resolutions">
- <div class="form-group" *ngFor="let resolution of liveResolutions">
- <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>
- </ng-container>
- </ng-container>
-
- </div>
- </div>
-
- <div class="form-row mt-5"> <!-- load repartition grid -->
-
- <div class="form-group col-12 col-lg-4 col-xl-3">
- <div i18n class="inner-form-title">LOAD REPARTITION</div>
- <div i18n class="inner-form-description">
- Share CPU power to prioritize one or the other. The total should not be above the number of available threads.
- </div>
- </div>
-
- <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
- <ng-container formGroupName="transcoding">
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+ <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
<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>
<div class="peertube-select-container">
<select id="transcodingThreads" formControlName="threads" class="form-control">
@@ -917,29 +857,10 @@
</div>
<div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
</div>
- </ng-container>
- <ng-container formGroupName="live">
- <ng-container formGroupName="transcoding">
- <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
- <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
- <div class="peertube-select-container">
- <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
- <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
- {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
- </option>
- </select>
- </div>
- <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
- </div>
- </ng-container>
</ng-container>
- <div *ngIf="getTotalTranscodingThreads().atMost" i18n>Transcoding will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }}.</div>
- <div *ngIf="!getTotalTranscodingThreads().atMost" i18n>Transcoding will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }}.</div>
-
</div>
-
</div>
</ng-template>
@@ -1012,6 +933,7 @@
></ng-select>
</div>
</div>
+
</ng-container>
</my-peertube-checkbox>
</div>
@@ -1019,6 +941,71 @@
</div>
</div>
+ <div class="form-row"> <!-- transcoding live streams grid -->
+ <div class="form-group col-12 col-lg-4 col-xl-3">
+ <div i18n class="inner-form-title">TRANSCODING</div>
+ <div i18n class="inner-form-description">
+ Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
+ </div>
+ </div>
+
+ <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+ <ng-container formGroupName="live">
+ <ng-container formGroupName="transcoding">
+
+ <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
+ <my-peertube-checkbox
+ inputName="liveTranscodingEnabled" formControlName="enabled"
+ >
+ <ng-template ptTemplate="label">
+ <ng-container i18n>Transcoding enabled for live streams</ng-container>
+ </ng-template>
+ </my-peertube-checkbox>
+ </div>
+
+ <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
+ <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
+
+ <div class="ml-2 mt-2 d-flex flex-column">
+ <ng-container formGroupName="resolutions">
+ <div class="form-group" *ngFor="let resolution of liveResolutions">
+ <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 class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
+ <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
+ <span class="text-muted ml-1">
+ <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container>
+ <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container>
+ </span>
+
+ <div class="peertube-select-container">
+ <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
+ <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
+ {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
+ </option>
+ </select>
+ </div>
+ <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
+ </div>
+
+ </ng-container>
+ </ng-container>
+
+ </div>
+ </div>
+
</ng-template>
</ng-container>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.html b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
new file mode 100644
index 000000000..84fa15c3d
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
@@ -0,0 +1,14 @@
+<ng-select
+ [(ngModel)]="selectedId"
+ (ngModelChange)="onModelChange()"
+ [bindLabel]="bindLabel"
+ [bindValue]="bindValue"
+ [clearable]="clearable"
+ [searchable]="searchable"
+>
+ <ng-option *ngFor="let item of items" [value]="item.id">
+ {{ channel.label }}
+ </ng-option>
+
+ <ng-content></ng-content>
+</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.scss b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.ts b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
new file mode 100644
index 000000000..ba6fef8ad
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
@@ -0,0 +1,44 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+ selector: 'my-select-custom-input',
+ styleUrls: [ './select-custom-input.component.scss' ],
+ templateUrl: './select-custom-input.component.html',
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => SelectCustomInputComponent),
+ multi: true
+ }
+ ]
+})
+export class SelectCustomInputComponent implements ControlValueAccessor {
+ @Input() items: any[] = []
+
+ selectedId: number
+
+ // ng-select options
+ bindLabel = 'label'
+ bindValue = 'id'
+ clearable = false
+ searchable = false
+
+ propagateChange = (_: any) => { /* empty */ }
+
+ writeValue (id: number) {
+ this.selectedId = id
+ }
+
+ registerOnChange (fn: (_: any) => void) {
+ this.propagateChange = fn
+ }
+
+ registerOnTouched () {
+ // Unused
+ }
+
+ onModelChange () {
+ this.propagateChange(this.selectedId)
+ }
+}
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0bb349a45..ac53ae7a5 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -363,8 +363,8 @@ ngb-tooltip-window {
}
.callout {
- padding: 1.25rem;
- border: 1px solid #eee;
+ padding: 1.25rem;
+ border: 1px solid #eee;
border-radius: .25rem;
& > label {