From 70e335158499b0ac9e6da2193219d87512759876 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 10 Feb 2021 11:27:36 +0100
Subject: [PATCH] Small edit config refactor

---
 ...edit-advanced-configuration.component.html |  8 ++-
 .../edit-advanced-configuration.component.ts  |  4 ++
 .../edit-basic-configuration.component.html   | 32 ++++++++----
 .../edit-basic-configuration.component.ts     | 12 +++++
 .../edit-instance-information.component.html  | 15 ++++++
 .../edit-live-configuration.component.html    | 46 +++++++++-------
 .../edit-live-configuration.component.ts      | 16 +++++-
 .../edit-vod-transcoding.component.html       | 52 ++++++++-----------
 .../edit-vod-transcoding.component.ts         | 12 ++++-
 9 files changed, 136 insertions(+), 61 deletions(-)

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index db3036c4e..6018ff5e0 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -13,25 +13,29 @@
       <ng-container formGroupName="cache">
         <div class="form-group" formGroupName="previews">
           <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
+
           <div class="number-with-unit">
             <input
               type="number" min="0" id="cachePreviewsSize" class="form-control"
               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
             >
-            <span i18n>{form.value['cache']['previews']['size'], plural, =1 {cached image} other {cached images}}</span>
+            <span i18n>{getCacheSize('previews'), plural, =1 {cached image} other {cached images}}</span>
           </div>
+
           <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
         </div>
 
         <div class="form-group" formGroupName="captions">
           <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
+
           <div class="number-with-unit">
             <input
               type="number" min="0" id="cacheCaptionsSize" class="form-control"
               formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
             >
-            <span i18n>{form.value['cache']['captions']['size'], plural, =1 {cached image} other {cached images}}</span>
+            <span i18n>{getCacheSize('captions'), plural, =1 {cached caption} other {cached captions}}</span>
           </div>
+
           <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
         </div>
       </ng-container>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
index a37b7b7d5..934438a50 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.ts
@@ -11,4 +11,8 @@ import { FormGroup } from '@angular/forms'
 export class EditAdvancedConfigurationComponent {
   @Input() form: FormGroup
   @Input() formErrors: any
+
+  getCacheSize (type: 'captions' | 'previews') {
+    return this.form.value['cache'][type]['size']
+  }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index ac1a11b4d..21a719d42 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -25,6 +25,7 @@
 
       <div class="form-group" formGroupName="instance">
         <label i18n for="instanceDefaultClientRoute">Landing page</label>
+
         <div class="peertube-select-container">
           <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
             <option i18n value="/videos/overview">Discover videos</option>
@@ -41,6 +42,7 @@
             <option i18n value="/videos/local">Local videos</option>
           </select>
         </div>
+
         <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
       </div>
 
@@ -48,6 +50,7 @@
         <ng-container formGroupName="videos">
           <ng-container formGroupName="algorithms">
             <label i18n for="trendingVideosAlgorithmsDefault">Default trending page</label>
+
             <div class="peertube-select-container">
               <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
                 <option i18n value="best">Best videos</option>
@@ -56,6 +59,7 @@
                 <option i18n value="most-liked">Most liked videos</option>
               </select>
             </div>
+
             <div *ngIf="formErrors.trending.videos.algorithms.default" class="form-error">{{ formErrors.trending.videos.algorithms.default }}</div>
           </ng-container>
         </ng-container>
@@ -92,6 +96,7 @@
 
         <div class="form-group">
           <label i18n for="broadcastMessageLevel">Broadcast message level</label>
+
           <div class="peertube-select-container">
             <select id="broadcastMessageLevel" formControlName="level" class="form-control">
               <option value="info">info</option>
@@ -99,15 +104,18 @@
               <option value="error">error</option>
             </select>
           </div>
+
           <div *ngIf="formErrors.broadcastMessage.level" class="form-error">{{ formErrors.broadcastMessage.level }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
+
           <my-markdown-textarea
             name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
             [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
         </div>
 
@@ -139,13 +147,14 @@
             </ng-container>
 
             <ng-container ngProjectAs="extra">
-              <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
+              <my-peertube-checkbox [ngClass]="getDisabledSignupClass()"
                 inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
                 i18n-labelText labelText="Signup requires email verification"
               ></my-peertube-checkbox>
 
-              <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
+              <div [ngClass]="getDisabledSignupClass()" class="mt-3">
                 <label i18n for="signupLimit">Signup limit</label>
+
                 <div class="number-with-unit">
                   <input
                     type="number" min="-1" id="signupLimit" class="form-control"
@@ -153,8 +162,10 @@
                   >
                   <span i18n>{form.value['signup']['limit'], plural, =1 {user} other {users}}</span>
                 </div>
+
                 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
-                <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
+
+                <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small>
               </div>
             </ng-container>
           </my-peertube-checkbox>
@@ -207,9 +218,7 @@
 
           <div class="form-group mt-4">
             <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span class="text-muted ml-1">
-              <span i18n>allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
-            </span>
+            <span i18n class="text-muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 
             <div class="number-with-unit">
               <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -307,24 +316,26 @@
               </ng-container>
 
               <ng-container ngProjectAs="extra">
-                <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
+                <div [ngClass]="getDisabledSearchIndexClass()">
                   <label i18n for="searchIndexUrl">Search index URL</label>
+
                   <input
                     type="text"  id="searchIndexUrl" class="form-control"
                     formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
                   >
+
                   <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
                 </div>
 
                 <div class="mt-3">
-                  <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
+                  <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
                     inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
                     i18n-labelText labelText="Disable local search in search bar"
                   ></my-peertube-checkbox>
                 </div>
 
                 <div class="mt-3">
-                  <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
+                  <my-peertube-checkbox [ngClass]="getDisabledSearchIndexClass()"
                     inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
                     i18n-labelText labelText="Search bar uses the global search index by default"
                   >
@@ -433,10 +444,12 @@
 
       <div class="form-group" formGroupName="admin">
         <label i18n for="adminEmail">Admin email</label>
+
         <input
           type="text" id="adminEmail" class="form-control"
           formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
         >
+
         <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
       </div>
 
@@ -471,6 +484,7 @@
               type="text" id="servicesTwitterUsername" class="form-control"
               formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
             >
+
             <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
           </div>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index 9a19c2913..34d05f9f3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -50,10 +50,22 @@ export class EditBasicConfigurationComponent implements OnInit {
     return this.form.value['signup']['enabled'] === true
   }
 
+  getDisabledSignupClass () {
+    return { 'disabled-checkbox-extra': !this.isSignupEnabled() }
+  }
+
+  hasUnlimitedSignup () {
+    return this.form.value['signup']['limit'] === -1
+  }
+
   isSearchIndexEnabled () {
     return this.form.value['search']['searchIndex']['enabled'] === true
   }
 
+  getDisabledSearchIndexClass () {
+    return { 'disabled-checkbox-extra': !this.isSearchIndexEnabled() }
+  }
+
   isAutoFollowIndexEnabled () {
     return this.form.value['followings']['instance']['autoFollowIndex']['enabled'] === true
   }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 6f19ede0a..35b42e742 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -11,28 +11,34 @@
 
         <div class="form-group">
           <label i18n for="instanceName">Name</label>
+
           <input
             type="text" id="instanceName" class="form-control"
             formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
           >
+
           <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceShortDescription">Short description</label>
+
           <textarea
             id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
             [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
           ></textarea>
+
           <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+
           <my-markdown-textarea
             name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
             [classes]="{ 'input-error': formErrors['instance.description'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
         </div>
 
@@ -111,24 +117,29 @@
               <option i18n value="display">Display</option>
             </select>
           </div>
+
           <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
+
           <my-markdown-textarea
             name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
+
           <my-markdown-textarea
             name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
         </div>
 
@@ -140,6 +151,7 @@
             name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
         </div>
 
@@ -173,6 +185,7 @@
             name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
         </div>
 
@@ -184,6 +197,7 @@
             name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
         </div>
 
@@ -195,6 +209,7 @@
             name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
         </div>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 4b1a55245..65fc31412 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -25,7 +25,7 @@
 
             <ng-container ngProjectAs="extra">
 
-              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
+              <div class="form-group" [ngClass]="getDisabledLiveClass()">
                 <my-peertube-checkbox
                   inputName="liveAllowReplay" formControlName="allowReplay"
                   i18n-labelText labelText="Allow your users to automatically publish a replay of their live"
@@ -36,23 +36,29 @@
                 </my-peertube-checkbox>
               </div>
 
-              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
-                <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance <span class="text-muted">(-1 for "unlimited")</span></label>
+              <div class="form-group" [ngClass]="getDisabledLiveClass()">
+                <label i18n for="liveMaxInstanceLives">
+                  Max simultaneous lives created on your instance <span class="text-muted">(-1 for "unlimited")</span>
+                </label>
+
                 <div class="number-with-unit">
                   <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
                   <span i18n>{form.value['live']['maxInstanceLives'], plural, =1 {live} other {lives}}</span>
                 </div>
               </div>
 
-              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
-                <label i18n for="liveMaxUserLives">Max simultaneous lives created per user <span class="text-muted">(-1 for "unlimited")</span></label>
+              <div class="form-group" [ngClass]="getDisabledLiveClass()">
+                <label i18n for="liveMaxUserLives">
+                  Max simultaneous lives created per user <span class="text-muted">(-1 for "unlimited")</span>
+                </label>
+
                 <div class="number-with-unit">
                   <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
                   <span i18n>{form.value['live']['maxUserLives'], plural, =1 {live} other {lives}}</span>
                 </div>
               </div>
 
-              <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
+              <div class="form-group" [ngClass]="getDisabledLiveClass()">
                 <label i18n for="liveMaxDuration">Max live duration</label>
 
                 <my-select-options
@@ -81,7 +87,7 @@
       <ng-container formGroupName="live">
         <ng-container formGroupName="transcoding">
 
-          <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
+          <div class="form-group" [ngClass]="getDisabledLiveClass()">
             <my-peertube-checkbox
               inputName="liveTranscodingEnabled" formControlName="enabled"
             >
@@ -91,11 +97,12 @@
             </my-peertube-checkbox>
           </div>
 
-          <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
+          <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <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"
@@ -106,15 +113,22 @@
                     </ng-template>
                   </my-peertube-checkbox>
                 </div>
+
               </ng-container>
             </div>
           </div>
 
-          <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
+          <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <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>
+              <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>
 
             <my-select-custom-value
@@ -126,7 +140,7 @@
             <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
           </div>
 
-          <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
+          <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
             <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>
 
@@ -136,14 +150,8 @@
               [items]="getAvailableTranscodingProfile()"
               [clearable]="false"
             >
-              <ng-template ng-option-tmp let-item="item" let-index="index">
-                {{ item }}
-                <ng-container *ngIf="item === 'default'">
-                  <br>
-                  <span class="text-muted" i18n>x264, targeting maximum device compatibility</span>
-                </ng-container>
-              </ng-template>
             </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-live-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts
index a82a40a84..3328d28a9 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts
@@ -42,7 +42,13 @@ export class EditLiveConfigurationComponent implements OnInit {
   getAvailableTranscodingProfile () {
     const profiles = this.serverConfig.live.transcoding.availableProfiles
 
-    return profiles.map(p => ({ id: p, label: p }))
+    return profiles.map(p => {
+      const description = p === 'default'
+        ? $localize`x264, targeting maximum device compatibility`
+        : ''
+
+      return { id: p, label: p, description }
+    })
   }
 
   getResolutionKey (resolution: string) {
@@ -57,6 +63,14 @@ export class EditLiveConfigurationComponent implements OnInit {
     return this.editConfigurationService.isLiveEnabled(this.form)
   }
 
+  getDisabledLiveClass () {
+    return { 'disabled-checkbox-extra': !this.isLiveEnabled() }
+  }
+
+  getDisabledLiveTranscodingClass () {
+    return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() }
+  }
+
   isLiveTranscodingEnabled () {
     return this.editConfigurationService.isLiveTranscodingEnabled(this.form)
   }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index a51909865..5669b81ce 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -13,7 +13,9 @@
         </span>
 
         <div class="callout-container">
-          <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/admin-configuration?id=transcoding" i18n>Read guidelines</a>
+          <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/#/admin-configuration?id=transcoding" i18n>
+            Read guidelines
+          </a>
         </div>
       </div>
     </div>
@@ -43,7 +45,7 @@
               <div class="callout callout-light pt-2 pb-0">
                 <label i18n>Input formats</label>
 
-                <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                   <my-peertube-checkbox
                     inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
                     i18n-labelText labelText="Allow additional extensions"
@@ -54,7 +56,7 @@
                   </my-peertube-checkbox>
                 </div>
 
-                <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                   <my-peertube-checkbox
                     inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
                     i18n-labelText labelText="Allow audio files upload"
@@ -71,18 +73,14 @@
                 <label i18n>Output formats</label>
 
                 <ng-container formGroupName="webtorrent">
-                  <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                  <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                     <my-peertube-checkbox
                       inputName="transcodingWebTorrentEnabled" formControlName="enabled"
                       i18n-labelText labelText="WebTorrent enabled"
                     >
                       <ng-template ptTemplate="help">
-                        <ng-container i18n>
-                          <p>If you also enabled HLS support, it will multiply videos storage by 2</p>
-
-                          <br />
-
-                          <strong>If disabled, breaks federation with PeerTube instances < 2.1</strong>
+                        <ng-container>
+                          <p i18n>If you also enabled HLS support, it will multiply videos storage by 2</p>
                         </ng-container>
                       </ng-template>
                     </my-peertube-checkbox>
@@ -90,7 +88,7 @@
                 </ng-container>
 
                 <ng-container formGroupName="hls">
-                  <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                  <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                     <my-peertube-checkbox
                       inputName="transcodingHlsEnabled" formControlName="enabled"
                       i18n-labelText labelText="HLS with P2P support enabled"
@@ -114,7 +112,7 @@
                   </div>
                 </ng-container>
 
-                <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+                <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                   <label i18n>Resolutions to generate per enabled format</label>
 
                   <div class="ml-2 mt-2 d-flex flex-column">
@@ -142,11 +140,16 @@
           </my-peertube-checkbox>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <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>
+            <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>
 
           <my-select-custom-value
@@ -159,11 +162,9 @@
           <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
-          <span class="text-muted ml-1">
-            <span i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart.</span>
-          </span>
+          <span class="text-muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 
           <div class="number-with-unit">
             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -173,7 +174,7 @@
           <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
+        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingProfile">Transcoding profile</label>
           <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
@@ -182,15 +183,8 @@
             formControlName="profile"
             [items]="getAvailableTranscodingProfile()"
             [clearable]="false"
-          >
-            <ng-template ng-option-tmp let-item="item" let-index="index">
-              {{ item }}
-              <ng-container *ngIf="item === 'default'">
-                <br>
-                <span class="text-muted" i18n>x264, targeting maximum device compatibility</span>
-              </ng-container>
-            </ng-template>
-          </my-select-options>
+          ></my-select-options>
+
           <div *ngIf="formErrors.transcoding.profile" class="form-error">{{ formErrors.transcoding.profile }}</div>
         </div>
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
index d745912a0..b864f1bc4 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
@@ -34,7 +34,13 @@ export class EditVODTranscodingComponent implements OnInit {
   getAvailableTranscodingProfile () {
     const profiles = this.serverConfig.transcoding.availableProfiles
 
-    return profiles.map(p => ({ id: p, label: p }))
+    return profiles.map(p => {
+      const description = p === 'default'
+        ? $localize`x264, targeting maximum device compatibility`
+        : ''
+
+      return { id: p, label: p, description }
+    })
   }
 
   getResolutionKey (resolution: string) {
@@ -45,6 +51,10 @@ export class EditVODTranscodingComponent implements OnInit {
     return this.editConfigurationService.isTranscodingEnabled(this.form)
   }
 
+  getTranscodingDisabledClass () {
+    return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() }
+  }
+
   getTotalTranscodingThreads () {
     return this.editConfigurationService.getTotalTranscodingThreads(this.form)
   }
-- 
2.41.0