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 --- .../+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 ++++++++++++++++++- 3 files changed, 82 insertions(+), 16 deletions(-) (limited to 'client/src/app/+videos/+video-edit') 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) { -- cgit v1.2.3