Clearer video quota label in user settings

3 files changed, 28 insertions, 2 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 eb9367d1f..9f187b574 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
@@ -1,7 +1,15 @@
 <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
 
 <div class="user-quota">
-  <span i18n class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
+  <div>
+    <span i18n class="user-quota-label">Total video quota:</span>
+    <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
+  </div>
+
+  <div *ngIf="hasDailyQuota()">
+    <span i18n class="user-quota-label">Daily video quota:</span>
+    <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
+  </div>
 </div>
 
 <div i18n class="account-title">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 16f26dfed..d0395aca9 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
@@ -6,6 +6,7 @@
   margin-top: 20px;
 
   .user-quota-label {
+    margin-right: 5px;
     font-weight: $font-semibold;
   }
 }
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 95fd2a3db..e314cdbea 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
@@ -13,9 +13,13 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 })
 export class MyAccountSettingsComponent implements OnInit {
   user: User = null
+
   userVideoQuota = '0'
   userVideoQuotaUsed = 0
 
+  userVideoQuotaDaily = '0'
+  userVideoQuotaUsedDaily = 0
+
   constructor (
     private userService: UserService,
     private authService: AuthService,
@@ -37,11 +41,20 @@ export class MyAccountSettingsComponent implements OnInit {
         } 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)
+      .subscribe(data => {
+        this.userVideoQuotaUsed = data.videoQuotaUsed
+        this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily
+      })
   }
 
   onAvatarChange (formData: FormData) {
@@ -56,4 +69,8 @@ export class MyAccountSettingsComponent implements OnInit {
         err => this.notifier.error(err.message)
       )
   }
+
+  hasDailyQuota () {
+    return this.user.videoQuotaDaily !== -1
+  }
 }