Add alert and hide upload view when no upload is possible (#2966)

* Add alert and hide upload view when no upload is possible

* Add about instance link to alert

* Hide videos and imports links when no upload is possible

* Correct curly spacing lint

* Put logic canUpload to User model + add isHidden param to to-menu-dropdown

* Use canSeeVideoLinks from user model

* Rename and change logic canUpload to isUploadDisabled

* Use isDisplayed() method intead of isHidden value

* Refactor client and check videos count using quota

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

3 files changed, 43 insertions, 5 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 5690ac37f..14d41f95b 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -1,4 +1,12 @@
-<div class="margin-content">
+<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>
+  </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>
     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 />
@@ -45,4 +53,4 @@
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
-</div>
+</div>
\ No newline at end of file
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 f9977bda0..5db9e823d 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -6,6 +6,34 @@ $border-type: solid;
 $border-color: #EAEAEA;
 $nav-link-height: 40px;
 
+.no-upload {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+
+  .about-link {
+    @include peertube-button-link;
+    @include orange-button;
+
+    height: fit-content;
+    margin-top: 10px;
+  }
+
+  img {
+    margin-top: 10px;
+    margin-bottom: 75px;
+    width: 220px;
+    height: auto;
+  }
+
+  @media screen and (max-height: 600px) {
+    img {
+      margin-top: 5px;
+      width: 160px;
+    }
+  }
+}
+
 .margin-content {
   padding-top: 20px;
 }
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 016791d59..94e85efc1 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-import { AuthService, CanComponentDeactivate, ServerService, User } from '@app/core'
+import { AuthService, AuthUser, CanComponentDeactivate, ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
 import { VideoImportTorrentComponent } from './video-add-components/video-import-torrent.component'
 import { VideoImportUrlComponent } from './video-add-components/video-import-url.component'
@@ -15,7 +15,7 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
   @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
 
-  user: User = null
+  user: AuthUser = null
 
   secondStepType: 'upload' | 'import-url' | 'import-torrent'
   videoName: string
@@ -37,6 +37,8 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
 
     this.serverService.getConfig()
       .subscribe(config => this.serverConfig = config)
+
+    this.user = this.auth.getUser()
   }
 
   onFirstStepDone (type: 'upload' | 'import-url' | 'import-torrent', videoName: string) {
@@ -80,6 +82,6 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   }
 
   isRootUser () {
-    return this.auth.getUser().username === 'root'
+    return this.user.username === 'root'
   }
 }