add description to transcoding profile selector

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

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 013784c6c5d2adc81f2d699f2f5ee04615e6d538..5f02d00e8070a7628d362815cd1b469294857d4a 100644 (file)
--- 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
@@ -269,8 +269,12 @@
               <div class="peertube-select-container">
                 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
                   <option i18n value="/videos/overview">Discover videos</option>
-                  <option i18n value="/videos/trending">Trending videos</option>
-                  <option i18n value="/videos/most-liked">Most liked videos</option>
+                  <optgroup i18n-label label="Trending pages">
+                    <option i18n value="/videos/trending">Default trending page</option>
+                    <option i18n value="/videos/trending?alg=hot" [disabled]="!trendingVideosAlgorithmsEnabledIncludes('hot')">Hot videos</option>
+                    <option i18n value="/videos/trending?alg=most-viewed" [disabled]="!trendingVideosAlgorithmsEnabledIncludes('most-viewed')">Most viewed videos</option>
+                    <option i18n value="/videos/trending?alg=most-liked" [disabled]="!trendingVideosAlgorithmsEnabledIncludes('most-liked')">Most liked videos</option>
+                  </optgroup>
                   <option i18n value="/videos/recently-added">Recently added videos</option>
                   <option i18n value="/videos/local">Local videos</option>
                 </select>
@@ -278,6 +282,22 @@
               <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
             </div>
 
+            <div class="form-group" formGroupName="trending">
+              <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="hot">Hot videos</option>
+                      <option i18n value="most-viewed">Most viewed videos</option>
+                      <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>
+            </div>
+
           </div>
         </div>
 
@@ -651,7 +671,8 @@
           <div class="form-group col-12 col-lg-4 col-xl-3">
             <div i18n class="inner-form-title">TWITTER</div>
             <div i18n class="inner-form-description">
-              Optional. If any, provide the Twitter account representing your instance to improve link previews.
+              Provide the Twitter account representing your instance to improve link previews.
+              If you don't have a Twitter account, just leave the default value.
             </div>
           </div>
 
@@ -752,7 +773,7 @@
                           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 .mkv, .mov, .avi, .wmv, .flv, .f4v, .3g2, .3gp, .mts, .m2ts, .mxf, or .nut videos.</span>
                           </ng-container>
                         </my-peertube-checkbox>
                       </div>
@@ -832,6 +853,10 @@
                                 </ng-template>
                               </my-peertube-checkbox>
                             </div>
+
+                            <span class="mb-2 text-muted" i18n>
+                              The original file resolution will be the default target if no option is selected.
+                            </span>
                           </ng-container>
                         </div>
                       </div>
@@ -858,6 +883,27 @@
                 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
               </div>
 
+              <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>
+
+                <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>
+
             </ng-container>
 
           </div>
@@ -998,6 +1044,20 @@
                   <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() }">
+                  <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>
+
+                  <div class="peertube-select-container">
+                    <select id="liveTranscodingProfile" formControlName="profile" class="form-control">
+                      <option *ngFor="let liveTranscodingProfileOption of getAvailableTranscodingProfile('live')" [value]="liveTranscodingProfileOption">
+                        {{ liveTranscodingProfileOption }}
+                      </option>
+                    </select>
+                  </div>
+                  <div *ngIf="formErrors.live.transcoding.profile" class="form-error">{{ formErrors.live.transcoding.profile }}</div>
+                </div>
+
               </ng-container>
             </ng-container>