From 2e7f262724dd64a209e0bad5930ba29bb4f801c3 Mon Sep 17 00:00:00 2001 From: Kim <1877318+kimsible@users.noreply.github.com> Date: Fri, 24 Jul 2020 08:53:25 +0200 Subject: [PATCH] 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 --- .../my-account-settings.component.html | 16 +---- .../my-account-settings.component.scss | 21 +----- .../my-account-settings.component.ts | 38 ----------- .../+video-edit/video-add.component.html | 2 + .../+video-edit/video-add.component.scss | 6 +- .../+video-edit/video-add.component.ts | 10 ++- .../shared/shared-main/shared-main.module.ts | 4 +- .../src/app/shared/shared-main/users/index.ts | 1 + .../users/user-quota.component.html | 21 ++++++ .../users/user-quota.component.scss | 31 +++++++++ .../shared-main/users/user-quota.component.ts | 68 +++++++++++++++++++ 11 files changed, 141 insertions(+), 77 deletions(-) create mode 100644 client/src/app/shared/shared-main/users/user-quota.component.html create mode 100644 client/src/app/shared/shared-main/users/user-quota.component.scss create mode 100644 client/src/app/shared/shared-main/users/user-quota.component.ts 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 eb7bb0d6f..2ad014f01 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 @@ -14,21 +14,7 @@
-
-
-
-
{{ userVideoQuotaUsed | bytes: 0 }}
- {{ userVideoQuota }} -
-
- -
-
-
{{ userVideoQuotaUsedDaily | bytes: 0 }}
- {{ userVideoQuotaDaily }} -
-
-
+
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 1cdb1fab4..d17cd931e 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 @@ -1,15 +1,6 @@ @import '_variables'; @import '_mixins'; -.user-quota { - font-size: 15px; - margin-top: 20px; - - label { - margin-right: 5px; - } -} - .account-title { @include settings-big-title; @@ -18,14 +9,6 @@ } } -.progress { - @include progressbar; - width: 500px; - max-width: 100%; -} - -@media screen and (max-width: $small-view) { - .progress { - width: 100%; - } +.form-group { + max-width: 500px; } 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 a9a150e21..a3a8ff1f1 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 @@ -1,4 +1,3 @@ -import { BytesPipe } from 'ngx-pipes' import { ViewportScroller } from '@angular/common' import { AfterViewChecked, Component, OnInit } from '@angular/core' import { AuthService, Notifier, User, UserService } from '@app/core' @@ -12,14 +11,6 @@ import { I18n } from '@ngx-translate/i18n-polyfill' export class MyAccountSettingsComponent implements OnInit, AfterViewChecked { user: User = null - userVideoQuota = '0' - userVideoQuotaUsed = 0 - userVideoQuotaPercentage = 15 - - userVideoQuotaDaily = '0' - userVideoQuotaUsedDaily = 0 - userVideoQuotaDailyPercentage = 15 - private lastScrollHash: string constructor ( @@ -36,31 +27,6 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked { ngOnInit () { this.user = this.authService.getUser() - - this.authService.userInformationLoaded.subscribe( - () => { - if (this.user.videoQuota !== -1) { - this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() - } 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 - this.userVideoQuotaPercentage = this.userVideoQuotaUsed * 100 / this.user.videoQuota - - this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily - this.userVideoQuotaDailyPercentage = this.userVideoQuotaUsedDaily * 100 / this.user.videoQuotaDaily - }) } ngAfterViewChecked () { @@ -83,8 +49,4 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked { err => this.notifier.error(err.message) ) } - - hasDailyQuota () { - return this.user.videoQuotaDaily !== -1 - } } 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, create a dedicated account to upload your videos. + +
Import {{ videoName }} Upload {{ videoName }} 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() diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 732914e34..22a207e51 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -26,7 +26,7 @@ import { DateToggleComponent } from './date' import { FeedComponent } from './feeds' import { LoaderComponent, SmallLoaderComponent } from './loaders' import { HelpComponent, ListOverflowComponent, TopMenuDropdownComponent } from './misc' -import { UserHistoryService, UserNotificationsComponent, UserNotificationService } from './users' +import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' import { VideoCaptionService } from './video-caption' import { VideoChannelService } from './video-channel' @@ -83,6 +83,7 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth' ListOverflowComponent, TopMenuDropdownComponent, + UserQuotaComponent, UserNotificationsComponent ], @@ -132,6 +133,7 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth' ListOverflowComponent, TopMenuDropdownComponent, + UserQuotaComponent, UserNotificationsComponent ], diff --git a/client/src/app/shared/shared-main/users/index.ts b/client/src/app/shared/shared-main/users/index.ts index 83401ab52..130082af6 100644 --- a/client/src/app/shared/shared-main/users/index.ts +++ b/client/src/app/shared/shared-main/users/index.ts @@ -2,3 +2,4 @@ export * from './user-history.service' export * from './user-notification.model' export * from './user-notification.service' export * from './user-notifications.component' +export * from './user-quota.component' diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html new file mode 100644 index 000000000..f9fb32133 --- /dev/null +++ b/client/src/app/shared/shared-main/users/user-quota.component.html @@ -0,0 +1,21 @@ +
+
+ Total video quota +
+
+ {{ userVideoQuotaUsed | bytes: 0 }}
+ {{ userVideoQuota }} +
+
+ +
+ Daily video quota +
+
+ {{ userVideoQuotaUsedDaily | bytes: 0 }}
+ {{ userVideoQuotaDaily }} +
+
+
\ No newline at end of file diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss new file mode 100644 index 000000000..904add0f4 --- /dev/null +++ b/client/src/app/shared/shared-main/users/user-quota.component.scss @@ -0,0 +1,31 @@ +@import '_variables'; +@import '_mixins'; + +.user-quota { + font-size: 15px; + margin-top: 20px; + + label { + margin-right: 5px; + } + + &, .progress { + width: 100% !important; + } + + .user-quota-title, .progress { + @include disable-outline; + @include button-focus(pvar(--mainColorLightest)); + } + + .progress { + @include progressbar; + + height: 2rem; + + span { + align-self: center; + } + } +} + diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts new file mode 100644 index 000000000..a8f56e4d6 --- /dev/null +++ b/client/src/app/shared/shared-main/users/user-quota.component.ts @@ -0,0 +1,68 @@ +import { Subject } from 'rxjs' +import { BytesPipe } from 'ngx-pipes' +import { Component, Input, OnInit } from '@angular/core' +import { User, UserService } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' + +@Component({ + selector: 'my-user-quota', + templateUrl: './user-quota.component.html', + styleUrls: ['./user-quota.component.scss'] +}) + +export class UserQuotaComponent implements OnInit { + @Input() user: User = null + @Input() userInformationLoaded: Subject + + userVideoQuota = '0' + userVideoQuotaUsed = 0 + userVideoQuotaPercentage = 15 + + userVideoQuotaDaily = '0' + userVideoQuotaUsedDaily = 0 + userVideoQuotaDailyPercentage = 15 + + constructor ( + private userService: UserService, + private i18n: I18n + ) { } + + ngOnInit () { + this.userInformationLoaded.subscribe( + () => { + if (this.user.videoQuota !== -1) { + this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() + } 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 + this.userVideoQuotaPercentage = this.userVideoQuotaUsed * 100 / this.user.videoQuota + + this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily + this.userVideoQuotaDailyPercentage = this.userVideoQuotaUsedDaily * 100 / this.user.videoQuotaDaily + }) + } + + hasDailyQuota () { + return this.user.videoQuotaDaily !== -1 + } + + titleVideoQuota () { + return `${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}` + } + + titleVideoQuotaDaily () { + return `${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}` + } +} -- 2.41.0