aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-main
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-12 10:40:04 +0200
committerChocobozzz <me@florianbigard.com>2020-08-14 10:28:30 +0200
commit66357162f8e1227495f09bd4f68446aad7071c6d (patch)
tree7d4429506deb512b2fe1d0267f38a28cda20af55 /client/src/app/shared/shared-main
parent8c360747995e17eb5520e22fc3d7bd4c3d26eeee (diff)
downloadPeerTube-66357162f8e1227495f09bd4f68446aad7071c6d.tar.gz
PeerTube-66357162f8e1227495f09bd4f68446aad7071c6d.tar.zst
PeerTube-66357162f8e1227495f09bd4f68446aad7071c6d.zip
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
Diffstat (limited to 'client/src/app/shared/shared-main')
-rw-r--r--client/src/app/shared/shared-main/account/actor-avatar-info.component.ts6
-rw-r--r--client/src/app/shared/shared-main/account/avatar.component.ts15
-rw-r--r--client/src/app/shared/shared-main/angular/from-now.pipe.ts27
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.ts7
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.ts7
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.ts15
-rw-r--r--client/src/app/shared/shared-main/shared-main.module.ts3
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.ts10
-rw-r--r--client/src/app/shared/shared-main/video/video.service.ts16
9 files changed, 36 insertions, 70 deletions
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 @@
1import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' 1import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2import { Notifier, ServerService } from '@app/core' 2import { Notifier, ServerService } from '@app/core'
3import { Account, BytesPipe, VideoChannel } from '@app/shared/shared-main' 3import { Account, BytesPipe, VideoChannel } from '@app/shared/shared-main'
4import { I18n } from '@ngx-translate/i18n-polyfill'
5import { ServerConfig } from '@shared/models' 4import { ServerConfig } from '@shared/models'
6 5
7@Component({ 6@Component({
@@ -23,11 +22,10 @@ export class ActorAvatarInfoComponent implements OnInit {
23 22
24 constructor ( 23 constructor (
25 private serverService: ServerService, 24 private serverService: ServerService,
26 private notifier: Notifier, 25 private notifier: Notifier
27 private i18n: I18n
28 ) { 26 ) {
29 this.bytesPipe = new BytesPipe() 27 this.bytesPipe = new BytesPipe()
30 this.maxSizeText = this.i18n('max size') 28 this.maxSizeText = $localize`max size`
31 } 29 }
32 30
33 ngOnInit (): void { 31 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 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { Video } from '../video/video.model' 2import { Video } from '../video/video.model'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4 3
5@Component({ 4@Component({
6 selector: 'avatar-channel', 5 selector: 'avatar-channel',
@@ -15,19 +14,9 @@ export class AvatarComponent implements OnInit {
15 channelLinkTitle = '' 14 channelLinkTitle = ''
16 accountLinkTitle = '' 15 accountLinkTitle = ''
17 16
18 constructor (
19 private i18n: I18n
20 ) {}
21
22 ngOnInit () { 17 ngOnInit () {
23 this.channelLinkTitle = this.i18n( 18 this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
24 '{{name}} (channel page)', 19 this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
25 { name: this.video.channel.name, handle: this.video.byVideoChannel }
26 )
27 this.accountLinkTitle = this.i18n(
28 '{{name}} (account page)',
29 { name: this.video.account.name, handle: this.video.byAccount }
30 )
31 } 20 }
32 21
33 isChannelAvatarNull () { 22 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 @@
1import { Pipe, PipeTransform } from '@angular/core' 1import { Pipe, PipeTransform } from '@angular/core'
2import { I18n } from '@ngx-translate/i18n-polyfill'
3 2
4// Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site 3// Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
5@Pipe({ name: 'myFromNow' }) 4@Pipe({ name: 'myFromNow' })
6export class FromNowPipe implements PipeTransform { 5export class FromNowPipe implements PipeTransform {
7 6
8 constructor (private i18n: I18n) { }
9
10 transform (arg: number | Date | string) { 7 transform (arg: number | Date | string) {
11 const argDate = new Date(arg) 8 const argDate = new Date(arg)
12 const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000) 9 const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
13 10
14 let interval = Math.floor(seconds / 31536000) 11 let interval = Math.floor(seconds / 31536000)
15 if (interval > 1) return this.i18n('{{interval}} years ago', { interval }) 12 if (interval > 1) return $localize`${interval} years ago`
16 if (interval === 1) return this.i18n('{{interval}} year ago', { interval }) 13 if (interval === 1) return $localize`${interval} year ago`
17 14
18 interval = Math.floor(seconds / 2592000) 15 interval = Math.floor(seconds / 2592000)
19 if (interval > 1) return this.i18n('{{interval}} months ago', { interval }) 16 if (interval > 1) return $localize`${interval} months ago`
20 if (interval === 1) return this.i18n('{{interval}} month ago', { interval }) 17 if (interval === 1) return $localize`${interval} month ago`
21 18
22 interval = Math.floor(seconds / 604800) 19 interval = Math.floor(seconds / 604800)
23 if (interval > 1) return this.i18n('{{interval}} weeks ago', { interval }) 20 if (interval > 1) return $localize`${interval} weeks ago`
24 if (interval === 1) return this.i18n('{{interval}} week ago', { interval }) 21 if (interval === 1) return $localize`${interval} week ago`
25 22
26 interval = Math.floor(seconds / 86400) 23 interval = Math.floor(seconds / 86400)
27 if (interval > 1) return this.i18n('{{interval}} days ago', { interval }) 24 if (interval > 1) return $localize`${interval} days ago`
28 if (interval === 1) return this.i18n('{{interval}} day ago', { interval }) 25 if (interval === 1) return $localize`${interval} day ago`
29 26
30 interval = Math.floor(seconds / 3600) 27 interval = Math.floor(seconds / 3600)
31 if (interval > 1) return this.i18n('{{interval}} hours ago', { interval }) 28 if (interval > 1) return $localize`${interval} hours ago`
32 if (interval === 1) return this.i18n('{{interval}} hour ago', { interval }) 29 if (interval === 1) return $localize`${interval} hour ago`
33 30
34 interval = Math.floor(seconds / 60) 31 interval = Math.floor(seconds / 60)
35 if (interval >= 1) return this.i18n('{{interval}} min ago', { interval }) 32 if (interval >= 1) return $localize`${interval} min ago`
36 33
37 return this.i18n('just now') 34 return $localize`just now`
38 } 35 }
39} 36}
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 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { I18n } from '@ngx-translate/i18n-polyfill'
3 2
4@Component({ 3@Component({
5 selector: 'my-delete-button', 4 selector: 'my-delete-button',
@@ -11,17 +10,15 @@ export class DeleteButtonComponent implements OnInit {
11 @Input() label: string 10 @Input() label: string
12 @Input() title: string 11 @Input() title: string
13 12
14 constructor (private i18n: I18n) { }
15
16 ngOnInit () { 13 ngOnInit () {
17 // <my-delete-button /> No label 14 // <my-delete-button /> No label
18 if (this.label === undefined && !this.title) { 15 if (this.label === undefined && !this.title) {
19 this.title = this.i18n('Delete') 16 this.title = $localize`Delete`
20 } 17 }
21 18
22 // <my-delete-button label /> Use default label 19 // <my-delete-button label /> Use default label
23 if (this.label === '') { 20 if (this.label === '') {
24 this.label = this.i18n('Delete') 21 this.label = $localize`Delete`
25 22
26 if (!this.title) { 23 if (!this.title) {
27 this.title = this.label 24 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 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { I18n } from '@ngx-translate/i18n-polyfill'
3 2
4@Component({ 3@Component({
5 selector: 'my-edit-button', 4 selector: 'my-edit-button',
@@ -12,17 +11,15 @@ export class EditButtonComponent implements OnInit {
12 @Input() title: string 11 @Input() title: string
13 @Input() routerLink: string[] | string = [] 12 @Input() routerLink: string[] | string = []
14 13
15 constructor (private i18n: I18n) { }
16
17 ngOnInit () { 14 ngOnInit () {
18 // <my-edit-button /> No label 15 // <my-edit-button /> No label
19 if (this.label === undefined && !this.title) { 16 if (this.label === undefined && !this.title) {
20 this.title = this.i18n('Update') 17 this.title = $localize`Update`
21 } 18 }
22 19
23 // <my-edit-button label /> Use default label 20 // <my-edit-button label /> Use default label
24 if (this.label === '') { 21 if (this.label === '') {
25 this.label = this.i18n('Update') 22 this.label = $localize`Update`
26 23
27 if (!this.title) { 24 if (!this.title) {
28 this.title = this.label 25 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 @@
1import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core' 1import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
2import { MarkdownService } from '@app/core' 2import { MarkdownService } from '@app/core'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { PeerTubeTemplateDirective } from '../angular' 3import { PeerTubeTemplateDirective } from '../angular'
5 4
6@Component({ 5@Component({
@@ -22,8 +21,6 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
22 customHtmlTemplate: TemplateRef<any> 21 customHtmlTemplate: TemplateRef<any>
23 postHtmlTemplate: TemplateRef<any> 22 postHtmlTemplate: TemplateRef<any>
24 23
25 constructor (private i18n: I18n) { }
26
27 ngOnInit () { 24 ngOnInit () {
28 this.init() 25 this.init()
29 } 26 }
@@ -71,17 +68,17 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
71 68
72 private formatMarkdownSupport (rules: string[]) { 69 private formatMarkdownSupport (rules: string[]) {
73 // tslint:disable:max-line-length 70 // tslint:disable:max-line-length
74 return this.i18n('<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:') + 71 return $localize`<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:` +
75 this.createMarkdownList(rules) 72 this.createMarkdownList(rules)
76 } 73 }
77 74
78 private createMarkdownList (rules: string[]) { 75 private createMarkdownList (rules: string[]) {
79 const rulesToText = { 76 const rulesToText = {
80 'emphasis': this.i18n('Emphasis'), 77 'emphasis': $localize`Emphasis`,
81 'link': this.i18n('Links'), 78 'link': $localize`Links`,
82 'newline': this.i18n('New lines'), 79 'newline': $localize`New lines`,
83 'list': this.i18n('Lists'), 80 'list': $localize`Lists`,
84 'image': this.i18n('Images') 81 'image': $localize`Images`
85 } 82 }
86 83
87 const bullets = rules.map(r => rulesToText[r]) 84 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 {
13 NgbPopoverModule, 13 NgbPopoverModule,
14 NgbTooltipModule 14 NgbTooltipModule
15} from '@ng-bootstrap/ng-bootstrap' 15} from '@ng-bootstrap/ng-bootstrap'
16import { I18n } from '@ngx-translate/i18n-polyfill'
17import { SharedGlobalIconModule } from '../shared-icons' 16import { SharedGlobalIconModule } from '../shared-icons'
18import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account' 17import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account'
19import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective, BytesPipe } from './angular' 18import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective, BytesPipe } from './angular'
@@ -129,8 +128,6 @@ import { VideoChannelService } from './video-channel'
129 ], 128 ],
130 129
131 providers: [ 130 providers: [
132 I18n,
133
134 DatePipe, 131 DatePipe,
135 132
136 FromNowPipe, 133 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 @@
1import { Subject } from 'rxjs' 1import { Subject } from 'rxjs'
2import { Component, Input, OnInit } from '@angular/core' 2import { Component, Input, OnInit } from '@angular/core'
3import { User, UserService } from '@app/core' 3import { User, UserService } from '@app/core'
4import { I18n } from '@ngx-translate/i18n-polyfill'
5import { BytesPipe } from '../angular' 4import { BytesPipe } from '../angular'
6 5
7@Component({ 6@Component({
@@ -22,10 +21,7 @@ export class UserQuotaComponent implements OnInit {
22 userVideoQuotaUsedDaily = 0 21 userVideoQuotaUsedDaily = 0
23 userVideoQuotaDailyPercentage = 15 22 userVideoQuotaDailyPercentage = 15
24 23
25 constructor ( 24 constructor (private userService: UserService) { }
26 private userService: UserService,
27 private i18n: I18n
28 ) { }
29 25
30 ngOnInit () { 26 ngOnInit () {
31 this.userInformationLoaded.subscribe( 27 this.userInformationLoaded.subscribe(
@@ -33,13 +29,13 @@ export class UserQuotaComponent implements OnInit {
33 if (this.user.videoQuota !== -1) { 29 if (this.user.videoQuota !== -1) {
34 this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() 30 this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
35 } else { 31 } else {
36 this.userVideoQuota = this.i18n('Unlimited') 32 this.userVideoQuota = $localize`Unlimited`
37 } 33 }
38 34
39 if (this.user.videoQuotaDaily !== -1) { 35 if (this.user.videoQuotaDaily !== -1) {
40 this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString() 36 this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString()
41 } else { 37 } else {
42 this.userVideoQuotaDaily = this.i18n('Unlimited') 38 this.userVideoQuotaDaily = $localize`Unlimited`
43 } 39 }
44 } 40 }
45 ) 41 )
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'
4import { Injectable } from '@angular/core' 4import { Injectable } from '@angular/core'
5import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core' 5import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core'
6import { objectToFormData } from '@app/helpers' 6import { objectToFormData } from '@app/helpers'
7import { I18n } from '@ngx-translate/i18n-polyfill'
8import { 7import {
9 FeedFormat, 8 FeedFormat,
10 NSFWPolicyType, 9 NSFWPolicyType,
@@ -15,11 +14,11 @@ import {
15 Video as VideoServerModel, 14 Video as VideoServerModel,
16 VideoConstant, 15 VideoConstant,
17 VideoDetails as VideoDetailsServerModel, 16 VideoDetails as VideoDetailsServerModel,
17 VideoFileMetadata,
18 VideoFilter, 18 VideoFilter,
19 VideoPrivacy, 19 VideoPrivacy,
20 VideoSortField, 20 VideoSortField,
21 VideoUpdate, 21 VideoUpdate
22 VideoFileMetadata
23} from '@shared/models' 22} from '@shared/models'
24import { environment } from '../../../../environments/environment' 23import { environment } from '../../../../environments/environment'
25import { Account, AccountService } from '../account' 24import { Account, AccountService } from '../account'
@@ -48,8 +47,7 @@ export class VideoService implements VideosProvider {
48 private authHttp: HttpClient, 47 private authHttp: HttpClient,
49 private restExtractor: RestExtractor, 48 private restExtractor: RestExtractor,
50 private restService: RestService, 49 private restService: RestService,
51 private serverService: ServerService, 50 private serverService: ServerService
52 private i18n: I18n
53 ) {} 51 ) {}
54 52
55 getVideoViewUrl (uuid: string) { 53 getVideoViewUrl (uuid: string) {
@@ -339,19 +337,19 @@ export class VideoService implements VideosProvider {
339 const base = [ 337 const base = [
340 { 338 {
341 id: VideoPrivacy.PRIVATE, 339 id: VideoPrivacy.PRIVATE,
342 description: this.i18n('Only I can see this video') 340 description: $localize`Only I can see this video`
343 }, 341 },
344 { 342 {
345 id: VideoPrivacy.UNLISTED, 343 id: VideoPrivacy.UNLISTED,
346 description: this.i18n('Only shareable via a private link') 344 description: $localize`Only shareable via a private link`
347 }, 345 },
348 { 346 {
349 id: VideoPrivacy.PUBLIC, 347 id: VideoPrivacy.PUBLIC,
350 description: this.i18n('Anyone can see this video') 348 description: $localize`Anyone can see this video`
351 }, 349 },
352 { 350 {
353 id: VideoPrivacy.INTERNAL, 351 id: VideoPrivacy.INTERNAL,
354 description: this.i18n('Only users of this instance can see this video') 352 description: $localize`Only users of this instance can see this video`
355 } 353 }
356 ] 354 ]
357 355