Display user quota progress bars above upload form (#2981)

* Move user-quota to my-user-quota shared component

* Add user-quota to upload form

* Increase progress bar height and make it focusable

* Correct syntax parenthesis

* Add explicit title to user-quota bars + tooltip with quota values

* Hide user-quota in second upload step

* Customize focus styles on user-quota

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

3 files changed, 3 insertions, 72 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index eb7bb0d6f..2ad014f01 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -14,21 +14,7 @@
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
-    <div class="user-quota mb-3">
-      <div>
-        <div class="progress" i18n-title title="Total video quota">
-          <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota">{{ userVideoQuotaUsed | bytes: 0 }}</div>
-          <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
-        </div>
-      </div>
-
-      <div *ngIf="hasDailyQuota()" class="mt-3">
-        <div class="progress" i18n-title title="Daily video quota">
-          <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
-          <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
-        </div>
-      </div>
-    </div>
+    <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
     <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
   </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 1cdb1fab4..d17cd931e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,15 +1,6 @@
 @import '_variables';
 @import '_mixins';
 
-.user-quota {
-  font-size: 15px;
-  margin-top: 20px;
-
-  label {
-    margin-right: 5px;
-  }
-}
-
 .account-title {
   @include settings-big-title;
 
@@ -18,14 +9,6 @@
   }
 }
 
-.progress {
-  @include progressbar;
-  width: 500px;
-  max-width: 100%;
-}
-
-@media screen and (max-width: $small-view) {
-  .progress {
-    width: 100%;
-  }
+.form-group {
+  max-width: 500px;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index a9a150e21..a3a8ff1f1 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -1,4 +1,3 @@
-import { BytesPipe } from 'ngx-pipes'
 import { ViewportScroller } from '@angular/common'
 import { AfterViewChecked, Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, User, UserService } from '@app/core'
@@ -12,14 +11,6 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
   user: User = null
 
-  userVideoQuota = '0'
-  userVideoQuotaUsed = 0
-  userVideoQuotaPercentage = 15
-
-  userVideoQuotaDaily = '0'
-  userVideoQuotaUsedDaily = 0
-  userVideoQuotaDailyPercentage = 15
-
   private lastScrollHash: string
 
   constructor (
@@ -36,31 +27,6 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
 
   ngOnInit () {
     this.user = this.authService.getUser()
-
-    this.authService.userInformationLoaded.subscribe(
-      () => {
-        if (this.user.videoQuota !== -1) {
-          this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
-        } else {
-          this.userVideoQuota = this.i18n('Unlimited')
-        }
-
-        if (this.user.videoQuotaDaily !== -1) {
-          this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString()
-        } else {
-          this.userVideoQuotaDaily = this.i18n('Unlimited')
-        }
-      }
-    )
-
-    this.userService.getMyVideoQuotaUsed()
-      .subscribe(data => {
-        this.userVideoQuotaUsed = data.videoQuotaUsed
-        this.userVideoQuotaPercentage = this.userVideoQuotaUsed * 100 / this.user.videoQuota
-
-        this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
-        this.userVideoQuotaDailyPercentage = this.userVideoQuotaUsedDaily * 100 / this.user.videoQuotaDaily
-      })
   }
 
   ngAfterViewChecked () {
@@ -83,8 +49,4 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
         err => this.notifier.error(err.message)
       )
   }
-
-  hasDailyQuota () {
-    return this.user.videoQuotaDaily !== -1
-  }
 }