Put video quota info in its own component

client/src/app/+admin/admin.module.ts

@@ -49,6 +49,7 @@ import {
   PluginSearchComponent,
   PluginShowInstalledComponent
 } from './plugins'
+import { SharedAdminModule } from './shared'
 import { JobService, LogsComponent, LogsService } from './system'
 import { DebugComponent, DebugService } from './system/debug'
 import { JobsComponent } from './system/jobs/jobs.component'
@@ -69,6 +70,7 @@ import { JobsComponent } from './system/jobs/jobs.component'
     SharedVideoMiniatureModule,
     SharedTablesModule,
     SharedUsersModule,
+    SharedAdminModule,
 
     TableModule,
     ChartModule

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()">
+          <my-user-real-quota-info [videoQuota]="getUserVideoQuota()"></my-user-real-quota-info>
-            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>
 
           <div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
         </div>

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

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;
+}

client/src/app/+admin/overview/users/user-edit/user-edit.component.html

@@ -152,10 +152,7 @@
             [clearable]="false"
           ></my-select-custom-value>
 
-          <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+          <my-user-real-quota-info [videoQuota]="getUserVideoQuota()"></my-user-real-quota-info>
-            Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
-            At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
-          </div>
 
           <div *ngIf="formErrors.videoQuota" class="form-error">
             {{ formErrors.videoQuota }}

client/src/app/+admin/overview/users/user-edit/user-edit.component.scss

@@ -41,7 +41,8 @@ button {
   margin-top: 10px;
 }
 
-.transcoding-information {
+my-user-real-quota-info {
+  display: block;
   margin-top: 5px;
   font-size: 11px;
 }

client/src/app/+admin/overview/users/user-edit/user-edit.ts

@@ -60,33 +60,14 @@ export abstract class UserEdit extends FormReactive implements OnInit {
     ]
   }
 
-  isTranscodingInformationDisplayed () {
-    const formVideoQuota = parseInt(this.form.value['videoQuota'], 10)
-
-    return this.serverConfig.transcoding.enabledResolutions.length !== 0 &&
-           formVideoQuota > 0
-  }
-
-  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['videoQuota'], 10)
-  }
-
   resetPassword () {
     return
   }
 
+  getUserVideoQuota () {
+    return this.form.value['videoQuota']
+  }
+
   protected buildAdminFlags (formValue: any) {
     return formValue.byPassAutoBlock ? UserAdminFlag.BYPASS_VIDEO_AUTO_BLACKLIST : UserAdminFlag.NONE
   }

client/src/app/+admin/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './user-real-quota-info.component'
+
+export * from './shared-admin.module'

client/src/app/+admin/shared/shared-admin.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { SharedMainModule } from '../../shared/shared-main/shared-main.module'
+import { UserRealQuotaInfoComponent } from './user-real-quota-info.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule
+  ],
+
+  declarations: [
+    UserRealQuotaInfoComponent
+  ],
+
+  exports: [
+    UserRealQuotaInfoComponent
+  ],
+
+  providers: []
+})
+export class SharedAdminModule { }

client/src/app/+admin/shared/user-real-quota-info.component.html

@@ -0,0 +1,4 @@
+<div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+  The video quota only takes into account <strong>original</strong> video size. <br />
+  Since transcoding is enabled, videos size can be at most ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+</div>

client/src/app/+admin/shared/user-real-quota-info.component.scss

@@ -0,0 +1,2 @@
+@use '_variables' as *;
+@use '_mixins' as *;

client/src/app/+admin/shared/user-real-quota-info.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { ServerService } from '@app/core'
+import { HTMLServerConfig, VideoResolution } from '@shared/models/index'
+
+@Component({
+  selector: 'my-user-real-quota-info',
+  templateUrl: './user-real-quota-info.component.html',
+  styleUrls: [ './user-real-quota-info.component.scss' ]
+})
+export class UserRealQuotaInfoComponent implements OnInit {
+  @Input() videoQuota: number | string
+
+  private serverConfig: HTMLServerConfig
+
+  constructor (private server: ServerService) { }
+
+  ngOnInit () {
+    this.serverConfig = this.server.getHTMLConfig()
+  }
+
+  isTranscodingInformationDisplayed () {
+    return this.serverConfig.transcoding.enabledResolutions.length !== 0 && this.getQuotaAsNumber() > 0
+  }
+
+  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 * this.getQuotaAsNumber()
+  }
+
+  private getQuotaAsNumber () {
+    return parseInt(this.videoQuota + '', 10)
+  }
+}