mirror of https://github.com/Chocobozzz/PeerTube
Add initial video quota info in registration form
parent
e33e7fc89e
commit
5afdd0a52f
|
@ -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 { MarkdownService } from '@app/videos/shared'
|
||||||
import { TooltipDirective } from 'ngx-bootstrap/tooltip'
|
import { TooltipDirective } from 'ngx-bootstrap/tooltip'
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ import { TooltipDirective } from 'ngx-bootstrap/tooltip'
|
||||||
templateUrl: './help.component.html'
|
templateUrl: './help.component.html'
|
||||||
})
|
})
|
||||||
|
|
||||||
export class HelpComponent implements OnInit {
|
export class HelpComponent implements OnInit, OnChanges {
|
||||||
@ViewChild('tooltipDirective') tooltipDirective: TooltipDirective
|
@ViewChild('tooltipDirective') tooltipDirective: TooltipDirective
|
||||||
@Input() preHtml = ''
|
@Input() preHtml = ''
|
||||||
@Input() postHtml = ''
|
@Input() postHtml = ''
|
||||||
|
@ -20,6 +20,23 @@ export class HelpComponent implements OnInit {
|
||||||
constructor (private elementRef: ElementRef) { }
|
constructor (private elementRef: ElementRef) { }
|
||||||
|
|
||||||
ngOnInit () {
|
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') {
|
if (this.helpType === 'custom') {
|
||||||
this.mainHtml = this.customHtml
|
this.mainHtml = this.customHtml
|
||||||
return
|
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[]) {
|
private formatMarkdownSupport (rules: string[]) {
|
||||||
return '<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> ' +
|
return '<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> ' +
|
||||||
'compatible that supports:' +
|
'compatible that supports:' +
|
||||||
|
|
|
@ -17,10 +17,6 @@ function getParameterByName (name: string, url: string) {
|
||||||
return decodeURIComponent(results[2].replace(/\+/g, ' '))
|
return decodeURIComponent(results[2].replace(/\+/g, ' '))
|
||||||
}
|
}
|
||||||
|
|
||||||
function viewportHeight () {
|
|
||||||
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
function populateAsyncUserVideoChannels (authService: AuthService, channel: any[]) {
|
function populateAsyncUserVideoChannels (authService: AuthService, channel: any[]) {
|
||||||
return new Promise(res => {
|
return new Promise(res => {
|
||||||
authService.userInformationLoaded
|
authService.userInformationLoaded
|
||||||
|
@ -99,7 +95,6 @@ function isInMobileView () {
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
viewportHeight,
|
|
||||||
getParameterByName,
|
getParameterByName,
|
||||||
populateAsyncUserVideoChannels,
|
populateAsyncUserVideoChannels,
|
||||||
getAbsoluteAPIUrl,
|
getAbsoluteAPIUrl,
|
||||||
|
|
|
@ -4,6 +4,20 @@
|
||||||
Create an account
|
Create an account
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="initial-user-quota">
|
||||||
|
<span class="initial-user-quota-label">Initial video quota:</span>
|
||||||
|
|
||||||
|
<span *ngIf="initialUserVideoQuota !== -1">
|
||||||
|
{{ initialUserVideoQuota | bytes: 0 }}
|
||||||
|
|
||||||
|
<my-help helpType="custom" [customHtml]="quotaHelpIndication"></my-help>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<ng-template [ngIf]="initialUserVideoQuota === -1">
|
||||||
|
Unlimited
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||||
|
|
||||||
<form role="form" (ngSubmit)="signup()" [formGroup]="form">
|
<form role="form" (ngSubmit)="signup()" [formGroup]="form">
|
||||||
|
|
|
@ -1,6 +1,20 @@
|
||||||
@import '_variables';
|
@import '_variables';
|
||||||
@import '_mixins';
|
@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]) {
|
input:not([type=submit]) {
|
||||||
@include peertube-input-text(340px);
|
@include peertube-input-text(340px);
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -1,18 +1,11 @@
|
||||||
import { Component, OnInit } from '@angular/core'
|
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 { Router } from '@angular/router'
|
||||||
|
import { ServerService } from '@app/core/server'
|
||||||
|
|
||||||
import { NotificationsService } from 'angular2-notifications'
|
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 { UserCreate } from '../../../../shared'
|
||||||
|
import { FormReactive, USER_EMAIL, USER_PASSWORD, USER_USERNAME, UserService } from '../shared'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-signup',
|
selector: 'my-signup',
|
||||||
|
@ -21,6 +14,7 @@ import { UserCreate } from '../../../../shared'
|
||||||
})
|
})
|
||||||
export class SignupComponent extends FormReactive implements OnInit {
|
export class SignupComponent extends FormReactive implements OnInit {
|
||||||
error: string = null
|
error: string = null
|
||||||
|
quotaHelpIndication = ''
|
||||||
|
|
||||||
form: FormGroup
|
form: FormGroup
|
||||||
formErrors = {
|
formErrors = {
|
||||||
|
@ -34,15 +28,32 @@ export class SignupComponent extends FormReactive implements OnInit {
|
||||||
'password': USER_PASSWORD.MESSAGES
|
'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 (
|
constructor (
|
||||||
private formBuilder: FormBuilder,
|
private formBuilder: FormBuilder,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private notificationsService: NotificationsService,
|
private notificationsService: NotificationsService,
|
||||||
private userService: UserService
|
private userService: UserService,
|
||||||
|
private serverService: ServerService
|
||||||
) {
|
) {
|
||||||
super()
|
super()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get initialUserVideoQuota () {
|
||||||
|
return this.serverService.getConfig().user.videoQuota
|
||||||
|
}
|
||||||
|
|
||||||
buildForm () {
|
buildForm () {
|
||||||
this.form = this.formBuilder.group({
|
this.form = this.formBuilder.group({
|
||||||
username: [ '', USER_USERNAME.VALIDATORS ],
|
username: [ '', USER_USERNAME.VALIDATORS ],
|
||||||
|
@ -55,6 +66,9 @@ export class SignupComponent extends FormReactive implements OnInit {
|
||||||
|
|
||||||
ngOnInit () {
|
ngOnInit () {
|
||||||
this.buildForm()
|
this.buildForm()
|
||||||
|
|
||||||
|
this.serverService.configLoaded
|
||||||
|
.subscribe(() => this.buildQuotaHelpIndication())
|
||||||
}
|
}
|
||||||
|
|
||||||
signup () {
|
signup () {
|
||||||
|
@ -71,4 +85,25 @@ export class SignupComponent extends FormReactive implements OnInit {
|
||||||
err => this.error = err.message
|
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('<br />')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue