Alert user for low quota and video auto-block on upload page (#4336)

* Replace wording of instance contact

* Add contact-us button to no-quota alert on upload page

* Add alert for accounts with auto-blocked videos on upload page

* Add alert for accounts without enough quota + refacto on upload page

* Using ng-container and ng-template

* Add alert for daily quota

* Add hook filter for upload page alert messages

* Add instance name as subtitle in contact modal

* Fix eslint max-len on  string

* Fix missing word in quota left daily message - upload page

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

7 files changed, 116 insertions, 18 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 436d486ab..1026c4e0d 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -4,7 +4,7 @@
     <div class="about-instance-title">
       <h1 i18n class="title">About {{ instanceName }}</h1>
 
-      <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact administrator</a>
+      <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact us</a>
     </div>
 
     <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 8b6b707af..ed027af44 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -1,6 +1,6 @@
 <ng-template #modal>
   <div class="modal-header">
-    <h1 i18n class="modal-title">Contact {{ instanceName }} administrator</h1>
+    <h1 i18n class="modal-title">Contact the administrator(s)<p class="modal-subtitle">{{ instanceName }}</p></h1>
     <my-global-icon iconName="cross" aria-label="Close" tabindex="0" role="button" (click)="hide()" (keydown.enter)="hide()"></my-global-icon>
   </div>
 
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index c0b451b4e..e143a9dc6 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -1,6 +1,12 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.modal-subtitle {
+  font-size: 16px;
+  line-height: 1rem;
+  margin-bottom: 0;
+}
+
 .modal-body {
   text-align: left;
 }
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 ac75d9ff8..b056c6e7a 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -1,18 +1,43 @@
-<div *ngIf="user.isUploadDisabled()" class="no-upload">
-  <div class="alert alert-warning">
-    <div i18n>Sorry, the upload feature is disabled for your account. If you want to add videos, an admin must unlock your quota.</div>
-    <a i18n routerLink="/about/instance" class="about-link">Read instance rules for help</a>
+<ng-template #AlertButtons>
+  <a i18n routerLink="/about/instance" *ngIf="!isContactFormEnabled" class="about-link">Read instance rules for help</a>
+  <a i18n routerLink="/about/contact" *ngIf="isContactFormEnabled" class="contact-link">Contact us</a>
+</ng-template>
+
+<ng-container *ngIf="user.isUploadDisabled()">
+  <div class="upload-message upload-disabled alert alert-warning">
+    <div>{{ uploadMessages.noQuota }}</div>
+    <ng-template [ngTemplateOutlet]="AlertButtons"></ng-template>
   </div>
-  <img src="/client/assets/images/mascot/defeated.svg" alt="defeated mascot">
-</div>
 
-<div *ngIf="!user.isUploadDisabled()" class="margin-content">
-  <div class="alert alert-warning" *ngIf="isRootUser()" i18n>
+  <div class="upload-image">
+    <img src="/client/assets/images/mascot/defeated.svg" alt="defeated mascot">
+  </div>
+</ng-container>
+
+<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>
+  </div>
+
+  <div *ngIf="user.hasNoQuotaLeft()" class="upload-message quota-daily-left alert alert-warning">
+    <div>{{ uploadMessages.quotaLeftDaily }}</div>
+    <ng-template [ngTemplateOutlet]="AlertButtons" *ngIf="!user.hasNoQuotaLeft()"></ng-template>
+  </div>
+
+  <div *ngIf="user.hasNoQuotaLeft()" class="upload-message quota-left alert alert-warning">
+    <div>{{ uploadMessages.quotaLeft }}</div>
+    <ng-template [ngTemplateOutlet]="AlertButtons"></ng-template>
+  </div>
+
+  <div *ngIf="isRootUser()" class="upload-message root-user alert alert-warning" i18n>
     We recommend you to not use the <strong>root</strong> user to publish your videos, since it's the super-admin account of your instance.
     <br />
     Instead, <a routerLink="/admin/users">create a dedicated account</a> to upload your videos.
   </div>
+</ng-container>
 
+<div *ngIf="!user.isUploadDisabled()" class="margin-content">
   <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
   <div class="title-page title-page-single" *ngIf="isInSecondStep()">
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 dea6fde36..26be86d29 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -6,18 +6,29 @@ $border-type: solid;
 $border-color: #EAEAEA;
 $nav-link-height: 40px;
 
-.no-upload {
-  height: 100%;
+.upload-message {
   width: 100%;
   text-align: center;
+  font-size: 15px;
+  margin-bottom: 0;
+
+  &:last-child {
+    margin-bottom: 1rem;
+  }
 
-  .about-link {
+  .about-link,
+  .contact-link {
     @include peertube-button-link;
     @include orange-button;
 
     height: fit-content;
     margin-top: 10px;
   }
+}
+
+.upload-image {
+  width: 100%;
+  text-align: center;
 
   img {
     margin-top: 10px;
@@ -38,10 +49,6 @@ $nav-link-height: 40px;
   padding-top: 20px;
 }
 
-.alert {
-  font-size: 15px;
-}
-
 ::ng-deep .video-add-nav {
   border-bottom: $border-width $border-type $border-color;
   margin: 20px 0 0 !important;
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 8606b8222..1443c64af 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,6 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { AuthService, AuthUser, CanComponentDeactivate, ServerService } from '@app/core'
+import { AuthService, AuthUser, CanComponentDeactivate, HooksService, ServerService } 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'
@@ -26,15 +26,27 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
 
   activeNav: string
 
+  uploadMessages: {
+    noQuota: string
+    autoBlock: string
+    quotaLeftDaily: string
+    quotaLeft: string
+  }
+
   private serverConfig: HTMLServerConfig
 
   constructor (
     private auth: AuthService,
+    private hooks: HooksService,
     private serverService: ServerService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
 
+  get isContactFormEnabled () {
+    return this.serverConfig.email.enabled && this.serverConfig.contactForm.enabled
+  }
+
   get userInformationLoaded () {
     return this.auth.userInformationLoaded
   }
@@ -49,6 +61,28 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
     if (this.route.snapshot.fragment) {
       this.onNavChange(this.route.snapshot.fragment)
     }
+
+    this.buildUploadMessages()
+  }
+
+  private async buildUploadMessages () {
+    // eslint-disable-next-line max-len
+    const noQuota = $localize`Sorry, the upload feature is disabled for your account. If you want to add videos, an admin must unlock your quota.`
+    // eslint-disable-next-line max-len
+    const autoBlock = $localize`Uploaded videos are reviewed before publishing for your account. If you want to add videos without moderation review, an admin must turn off your videos auto-block.`
+    // eslint-disable-next-line max-len
+    const quotaLeftDaily = $localize`Your daily video quota is insufficient. If you want to add more videos, you must wait for 24 hours or an admin must increase your daily quota.`
+    // eslint-disable-next-line max-len
+    const quotaLeft = $localize`Your video quota is insufficient. If you want to add more videos, an admin must increase your quota.`
+
+    const uploadMessages = {
+      noQuota,
+      autoBlock,
+      quotaLeftDaily,
+      quotaLeft
+    }
+
+    this.uploadMessages = await this.hooks.wrapObject(uploadMessages, 'common', 'filter:upload-page.alert-messages.edit.result')
   }
 
   onNavChange (newActiveNav: string) {
diff --git a/client/src/app/core/users/user.model.ts b/client/src/app/core/users/user.model.ts
index 7d03e1c40..5e1fb1c8d 100644
--- a/client/src/app/core/users/user.model.ts
+++ b/client/src/app/core/users/user.model.ts
@@ -133,4 +133,30 @@ export class User implements UserServerModel {
   isUploadDisabled () {
     return this.videoQuota === 0 || this.videoQuotaDaily === 0
   }
+
+  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
+  }
 }