restore live transcoding to live streaming tab

5 files changed, 131 insertions, 86 deletions

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
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
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 {