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, 146 insertions, 193 deletions

diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index 66e068c4c..b661a5517 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ScreenService } from '@app/core'
 import { ListOverflowItem } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { UserRight } from '@shared/models'
 import { TopMenuDropdownParam } from '@app/shared/shared-main/misc/top-menu-dropdown.component'
+import { UserRight } from '@shared/models'
 
 @Component({
   templateUrl: './admin.component.html',
@@ -15,8 +14,7 @@ export class AdminComponent implements OnInit {
 
   constructor (
     private auth: AuthService,
-    private screen: ScreenService,
-    private i18n: I18n
+    private screen: ScreenService
   ) { }
 
   get isBroadcastMessageDisplayed () {
@@ -25,20 +23,20 @@ export class AdminComponent implements OnInit {
 
   ngOnInit () {
     const federationItems: TopMenuDropdownParam = {
-      label: this.i18n('Federation'),
+      label: $localize`Federation`,
       children: [
         {
-          label: this.i18n('Instances you follow'),
+          label: $localize`Instances you follow`,
           routerLink: '/admin/follows/following-list',
           iconName: 'following'
         },
         {
-          label: this.i18n('Instances following you'),
+          label: $localize`Instances following you`,
           routerLink: '/admin/follows/followers-list',
           iconName: 'follower'
         },
         {
-          label: this.i18n('Video redundancies'),
+          label: $localize`Video redundancies`,
           routerLink: '/admin/follows/video-redundancies-list',
           iconName: 'videos'
         }
@@ -46,56 +44,56 @@ export class AdminComponent implements OnInit {
     }
 
     const moderationItems: TopMenuDropdownParam = {
-      label: this.i18n('Moderation'),
+      label: $localize`Moderation`,
       children: []
     }
 
     if (this.hasAbusesRight()) {
       moderationItems.children.push({
-        label: this.i18n('Reports'),
+        label: $localize`Reports`,
         routerLink: '/admin/moderation/abuses/list',
         iconName: 'flag'
       })
     }
     if (this.hasVideoBlocklistRight()) {
       moderationItems.children.push({
-        label: this.i18n('Video blocks'),
+        label: $localize`Video blocks`,
         routerLink: '/admin/moderation/video-blocks/list',
         iconName: 'cross'
       })
     }
     if (this.hasAccountsBlocklistRight()) {
       moderationItems.children.push({
-        label: this.i18n('Muted accounts'),
+        label: $localize`Muted accounts`,
         routerLink: '/admin/moderation/blocklist/accounts',
         iconName: 'user-x'
       })
     }
     if (this.hasServersBlocklistRight()) {
       moderationItems.children.push({
-        label: this.i18n('Muted servers'),
+        label: $localize`Muted servers`,
         routerLink: '/admin/moderation/blocklist/servers',
         iconName: 'peertube-x'
       })
     }
 
     if (this.hasUsersRight()) {
-      this.menuEntries.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+      this.menuEntries.push({ label: $localize`Users`, routerLink: '/admin/users' })
     }
 
     if (this.hasServerFollowRight()) this.menuEntries.push(federationItems)
     if (this.hasAbusesRight() || this.hasVideoBlocklistRight()) this.menuEntries.push(moderationItems)
 
     if (this.hasConfigRight()) {
-      this.menuEntries.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
+      this.menuEntries.push({ label: $localize`Configuration`, routerLink: '/admin/config' })
     }
 
     if (this.hasPluginsRight()) {
-      this.menuEntries.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
+      this.menuEntries.push({ label: $localize`Plugins/Themes`, routerLink: '/admin/plugins' })
     }
 
     if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) {
-      this.menuEntries.push({ label: this.i18n('System'), routerLink: '/admin/system' })
+      this.menuEntries.push({ label: $localize`System`, routerLink: '/admin/system' })
     }
   }
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 00a0bfad2..3a60b144f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -12,7 +12,6 @@ import {
   UserValidatorsService
 } from '@app/shared/shared-forms'
 import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { CustomConfig, ServerConfig } from '@shared/models'
 
 @Component({
@@ -42,45 +41,44 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
     private userValidatorsService: UserValidatorsService,
     private notifier: Notifier,
     private configService: ConfigService,
-    private serverService: ServerService,
-    private i18n: I18n
+    private serverService: ServerService
   ) {
     super()
 
     this.resolutions = [
       {
         id: '0p',
-        label: this.i18n('Audio-only'),
-        description: this.i18n('A <code>.mp4</code> that keeps the original audio track, with no video')
+        label: $localize`Audio-only`,
+        description: $localize`A <code>.mp4</code> that keeps the original audio track, with no video`
       },
       {
         id: '240p',
-        label: this.i18n('240p')
+        label: $localize`240p`
       },
       {
         id: '360p',
-        label: this.i18n('360p')
+        label: $localize`360p`
       },
       {
         id: '480p',
-        label: this.i18n('480p')
+        label: $localize`480p`
       },
       {
         id: '720p',
-        label: this.i18n('720p')
+        label: $localize`720p`
       },
       {
         id: '1080p',
-        label: this.i18n('1080p')
+        label: $localize`1080p`
       },
       {
         id: '2160p',
-        label: this.i18n('2160p')
+        label: $localize`2160p`
       }
     ]
 
     this.transcodingThreadOptions = [
-      { value: 0, label: this.i18n('Auto (via ffmpeg)') },
+      { value: 0, label: $localize`Auto (via ffmpeg)` },
       { value: 1, label: '1' },
       { value: 2, label: '2' },
       { value: 4, label: '4' },
@@ -288,7 +286,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
 
           this.updateForm()
 
-          this.notifier.success(this.i18n('Configuration updated.'))
+          this.notifier.success($localize`Configuration updated.`)
         },
 
         err => this.notifier.error(err.message)
diff --git a/client/src/app/+admin/config/shared/config.service.ts b/client/src/app/+admin/config/shared/config.service.ts
index f182946b8..5f98aa545 100644
--- a/client/src/app/+admin/config/shared/config.service.ts
+++ b/client/src/app/+admin/config/shared/config.service.ts
@@ -2,7 +2,6 @@ import { catchError } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { CustomConfig } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 
@@ -15,33 +14,32 @@ export class ConfigService {
 
   constructor (
     private authHttp: HttpClient,
-    private restExtractor: RestExtractor,
-    private i18n: I18n
-  ) {
+    private restExtractor: RestExtractor
+    ) {
     this.videoQuotaOptions = [
       { value: undefined, label: 'Default quota', disabled: true },
-      { value: -1, label: this.i18n('Unlimited') },
+      { value: -1, label: $localize`Unlimited` },
       { value: undefined, label: '─────', disabled: true },
-      { value: 0, label: this.i18n('None - no upload possible') },
-      { value: 100 * 1024 * 1024, label: this.i18n('100MB') },
-      { value: 500 * 1024 * 1024, label: this.i18n('500MB') },
-      { value: 1024 * 1024 * 1024, label: this.i18n('1GB') },
-      { value: 5 * 1024 * 1024 * 1024, label: this.i18n('5GB') },
-      { value: 20 * 1024 * 1024 * 1024, label: this.i18n('20GB') },
-      { value: 50 * 1024 * 1024 * 1024, label: this.i18n('50GB') }
+      { value: 0, label: $localize`None - no upload possible` },
+      { value: 100 * 1024 * 1024, label: $localize`100MB` },
+      { value: 500 * 1024 * 1024, label: $localize`500MB` },
+      { value: 1024 * 1024 * 1024, label: $localize`1GB` },
+      { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+      { value: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+      { value: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
     ]
 
     this.videoQuotaDailyOptions = [
       { value: undefined, label: 'Default daily upload limit', disabled: true },
-      { value: -1, label: this.i18n('Unlimited') },
+      { value: -1, label: $localize`Unlimited` },
       { value: undefined, label: '─────', disabled: true },
-      { value: 0, label: this.i18n('None - no upload possible') },
-      { value: 10 * 1024 * 1024, label: this.i18n('10MB') },
-      { value: 50 * 1024 * 1024, label: this.i18n('50MB') },
-      { value: 100 * 1024 * 1024, label: this.i18n('100MB') },
-      { value: 500 * 1024 * 1024, label: this.i18n('500MB') },
-      { value: 2 * 1024 * 1024 * 1024, label: this.i18n('2GB') },
-      { value: 5 * 1024 * 1024 * 1024, label: this.i18n('5GB') }
+      { value: 0, label: $localize`None - no upload possible` },
+      { value: 10 * 1024 * 1024, label: $localize`10MB` },
+      { value: 50 * 1024 * 1024, label: $localize`50MB` },
+      { value: 100 * 1024 * 1024, label: $localize`100MB` },
+      { value: 500 * 1024 * 1024, label: $localize`500MB` },
+      { value: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
+      { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` }
     ]
   }
 
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index 63135f898..904e3c338 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -2,7 +2,6 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { InstanceFollowService } from '@app/shared/shared-instance'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ActorFollow } from '@shared/models'
 
 @Component({
@@ -19,7 +18,6 @@ export class FollowersListComponent extends RestTable implements OnInit {
   constructor (
     private confirmService: ConfirmService,
     private notifier: Notifier,
-    private i18n: I18n,
     private followService: InstanceFollowService
   ) {
     super()
@@ -40,7 +38,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
       .subscribe(
         () => {
           const handle = follow.follower.name + '@' + follow.follower.host
-          this.notifier.success(this.i18n('{{handle}} accepted in instance followers', { handle }))
+          this.notifier.success($localize`${handle} accepted in instance followers`)
         },
 
         err => {
@@ -51,15 +49,15 @@ export class FollowersListComponent extends RestTable implements OnInit {
   }
 
   async rejectFollower (follow: ActorFollow) {
-    const message = this.i18n('Do you really want to reject this follower?')
-    const res = await this.confirmService.confirm(message, this.i18n('Reject'))
+    const message = $localize`Do you really want to reject this follower?`
+    const res = await this.confirmService.confirm(message, $localize`Reject`)
     if (res === false) return
 
     this.followService.rejectFollower(follow)
         .subscribe(
           () => {
             const handle = follow.follower.name + '@' + follow.follower.host
-            this.notifier.success(this.i18n('{{handle}} rejected from instance followers', { handle }))
+            this.notifier.success($localize`${handle} rejected from instance followers`)
 
             this.loadData()
           },
@@ -72,15 +70,15 @@ export class FollowersListComponent extends RestTable implements OnInit {
   }
 
   async deleteFollower (follow: ActorFollow) {
-    const message = this.i18n('Do you really want to delete this follower?')
-    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
+    const message = $localize`Do you really want to delete this follower?`
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.followService.removeFollower(follow)
         .subscribe(
           () => {
             const handle = follow.follower.name + '@' + follow.follower.host
-            this.notifier.success(this.i18n('{{handle}} removed from instance followers', { handle }))
+            this.notifier.success($localize`${handle} removed from instance followers`)
 
             this.loadData()
           },
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index dae8923b5..5f71f1238 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -3,7 +3,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { BatchDomainsModalComponent } from '@app/shared/shared-moderation'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ActorFollow } from '@shared/models'
 
 @Component({
@@ -22,9 +21,8 @@ export class FollowingListComponent extends RestTable implements OnInit {
   constructor (
     private notifier: Notifier,
     private confirmService: ConfirmService,
-    private followService: InstanceFollowService,
-    private i18n: I18n
-  ) {
+    private followService: InstanceFollowService
+    ) {
     super()
   }
 
@@ -47,7 +45,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
   async addFollowing (hosts: string[]) {
     this.followService.follow(hosts).subscribe(
       () => {
-        this.notifier.success(this.i18n('Follow request(s) sent!'))
+        this.notifier.success($localize`Follow request(s) sent!`)
         this.loadData()
       },
 
@@ -57,14 +55,14 @@ export class FollowingListComponent extends RestTable implements OnInit {
 
   async removeFollowing (follow: ActorFollow) {
     const res = await this.confirmService.confirm(
-      this.i18n('Do you really want to unfollow {{host}}?', { host: follow.following.host }),
-      this.i18n('Unfollow')
+      $localize`Do you really want to unfollow ${follow.following.host}?`,
+      $localize`Unfollow`
     )
     if (res === false) return
 
     this.followService.unfollow(follow).subscribe(
       () => {
-        this.notifier.success(this.i18n('You are not following {{host}} anymore.', { host: follow.following.host }))
+        this.notifier.success($localize`You are not following ${follow.following.host} anymore.`)
         this.loadData()
       },
 
diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
index 662143abc..729b7f599 100644
--- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
+++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core'
 import { Notifier } from '@app/core'
 import { RedundancyService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-redundancy-checkbox',
@@ -14,17 +13,16 @@ export class RedundancyCheckboxComponent {
 
   constructor (
     private notifier: Notifier,
-    private redundancyService: RedundancyService,
-    private i18n: I18n
-  ) { }
+    private redundancyService: RedundancyService
+    ) { }
 
   updateRedundancyState () {
     this.redundancyService.updateRedundancy(this.host, this.redundancyAllowed)
         .subscribe(
           () => {
-            const stateLabel = this.redundancyAllowed ? this.i18n('enabled') : this.i18n('disabled')
+            const stateLabel = this.redundancyAllowed ? $localize`enabled` : $localize`disabled`
 
-            this.notifier.success(this.i18n('Redundancy for {{host}} is {{stateLabel}}', { host: this.host, stateLabel }))
+            this.notifier.success($localize`Redundancy for ${this.host} is ${stateLabel}`)
           },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 07e2e0ff3..d6fd1a1ab 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -2,7 +2,6 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { BytesPipe, RedundancyService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
 import { VideosRedundancyStats } from '@shared/models/server'
@@ -32,9 +31,8 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private redundancyService: RedundancyService,
-    private serverService: ServerService,
-    private i18n: I18n
-  ) {
+    private serverService: ServerService
+    ) {
     super()
 
     this.bytesPipe = new BytesPipe()
@@ -100,7 +98,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     this.redundanciesGraphsData.push({
       stats,
       graphData: {
-        labels: [ this.i18n('Used'), this.i18n('Available') ],
+        labels: [ $localize`Used`, $localize`Available` ],
         datasets: [
           {
             data: [ stats.totalUsed, totalSize ],
@@ -139,14 +137,14 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   }
 
   async removeRedundancy (redundancy: VideoRedundancy) {
-    const message = this.i18n('Do you really want to remove this video redundancy?')
-    const res = await this.confirmService.confirm(message, this.i18n('Remove redundancy'))
+    const message = $localize`Do you really want to remove this video redundancy?`
+    const res = await this.confirmService.confirm(message, $localize`Remove redundancy`)
     if (res === false) return
 
     this.redundancyService.removeVideoRedundancies(redundancy)
       .subscribe(
         () => {
-          this.notifier.success(this.i18n('Video redundancies removed!'))
+          this.notifier.success($localize`Video redundancies removed!`)
           this.loadData()
         },
 
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 422d873c0..2b1ef663c 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -1,15 +1,14 @@
 import { SortMeta } from 'primeng/api'
 import { filter, switchMap } from 'rxjs/operators'
+import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, OnInit } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Params, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { VideoBlockService } from '@app/shared/shared-moderation'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoBlacklist, VideoBlacklistType } from '@shared/models'
-import { buildVideoOrPlaylistEmbed, buildVideoLink } from 'src/assets/player/utils'
-import { environment } from 'src/environments/environment'
-import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
   selector: 'my-video-block-list',
@@ -34,26 +33,25 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
     private sanitizer: DomSanitizer,
     private videoService: VideoService,
     private route: ActivatedRoute,
-    private router: Router,
-    private i18n: I18n
-  ) {
+    private router: Router
+    ) {
     super()
 
     this.videoBlocklistActions = [
       [
         {
-          label: this.i18n('Internal actions'),
+          label: $localize`Internal actions`,
           isHeader: true,
           isDisplayed: videoBlock => videoBlock.type === VideoBlacklistType.AUTO_BEFORE_PUBLISHED
         },
         {
-          label: this.i18n('Switch video block to manual'),
+          label: $localize`Switch video block to manual`,
           handler: videoBlock => {
             this.videoBlocklistService.unblockVideo(videoBlock.video.id).pipe(
               switchMap(_ => this.videoBlocklistService.blockVideo(videoBlock.video.id, undefined, true))
             ).subscribe(
               () => {
-                this.notifier.success(this.i18n('Video {{name}} switched to manual block.', { name: videoBlock.video.name }))
+                this.notifier.success($localize`Video ${videoBlock.video.name} switched to manual block.`)
                 this.loadData()
               },
 
@@ -65,27 +63,27 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
       ],
       [
         {
-          label: this.i18n('Actions for the video'),
+          label: $localize`Actions for the video`,
           isHeader: true
         },
         {
-          label: this.i18n('Unblock'),
+          label: $localize`Unblock`,
           handler: videoBlock => this.unblockVideo(videoBlock)
         },
 
         {
-          label: this.i18n('Delete'),
+          label: $localize`Delete`,
           handler: async videoBlock => {
             const res = await this.confirmService.confirm(
-              this.i18n('Do you really want to delete this video?'),
-              this.i18n('Delete')
+              $localize`Do you really want to delete this video?`,
+              $localize`Delete`
             )
             if (res === false) return
 
             this.videoService.removeVideo(videoBlock.video.id)
               .subscribe(
                 () => {
-                  this.notifier.success(this.i18n('Video deleted.'))
+                  this.notifier.success($localize`Video deleted.`)
                 },
 
                 err => this.notifier.error(err.message)
@@ -148,9 +146,9 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
   }
 
   booleanToText (value: boolean) {
-    if (value === true) return this.i18n('yes')
+    if (value === true) return $localize`yes`
 
-    return this.i18n('no')
+    return $localize`no`
   }
 
   toHtml (text: string) {
@@ -158,16 +156,14 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
   }
 
   async unblockVideo (entry: VideoBlacklist) {
-    const confirmMessage = this.i18n(
-      'Do you really want to unblock this video? It will be available again in the videos list.'
-    )
+    const confirmMessage = $localize`Do you really want to unblock this video? It will be available again in the videos list.`
 
-    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblock'))
+    const res = await this.confirmService.confirm(confirmMessage, $localize`Unblock`)
     if (res === false) return
 
     this.videoBlocklistService.unblockVideo(entry.video.id).subscribe(
       () => {
-        this.notifier.success(this.i18n('Video {{name}} unblocked.', { name: entry.video.name }))
+        this.notifier.success($localize`Video ${entry.video.name} unblocked.`)
         this.loadData()
       },
 
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index af31f1144..1ffd001c6 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@app/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { compareSemVer } from '@shared/core-utils/miscs/miscs'
 import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
 import { PluginType } from '@shared/models/plugins/plugin.type'
@@ -37,7 +36,6 @@ export class PluginListInstalledComponent implements OnInit {
   onDataSubject = new Subject<any[]>()
 
   constructor (
-    private i18n: I18n,
     private pluginService: PluginService,
     private pluginApiService: PluginApiService,
     private notifier: Notifier,
@@ -88,10 +86,10 @@ export class PluginListInstalledComponent implements OnInit {
 
   getNoResultMessage () {
     if (this.pluginType === PluginType.PLUGIN) {
-      return this.i18n("You don't have plugins installed yet.")
+      return $localize`You don't have plugins installed yet.`
     }
 
-    return this.i18n("You don't have themes installed yet.")
+    return $localize`You don't have themes installed yet.`
   }
 
   isUpdateAvailable (plugin: PeerTubePlugin) {
@@ -99,7 +97,7 @@ export class PluginListInstalledComponent implements OnInit {
   }
 
   getUpdateLabel (plugin: PeerTubePlugin) {
-    return this.i18n('Update to {{version}}', { version: plugin.latestVersion })
+    return $localize`Update to ${plugin.latestVersion}`
   }
 
   isUpdating (plugin: PeerTubePlugin) {
@@ -108,15 +106,15 @@ export class PluginListInstalledComponent implements OnInit {
 
   async uninstall (plugin: PeerTubePlugin) {
     const res = await this.confirmService.confirm(
-      this.i18n('Do you really want to uninstall {{pluginName}}?', { pluginName: plugin.name }),
-      this.i18n('Uninstall')
+      $localize`Do you really want to uninstall ${plugin.name}?`,
+      $localize`Uninstall`
     )
     if (res === false) return
 
     this.pluginApiService.uninstall(plugin.name, plugin.type)
       .subscribe(
         () => {
-          this.notifier.success(this.i18n('{{pluginName}} uninstalled.', { pluginName: plugin.name }))
+          this.notifier.success($localize`${plugin.name} uninstalled.`)
 
           this.plugins = this.plugins.filter(p => p.name !== plugin.name)
           this.pagination.totalItems--
@@ -138,7 +136,7 @@ export class PluginListInstalledComponent implements OnInit {
           res => {
             this.updating[updatingKey] = false
 
-            this.notifier.success(this.i18n('{{pluginName}} updated.', { pluginName: plugin.name }))
+            this.notifier.success($localize`${plugin.name} updated.`)
 
             Object.assign(plugin, res)
           },
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index ccf9f1ed5..1a6b4eba3 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -3,8 +3,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
-import { ComponentPagination, ConfirmService, hasMoreItems, Notifier, ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ComponentPagination, ConfirmService, hasMoreItems, Notifier } from '@app/core'
 import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
 import { PluginType } from '@shared/models/plugins/plugin.type'
 
@@ -40,8 +39,6 @@ export class PluginSearchComponent implements OnInit {
   private searchSubject = new Subject<string>()
 
   constructor (
-    private server: ServerService,
-    private i18n: I18n,
     private pluginService: PluginApiService,
     private notifier: Notifier,
     private confirmService: ConfirmService,
@@ -100,7 +97,7 @@ export class PluginSearchComponent implements OnInit {
           err => {
             console.error(err)
 
-            const message = this.i18n('The plugin index is not available. Please retry later.')
+            const message = $localize`The plugin index is not available. Please retry later.`
             this.notifier.error(message)
           }
         )
@@ -122,8 +119,8 @@ export class PluginSearchComponent implements OnInit {
     if (this.installing[plugin.npmName]) return
 
     const res = await this.confirmService.confirm(
-      this.i18n('Please only install plugins or themes you trust, since they can execute any code on your instance.'),
-      this.i18n('Install {{pluginName}}?', { pluginName: plugin.name })
+      $localize`Please only install plugins or themes you trust, since they can execute any code on your instance.`,
+      $localize`Install ${plugin.name}?`
     )
     if (res === false) return
 
@@ -135,7 +132,7 @@ export class PluginSearchComponent implements OnInit {
             this.installing[plugin.npmName] = false
             this.pluginInstalled = true
 
-            this.notifier.success(this.i18n('{{pluginName}} installed.', { pluginName: plugin.name }))
+            this.notifier.success($localize`${plugin.name} installed.`)
 
             plugin.installed = true
           },
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index dde03f1da..a33f01691 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -4,7 +4,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Notifier } from '@app/core'
 import { BuildFormArgument, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { PeerTubePlugin, RegisterServerSettingOptions } from '@shared/models'
 import { PluginApiService } from '../shared/plugin-api.service'
 
@@ -22,7 +21,6 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
 
   constructor (
     protected formValidatorService: FormValidatorService,
-    private i18n: I18n,
     private pluginService: PluginApiService,
     private notifier: Notifier,
     private route: ActivatedRoute
@@ -50,7 +48,7 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
     this.pluginService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
         .subscribe(
           () => {
-            this.notifier.success(this.i18n('Settings updated.'))
+            this.notifier.success($localize`Settings updated.`)
           },
 
           err => this.notifier.error(err.message)
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index 1fb827832..b28d46df4 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -4,7 +4,6 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ComponentPagination, RestExtractor, RestService } from '@app/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { peertubeTranslate } from '@shared/core-utils/i18n'
 import {
   InstallOrUpdatePlugin,
@@ -25,18 +24,17 @@ export class PluginApiService {
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
     private restService: RestService,
-    private i18n: I18n,
     private pluginService: PluginService
   ) { }
 
   getPluginTypeOptions () {
     return [
       {
-        label: this.i18n('Plugins'),
+        label: $localize`Plugins`,
         value: PluginType.PLUGIN
       },
       {
-        label: this.i18n('Themes'),
+        label: $localize`Themes`,
         value: PluginType.THEME
       }
     ]
@@ -44,10 +42,10 @@ export class PluginApiService {
 
   getPluginTypeLabel (type: PluginType) {
     if (type === PluginType.PLUGIN) {
-      return this.i18n('plugin')
+      return $localize`plugin`
     }
 
-    return this.i18n('theme')
+    return $localize`theme`
   }
 
   getPlugins (
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index ceb848976..96e0f25b0 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -2,7 +2,6 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Job, JobState, JobType } from '@shared/models'
 import { JobStateClient } from '../../../../types/job-state-client.type'
 import { JobTypeClient } from '../../../../types/job-type-client.type'
@@ -43,9 +42,8 @@ export class JobsComponent extends RestTable implements OnInit {
 
   constructor (
     private notifier: Notifier,
-    private jobsService: JobService,
-    private i18n: I18n
-  ) {
+    private jobsService: JobService
+    ) {
     super()
   }
 
diff --git a/client/src/app/+admin/system/logs/logs.component.ts b/client/src/app/+admin/system/logs/logs.component.ts
index 51f047188..c9c9dc3d1 100644
--- a/client/src/app/+admin/system/logs/logs.component.ts
+++ b/client/src/app/+admin/system/logs/logs.component.ts
@@ -1,6 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { LogLevel } from '@shared/models'
 import { LogRow } from './log-row.model'
 import { LogsService } from './logs.service'
@@ -25,9 +24,8 @@ export class LogsComponent implements OnInit {
 
   constructor (
     private logsService: LogsService,
-    private notifier: Notifier,
-    private i18n: I18n
-  ) { }
+    private notifier: Notifier
+    ) { }
 
   ngOnInit (): void {
     this.buildTimeChoices()
@@ -78,15 +76,15 @@ export class LogsComponent implements OnInit {
     this.timeChoices = [
       {
         id: lastWeek.toISOString(),
-        label: this.i18n('Last week')
+        label: $localize`Last week`
       },
       {
         id: lastDay.toISOString(),
-        label: this.i18n('Last day')
+        label: $localize`Last day`
       },
       {
         id: lastHour.toISOString(),
-        label: this.i18n('Last hour')
+        label: $localize`Last hour`
       }
     ]
 
@@ -97,19 +95,19 @@ export class LogsComponent implements OnInit {
     this.levelChoices = [
       {
         id: 'debug',
-        label: this.i18n('Debug')
+        label: $localize`Debug`
       },
       {
         id: 'info',
-        label: this.i18n('Info')
+        label: $localize`Info`
       },
       {
         id: 'warn',
-        label: this.i18n('Warning')
+        label: $localize`Warning`
       },
       {
         id: 'error',
-        label: this.i18n('Error')
+        label: $localize`Error`
       }
     ]
 
@@ -120,11 +118,11 @@ export class LogsComponent implements OnInit {
     this.logTypeChoices = [
       {
         id: 'standard',
-        label: this.i18n('Standard logs')
+        label: $localize`Standard logs`
       },
       {
         id: 'audit',
-        label: this.i18n('Audit logs')
+        label: $localize`Audit logs`
       }
     ]
 
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 3fddb9c09..36d71a927 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -3,7 +3,6 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
 import { FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserCreate, UserRole } from '@shared/models'
 import { UserEdit } from './user-edit'
 
@@ -25,9 +24,8 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private notifier: Notifier,
-    private userService: UserService,
-    private i18n: I18n
-  ) {
+    private userService: UserService
+    ) {
     super()
 
     this.buildQuotaOptions()
@@ -67,7 +65,7 @@ export class UserCreateComponent extends UserEdit implements OnInit {
 
     this.userService.addUser(userCreate).subscribe(
       () => {
-        this.notifier.success(this.i18n('User {{username}} created.', { username: userCreate.username }))
+        this.notifier.success($localize`User ${userCreate.username} created.`)
         this.router.navigate([ '/admin/users/list' ])
       },
 
@@ -85,6 +83,6 @@ export class UserCreateComponent extends UserEdit implements OnInit {
   }
 
   getFormButtonTitle () {
-    return this.i18n('Create user')
+    return $localize`Create user`
   }
 }
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts
index 33c7de31f..25f13495a 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-password.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, UserService } from '@app/core'
 import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserUpdate } from '@shared/models'
 
 @Component({
@@ -20,9 +19,8 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
     protected formValidatorService: FormValidatorService,
     private userValidatorsService: UserValidatorsService,
     private notifier: Notifier,
-    private userService: UserService,
-    private i18n: I18n
-  ) {
+    private userService: UserService
+    ) {
     super()
   }
 
@@ -39,9 +37,7 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
 
     this.userService.updateUser(this.userId, userUpdate).subscribe(
       () => {
-        this.notifier.success(
-          this.i18n('Password changed for user {{username}}.', { username: this.username })
-        )
+        this.notifier.success($localize`Password changed for user ${this.username}.`)
       },
 
       err => this.error = err.message
@@ -53,6 +49,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
   }
 
   getFormButtonTitle () {
-    return this.i18n('Update user password')
+    return $localize`Update user password`
   }
 }
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 870880fee..55bc7290e 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
 import { FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { User as UserType, UserAdminFlag, UserRole, UserUpdate } from '@shared/models'
 import { UserEdit } from './user-edit'
 
@@ -28,9 +27,8 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private notifier: Notifier,
-    private userService: UserService,
-    private i18n: I18n
-  ) {
+    private userService: UserService
+    ) {
     super()
 
     this.buildQuotaOptions()
@@ -79,7 +77,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
 
     this.userService.updateUser(this.user.id, userUpdate).subscribe(
       () => {
-        this.notifier.success(this.i18n('User {{username}} updated.', { username: this.user.username }))
+        this.notifier.success($localize`User ${this.user.username} updated.`)
         this.router.navigate([ '/admin/users/list' ])
       },
 
@@ -96,15 +94,13 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   }
 
   getFormButtonTitle () {
-    return this.i18n('Update user')
+    return $localize`Update user`
   }
 
   resetPassword () {
     this.userService.askResetPassword(this.user.email).subscribe(
       () => {
-        this.notifier.success(
-          this.i18n('An email asking for password reset has been sent to {{username}}.', { username: this.user.username })
-        )
+        this.notifier.success($localize`An email asking for password reset has been sent to ${this.user.username}.`)
       },
 
       err => this.error = err.message
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 69d4e917d..86812f73d 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,11 +1,10 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 import { AuthService, ConfirmService, Notifier, RestPagination, RestTable, ServerService, UserService } from '@app/core'
 import { Actor, DropdownAction } from '@app/shared/shared-main'
 import { UserBanModalComponent } from '@app/shared/shared-moderation'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, User, UserRole } from '@shared/models'
-import { Params, Router, ActivatedRoute } from '@angular/router'
 
 type UserForList = User & {
   rawVideoQuota: number
@@ -42,9 +41,8 @@ export class UserListComponent extends RestTable implements OnInit {
     private userService: UserService,
     private auth: AuthService,
     private route: ActivatedRoute,
-    private router: Router,
-    private i18n: I18n
-  ) {
+    private router: Router
+    ) {
     super()
   }
 
@@ -82,26 +80,26 @@ export class UserListComponent extends RestTable implements OnInit {
     this.bulkUserActions = [
       [
         {
-          label: this.i18n('Delete'),
-          description: this.i18n('Videos will be deleted, comments will be tombstoned.'),
+          label: $localize`Delete`,
+          description: $localize`Videos will be deleted, comments will be tombstoned.`,
           handler: users => this.removeUsers(users),
           isDisplayed: users => users.every(u => this.authUser.canManage(u))
         },
         {
-          label: this.i18n('Ban'),
-          description: this.i18n('User won\'t be able to login anymore, but videos and comments will be kept as is.'),
+          label: $localize`Ban`,
+          description: $localize`User won't be able to login anymore, but videos and comments will be kept as is.`,
           handler: users => this.openBanUserModal(users),
           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === false)
         },
         {
-          label: this.i18n('Unban'),
+          label: $localize`Unban`,
           handler: users => this.unbanUsers(users),
           isDisplayed: users => users.every(u => this.authUser.canManage(u) && u.blocked === true)
         }
       ],
       [
         {
-          label: this.i18n('Set Email as Verified'),
+          label: $localize`Set Email as Verified`,
           handler: users => this.setEmailsAsVerified(users),
           isDisplayed: users => {
             return this.requiresEmailVerification &&
@@ -160,7 +158,7 @@ export class UserListComponent extends RestTable implements OnInit {
   openBanUserModal (users: User[]) {
     for (const user of users) {
       if (user.username === 'root') {
-        this.notifier.error(this.i18n('You cannot ban root.'))
+        this.notifier.error($localize`You cannot ban root.`)
         return
       }
     }
@@ -197,17 +195,13 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   async unbanUsers (users: User[]) {
-    const message = this.i18n('Do you really want to unban {{num}} users?', { num: users.length })
-
-    const res = await this.confirmService.confirm(message, this.i18n('Unban'))
+    const res = await this.confirmService.confirm($localize`Do you really want to unban ${users.length} users?`, $localize`Unban`)
     if (res === false) return
 
     this.userService.unbanUsers(users)
         .subscribe(
           () => {
-            const message = this.i18n('{{num}} users unbanned.', { num: users.length })
-
-            this.notifier.success(message)
+            this.notifier.success($localize`${users.length} users unbanned.`)
             this.loadData()
           },
 
@@ -218,18 +212,18 @@ export class UserListComponent extends RestTable implements OnInit {
   async removeUsers (users: User[]) {
     for (const user of users) {
       if (user.username === 'root') {
-        this.notifier.error(this.i18n('You cannot delete root.'))
+        this.notifier.error($localize`You cannot delete root.`)
         return
       }
     }
 
-    const message = this.i18n('If you remove these users, you will not be able to create others with the same username!')
-    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
+    const message = $localize`If you remove these users, you will not be able to create others with the same username!`
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.userService.removeUser(users).subscribe(
       () => {
-        this.notifier.success(this.i18n('{{num}} users deleted.', { num: users.length }))
+        this.notifier.success($localize`${users.length} users deleted.`)
         this.loadData()
       },
 
@@ -240,7 +234,7 @@ export class UserListComponent extends RestTable implements OnInit {
   async setEmailsAsVerified (users: User[]) {
     this.userService.updateUsers(users, { emailVerified: true }).subscribe(
       () => {
-        this.notifier.success(this.i18n('{{num}} users email set as verified.', { num: users.length }))
+        this.notifier.success($localize`${users.length} users email set as verified.`)
         this.loadData()
       },