Add features table on signup

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 @@
+<div class="feature-table">
+
+  <table class="table">
+    <tr>
+      <td i18n class="label">Video quota</td>
+
+      <td class="value">
+        <ng-container *ngIf="initialUserVideoQuota !== -1">
+          {{ initialUserVideoQuota | bytes: 0 }}
+
+          <my-help helpType="custom" [customHtml]="quotaHelpIndication"></my-help>
+        </ng-container>
+
+        <ng-container i18n *ngIf="initialUserVideoQuota === -1">
+          Unlimited
+        </ng-container>
+      </td>
+    </tr>
+
+    <tr *ngFor="let feature of features">
+      <td class="label">{{ feature.label }}</td>
+      <td>
+        <span *ngIf="feature.value === true" class="glyphicon glyphicon-ok"></span>
+        <span *ngIf="feature.value === false" class="glyphicon glyphicon-remove"></span>
+      </td>
+    </tr>
+  </table>
+</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 @@
+@import '_variables';
+@import '_mixins';
+
+table {
+  font-size: 14px;
+  max-width: 400px;
+
+  .label {
+    font-weight: $font-semibold;
+    min-width: 330px;
+  }
+
+  .glyphicon-ok {
+    color: $green;
+  }
+
+  .glyphicon-remove {
+    color: $red;
+  }
+}
\ 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 @@
+import { Component, OnInit } from '@angular/core'
+import { ServerService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-instance-features-table',
+  templateUrl: './instance-features-table.component.html',
+  styleUrls: [ './instance-features-table.component.scss' ]
+})
+export class InstanceFeaturesTableComponent implements OnInit {
+  features: { label: string, value?: boolean }[] = []
+  quotaHelpIndication = ''
+
+  constructor (
+    private i18n: I18n,
+    private serverService: ServerService
+  ) {
+  }
+
+  get initialUserVideoQuota () {
+    return this.serverService.getConfig().user.videoQuota
+  }
+
+  ngOnInit () {
+    this.serverService.configLoaded
+        .subscribe(() => {
+          this.buildFeatures()
+          this.buildQuotaHelpIndication()
+        })
+  }
+
+  private buildFeatures () {
+    const config = this.serverService.getConfig()
+
+    this.features = [
+      {
+        label: this.i18n('Transcode your videos in multiple resolutions'),
+        value: config.transcoding.enabledResolutions.length !== 0
+      },
+      {
+        label: this.i18n('HTTP import (YouTube, Vimeo, direct URL...)'),
+        value: config.import.videos.http.enabled
+      },
+      {
+        label: this.i18n('Torrent import'),
+        value: config.import.videos.torrent.enabled
+      }
+    ]
+
+  }
+
+  private 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)
+
+    return this.i18n('~ {{minutes}} {minutes, plural, =1 {minute} other {minutes}}', { minutes })
+  }
+
+  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 = [
+      this.i18n('{{seconds}} of full HD videos', { seconds: this.getApproximateTime(fullHdSeconds) }),
+      this.i18n('{{seconds}} of HD videos', { seconds: this.getApproximateTime(hdSeconds) }),
+      this.i18n('{{seconds}} of average quality videos', { seconds: this.getApproximateTime(normalSeconds) })
+    ]
+
+    this.quotaHelpIndication = lines.join('<br />')
+  }
+
+}
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
 import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
 import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
+import { InstanceFeaturesTableComponent } from '@app/shared/instance/instance-features-table.component'
 
 @NgModule({
   imports: [
@@ -86,7 +87,8 @@ import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/u
     HelpComponent,
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
-    SubscribeButtonComponent
+    SubscribeButtonComponent,
+    InstanceFeaturesTableComponent
   ],
 
   exports: [
@@ -119,6 +121,7 @@ import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/u
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
     SubscribeButtonComponent,
+    InstanceFeaturesTableComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,