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

3 files changed, 13 insertions, 19 deletions

diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts
index 8c01e4007..6cf846d72 100644
--- a/client/src/app/+accounts/account-about/account-about.component.ts
+++ b/client/src/app/+accounts/account-about/account-about.component.ts
@@ -2,7 +2,6 @@ import { Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { MarkdownService } from '@app/core'
 import { Account, AccountService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-about',
@@ -16,7 +15,6 @@ export class AccountAboutComponent implements OnInit, OnDestroy {
   private accountSub: Subscription
 
   constructor (
-    private i18n: I18n,
     private accountService: AccountService,
     private markdownService: MarkdownService
   ) { }
@@ -37,6 +35,6 @@ export class AccountAboutComponent implements OnInit, OnDestroy {
   getAccountDescription () {
     if (this.descriptionHTML) return this.descriptionHTML
 
-    return this.i18n('No description')
+    return $localize`No description`
   }
 }
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 5a9241f8e..3134a8ee2 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -6,7 +6,6 @@ import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenServi
 import { immutableAssign } from '@app/helpers'
 import { Account, AccountService, VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-videos',
@@ -23,7 +22,6 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
   private accountSub: Subscription
 
   constructor (
-    protected i18n: I18n,
     protected router: Router,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
@@ -66,7 +64,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
                .getAccountVideos(this.account, newPagination, this.sort)
                .pipe(
                  tap(({ total }) => {
-                   this.titlePage = this.i18n('Published {{total}} videos', { total })
+                   this.titlePage = $localize`Published ${total} videos`
                  })
                )
   }
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 9288fcb42..bbce62c35 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -5,7 +5,6 @@ import { ActivatedRoute } from '@angular/router'
 import { AuthService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
 import { Account, AccountService, DropdownAction, ListOverflowItem, VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { AccountReportComponent } from '@app/shared/shared-moderation'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { User, UserRight } from '@shared/models'
 
 @Component({
@@ -36,8 +35,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private restExtractor: RestExtractor,
     private redirectService: RedirectService,
     private authService: AuthService,
-    private screenService: ScreenService,
-    private i18n: I18n
+    private screenService: ScreenService
   ) {
   }
 
@@ -58,9 +56,9 @@ export class AccountsComponent implements OnInit, OnDestroy {
                         )
 
     this.links = [
-      { label: this.i18n('VIDEO CHANNELS'), routerLink: 'video-channels' },
-      { label: this.i18n('VIDEOS'), routerLink: 'videos' },
-      { label: this.i18n('ABOUT'), routerLink: 'about' }
+      { label: $localize`VIDEO CHANNELS`, routerLink: 'video-channels' },
+      { label: $localize`VIDEOS`, routerLink: 'videos' },
+      { label: $localize`ABOUT`, routerLink: 'about' }
     ]
   }
 
@@ -88,11 +86,13 @@ export class AccountsComponent implements OnInit, OnDestroy {
   }
 
   activateCopiedMessage () {
-    this.notifier.success(this.i18n('Username copied'))
+    this.notifier.success($localize`Username copied`)
   }
 
   subscribersDisplayFor (count: number) {
-    return this.i18n('{count, plural, =1 {1 subscriber} other {{{count}} subscribers}}', { count })
+    if (count === 1) return $localize`1 subscriber`
+
+    return $localize`${count} subscribers`
   }
 
   private onAccount (account: Account) {
@@ -105,16 +105,14 @@ export class AccountsComponent implements OnInit, OnDestroy {
         () => {
           this.isAccountManageable = this.account.userId && this.account.userId === this.authService.getUser().id
 
-          this.accountFollowerTitle = this.i18n(
-            '{{followers}} direct account followers',
-            { followers: this.subscribersDisplayFor(account.followersCount) }
-          )
+          const followers = this.subscribersDisplayFor(account.followersCount)
+          this.accountFollowerTitle = $localize`${followers} direct account followers`
 
           // It's not our account, we can report it
           if (!this.isAccountManageable) {
             this.prependModerationActions = [
               {
-                label: this.i18n('Report account'),
+                label: $localize`Report account`,
                 handler: () => this.showReportModal()
               }
             ]