Fix user quota alerts always displayed (#4354)

* Fix user quota alerts display on upload page

* Fix border-radius upload messages alerts

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

4 files changed, 40 insertions, 29 deletions

diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html
index 62b42ae10..7dd9ba357 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -17,15 +17,15 @@
 <ng-container *ngIf="!user.isUploadDisabled()">
   <div *ngIf="user.isAutoBlocked()" class="upload-message auto-blocked alert alert-warning">
     <div>{{ uploadMessages.autoBlock }}</div>
-    <ng-template [ngTemplateOutlet]="AlertButtons" *ngIf="!user.hasNoQuotaLeft() && !user.hasNoQuotaLeftDaily()"></ng-template>
+    <ng-template [ngTemplateOutlet]="AlertButtons" *ngIf="!hasNoQuotaLeft && !hasNoQuotaLeftDaily"></ng-template>
   </div>
 
-  <div *ngIf="user.hasNoQuotaLeft()" class="upload-message quota-daily-left alert alert-warning">
+  <div *ngIf="hasNoQuotaLeftDaily" class="upload-message quota-daily-left alert alert-warning">
     <div>{{ uploadMessages.quotaLeftDaily }}</div>
-    <ng-template [ngTemplateOutlet]="AlertButtons" *ngIf="!user.hasNoQuotaLeft()"></ng-template>
+    <ng-template [ngTemplateOutlet]="AlertButtons" *ngIf="!hasNoQuotaLeft"></ng-template>
   </div>
 
-  <div *ngIf="user.hasNoQuotaLeft()" class="upload-message quota-left alert alert-warning">
+  <div *ngIf="hasNoQuotaLeft" class="upload-message quota-left alert alert-warning">
     <div>{{ uploadMessages.quotaLeft }}</div>
     <ng-template [ngTemplateOutlet]="AlertButtons"></ng-template>
   </div>
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 26be86d29..0f0cc406c 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -11,6 +11,7 @@ $nav-link-height: 40px;
   text-align: center;
   font-size: 15px;
   margin-bottom: 0;
+  border-radius: 0;
 
   &:last-child {
     margin-bottom: 1rem;
diff --git a/client/src/app/+videos/+video-edit/video-add.component.ts b/client/src/app/+videos/+video-edit/video-add.component.ts
index a107ad123..46881be4e 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add.component.ts
@@ -1,6 +1,13 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, AuthUser, CanComponentDeactivate, HooksService, ServerService } from '@app/core'
+import {
+  AuthService,
+  AuthUser,
+  CanComponentDeactivate,
+  HooksService,
+  ServerService,
+  UserService
+} from '@app/core'
 import { HTMLServerConfig } from '@shared/models'
 import { VideoEditType } from './shared/video-edit.type'
 import { VideoGoLiveComponent } from './video-add-components/video-go-live.component'
@@ -33,10 +40,14 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
     quotaLeft: string
   }
 
+  hasNoQuotaLeft = false
+  hasNoQuotaLeftDaily = false
+
   private serverConfig: HTMLServerConfig
 
   constructor (
     private auth: AuthService,
+    private userService: UserService,
     private hooks: HooksService,
     private serverService: ServerService,
     private route: ActivatedRoute,
@@ -56,13 +67,34 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
 
     this.serverConfig = this.serverService.getHTMLConfig()
 
-    this.user = this.auth.getUser()
-
     if (this.route.snapshot.fragment) {
       this.onNavChange(this.route.snapshot.fragment)
     }
 
     this.buildUploadMessages()
+
+    this.userService.getMyVideoQuotaUsed()
+      .subscribe(data => {
+        // videoQuota left lower than 10%
+        if (data.videoQuotaUsed > this.user.videoQuota * 0.9) {
+          this.hasNoQuotaLeft = true
+        }
+
+        // unlimited videoQuota
+        if (this.user.videoQuota === -1) {
+          this.hasNoQuotaLeft = false
+        }
+
+        // videoQuotaDaily left lower than 10%
+        if (data.videoQuotaUsedDaily > this.user.videoQuotaDaily * 0.9) {
+          this.hasNoQuotaLeftDaily = true
+        }
+
+        // unlimited videoQuotaDaily
+        if (this.user.videoQuotaDaily === -1) {
+          this.hasNoQuotaLeftDaily = false
+        }
+      })
   }
 
   private async buildUploadMessages () {
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
index 5e1fb1c8d..7467519c4 100644
--- a/client/src/app/core/users/user.model.ts
+++ b/client/src/app/core/users/user.model.ts
@@ -137,26 +137,4 @@ export class User implements UserServerModel {
   isAutoBlocked () {
     return this.role === UserRole.USER && this.adminFlags !== UserAdminFlag.BYPASS_VIDEO_AUTO_BLACKLIST
   }
-
-  hasNoQuotaLeft () {
-    // unlimited videoQuota
-    if (this.videoQuota === -1) return false
-
-    // no more videoQuota
-    if (!this.videoQuotaUsed) return true
-
-    // videoQuota left lower than 10%
-    return this.videoQuotaUsed > this.videoQuota * 0.9
-  }
-
-  hasNoQuotaLeftDaily () {
-    // unlimited videoQuotaDaily
-    if (this.videoQuotaDaily === -1) return false
-
-    // no more videoQuotaDaily
-    if (!this.videoQuotaUsedDaily) return true
-
-    // videoQuotaDaily left lower than 10%
-    return this.videoQuotaUsedDaily > this.videoQuotaDaily * 0.9
-  }
 }