Put video quota info in its own component

3 files changed, 11 insertions, 26 deletions

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 728185195..43f1438e0 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
@@ -218,10 +218,7 @@
             [clearable]="false"
           ></my-select-custom-value>
 
-          <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
-            Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
-            At most, a user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
-          </div>
+          <my-user-real-quota-info [videoQuota]="getUserVideoQuota()"></my-user-real-quota-info>
 
           <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</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 dc7802b2c..f7de4c7de 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
@@ -60,6 +60,10 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
     return !!enabled.find((e: string) => e === algorithm)
   }
 
+  getUserVideoQuota () {
+    return this.form.value['user']['videoQuota']
+  }
+
   isSignupEnabled () {
     return this.form.value['signup']['enabled'] === true
   }
@@ -92,28 +96,6 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
     return this.form.value['followings']['instance']['autoFollowIndex']['enabled'] === true
   }
 
-  computeQuotaWithTranscoding () {
-    const transcodingConfig = this.serverConfig.transcoding
-
-    const resolutions = transcodingConfig.enabledResolutions
-    const higherResolution = VideoResolution.H_4K
-    let multiplier = 0
-
-    for (const resolution of resolutions) {
-      multiplier += resolution / higherResolution
-    }
-
-    if (transcodingConfig.hls.enabled) multiplier *= 2
-
-    return multiplier * parseInt(this.form.value['user']['videoQuota'], 10)
-  }
-
-  isTranscodingInformationDisplayed () {
-    const formVideoQuota = parseInt(this.form.value['user']['videoQuota'], 10)
-    return this.serverConfig.transcoding.enabledResolutions.length !== 0 &&
-           formVideoQuota > 0
-  }
-
   buildLandingPageOptions () {
     this.defaultLandingPageOptions = this.menuService.buildCommonLinks(this.serverConfig)
       .links
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 dda5d0b5e..764e626ec 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
@@ -150,3 +150,9 @@ ngb-tabset:not(.previews) ::ng-deep {
     padding: 0 .3em;
   }
 }
+
+my-user-real-quota-info {
+  display: block;
+  margin-top: 5px;
+  font-size: 11px;
+}