From 41a676db3989fe3eca91301ac5f5aea30d98654a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 28 Aug 2018 17:39:29 +0200 Subject: [PATCH] Add features table on signup --- .../about-peertube.component.html | 14 ++-- .../about-peertube.component.scss | 2 +- client/src/app/+about/about.component.scss | 0 client/src/app/+about/about.component.ts | 3 +- .../edit-custom-config.component.ts | 8 ++ .../instance-features-table.component.html | 28 +++++++ .../instance-features-table.component.scss | 20 +++++ .../instance-features-table.component.ts | 84 +++++++++++++++++++ client/src/app/shared/shared.module.ts | 5 +- client/src/app/signup/signup.component.html | 14 +--- client/src/app/signup/signup.component.scss | 13 ++- client/src/app/signup/signup.component.ts | 43 ---------- .../+video-watch/video-watch.component.scss | 4 +- client/src/assets/images/global/tick.svg | 12 +++ client/src/sass/application.scss | 4 +- client/src/sass/include/_bootstrap.scss | 2 +- client/src/sass/include/_variables.scss | 4 +- server/controllers/api/config.ts | 2 +- 18 files changed, 180 insertions(+), 82 deletions(-) delete mode 100644 client/src/app/+about/about.component.scss create mode 100644 client/src/app/shared/instance/instance-features-table.component.html create mode 100644 client/src/app/shared/instance/instance-features-table.component.scss create mode 100644 client/src/app/shared/instance/instance-features-table.component.ts create mode 100644 client/src/assets/images/global/tick.svg diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html index 55ac344f9..13ce89f75 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.html +++ b/client/src/app/+about/about-peertube/about-peertube.component.html @@ -1,6 +1,6 @@ -
+

About PeerTube -

+

PeerTube is a federated (ActivityPub) video streaming platform using P2P (WebTorrent) directly in the web browser.

@@ -15,14 +15,14 @@
-
P2P & Privacy
+

P2P & Privacy

PeerTube uses the BitTorrent protocol to share bandwidth between users. This implies that your IP address is stored in the instance's BitTorrent tracker as long as you download or watch the video.

-

What are the consequences?

+
What are the consequences?

In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video. @@ -64,7 +64,7 @@ There are much more effective ways to get that kind of information.

-

How does PeerTube compare with YouTube?

+
How does PeerTube compare with YouTube?

The threats to privacy in YouTube are different from PeerTube's. @@ -72,7 +72,7 @@ Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).

-

What can I do to limit the exposure of my IP address?

+
What can I do to limit the exposure of my IP address?

Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing your IP in their connection logs: ISP/routers/trackers/CDN and more. @@ -80,7 +80,7 @@ Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.

-

What will be done to mitigate this problem?

+
What will be done to mitigate this problem?

PeerTube is only in beta, and want to deliver the best countermeasures possible by the time the stable is released. diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss index 1d8579ec1..0d2e2bb68 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube.component.scss @@ -2,7 +2,7 @@ @import '_mixins'; .about-peertube-title { - font-size: 20px; + font-size: 25px; font-weight: bold; margin-bottom: 15px; } diff --git a/client/src/app/+about/about.component.scss b/client/src/app/+about/about.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/client/src/app/+about/about.component.ts b/client/src/app/+about/about.component.ts index 7b65d920f..0c91cd75f 100644 --- a/client/src/app/+about/about.component.ts +++ b/client/src/app/+about/about.component.ts @@ -2,8 +2,7 @@ import { Component } from '@angular/core' @Component({ selector: 'my-about', - templateUrl: './about.component.html', - styleUrls: [ './about.component.scss' ] + templateUrl: './about.component.html' }) export class AboutComponent { diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts index 3b6dabcb9..248b0df50 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts @@ -64,6 +64,14 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { super() } + get videoQuotaOptions () { + return EditCustomConfigComponent.videoQuotaOptions + } + + get videoQuotaDailyOptions () { + return EditCustomConfigComponent.videoQuotaDailyOptions + } + getResolutionKey (resolution: string) { return 'transcodingResolution' + resolution } 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 @@ +

+ + + + + + + + + + + + +
Video quota + + {{ initialUserVideoQuota | bytes: 0 }} + + + + + + Unlimited + +
{{ feature.label }} + + +
+
\ 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('
') + } + +} 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, 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 @@ Create an account
-
- Initial video quota: - - - {{ initialUserVideoQuota | bytes: 0 }} - - - - - - Unlimited - -
+
{{ error }}
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 @@ @import '_variables'; @import '_mixins'; -.initial-user-quota { - font-size: 15px; - margin-bottom: 20px; +my-instance-features-table { + display: block; - .initial-user-quota-label { - font-weight: $font-semibold; - } + margin-bottom: 40px; } .form-group-terms { @@ -15,11 +12,11 @@ } .input-group { - @include peertube-input-group(340px); + @include peertube-input-group(400px); } input:not([type=submit]) { - @include peertube-input-text(340px); + @include peertube-input-text(400px); display: block; &#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 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' -import { ServerService } from '@app/core/server' import { NotificationsService } from 'angular2-notifications' import { UserCreate } from '../../../../shared' import { FormReactive, UserService, UserValidatorsService } from '../shared' @@ -15,7 +14,6 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val }) export class SignupComponent extends FormReactive implements OnInit { error: string = null - quotaHelpIndication = '' constructor ( protected formValidatorService: FormValidatorService, @@ -24,16 +22,11 @@ export class SignupComponent extends FormReactive implements OnInit { private notificationsService: NotificationsService, private userService: UserService, private redirectService: RedirectService, - private serverService: ServerService, private i18n: I18n ) { super() } - get initialUserVideoQuota () { - return this.serverService.getConfig().user.videoQuota - } - get instanceHost () { return window.location.host } @@ -45,9 +38,6 @@ export class SignupComponent extends FormReactive implements OnInit { email: this.userValidatorsService.USER_EMAIL, terms: this.userValidatorsService.USER_TERMS }) - - this.serverService.configLoaded - .subscribe(() => this.buildQuotaHelpIndication()) } signup () { @@ -67,37 +57,4 @@ export class SignupComponent extends FormReactive implements OnInit { err => this.error = err.message ) } - - 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) - if (minutes > 1) pluralSuffix = 's' - - 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('
') - } } diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 6b18dc88a..9bd510c9f 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -226,7 +226,7 @@ } &.action-button-like.activated { - background-color: #39CC0B; + background-color: $green; .icon-like { background-image: url('../../../assets/images/video/like-white.svg'); @@ -234,7 +234,7 @@ } &.action-button-dislike.activated { - background-color: #FF0000; + background-color: $red; .icon-dislike { background-image: url('../../../assets/images/video/dislike-white.svg'); diff --git a/client/src/assets/images/global/tick.svg b/client/src/assets/images/global/tick.svg new file mode 100644 index 000000000..230caa111 --- /dev/null +++ b/client/src/assets/images/global/tick.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index b2d7c2bec..9c4811fec 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -53,12 +53,12 @@ label { .form-error { display: block; - color: $red-error; + color: $red; margin-top: 5px; } .input-error { - border-color: $red-error !important; + border-color: $red !important; } .glyphicon-black { diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index 5abec02d5..a8777af71 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -21,7 +21,7 @@ $nav-pills-link-active-color: #000; //@import '~bootstrap/scss/images'; //@import '~bootstrap/scss/code'; @import '~bootstrap/scss/grid'; -//@import '~bootstrap/scss/tables'; +@import '~bootstrap/scss/tables'; @import '~bootstrap/scss/forms'; @import '~bootstrap/scss/buttons'; //@import '~bootstrap/scss/transitions'; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index e6db98642..ba7abeef1 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -10,7 +10,9 @@ $orange-hoover-color: #F97D46; $black-background: #000; $grey-background: #f6f2f2; -$red-error: #FF0000; + +$red: #FF0000; +$green: #39CC0B; $grey-actor-name: #777272; diff --git a/server/controllers/api/config.ts b/server/controllers/api/config.ts index 8dfc3deb4..25ddd1fa6 100644 --- a/server/controllers/api/config.ts +++ b/server/controllers/api/config.ts @@ -43,7 +43,7 @@ async function getConfig (req: express.Request, res: express.Response, next: exp const allowedForCurrentIP = isSignupAllowedForCurrentIP(req.ip) const enabledResolutions = Object.keys(CONFIG.TRANSCODING.RESOLUTIONS) - .filter(key => CONFIG.TRANSCODING.RESOLUTIONS[key] === true) + .filter(key => CONFIG.TRANSCODING.ENABLED === CONFIG.TRANSCODING.RESOLUTIONS[key] === true) .map(r => parseInt(r, 10)) const json: ServerConfig = { -- 2.41.0