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

18 files changed, 118 insertions, 179 deletions

diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
index 039c389e4..5c438c3bf 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
@@ -3,7 +3,6 @@ import { Router } from '@angular/router'
 import { AuthService, Notifier } from '@app/core'
 import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
 import { VideoChannelService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoChannelCreate } from '@shared/models'
 import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
 
@@ -21,9 +20,8 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
     private videoChannelValidatorsService: VideoChannelValidatorsService,
     private notifier: Notifier,
     private router: Router,
-    private videoChannelService: VideoChannelService,
-    private i18n: I18n
-  ) {
+    private videoChannelService: VideoChannelService
+    ) {
     super()
   }
 
@@ -55,15 +53,13 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
       () => {
         this.authService.refreshUserInformation()
 
-        this.notifier.success(
-          this.i18n('Video channel {{videoChannelName}} created.', { videoChannelName: videoChannelCreate.displayName })
-        )
+        this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
         this.router.navigate([ '/my-account', 'video-channels' ])
       },
 
       err => {
         if (err.status === 409) {
-          this.error = this.i18n('This name already exists on this instance.')
+          this.error = $localize`This name already exists on this instance.`
           return
         }
 
@@ -77,6 +73,6 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
   }
 
   getFormButtonTitle () {
-    return this.i18n('Create')
+    return $localize`Create`
   }
 }
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
index 489c437ea..485521dcc 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, VideoChannelUpdate } from '@shared/models'
 import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
 
@@ -29,7 +28,6 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
     private router: Router,
     private route: ActivatedRoute,
     private videoChannelService: VideoChannelService,
-    private i18n: I18n,
     private serverService: ServerService
   ) {
     super()
@@ -87,9 +85,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
       () => {
         this.authService.refreshUserInformation()
 
-        this.notifier.success(
-          this.i18n('Video channel {{videoChannelName}} updated.', { videoChannelName: videoChannelUpdate.displayName })
-        )
+        this.notifier.success($localize`Video channel ${videoChannelUpdate.displayName} updated.`)
 
         this.router.navigate([ '/my-account', 'video-channels' ])
       },
@@ -102,7 +98,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
     this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData)
         .subscribe(
           data => {
-            this.notifier.success(this.i18n('Avatar changed.'))
+            this.notifier.success($localize`Avatar changed.`)
 
             this.videoChannelToUpdate.updateAvatar(data.avatar)
           },
@@ -124,7 +120,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
   }
 
   getFormButtonTitle () {
-    return this.i18n('Update')
+    return $localize`Update`
   }
 
   isBulkUpdateVideosDisplayed () {
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
index ad9368794..2aff09cd9 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
@@ -1,11 +1,10 @@
 import { ChartData } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
-import { flatMap, debounceTime } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+import { debounceTime, mergeMap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Subject } from 'rxjs'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -30,9 +29,8 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoChannelService: VideoChannelService,
-    private screenService: ScreenService,
-    private i18n: I18n
-  ) {}
+    private screenService: ScreenService
+    ) {}
 
   ngOnInit () {
     this.user = this.authService.getUser()
@@ -110,17 +108,13 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
-      this.i18n(
-        // tslint:disable
-        'Do you really want to delete {{channelDisplayName}}? It will delete {{videosCount}} videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
-        { channelDisplayName: videoChannel.displayName, videosCount: videoChannel.videosCount, channelName: videoChannel.name }
-      ),
-      this.i18n(
-        'Please type the display name of the video channel ({{displayName}}) to confirm',
-        { displayName: videoChannel.displayName }
-      ),
-      videoChannel.displayName,
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${videoChannel.displayName}?
+It will delete ${videoChannel.videosCount} videos uploaded in this channel, and you will not be able to create another
+channel with the same name (${videoChannel.name})!`,
+
+      $localize`Please type the display name of the video channel (${videoChannel.displayName}) to confirm`,
+
+      $localize`Delete`
     )
     if (res === false) return
 
@@ -128,9 +122,7 @@ export class MyAccountVideoChannelsComponent implements OnInit {
       .subscribe(
         () => {
           this.loadVideoChannels()
-          this.notifier.success(
-            this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
-          )
+          this.notifier.success($localize`Video channel ${videoChannel.displayName} deleted.`)
         },
 
         error => this.notifier.error(error.message)
@@ -139,7 +131,7 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
+        .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
         .subscribe(res => {
           this.videoChannels = res.data
           this.totalItems = res.total
@@ -149,10 +141,10 @@ export class MyAccountVideoChannelsComponent implements OnInit {
             labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
             datasets: [
               {
-                  label: this.i18n('Views for the day'),
-                  data: v.viewsPerDay.map(day => day.views),
-                  fill: false,
-                  borderColor: "#c6c6c6"
+                label: $localize`Views for the day`,
+                data: v.viewsPerDay.map(day => day.views),
+                fill: false,
+                borderColor: '#c6c6c6'
               }
             ]
           } as ChartData))
@@ -160,13 +152,15 @@ export class MyAccountVideoChannelsComponent implements OnInit {
           // chart options that depend on chart data:
           // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
           this.videoChannelsMinimumDailyViews = min(
-            this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
+            // compute local minimum daily views for each channel, by their "views" attribute
+            this.videoChannels.map(v => minBy(
               v.viewsPerDay,
               day => day.views
             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
           )
           this.videoChannelsMaximumDailyViews = max(
-            this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
+            // compute local maximum daily views for each channel, by their "views" attribute
+            this.videoChannels.map(v => maxBy(
               v.viewsPerDay,
               day => day.views
             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
index dc78b3d6e..3298c56c7 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.ts
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
@@ -13,7 +13,6 @@ import {
 import { immutableAssign } from '@app/helpers'
 import { UserHistoryService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-account-history',
@@ -30,7 +29,6 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
   videosHistoryEnabled: boolean
 
   constructor (
-    protected i18n: I18n,
     protected router: Router,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
@@ -44,7 +42,7 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
   ) {
     super()
 
-    this.titlePage = this.i18n('My videos history')
+    this.titlePage = $localize`My videos history`
   }
 
   ngOnInit () {
@@ -72,8 +70,8 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
       .subscribe(
         () => {
           const message = this.videosHistoryEnabled === true ?
-            this.i18n('Videos history is enabled') :
-            this.i18n('Videos history is disabled')
+            $localize`Videos history is enabled` :
+            $localize`Videos history is disabled`
 
           this.notifier.success(message)
 
@@ -85,8 +83,8 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
   }
 
   async deleteHistory () {
-    const title = this.i18n('Delete videos history')
-    const message = this.i18n('Are you sure you want to delete all your videos history?')
+    const title = $localize`Delete videos history`
+    const message = $localize`Are you sure you want to delete all your videos history?`
 
     const res = await this.confirmService.confirm(message, title)
     if (res !== true) return
@@ -94,7 +92,7 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
     this.userHistoryService.deleteUserVideosHistory()
         .subscribe(
           () => {
-            this.notifier.success(this.i18n('Videos history deleted'))
+            this.notifier.success($localize`Videos history deleted`)
 
             this.reloadVideos()
           },
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
index 0e62b5ca5..3bfffe2da 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@@ -3,7 +3,6 @@ import { AuthService, Notifier } from '@app/core'
 import { FormReactive, FormValidatorService, VideoAcceptOwnershipValidatorsService } from '@app/shared/shared-forms'
 import { VideoChannelService, VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoChangeOwnership, VideoChannel } from '@shared/models'
 
 @Component({
@@ -29,9 +28,8 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O
     private notifier: Notifier,
     private authService: AuthService,
     private videoChannelService: VideoChannelService,
-    private modalService: NgbModal,
-    private i18n: I18n
-  ) {
+    private modalService: NgbModal
+    ) {
     super()
   }
 
@@ -63,7 +61,7 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O
       .acceptOwnership(videoChangeOwnership.id, { channelId: channel })
       .subscribe(
         () => {
-          this.notifier.success(this.i18n('Ownership accepted'))
+          this.notifier.success($localize`Ownership accepted`)
           if (this.accepted) this.accepted.emit()
           this.videoChangeOwnership = undefined
         },
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)
         },
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
index e72ae2366..5427dc3a0 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
@@ -1,13 +1,12 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
+import { populateAsyncUserVideoChannels } from '@app/helpers'
 import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
 import { VideoPlaylistPrivacy } from '@shared/models/videos/playlist/video-playlist-privacy.model'
 import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
-import { populateAsyncUserVideoChannels } from '@app/helpers'
 
 @Component({
   selector: 'my-account-video-playlist-create',
@@ -24,9 +23,8 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
     private notifier: Notifier,
     private router: Router,
     private videoPlaylistService: VideoPlaylistService,
-    private serverService: ServerService,
-    private i18n: I18n
-  ) {
+    private serverService: ServerService
+    ) {
     super()
   }
 
@@ -70,9 +68,7 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
 
     this.videoPlaylistService.createVideoPlaylist(videoPlaylistCreate).subscribe(
       () => {
-        this.notifier.success(
-          this.i18n('Playlist {{playlistName}} created.', { playlistName: videoPlaylistCreate.displayName })
-        )
+        this.notifier.success($localize`Playlist ${videoPlaylistCreate.displayName} created.`)
         this.router.navigate([ '/my-account', 'video-playlists' ])
       },
 
@@ -85,6 +81,6 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
   }
 
   getFormButtonTitle () {
-    return this.i18n('Create')
+    return $localize`Create`
   }
 }
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
index e278d9ed2..f6cdf1067 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts
@@ -6,7 +6,6 @@ import { ComponentPagination, ConfirmService, Notifier, ScreenService } from '@a
 import { DropdownAction } from '@app/shared/shared-main'
 import { VideoShareComponent } from '@app/shared/shared-share-modal'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPlaylistType } from '@shared/models'
 
 @Component({
@@ -35,7 +34,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
 
   constructor (
     private notifier: Notifier,
-    private i18n: I18n,
     private router: Router,
     private confirmService: ConfirmService,
     private route: ActivatedRoute,
@@ -47,12 +45,12 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     this.playlistActions = [
       [
         {
-          label: this.i18n('Update playlist'),
+          label: $localize`Update playlist`,
           iconName: 'edit',
           linkBuilder: playlist => [ '/my-account', 'video-playlists', 'update', playlist.uuid ]
         },
         {
-          label: this.i18n('Delete playlist'),
+          label: $localize`Delete playlist`,
           iconName: 'delete',
           handler: playlist => this.deleteVideoPlaylist(playlist)
         }
@@ -126,11 +124,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
 
   async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
     const res = await this.confirmService.confirm(
-      this.i18n(
-        'Do you really want to delete {{playlistDisplayName}}?',
-        { playlistDisplayName: videoPlaylist.displayName }
-      ),
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${videoPlaylist.displayName}?`,
+      $localize`Delete`
     )
     if (res === false) return
 
@@ -138,10 +133,7 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
       .subscribe(
         () => {
           this.router.navigate([ '/my-account', 'video-playlists' ])
-
-          this.notifier.success(
-            this.i18n('Playlist {{playlistDisplayName}} deleted.', { playlistDisplayName: videoPlaylist.displayName })
-          )
+          this.notifier.success($localize`Playlist ${videoPlaylist.displayName} deleted.`)
         },
 
         error => this.notifier.error(error.message)
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
index 6787fb757..149d0d94f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
@@ -6,7 +6,6 @@ import { AuthService, Notifier, ServerService } from '@app/core'
 import { populateAsyncUserVideoChannels } from '@app/helpers'
 import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPlaylistUpdate } from '@shared/models'
 import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
 
@@ -29,7 +28,6 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
     private router: Router,
     private route: ActivatedRoute,
     private videoPlaylistService: VideoPlaylistService,
-    private i18n: I18n,
     private serverService: ServerService
   ) {
     super()
@@ -91,10 +89,7 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
 
     this.videoPlaylistService.updateVideoPlaylist(this.videoPlaylistToUpdate, videoPlaylistUpdate).subscribe(
       () => {
-        this.notifier.success(
-          this.i18n('Playlist {{videoPlaylistName}} updated.', { videoPlaylistName: videoPlaylistUpdate.displayName })
-        )
-
+        this.notifier.success($localize`Playlist ${videoPlaylistUpdate.displayName} updated.`)
         this.router.navigate([ '/my-account', 'video-playlists' ])
       },
 
@@ -107,7 +102,7 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
   }
 
   getFormButtonTitle () {
-    return this.i18n('Update')
+    return $localize`Update`
   }
 
   private hydrateFormFromPlaylist () {
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
index ba95b6c8b..1e569c0b6 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts
@@ -3,7 +3,6 @@ import { debounceTime, mergeMap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ComponentPagination, ConfirmService, Notifier, User } from '@app/core'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPlaylistType } from '@shared/models'
 
 @Component({
@@ -30,9 +29,8 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
     private authService: AuthService,
     private notifier: Notifier,
     private confirmService: ConfirmService,
-    private videoPlaylistService: VideoPlaylistService,
-    private i18n: I18n
-  ) {}
+    private videoPlaylistService: VideoPlaylistService
+    ) {}
 
   ngOnInit () {
     this.user = this.authService.getUser()
@@ -49,11 +47,8 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
 
   async deleteVideoPlaylist (videoPlaylist: VideoPlaylist) {
     const res = await this.confirmService.confirm(
-      this.i18n(
-        'Do you really want to delete {{playlistDisplayName}}?',
-        { playlistDisplayName: videoPlaylist.displayName }
-      ),
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${videoPlaylist.displayName}?`,
+      $localize`Delete`
     )
     if (res === false) return
 
@@ -63,9 +58,7 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
           this.videoPlaylists = this.videoPlaylists
                                     .filter(p => p.id !== videoPlaylist.id)
 
-          this.notifier.success(
-            this.i18n('Playlist {{playlistDisplayName}} deleted.', { playlistDisplayName: videoPlaylist.displayName })
-          )
+          this.notifier.success($localize`Playlist ${videoPlaylist.displayName}} deleted.`)
         },
 
         error => this.notifier.error(error.message)
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 2274c6a7b..46a02a41a 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -7,7 +7,6 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { immutableAssign } from '@app/helpers'
 import { Video, VideoService } from '@app/shared/shared-main'
 import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoSortField } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
 
@@ -50,11 +49,10 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
     protected authService: AuthService,
     protected notifier: Notifier,
     protected screenService: ScreenService,
-    private i18n: I18n,
     private confirmService: ConfirmService,
     private videoService: VideoService
   ) {
-    this.titlePage = this.i18n('My videos')
+    this.titlePage = $localize`My videos`
   }
 
   ngOnInit () {
@@ -97,8 +95,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
                                     .map(k => parseInt(k, 10))
 
     const res = await this.confirmService.confirm(
-      this.i18n('Do you really want to delete {{deleteLength}} videos?', { deleteLength: toDeleteVideosIds.length }),
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
+      $localize`Delete`
     )
     if (res === false) return
 
@@ -114,8 +112,7 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
       .pipe(toArray())
       .subscribe(
         () => {
-          this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length }))
-
+          this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
           this.selection = {}
         },
 
@@ -125,15 +122,15 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
 
   async deleteVideo (video: Video) {
     const res = await this.confirmService.confirm(
-      this.i18n('Do you really want to delete {{videoName}}?', { videoName: video.name }),
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${video.name}?`,
+      $localize`Delete`
     )
     if (res === false) return
 
     this.videoService.removeVideo(video.id)
         .subscribe(
           () => {
-            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name }))
+            this.notifier.success($localize`Video ${video.name} deleted.`)
             this.removeVideoFromArray(video.id)
           },
 
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
index 18e716a09..edd691694 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -3,7 +3,6 @@ import { Notifier, UserService } from '@app/core'
 import { FormReactive, FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared/shared-forms'
 import { Video, VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-change-ownership',
@@ -25,9 +24,8 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
     private videoOwnershipService: VideoOwnershipService,
     private notifier: Notifier,
     private userService: UserService,
-    private modalService: NgbModal,
-    private i18n: I18n
-  ) {
+    private modalService: NgbModal
+    ) {
     super()
   }
 
@@ -63,7 +61,7 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
     this.videoOwnershipService
       .changeOwnership(this.video.id, username)
       .subscribe(
-        () => this.notifier.success(this.i18n('Ownership change request sent.')),
+        () => this.notifier.success($localize`Ownership change request sent.`),
 
         err => this.notifier.error(err.message)
       )
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index 56373e5f1..d3bf8d143 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { AuthService, ScreenService, ServerService, AuthUser } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AuthService, AuthUser, ScreenService, ServerService } from '@app/core'
 import { ServerConfig } from '@shared/models'
 import { TopMenuDropdownParam } from '../shared/shared-main/misc/top-menu-dropdown.component'
 
@@ -18,9 +17,8 @@ export class MyAccountComponent implements OnInit {
   constructor (
     private serverService: ServerService,
     private authService: AuthService,
-    private screenService: ScreenService,
-    private i18n: I18n
-  ) { }
+    private screenService: ScreenService
+    ) { }
 
   get isBroadcastMessageDisplayed () {
     return this.screenService.isBroadcastMessageDisplayed
@@ -46,31 +44,31 @@ export class MyAccountComponent implements OnInit {
 
   private buildMenu () {
     const libraryEntries: TopMenuDropdownParam = {
-      label: this.i18n('My library'),
+      label: $localize`My library`,
       children: [
         {
-          label: this.i18n('My channels'),
+          label: $localize`My channels`,
           routerLink: '/my-account/video-channels',
           iconName: 'channel'
         },
         {
-          label: this.i18n('My videos'),
+          label: $localize`My videos`,
           routerLink: '/my-account/videos',
           iconName: 'videos',
           isDisplayed: () => this.user.canSeeVideosLink
         },
         {
-          label: this.i18n('My playlists'),
+          label: $localize`My playlists`,
           routerLink: '/my-account/video-playlists',
           iconName: 'playlists'
         },
         {
-          label: this.i18n('My subscriptions'),
+          label: $localize`My subscriptions`,
           routerLink: '/my-account/subscriptions',
           iconName: 'subscriptions'
         },
         {
-          label: this.i18n('My history'),
+          label: $localize`My history`,
           routerLink: '/my-account/history/videos',
           iconName: 'history'
         }
@@ -87,25 +85,25 @@ export class MyAccountComponent implements OnInit {
     }
 
     const miscEntries: TopMenuDropdownParam = {
-      label: this.i18n('Misc'),
+      label: $localize`Misc`,
       children: [
         {
-          label: this.i18n('Muted accounts'),
+          label: $localize`Muted accounts`,
           routerLink: '/my-account/blocklist/accounts',
           iconName: 'user-x'
         },
         {
-          label: this.i18n('Muted servers'),
+          label: $localize`Muted servers`,
           routerLink: '/my-account/blocklist/servers',
           iconName: 'peertube-x'
         },
         {
-          label: this.i18n('My abuse reports'),
+          label: $localize`My abuse reports`,
           routerLink: '/my-account/abuses',
           iconName: 'flag'
         },
         {
-          label: this.i18n('Ownership changes'),
+          label: $localize`Ownership changes`,
           routerLink: '/my-account/ownership',
           iconName: 'download'
         }
@@ -114,11 +112,11 @@ export class MyAccountComponent implements OnInit {
 
     this.menuEntries = [
       {
-        label: this.i18n('My settings'),
+        label: $localize`My settings`,
         routerLink: '/my-account/settings'
       },
       {
-        label: this.i18n('My notifications'),
+        label: $localize`My notifications`,
         routerLink: '/my-account/notifications'
       },
       libraryEntries,