From 66357162f8e1227495f09bd4f68446aad7071c6d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 12 Aug 2020 10:40:04 +0200 Subject: Migrate to $localize * Remove i18n polyfill to translate things in components * Reduce bundle sizes * Improve runtime perf * Reduce a lot the time to make a full client build * Reduce client build complexity * We don't need a service to translate things anymore (so we will be able to translate title pages etc) Unfortunately we may loose some translations in the migration process. I'll put a message on weblate to notify translators --- .../account/actor-avatar-info.component.ts | 6 ++--- .../shared/shared-main/account/avatar.component.ts | 15 ++---------- .../shared/shared-main/angular/from-now.pipe.ts | 27 ++++++++++------------ .../shared-main/buttons/delete-button.component.ts | 7 ++---- .../shared-main/buttons/edit-button.component.ts | 7 ++---- .../app/shared/shared-main/misc/help.component.ts | 15 +++++------- .../app/shared/shared-main/shared-main.module.ts | 3 --- .../shared-main/users/user-quota.component.ts | 10 +++----- .../app/shared/shared-main/video/video.service.ts | 16 ++++++------- 9 files changed, 36 insertions(+), 70 deletions(-) (limited to 'client/src/app/shared/shared-main') diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts index 1389218cc..3a86e5b21 100644 --- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts +++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts @@ -1,7 +1,6 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { Notifier, ServerService } from '@app/core' import { Account, BytesPipe, VideoChannel } from '@app/shared/shared-main' -import { I18n } from '@ngx-translate/i18n-polyfill' import { ServerConfig } from '@shared/models' @Component({ @@ -23,11 +22,10 @@ export class ActorAvatarInfoComponent implements OnInit { constructor ( private serverService: ServerService, - private notifier: Notifier, - private i18n: I18n + private notifier: Notifier ) { this.bytesPipe = new BytesPipe() - this.maxSizeText = this.i18n('max size') + this.maxSizeText = $localize`max size` } ngOnInit (): void { diff --git a/client/src/app/shared/shared-main/account/avatar.component.ts b/client/src/app/shared/shared-main/account/avatar.component.ts index 73c145ef9..2967828a0 100644 --- a/client/src/app/shared/shared-main/account/avatar.component.ts +++ b/client/src/app/shared/shared-main/account/avatar.component.ts @@ -1,6 +1,5 @@ import { Component, Input, OnInit } from '@angular/core' import { Video } from '../video/video.model' -import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'avatar-channel', @@ -15,19 +14,9 @@ export class AvatarComponent implements OnInit { channelLinkTitle = '' accountLinkTitle = '' - constructor ( - private i18n: I18n - ) {} - ngOnInit () { - this.channelLinkTitle = this.i18n( - '{{name}} (channel page)', - { name: this.video.channel.name, handle: this.video.byVideoChannel } - ) - this.accountLinkTitle = this.i18n( - '{{name}} (account page)', - { name: this.video.account.name, handle: this.video.byAccount } - ) + this.channelLinkTitle = $localize`${this.video.account.name} (channel page)` + this.accountLinkTitle = $localize`${this.video.byAccount} (account page)` } isChannelAvatarNull () { diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts index 9851468ee..5d85590bb 100644 --- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts +++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts @@ -1,39 +1,36 @@ import { Pipe, PipeTransform } from '@angular/core' -import { I18n } from '@ngx-translate/i18n-polyfill' // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site @Pipe({ name: 'myFromNow' }) export class FromNowPipe implements PipeTransform { - constructor (private i18n: I18n) { } - transform (arg: number | Date | string) { const argDate = new Date(arg) const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000) let interval = Math.floor(seconds / 31536000) - if (interval > 1) return this.i18n('{{interval}} years ago', { interval }) - if (interval === 1) return this.i18n('{{interval}} year ago', { interval }) + if (interval > 1) return $localize`${interval} years ago` + if (interval === 1) return $localize`${interval} year ago` interval = Math.floor(seconds / 2592000) - if (interval > 1) return this.i18n('{{interval}} months ago', { interval }) - if (interval === 1) return this.i18n('{{interval}} month ago', { interval }) + if (interval > 1) return $localize`${interval} months ago` + if (interval === 1) return $localize`${interval} month ago` interval = Math.floor(seconds / 604800) - if (interval > 1) return this.i18n('{{interval}} weeks ago', { interval }) - if (interval === 1) return this.i18n('{{interval}} week ago', { interval }) + if (interval > 1) return $localize`${interval} weeks ago` + if (interval === 1) return $localize`${interval} week ago` interval = Math.floor(seconds / 86400) - if (interval > 1) return this.i18n('{{interval}} days ago', { interval }) - if (interval === 1) return this.i18n('{{interval}} day ago', { interval }) + if (interval > 1) return $localize`${interval} days ago` + if (interval === 1) return $localize`${interval} day ago` interval = Math.floor(seconds / 3600) - if (interval > 1) return this.i18n('{{interval}} hours ago', { interval }) - if (interval === 1) return this.i18n('{{interval}} hour ago', { interval }) + if (interval > 1) return $localize`${interval} hours ago` + if (interval === 1) return $localize`${interval} hour ago` interval = Math.floor(seconds / 60) - if (interval >= 1) return this.i18n('{{interval}} min ago', { interval }) + if (interval >= 1) return $localize`${interval} min ago` - return this.i18n('just now') + return $localize`just now` } } diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts index aced0f881..18995422a 100644 --- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts +++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts @@ -1,5 +1,4 @@ import { Component, Input, OnInit } from '@angular/core' -import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-delete-button', @@ -11,17 +10,15 @@ export class DeleteButtonComponent implements OnInit { @Input() label: string @Input() title: string - constructor (private i18n: I18n) { } - ngOnInit () { // No label if (this.label === undefined && !this.title) { - this.title = this.i18n('Delete') + this.title = $localize`Delete` } // Use default label if (this.label === '') { - this.label = this.i18n('Delete') + this.label = $localize`Delete` if (!this.title) { this.title = this.label diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts index d8ae39b84..4b76551ca 100644 --- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts +++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts @@ -1,5 +1,4 @@ import { Component, Input, OnInit } from '@angular/core' -import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-edit-button', @@ -12,17 +11,15 @@ export class EditButtonComponent implements OnInit { @Input() title: string @Input() routerLink: string[] | string = [] - constructor (private i18n: I18n) { } - ngOnInit () { // No label if (this.label === undefined && !this.title) { - this.title = this.i18n('Update') + this.title = $localize`Update` } // Use default label if (this.label === '') { - this.label = this.i18n('Update') + this.label = $localize`Update` if (!this.title) { this.title = this.label diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts index 0825b96de..ebc965a88 100644 --- a/client/src/app/shared/shared-main/misc/help.component.ts +++ b/client/src/app/shared/shared-main/misc/help.component.ts @@ -1,6 +1,5 @@ import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core' import { MarkdownService } from '@app/core' -import { I18n } from '@ngx-translate/i18n-polyfill' import { PeerTubeTemplateDirective } from '../angular' @Component({ @@ -22,8 +21,6 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit { customHtmlTemplate: TemplateRef postHtmlTemplate: TemplateRef - constructor (private i18n: I18n) { } - ngOnInit () { this.init() } @@ -71,17 +68,17 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit { private formatMarkdownSupport (rules: string[]) { // tslint:disable:max-line-length - return this.i18n('Markdown compatible that supports:') + + return $localize`Markdown compatible that supports:` + this.createMarkdownList(rules) } private createMarkdownList (rules: string[]) { const rulesToText = { - 'emphasis': this.i18n('Emphasis'), - 'link': this.i18n('Links'), - 'newline': this.i18n('New lines'), - 'list': this.i18n('Lists'), - 'image': this.i18n('Images') + 'emphasis': $localize`Emphasis`, + 'link': $localize`Links`, + 'newline': $localize`New lines`, + 'list': $localize`Lists`, + 'image': $localize`Images` } const bullets = rules.map(r => rulesToText[r]) diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 6186db4d6..7f4676dd1 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -13,7 +13,6 @@ import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' -import { I18n } from '@ngx-translate/i18n-polyfill' import { SharedGlobalIconModule } from '../shared-icons' import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account' import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective, BytesPipe } from './angular' @@ -129,8 +128,6 @@ import { VideoChannelService } from './video-channel' ], providers: [ - I18n, - DatePipe, FromNowPipe, diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts index 6830ad8fe..b38619186 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.ts +++ b/client/src/app/shared/shared-main/users/user-quota.component.ts @@ -1,7 +1,6 @@ import { Subject } from 'rxjs' import { Component, Input, OnInit } from '@angular/core' import { User, UserService } from '@app/core' -import { I18n } from '@ngx-translate/i18n-polyfill' import { BytesPipe } from '../angular' @Component({ @@ -22,10 +21,7 @@ export class UserQuotaComponent implements OnInit { userVideoQuotaUsedDaily = 0 userVideoQuotaDailyPercentage = 15 - constructor ( - private userService: UserService, - private i18n: I18n - ) { } + constructor (private userService: UserService) { } ngOnInit () { this.userInformationLoaded.subscribe( @@ -33,13 +29,13 @@ export class UserQuotaComponent implements OnInit { if (this.user.videoQuota !== -1) { this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() } else { - this.userVideoQuota = this.i18n('Unlimited') + this.userVideoQuota = $localize`Unlimited` } if (this.user.videoQuotaDaily !== -1) { this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString() } else { - this.userVideoQuotaDaily = this.i18n('Unlimited') + this.userVideoQuotaDaily = $localize`Unlimited` } } ) diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts index 978f775bf..b01e919aa 100644 --- a/client/src/app/shared/shared-main/video/video.service.ts +++ b/client/src/app/shared/shared-main/video/video.service.ts @@ -4,7 +4,6 @@ import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http' import { Injectable } from '@angular/core' import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core' import { objectToFormData } from '@app/helpers' -import { I18n } from '@ngx-translate/i18n-polyfill' import { FeedFormat, NSFWPolicyType, @@ -15,11 +14,11 @@ import { Video as VideoServerModel, VideoConstant, VideoDetails as VideoDetailsServerModel, + VideoFileMetadata, VideoFilter, VideoPrivacy, VideoSortField, - VideoUpdate, - VideoFileMetadata + VideoUpdate } from '@shared/models' import { environment } from '../../../../environments/environment' import { Account, AccountService } from '../account' @@ -48,8 +47,7 @@ export class VideoService implements VideosProvider { private authHttp: HttpClient, private restExtractor: RestExtractor, private restService: RestService, - private serverService: ServerService, - private i18n: I18n + private serverService: ServerService ) {} getVideoViewUrl (uuid: string) { @@ -339,19 +337,19 @@ export class VideoService implements VideosProvider { const base = [ { id: VideoPrivacy.PRIVATE, - description: this.i18n('Only I can see this video') + description: $localize`Only I can see this video` }, { id: VideoPrivacy.UNLISTED, - description: this.i18n('Only shareable via a private link') + description: $localize`Only shareable via a private link` }, { id: VideoPrivacy.PUBLIC, - description: this.i18n('Anyone can see this video') + description: $localize`Anyone can see this video` }, { id: VideoPrivacy.INTERNAL, - description: this.i18n('Only users of this instance can see this video') + description: $localize`Only users of this instance can see this video` } ] -- cgit v1.2.3