add description to transcoding profile selector

2 files changed, 25 insertions, 8 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 7ecfb7702..5f02d00e8 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
@@ -885,15 +885,22 @@
 
               <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                 <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="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
-                <div class="peertube-select-container">
-                  <select id="transcodingProfile" formControlName="profile" class="form-control">
-                    <option *ngFor="let vodTranscodingProfileOption of getAvailableTranscodingProfile('vod')" [value]="vodTranscodingProfileOption">
-                      {{ vodTranscodingProfileOption }}
-                    </option>
-                  </select>
-                </div>
+                <ng-select
+                  id="transcodingProfile"
+                  formControlName="profile"
+                  [items]="getAvailableTranscodingProfile('vod')"
+                  [clearable]="false"
+                >
+                  <ng-template ng-option-tmp let-item="item" let-index="index">
+                    {{ item }}
+                    <ng-container *ngIf="item === 'default'">
+                      <br>
+                      <span class="text-muted">x264, targeting maximum device compatibility</span>
+                    </ng-container>
+                  </ng-template>
+                </ng-select>
                 <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
               </div>
 
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index d7ea73d48..54c805ccf 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -20,6 +20,11 @@ $ng-select-height: 30px;
   font-size: .9em;
 }
 
+.ng-input,
+.ng-select .ng-select-container .ng-value-container {
+  padding-left: 15px !important;
+}
+
 .ng-select {
   &.ng-select-focused {
     &:not(.ng-select-opened) > .ng-select-container {
@@ -29,6 +34,11 @@ $ng-select-height: 30px;
 
   .ng-select-container {
     background-color: pvar(--inputBackgroundColor);
+
+  }
+
+  .ng-arrow-wrapper {
+    padding-right: 12px
   }
 
   &.ng-select-single .ng-value-container .ng-value {