Support custom value in ng-select

3 files changed, 49 insertions, 57 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 5f0a5ff6c..844620ca2 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
@@ -445,13 +445,11 @@
                     <span i18n>allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
                   </span>
 
-                  <div class="peertube-select-container">
-                    <select id="importConcurrency" formControlName="concurrency" class="form-control">
-                      <option *ngFor="let option of concurrencyOptions" [value]="option">
-                        {{ option }}
-                      </option>
-                    </select>
+                  <div class="number-with-unit">
+                    <input type="number" name="importConcurrency" formControlName="concurrency" />
+                    <span i18n>jobs in parallel</span>
                   </div>
+
                   <div *ngIf="formErrors.import.concurrency" class="form-error">{{ formErrors.import.concurrency }}</div>
                 </div>
 
@@ -892,13 +890,13 @@
                   <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">
-                    <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
-                      {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
-                    </option>
-                  </select>
-                </div>
+                <my-select-custom-value
+                  id="transcodingThreads"
+                  [items]="transcodingThreadOptions"
+                  formControlName="threads"
+                  [clearable]="false"
+                ></my-select-custom-value>
+
                 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
               </div>
 
@@ -908,13 +906,11 @@
                   <span i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart.</span>
                 </span>
 
-                <div class="peertube-select-container">
-                  <select id="transcodingConcurrency" formControlName="concurrency" class="form-control">
-                    <option *ngFor="let option of concurrencyOptions" [value]="option">
-                      {{ option }}
-                    </option>
-                  </select>
+                <div class="number-with-unit">
+                  <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
+                  <span i18n>jobs in parallel</span>
                 </div>
+
                 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
               </div>
 
@@ -922,7 +918,7 @@
                 <label i18n for="transcodingProfile">Transcoding profile</label>
                 <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
-                <ng-select
+                <my-select-options
                   id="transcodingProfile"
                   formControlName="profile"
                   [items]="getAvailableTranscodingProfile('vod')"
@@ -935,7 +931,7 @@
                       <span class="text-muted" i18n>x264, targeting maximum device compatibility</span>
                     </ng-container>
                   </ng-template>
-                </ng-select>
+                </my-select-options>
                 <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
               </div>
 
@@ -1007,10 +1003,10 @@
                     <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
                       <label i18n for="liveMaxDuration">Max live duration</label>
 
-                      <ng-select
+                      <my-select-options
                         labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
-                        bindLabel="label" bindValue="value" [clearable]="false" [searchable]="false"
-                      ></ng-select>
+                        bindLabel="label" bindValue="value" [clearable]="false" [searchable]="true"
+                      ></my-select-options>
                     </div>
 
                   </ng-container>
@@ -1069,13 +1065,12 @@
                     <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>
+                  <my-select-custom-value
+                    id="liveTranscodingThreads"
+                    [items]="transcodingThreadOptions"
+                    formControlName="threads"
+                    [clearable]="false"
+                  ></my-select-custom-value>
                   <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
                 </div>
 
@@ -1083,7 +1078,7 @@
                   <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
                   <span class="text-muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 
-                  <ng-select
+                  <my-select-options
                     id="liveTranscodingProfile"
                     formControlName="profile"
                     [items]="getAvailableTranscodingProfile('live')"
@@ -1096,7 +1091,7 @@
                         <span class="text-muted" i18n>x264, targeting maximum device compatibility</span>
                       </ng-container>
                     </ng-template>
-                  </ng-select>
+                  </my-select-options>
                   <div *ngIf="formErrors.live.transcoding.profile" class="form-error">{{ formErrors.live.transcoding.profile }}</div>
                 </div>
 
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 665247368..c12465d45 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
@@ -42,7 +42,8 @@ input[type=checkbox] {
   @include peertube-select-container($form-base-input-width);
 }
 
-ng-select,
+my-select-options,
+my-select-custom-value,
 my-select-checkbox {
   @include responsive-width($form-base-input-width);
 
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 48fb86968..a9f72d7db 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
@@ -37,12 +37,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
 
   resolutions: { id: string, label: string, description?: string }[] = []
   liveResolutions: { id: string, label: string, description?: string }[] = []
-  concurrencyOptions: number[] = []
-  transcodingThreadOptions: { label: string, value: number }[] = []
-  liveMaxDurationOptions: { label: string, value: number }[] = []
 
-  vodTranscodingProfileOptions: string[] = []
-  liveTranscodingProfileOptions: string[] = []
+  transcodingThreadOptions: SelectOptionsItem[] = []
+  liveMaxDurationOptions: SelectOptionsItem[] = []
 
   languageItems: SelectOptionsItem[] = []
   categoryItems: SelectOptionsItem[] = []
@@ -99,23 +96,22 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
     this.liveResolutions = this.resolutions.filter(r => r.id !== '0p')
 
     this.transcodingThreadOptions = [
-      { value: 0, label: $localize`Auto (via ffmpeg)` },
-      { value: 1, label: '1' },
-      { value: 2, label: '2' },
-      { value: 4, label: '4' },
-      { value: 8, label: '8' }
+      { id: 0, label: $localize`Auto (via ffmpeg)` },
+      { id: 1, label: '1' },
+      { id: 2, label: '2' },
+      { id: 4, label: '4' },
+      { id: 8, label: '8' },
+      { id: 12, label: '12' },
+      { id: 16, label: '16' },
+      { id: 32, label: '32' }
     ]
-    this.concurrencyOptions = [ 1, 2, 3, 4, 5, 6 ]
-
-    this.vodTranscodingProfileOptions = [ 'default' ]
-    this.liveTranscodingProfileOptions = [ 'default' ]
 
     this.liveMaxDurationOptions = [
-      { value: -1, label: $localize`No limit` },
-      { value: 1000 * 3600, label: $localize`1 hour` },
-      { value: 1000 * 3600 * 3, label: $localize`3 hours` },
-      { value: 1000 * 3600 * 5, label: $localize`5 hours` },
-      { value: 1000 * 3600 * 10, label: $localize`10 hours` }
+      { id: -1, label: $localize`No limit` },
+      { id: 1000 * 3600, label: $localize`1 hour` },
+      { id: 1000 * 3600 * 3, label: $localize`3 hours` },
+      { id: 1000 * 3600 * 5, label: $localize`5 hours` },
+      { id: 1000 * 3600 * 10, label: $localize`10 hours` }
     ]
   }
 
@@ -137,11 +133,11 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
   }
 
   getAvailableTranscodingProfile (type: 'live' | 'vod') {
-    if (type === 'live') {
-      return this.serverConfig.live.transcoding.availableProfiles
-    }
+    const profiles = type === 'live'
+      ? this.serverConfig.live.transcoding.availableProfiles
+      : this.serverConfig.transcoding.availableProfiles
 
-    return this.serverConfig.transcoding.availableProfiles
+    return profiles.map(p => ({ id: p, label: p }))
   }
 
   getTotalTranscodingThreads () {