aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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/shared
parentf0d4e7eb240f256b4f01cde4a1cd6f66f8f4347c (diff)
downloadPeerTube-41a676db3989fe3eca91301ac5f5aea30d98654a.tar.gz
PeerTube-41a676db3989fe3eca91301ac5f5aea30d98654a.tar.zst
PeerTube-41a676db3989fe3eca91301ac5f5aea30d98654a.zip
Add features table on signup
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/instance/instance-features-table.component.html28
-rw-r--r--client/src/app/shared/instance/instance-features-table.component.scss20
-rw-r--r--client/src/app/shared/instance/instance-features-table.component.ts84
-rw-r--r--client/src/app/shared/shared.module.ts5
4 files changed, 136 insertions, 1 deletions
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
new file mode 100644
index 000000000..ba170f074
--- /dev/null
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -0,0 +1,28 @@
1<div class="feature-table">
2
3 <table class="table">
4 <tr>
5 <td i18n class="label">Video quota</td>
6
7 <td class="value">
8 <ng-container *ngIf="initialUserVideoQuota !== -1">
9 {{ initialUserVideoQuota | bytes: 0 }}
10
11 <my-help helpType="custom" [customHtml]="quotaHelpIndication"></my-help>
12 </ng-container>
13
14 <ng-container i18n *ngIf="initialUserVideoQuota === -1">
15 Unlimited
16 </ng-container>
17 </td>
18 </tr>
19
20 <tr *ngFor="let feature of features">
21 <td class="label">{{ feature.label }}</td>
22 <td>
23 <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
24 <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
25 </td>
26 </tr>
27 </table>
28</div> \ No newline at end of file
diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss
new file mode 100644
index 000000000..d597a03ba
--- /dev/null
+++ b/client/src/app/shared/instance/instance-features-table.component.scss
@@ -0,0 +1,20 @@
1@import '_variables';
2@import '_mixins';
3
4table {
5 font-size: 14px;
6 max-width: 400px;
7
8 .label {
9 font-weight: $font-semibold;
10 min-width: 330px;
11 }
12
13 .glyphicon-ok {
14 color: $green;
15 }
16
17 .glyphicon-remove {
18 color: $red;
19 }
20} \ No newline at end of file
diff --git a/client/src/app/shared/instance/instance-features-table.component.ts b/client/src/app/shared/instance/instance-features-table.component.ts
new file mode 100644
index 000000000..1aad5aa81
--- /dev/null
+++ b/client/src/app/shared/instance/instance-features-table.component.ts
@@ -0,0 +1,84 @@
1import { Component, OnInit } from '@angular/core'
2import { ServerService } from '@app/core'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4
5@Component({
6 selector: 'my-instance-features-table',
7 templateUrl: './instance-features-table.component.html',
8 styleUrls: [ './instance-features-table.component.scss' ]
9})
10export class InstanceFeaturesTableComponent implements OnInit {
11 features: { label: string, value?: boolean }[] = []
12 quotaHelpIndication = ''
13
14 constructor (
15 private i18n: I18n,
16 private serverService: ServerService
17 ) {
18 }
19
20 get initialUserVideoQuota () {
21 return this.serverService.getConfig().user.videoQuota
22 }
23
24 ngOnInit () {
25 this.serverService.configLoaded
26 .subscribe(() => {
27 this.buildFeatures()
28 this.buildQuotaHelpIndication()
29 })
30 }
31
32 private buildFeatures () {
33 const config = this.serverService.getConfig()
34
35 this.features = [
36 {
37 label: this.i18n('Transcode your videos in multiple resolutions'),
38 value: config.transcoding.enabledResolutions.length !== 0
39 },
40 {
41 label: this.i18n('HTTP import (YouTube, Vimeo, direct URL...)'),
42 value: config.import.videos.http.enabled
43 },
44 {
45 label: this.i18n('Torrent import'),
46 value: config.import.videos.torrent.enabled
47 }
48 ]
49
50 }
51
52 private getApproximateTime (seconds: number) {
53 const hours = Math.floor(seconds / 3600)
54 let pluralSuffix = ''
55 if (hours > 1) pluralSuffix = 's'
56 if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
57
58 const minutes = Math.floor(seconds % 3600 / 60)
59
60 return this.i18n('~ {{minutes}} {minutes, plural, =1 {minute} other {minutes}}', { minutes })
61 }
62
63 private buildQuotaHelpIndication () {
64 if (this.initialUserVideoQuota === -1) return
65
66 const initialUserVideoQuotaBit = this.initialUserVideoQuota * 8
67
68 // 1080p: ~ 6Mbps
69 // 720p: ~ 4Mbps
70 // 360p: ~ 1.5Mbps
71 const fullHdSeconds = initialUserVideoQuotaBit / (6 * 1000 * 1000)
72 const hdSeconds = initialUserVideoQuotaBit / (4 * 1000 * 1000)
73 const normalSeconds = initialUserVideoQuotaBit / (1.5 * 1000 * 1000)
74
75 const lines = [
76 this.i18n('{{seconds}} of full HD videos', { seconds: this.getApproximateTime(fullHdSeconds) }),
77 this.i18n('{{seconds}} of HD videos', { seconds: this.getApproximateTime(hdSeconds) }),
78 this.i18n('{{seconds}} of average quality videos', { seconds: this.getApproximateTime(normalSeconds) })
79 ]
80
81 this.quotaHelpIndication = lines.join('<br />')
82 }
83
84}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 413159059..2cbaaf4ae 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -51,6 +51,7 @@ import { VideoImportService } from '@app/shared/video-import/video-import.servic
51import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component' 51import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
52import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' 52import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
53import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription' 53import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
54import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
54 55
55@NgModule({ 56@NgModule({
56 imports: [ 57 imports: [
@@ -86,7 +87,8 @@ import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/u
86 HelpComponent, 87 HelpComponent,
87 ReactiveFileComponent, 88 ReactiveFileComponent,
88 PeertubeCheckboxComponent, 89 PeertubeCheckboxComponent,
89 SubscribeButtonComponent 90 SubscribeButtonComponent,
91 InstanceFeaturesTableComponent
90 ], 92 ],
91 93
92 exports: [ 94 exports: [
@@ -119,6 +121,7 @@ import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/u
119 ReactiveFileComponent, 121 ReactiveFileComponent,
120 PeertubeCheckboxComponent, 122 PeertubeCheckboxComponent,
121 SubscribeButtonComponent, 123 SubscribeButtonComponent,
124 InstanceFeaturesTableComponent,
122 125
123 NumberFormatterPipe, 126 NumberFormatterPipe,
124 ObjectLengthPipe, 127 ObjectLengthPipe,