Allow configuration to be static/readonly (#4315)

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-vod-transcoding.component.html

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 a519098655c0df70a1df5db25277854c034c7dca..048f7908d1f069589edbe7d605e0bdae643c5b62 100644 (file)
--- 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,18 +45,18 @@
               <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"
                   >
                     <ng-container ngProjectAs="description">
-                      <span i18n>Allows users to upload .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, .m2ts, .mxf, or .nut videos.</span>
+                      <span i18n>Allows users to upload {{ additionalVideoExtensions }} videos.</span>
                     </ng-container>
                   </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,24 +174,17 @@
           <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>
 
           <my-select-options
             id="transcodingProfile"
             formControlName="profile"
-            [items]="getAvailableTranscodingProfile()"
+            [items]="transcodingProfiles"
             [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>