aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/signup
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-08-28 17:39:29 +0200
committerChocobozzz <me@florianbigard.com>2018-08-28 17:39:29 +0200
commit41a676db3989fe3eca91301ac5f5aea30d98654a (patch)
tree00a28c9110cdd351435ec0c066599763748119e7 /client/src/app/signup
parentf0d4e7eb240f256b4f01cde4a1cd6f66f8f4347c (diff)
downloadPeerTube-41a676db3989fe3eca91301ac5f5aea30d98654a.tar.gz
PeerTube-41a676db3989fe3eca91301ac5f5aea30d98654a.tar.zst
PeerTube-41a676db3989fe3eca91301ac5f5aea30d98654a.zip
Add features table on signup
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.scss13
-rw-r--r--client/src/app/signup/signup.component.ts43
3 files changed, 6 insertions, 64 deletions
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index 5fd630b09..f7b8f587b 100644
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -4,19 +4,7 @@
4 Create an account 4 Create an account
5 </div> 5 </div>
6 6
7 <div class="initial-user-quota"> 7 <my-instance-features-table></my-instance-features-table>
8 <span i18n 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-container i18n *ngIf="initialUserVideoQuota === -1">
17 Unlimited
18 </ng-container>
19 </div>
20 8
21 <div *ngIf="error" class="alert alert-danger">{{ error }}</div> 9 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
22 10
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
index 1c992faf5..a98c3c732 100644
--- a/client/src/app/signup/signup.component.scss
+++ b/client/src/app/signup/signup.component.scss
@@ -1,13 +1,10 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.initial-user-quota { 4my-instance-features-table {
5 font-size: 15px; 5 display: block;
6 margin-bottom: 20px;
7 6
8 .initial-user-quota-label { 7 margin-bottom: 40px;
9 font-weight: $font-semibold;
10 }
11} 8}
12 9
13.form-group-terms { 10.form-group-terms {
@@ -15,11 +12,11 @@
15} 12}
16 13
17.input-group { 14.input-group {
18 @include peertube-input-group(340px); 15 @include peertube-input-group(400px);
19} 16}
20 17
21input:not([type=submit]) { 18input:not([type=submit]) {
22 @include peertube-input-text(340px); 19 @include peertube-input-text(400px);
23 display: block; 20 display: block;
24 21
25 &#username { 22 &#username {
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
index ed68487ae..47f9bc6f4 100644
--- a/client/src/app/signup/signup.component.ts
+++ b/client/src/app/signup/signup.component.ts
@@ -1,6 +1,5 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router' 2import { Router } from '@angular/router'
3import { ServerService } from '@app/core/server'
4import { NotificationsService } from 'angular2-notifications' 3import { NotificationsService } from 'angular2-notifications'
5import { UserCreate } from '../../../../shared' 4import { UserCreate } from '../../../../shared'
6import { FormReactive, UserService, UserValidatorsService } from '../shared' 5import { FormReactive, UserService, UserValidatorsService } from '../shared'
@@ -15,7 +14,6 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val
15}) 14})
16export class SignupComponent extends FormReactive implements OnInit { 15export class SignupComponent extends FormReactive implements OnInit {
17 error: string = null 16 error: string = null
18 quotaHelpIndication = ''
19 17
20 constructor ( 18 constructor (
21 protected formValidatorService: FormValidatorService, 19 protected formValidatorService: FormValidatorService,
@@ -24,16 +22,11 @@ export class SignupComponent extends FormReactive implements OnInit {
24 private notificationsService: NotificationsService, 22 private notificationsService: NotificationsService,
25 private userService: UserService, 23 private userService: UserService,
26 private redirectService: RedirectService, 24 private redirectService: RedirectService,
27 private serverService: ServerService,
28 private i18n: I18n 25 private i18n: I18n
29 ) { 26 ) {
30 super() 27 super()
31 } 28 }
32 29
33 get initialUserVideoQuota () {
34 return this.serverService.getConfig().user.videoQuota
35 }
36
37 get instanceHost () { 30 get instanceHost () {
38 return window.location.host 31 return window.location.host
39 } 32 }
@@ -45,9 +38,6 @@ export class SignupComponent extends FormReactive implements OnInit {
45 email: this.userValidatorsService.USER_EMAIL, 38 email: this.userValidatorsService.USER_EMAIL,
46 terms: this.userValidatorsService.USER_TERMS 39 terms: this.userValidatorsService.USER_TERMS
47 }) 40 })
48
49 this.serverService.configLoaded
50 .subscribe(() => this.buildQuotaHelpIndication())
51 } 41 }
52 42
53 signup () { 43 signup () {
@@ -67,37 +57,4 @@ export class SignupComponent extends FormReactive implements OnInit {
67 err => this.error = err.message 57 err => this.error = err.message
68 ) 58 )
69 } 59 }
70
71 private getApproximateTime (seconds: number) {
72 const hours = Math.floor(seconds / 3600)
73 let pluralSuffix = ''
74 if (hours > 1) pluralSuffix = 's'
75 if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
76
77 const minutes = Math.floor(seconds % 3600 / 60)
78 if (minutes > 1) pluralSuffix = 's'
79
80 return this.i18n('~ {{minutes}} {minutes, plural, =1 {minute} other {minutes}}', { minutes })
81 }
82
83 private buildQuotaHelpIndication () {
84 if (this.initialUserVideoQuota === -1) return
85
86 const initialUserVideoQuotaBit = this.initialUserVideoQuota * 8
87
88 // 1080p: ~ 6Mbps
89 // 720p: ~ 4Mbps
90 // 360p: ~ 1.5Mbps
91 const fullHdSeconds = initialUserVideoQuotaBit / (6 * 1000 * 1000)
92 const hdSeconds = initialUserVideoQuotaBit / (4 * 1000 * 1000)
93 const normalSeconds = initialUserVideoQuotaBit / (1.5 * 1000 * 1000)
94
95 const lines = [
96 this.i18n('{{seconds}} of full HD videos', { seconds: this.getApproximateTime(fullHdSeconds) }),
97 this.i18n('{{seconds}} of HD videos', { seconds: this.getApproximateTime(hdSeconds) }),
98 this.i18n('{{seconds}} of average quality videos', { seconds: this.getApproximateTime(normalSeconds) })
99 ]
100
101 this.quotaHelpIndication = lines.join('<br />')
102 }
103} 60}