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

6 files changed, 37 insertions, 49 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
index 5444b97ae..396936ef3 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -3,7 +3,6 @@ import { tap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ServerService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { User } from '@shared/models'
 
 @Component({
@@ -21,9 +20,8 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
     private userValidatorsService: UserValidatorsService,
     private authService: AuthService,
     private userService: UserService,
-    private serverService: ServerService,
-    private i18n: I18n
-  ) {
+    private serverService: ServerService
+    ) {
     super()
   }
 
@@ -52,15 +50,15 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
           this.form.reset()
 
           if (config.signup.requiresEmailVerification) {
-            this.success = this.i18n('Please check your emails to verify your new email.')
+            this.success = $localize`Please check your emails to verify your new email.`
           } else {
-            this.success = this.i18n('Email updated.')
+            this.success = $localize`Email updated.`
           }
         },
 
         err => {
           if (err.status === 401) {
-            this.error = this.i18n('You current password is invalid.')
+            this.error = $localize`You current password is invalid.`
             return
           }
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index 6a16f8a2c..91fe4ec72 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -2,7 +2,6 @@ import { filter } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, UserService } from '@app/core'
 import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { User } from '@shared/models'
 
 @Component({
@@ -19,9 +18,8 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
     private userValidatorsService: UserValidatorsService,
     private notifier: Notifier,
     private authService: AuthService,
-    private userService: UserService,
-    private i18n: I18n
-  ) {
+    private userService: UserService
+    ) {
     super()
   }
 
@@ -47,7 +45,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
 
     this.userService.changePassword(currentPassword, newPassword).subscribe(
       () => {
-        this.notifier.success(this.i18n('Password updated.'))
+        this.notifier.success($localize`Password updated.`)
 
         this.form.reset()
         this.error = null
@@ -55,7 +53,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
 
       err => {
         if (err.status === 401) {
-          this.error = this.i18n('You current password is invalid.')
+          this.error = $localize`You current password is invalid.`
           return
         }
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
index ae6ac5387..387e9e7cd 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, RedirectService, User, UserService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-danger-zone',
@@ -15,23 +14,22 @@ export class MyAccountDangerZoneComponent {
     private notifier: Notifier,
     private userService: UserService,
     private confirmService: ConfirmService,
-    private redirectService: RedirectService,
-    private i18n: I18n
-  ) { }
+    private redirectService: RedirectService
+    ) { }
 
   async deleteMe () {
     const res = await this.confirmService.confirmWithInput(
-      this.i18n('Are you sure you want to delete your account? This will delete all your data, including channels, videos and comments. Content cached by other servers and other third-parties might make longer to be deleted.'),
-      this.i18n('Type your username to confirm'),
+      $localize`Are you sure you want to delete your account? This will delete all your data, including channels, videos and comments. Content cached by other servers and other third-parties might make longer to be deleted.`,
+      $localize`Type your username to confirm`,
       this.user.username,
-      this.i18n('Delete your account'),
-      this.i18n('Delete my account')
+      $localize`Delete your account`,
+      $localize`Delete my account`
     )
     if (res === false) return
 
     this.userService.deleteMe().subscribe(
       () => {
-        this.notifier.success(this.i18n('Your account is deleted.'))
+        this.notifier.success($localize`Your account is deleted.`)
 
         this.authService.logout()
         this.redirectService.redirectToHomepage()
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index b892ab479..bcbea7fad 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -3,7 +3,6 @@ import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, ServerService, User } from '@app/core'
 import { UserNotificationService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from '@shared/models'
 
 @Component({
@@ -25,26 +24,25 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
   private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500)
 
   constructor (
-    private i18n: I18n,
     private userNotificationService: UserNotificationService,
     private serverService: ServerService,
     private notifier: Notifier
   ) {
     this.labelNotifications = {
-      newVideoFromSubscription: this.i18n('New video from your subscriptions'),
-      newCommentOnMyVideo: this.i18n('New comment on your video'),
-      abuseAsModerator: this.i18n('New abuse'),
-      videoAutoBlacklistAsModerator: this.i18n('Video blocked automatically waiting review'),
-      blacklistOnMyVideo: this.i18n('One of your video is blocked/unblocked'),
-      myVideoPublished: this.i18n('Video published (after transcoding/scheduled update)'),
-      myVideoImportFinished: this.i18n('Video import finished'),
-      newUserRegistration: this.i18n('A new user registered on your instance'),
-      newFollow: this.i18n('You or your channel(s) has a new follower'),
-      commentMention: this.i18n('Someone mentioned you in video comments'),
-      newInstanceFollower: this.i18n('Your instance has a new follower'),
-      autoInstanceFollowing: this.i18n('Your instance automatically followed another instance'),
-      abuseNewMessage: this.i18n('An abuse report received a new message'),
-      abuseStateChange: this.i18n('One of your abuse reports has been accepted or rejected by moderators')
+      newVideoFromSubscription: $localize`New video from your subscriptions`,
+      newCommentOnMyVideo: $localize`New comment on your video`,
+      abuseAsModerator: $localize`New abuse`,
+      videoAutoBlacklistAsModerator: $localize`Video blocked automatically waiting review`,
+      blacklistOnMyVideo: $localize`One of your video is blocked/unblocked`,
+      myVideoPublished: $localize`Video published (after transcoding/scheduled update)`,
+      myVideoImportFinished: $localize`Video import finished`,
+      newUserRegistration: $localize`A new user registered on your instance`,
+      newFollow: $localize`You or your channel(s) has a new follower`,
+      commentMention: $localize`Someone mentioned you in video comments`,
+      newInstanceFollower: $localize`Your instance has a new follower`,
+      autoInstanceFollowing: $localize`Your instance automatically followed another instance`,
+      abuseNewMessage: $localize`An abuse report received a new message`,
+      abuseStateChange: $localize`One of your abuse reports has been accepted or rejected by moderators`
     }
     this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
 
@@ -91,7 +89,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
     this.userNotificationService.updateNotificationSettings(this.user, this.user.notificationSettings)
       .subscribe(
         () => {
-          this.notifier.success(this.i18n('Preferences saved'), undefined, 2000)
+          this.notifier.success($localize`Preferences saved`, undefined, 2000)
         },
 
         err => this.notifier.error(err.message)
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
index b0d8494e7..ed0984bf7 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -2,7 +2,6 @@ import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
 import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-profile',
@@ -19,9 +18,8 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
     protected formValidatorService: FormValidatorService,
     private userValidatorsService: UserValidatorsService,
     private notifier: Notifier,
-    private userService: UserService,
-    private i18n: I18n
-  ) {
+    private userService: UserService
+    ) {
     super()
   }
 
@@ -50,7 +48,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
         this.user.account.displayName = displayName
         this.user.account.description = description
 
-        this.notifier.success(this.i18n('Profile updated.'))
+        this.notifier.success($localize`Profile updated.`)
       },
 
       err => this.error = err.message
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index a3a8ff1f1..7ea4610d4 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -1,7 +1,6 @@
 import { ViewportScroller } from '@angular/common'
 import { AfterViewChecked, Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, User, UserService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-settings',
@@ -17,9 +16,8 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
     private viewportScroller: ViewportScroller,
     private userService: UserService,
     private authService: AuthService,
-    private notifier: Notifier,
-    private i18n: I18n
-  ) {}
+    private notifier: Notifier
+    ) {}
 
   get userInformationLoaded () {
     return this.authService.userInformationLoaded
@@ -41,7 +39,7 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
     this.userService.changeAvatar(formData)
       .subscribe(
         data => {
-          this.notifier.success(this.i18n('Avatar changed.'))
+          this.notifier.success($localize`Avatar changed.`)
 
           this.user.updateAccountAvatar(data.avatar)
         },