From 4e1592daa41f81667f914f37d36795e8c6c046c3 Mon Sep 17 00:00:00 2001 From: Ms Kimsible <1877318+kimsible@users.noreply.github.com> Date: Wed, 25 Aug 2021 11:38:10 +0200 Subject: 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 --- .../about-instance/about-instance.component.html | 2 +- .../contact-admin-modal.component.html | 2 +- .../contact-admin-modal.component.scss | 6 ++++ .../+videos/+video-edit/video-add.component.html | 41 +++++++++++++++++----- .../+videos/+video-edit/video-add.component.scss | 21 +++++++---- .../app/+videos/+video-edit/video-add.component.ts | 36 ++++++++++++++++++- client/src/app/core/users/user.model.ts | 26 ++++++++++++++ 7 files changed, 116 insertions(+), 18 deletions(-) (limited to 'client') 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 @@

About {{ instanceName }}

- Contact administrator + Contact us
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 @@
-

Contact {{ instanceName }} administrator

+

Contact the administrator(s)

{{ instanceName }}

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 @@ -
-
-
Sorry, the upload feature is disabled for your account. If you want to add videos, an admin must unlock your quota.
- Read instance rules for help + + Read instance rules for help + Contact us + + + +
+
{{ uploadMessages.noQuota }}
+
- defeated mascot -
-
-
+
+ defeated mascot +
+ + + +
+
{{ uploadMessages.autoBlock }}
+ +
+ +
+
{{ uploadMessages.quotaLeftDaily }}
+ +
+ +
+
{{ uploadMessages.quotaLeft }}
+ +
+ +
We recommend you to not use the root user to publish your videos, since it's the super-admin account of your instance.
Instead, create a dedicated account to upload your videos.
+ +
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 + } } -- cgit v1.2.3