From 5afdd0a52f2f1fa79ed9bf241b5a525366658fa1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Mar 2018 17:05:46 +0200 Subject: [PATCH] Add initial video quota info in registration form --- client/src/app/shared/misc/help.component.ts | 30 +++++++---- client/src/app/shared/misc/utils.ts | 5 -- client/src/app/signup/signup.component.html | 14 +++++ client/src/app/signup/signup.component.scss | 14 +++++ client/src/app/signup/signup.component.ts | 57 ++++++++++++++++---- 5 files changed, 93 insertions(+), 27 deletions(-) diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts index 19ac38b58..89dd1dae5 100644 --- a/client/src/app/shared/misc/help.component.ts +++ b/client/src/app/shared/misc/help.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core' +import { Component, ElementRef, HostListener, Input, OnInit, ViewChild, OnChanges } from '@angular/core' import { MarkdownService } from '@app/videos/shared' import { TooltipDirective } from 'ngx-bootstrap/tooltip' @@ -8,7 +8,7 @@ import { TooltipDirective } from 'ngx-bootstrap/tooltip' templateUrl: './help.component.html' }) -export class HelpComponent implements OnInit { +export class HelpComponent implements OnInit, OnChanges { @ViewChild('tooltipDirective') tooltipDirective: TooltipDirective @Input() preHtml = '' @Input() postHtml = '' @@ -20,6 +20,23 @@ export class HelpComponent implements OnInit { constructor (private elementRef: ElementRef) { } ngOnInit () { + this.init() + } + + ngOnChanges () { + this.init() + } + + @HostListener('document:click', ['$event.target']) + public onClick (targetElement) { + const clickedInside = this.elementRef.nativeElement.contains(targetElement) + + if (this.tooltipDirective.isOpen && !clickedInside) { + this.tooltipDirective.hide() + } + } + + private init () { if (this.helpType === 'custom') { this.mainHtml = this.customHtml return @@ -36,15 +53,6 @@ export class HelpComponent implements OnInit { } } - @HostListener('document:click', ['$event.target']) - public onClick (targetElement) { - const clickedInside = this.elementRef.nativeElement.contains(targetElement) - - if (this.tooltipDirective.isOpen && !clickedInside) { - this.tooltipDirective.hide() - } - } - private formatMarkdownSupport (rules: string[]) { return 'Markdown ' + 'compatible that supports:' + diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index d520b1a7b..99f6b3cf0 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -17,10 +17,6 @@ function getParameterByName (name: string, url: string) { return decodeURIComponent(results[2].replace(/\+/g, ' ')) } -function viewportHeight () { - return Math.max(document.documentElement.clientHeight, window.innerHeight || 0) -} - function populateAsyncUserVideoChannels (authService: AuthService, channel: any[]) { return new Promise(res => { authService.userInformationLoaded @@ -99,7 +95,6 @@ function isInMobileView () { } export { - viewportHeight, getParameterByName, populateAsyncUserVideoChannels, getAbsoluteAPIUrl, diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html index f95897ea4..5f48786e5 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html @@ -4,6 +4,20 @@ Create an account +
+ Initial video quota: + + + {{ initialUserVideoQuota | bytes: 0 }} + + + + + + Unlimited + +
+
{{ error }}
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss index efec6b706..6efb95ea6 100644 --- a/client/src/app/signup/signup.component.scss +++ b/client/src/app/signup/signup.component.scss @@ -1,6 +1,20 @@ @import '_variables'; @import '_mixins'; +.initial-user-quota { + font-size: 15px; + margin-bottom: 20px; + + .initial-user-quota-label { + font-weight: $font-semibold; + } + + my-help { + margin-left: 5px; + } +} + + input:not([type=submit]) { @include peertube-input-text(340px); display: block; diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts index 13390a32a..93d73a11e 100644 --- a/client/src/app/signup/signup.component.ts +++ b/client/src/app/signup/signup.component.ts @@ -1,18 +1,11 @@ import { Component, OnInit } from '@angular/core' -import { FormBuilder, FormGroup, Validators } from '@angular/forms' +import { FormBuilder, FormGroup } from '@angular/forms' import { Router } from '@angular/router' +import { ServerService } from '@app/core/server' import { NotificationsService } from 'angular2-notifications' - -import { AuthService } from '../core' -import { - FormReactive, - UserService, - USER_USERNAME, - USER_EMAIL, - USER_PASSWORD -} from '../shared' import { UserCreate } from '../../../../shared' +import { FormReactive, USER_EMAIL, USER_PASSWORD, USER_USERNAME, UserService } from '../shared' @Component({ selector: 'my-signup', @@ -21,6 +14,7 @@ import { UserCreate } from '../../../../shared' }) export class SignupComponent extends FormReactive implements OnInit { error: string = null + quotaHelpIndication = '' form: FormGroup formErrors = { @@ -34,15 +28,32 @@ export class SignupComponent extends FormReactive implements OnInit { 'password': USER_PASSWORD.MESSAGES } + private static getApproximateTime (seconds: number) { + const hours = Math.floor(seconds / 3600) + let pluralSuffix = '' + if (hours > 1) pluralSuffix = 's' + if (hours > 0) return `~ ${hours} hour${pluralSuffix}` + + const minutes = Math.floor(seconds % 3600 / 60) + if (minutes > 1) pluralSuffix = 's' + + return `~ ${minutes} minute${pluralSuffix}` + } + constructor ( private formBuilder: FormBuilder, private router: Router, private notificationsService: NotificationsService, - private userService: UserService + private userService: UserService, + private serverService: ServerService ) { super() } + get initialUserVideoQuota () { + return this.serverService.getConfig().user.videoQuota + } + buildForm () { this.form = this.formBuilder.group({ username: [ '', USER_USERNAME.VALIDATORS ], @@ -55,6 +66,9 @@ export class SignupComponent extends FormReactive implements OnInit { ngOnInit () { this.buildForm() + + this.serverService.configLoaded + .subscribe(() => this.buildQuotaHelpIndication()) } signup () { @@ -71,4 +85,25 @@ export class SignupComponent extends FormReactive implements OnInit { err => this.error = err.message ) } + + private buildQuotaHelpIndication () { + if (this.initialUserVideoQuota === -1) return + + const initialUserVideoQuotaBit = this.initialUserVideoQuota * 8 + + // 1080p: ~ 6Mbps + // 720p: ~ 4Mbps + // 360p: ~ 1.5Mbps + const fullHdSeconds = initialUserVideoQuotaBit / (6 * 1000 * 1000) + const hdSeconds = initialUserVideoQuotaBit / (4 * 1000 * 1000) + const normalSeconds = initialUserVideoQuotaBit / (1.5 * 1000 * 1000) + + const lines = [ + SignupComponent.getApproximateTime(fullHdSeconds) + ' of full HD videos', + SignupComponent.getApproximateTime(hdSeconds) + ' of HD videos', + SignupComponent.getApproximateTime(normalSeconds) + ' of normal quality videos' + ] + + this.quotaHelpIndication = lines.join('
') + } } -- 2.25.1