aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/signup
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-28 17:05:46 +0200
committerChocobozzz <me@florianbigard.com>2018-03-28 17:05:46 +0200
commit5afdd0a52f2f1fa79ed9bf241b5a525366658fa1 (patch)
tree58bc17102b26893530ca64e757c2389361a36473 /client/src/app/signup
parente33e7fc89e4f0e2fbd1d7e87a4e2a2d5aae94f29 (diff)
downloadPeerTube-5afdd0a52f2f1fa79ed9bf241b5a525366658fa1.tar.gz
PeerTube-5afdd0a52f2f1fa79ed9bf241b5a525366658fa1.tar.zst
PeerTube-5afdd0a52f2f1fa79ed9bf241b5a525366658fa1.zip
Add initial video quota info in registration form
Diffstat (limited to 'client/src/app/signup')
-rw-r--r--client/src/app/signup/signup.component.html14
-rw-r--r--client/src/app/signup/signup.component.scss14
-rw-r--r--client/src/app/signup/signup.component.ts57
3 files changed, 74 insertions, 11 deletions
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 @@
4 Create an account 4 Create an account
5 </div> 5 </div>
6 6
7 <div class="initial-user-quota">
8 <span class="initial-user-quota-label">Initial video quota:</span>
9
10 <span *ngIf="initialUserVideoQuota !== -1">
11 {{ initialUserVideoQuota | bytes: 0 }}
12
13 <my-help helpType="custom" [customHtml]="quotaHelpIndication"></my-help>
14 </span>
15
16 <ng-template [ngIf]="initialUserVideoQuota === -1">
17 Unlimited
18 </ng-template>
19 </div>
20
7 <div *ngIf="error" class="alert alert-danger">{{ error }}</div> 21 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
8 22
9 <form role="form" (ngSubmit)="signup()" [formGroup]="form"> 23 <form role="form" (ngSubmit)="signup()" [formGroup]="form">
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 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.initial-user-quota {
5 font-size: 15px;
6 margin-bottom: 20px;
7
8 .initial-user-quota-label {
9 font-weight: $font-semibold;
10 }
11
12 my-help {
13 margin-left: 5px;
14 }
15}
16
17
4input:not([type=submit]) { 18input:not([type=submit]) {
5 @include peertube-input-text(340px); 19 @include peertube-input-text(340px);
6 display: block; 20 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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup, Validators } from '@angular/forms' 2import { FormBuilder, FormGroup } from '@angular/forms'
3import { Router } from '@angular/router' 3import { Router } from '@angular/router'
4import { ServerService } from '@app/core/server'
4 5
5import { NotificationsService } from 'angular2-notifications' 6import { NotificationsService } from 'angular2-notifications'
6
7import { AuthService } from '../core'
8import {
9 FormReactive,
10 UserService,
11 USER_USERNAME,
12 USER_EMAIL,
13 USER_PASSWORD
14} from '../shared'
15import { UserCreate } from '../../../../shared' 7import { UserCreate } from '../../../../shared'
8import { FormReactive, USER_EMAIL, USER_PASSWORD, USER_USERNAME, UserService } from '../shared'
16 9
17@Component({ 10@Component({
18 selector: 'my-signup', 11 selector: 'my-signup',
@@ -21,6 +14,7 @@ import { UserCreate } from '../../../../shared'
21}) 14})
22export class SignupComponent extends FormReactive implements OnInit { 15export class SignupComponent extends FormReactive implements OnInit {
23 error: string = null 16 error: string = null
17 quotaHelpIndication = ''
24 18
25 form: FormGroup 19 form: FormGroup
26 formErrors = { 20 formErrors = {
@@ -34,15 +28,32 @@ export class SignupComponent extends FormReactive implements OnInit {
34 'password': USER_PASSWORD.MESSAGES 28 'password': USER_PASSWORD.MESSAGES
35 } 29 }
36 30
31 private static getApproximateTime (seconds: number) {
32 const hours = Math.floor(seconds / 3600)
33 let pluralSuffix = ''
34 if (hours > 1) pluralSuffix = 's'
35 if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
36
37 const minutes = Math.floor(seconds % 3600 / 60)
38 if (minutes > 1) pluralSuffix = 's'
39
40 return `~ ${minutes} minute${pluralSuffix}`
41 }
42
37 constructor ( 43 constructor (
38 private formBuilder: FormBuilder, 44 private formBuilder: FormBuilder,
39 private router: Router, 45 private router: Router,
40 private notificationsService: NotificationsService, 46 private notificationsService: NotificationsService,
41 private userService: UserService 47 private userService: UserService,
48 private serverService: ServerService
42 ) { 49 ) {
43 super() 50 super()
44 } 51 }
45 52
53 get initialUserVideoQuota () {
54 return this.serverService.getConfig().user.videoQuota
55 }
56
46 buildForm () { 57 buildForm () {
47 this.form = this.formBuilder.group({ 58 this.form = this.formBuilder.group({
48 username: [ '', USER_USERNAME.VALIDATORS ], 59 username: [ '', USER_USERNAME.VALIDATORS ],
@@ -55,6 +66,9 @@ export class SignupComponent extends FormReactive implements OnInit {
55 66
56 ngOnInit () { 67 ngOnInit () {
57 this.buildForm() 68 this.buildForm()
69
70 this.serverService.configLoaded
71 .subscribe(() => this.buildQuotaHelpIndication())
58 } 72 }
59 73
60 signup () { 74 signup () {
@@ -71,4 +85,25 @@ export class SignupComponent extends FormReactive implements OnInit {
71 err => this.error = err.message 85 err => this.error = err.message
72 ) 86 )
73 } 87 }
88
89 private buildQuotaHelpIndication () {
90 if (this.initialUserVideoQuota === -1) return
91
92 const initialUserVideoQuotaBit = this.initialUserVideoQuota * 8
93
94 // 1080p: ~ 6Mbps
95 // 720p: ~ 4Mbps
96 // 360p: ~ 1.5Mbps
97 const fullHdSeconds = initialUserVideoQuotaBit / (6 * 1000 * 1000)
98 const hdSeconds = initialUserVideoQuotaBit / (4 * 1000 * 1000)
99 const normalSeconds = initialUserVideoQuotaBit / (1.5 * 1000 * 1000)
100
101 const lines = [
102 SignupComponent.getApproximateTime(fullHdSeconds) + ' of full HD videos',
103 SignupComponent.getApproximateTime(hdSeconds) + ' of HD videos',
104 SignupComponent.getApproximateTime(normalSeconds) + ' of normal quality videos'
105 ]
106
107 this.quotaHelpIndication = lines.join('<br />')
108 }
74} 109}