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>

1 files changed, 68 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts
new file mode 100644
index 000000000..a8f56e4d6
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-quota.component.ts
@@ -0,0 +1,68 @@
+import { Subject } from 'rxjs'
+import { BytesPipe } from 'ngx-pipes'
+import { Component, Input, OnInit } from '@angular/core'
+import { User, UserService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-user-quota',
+  templateUrl: './user-quota.component.html',
+  styleUrls: ['./user-quota.component.scss']
+})
+
+export class UserQuotaComponent implements OnInit {
+  @Input() user: User = null
+  @Input() userInformationLoaded: Subject<any>
+
+  userVideoQuota = '0'
+  userVideoQuotaUsed = 0
+  userVideoQuotaPercentage = 15
+
+  userVideoQuotaDaily = '0'
+  userVideoQuotaUsedDaily = 0
+  userVideoQuotaDailyPercentage = 15
+
+  constructor (
+    private userService: UserService,
+    private i18n: I18n
+  ) { }
+
+  ngOnInit () {
+    this.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
+      })
+  }
+
+  hasDailyQuota () {
+    return this.user.videoQuotaDaily !== -1
+  }
+
+  titleVideoQuota () {
+    return `${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}`
+  }
+
+  titleVideoQuotaDaily () {
+    return `${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}`
+  }
+}