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>

3 files changed, 14 insertions, 4 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 79bfc6e5c..5690ac37f 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -5,6 +5,8 @@
     Instead, <a routerLink="/admin/users">create a dedicated account</a> to upload your videos.
   </div>
 
+  <my-user-quota *ngIf="!isInSecondStep()" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
+
   <div class="title-page title-page-single" *ngIf="isInSecondStep()">
     <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
     <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
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 b9fef9fce..f9977bda0 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -7,7 +7,7 @@ $border-color: #EAEAEA;
 $nav-link-height: 40px;
 
 .margin-content {
-  padding-top: 50px;
+  padding-top: 20px;
 }
 
 .alert {
@@ -16,7 +16,7 @@ $nav-link-height: 40px;
 
 ::ng-deep .video-add-nav {
   border-bottom: $border-width $border-type $border-color;
-  margin: 50px 0 0 0 !important;
+  margin: 20px 0 0 0 !important;
 
   &.hide-nav {
     display: none !important;
@@ -64,7 +64,7 @@ $nav-link-height: 40px;
   padding-bottom: 20px;
   display: flex;
   justify-content: center;
-  align-items: center;
+  padding-top: 20px;
 
   &.dragover {
     border: 3px dashed pvar(--mainColor);
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 5bd768809..016791d59 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 } from '@app/core'
+import { AuthService, CanComponentDeactivate, ServerService, User } 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,6 +15,8 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
   @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
   @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
 
+  user: User = null
+
   secondStepType: 'upload' | 'import-url' | 'import-torrent'
   videoName: string
   serverConfig: ServerConfig
@@ -24,7 +26,13 @@ export class VideoAddComponent implements OnInit, CanComponentDeactivate {
     private serverService: ServerService
   ) {}
 
+  get userInformationLoaded () {
+    return this.auth.userInformationLoaded
+  }
+
   ngOnInit () {
+    this.user = this.auth.getUser()
+
     this.serverConfig = this.serverService.getTmpConfig()
 
     this.serverService.getConfig()