add explicit numbers in configuration number inputs

fixes #1346

2 files changed, 48 insertions, 21 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 e0361fbfd..09539fa92 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
@@ -362,10 +362,13 @@
 
                     <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
                       <label i18n for="signupLimit">Signup limit</label>
-                      <input
-                        type="number" min="-1" id="signupLimit" class="form-control"
-                        formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
-                      >
+                      <div class="number-with-unit">
+                        <input
+                          type="number" min="-1" id="signupLimit" class="form-control"
+                          formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
+                        >
+                        <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>
                     </div>
@@ -743,22 +746,29 @@
 
                     <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
                       <label i18n for="liveMaxInstanceLives">Max lives created on your instance (-1 for "unlimited")</label>
-                      <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
+                      <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 lives created per user (-1 for "unlimited")</label>
-                      <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
+                      <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() }">
                       <label i18n for="liveMaxDuration">Max live duration</label>
                       <div class="peertube-select-container">
-                        <select id="liveMaxDuration" formControlName="maxDuration" class="form-control">
-                          <option *ngFor="let liveMaxDurationOption of liveMaxDurationOptions" [value]="liveMaxDurationOption.value">
-                            {{ liveMaxDurationOption.label }}
-                          </option>
-                        </select>
+                        <ng-select
+                          labelForId="liveMaxDuration" [items]="liveMaxDurationOptions" formControlName="maxDuration"
+                          bindLabel="label" bindValue="value"
+                          [clearable]="false"
+                          [searchable]="false"
+                        ></ng-select>
                       </div>
                     </div>
 
@@ -780,7 +790,7 @@
                         <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.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
                             </option>
                           </select>
                         </div>
@@ -922,7 +932,7 @@
                 <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.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
                     </option>
                   </select>
                 </div>
@@ -968,19 +978,25 @@
             <ng-container formGroupName="cache">
               <div class="form-group" formGroupName="previews">
                 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
-                <input
-                  type="number" min="0" id="cachePreviewsSize" class="form-control"
-                  formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
-                >
+                <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>
+                </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>
-                <input
-                  type="number" min="0" id="cacheCaptionsSize" class="form-control"
-                  formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
-                >
+                <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>
+                </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-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 14cd6bd8b..d5352b472 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
@@ -22,6 +22,17 @@ input[type=number] {
   display: block;
 }
 
+.number-with-unit {
+  position: relative;
+  width: min-content;
+
+  input[type=number] + span {
+    position: absolute;
+    top: 5px;
+    right: 2.5rem;
+  }
+}
+
 input[type=checkbox] {
   @include peertube-checkbox(1px);
 }