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

9 files changed, 36 insertions, 70 deletions

diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
index 1389218cc..3a86e5b21 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
@@ -1,7 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
 import { Account, BytesPipe, VideoChannel } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
 
 @Component({
@@ -23,11 +22,10 @@ export class ActorAvatarInfoComponent implements OnInit {
 
   constructor (
     private serverService: ServerService,
-    private notifier: Notifier,
-    private i18n: I18n
+    private notifier: Notifier
   ) {
     this.bytesPipe = new BytesPipe()
-    this.maxSizeText = this.i18n('max size')
+    this.maxSizeText = $localize`max size`
   }
 
   ngOnInit (): void {
diff --git a/client/src/app/shared/shared-main/account/avatar.component.ts b/client/src/app/shared/shared-main/account/avatar.component.ts
index 73c145ef9..2967828a0 100644
--- a/client/src/app/shared/shared-main/account/avatar.component.ts
+++ b/client/src/app/shared/shared-main/account/avatar.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Video } from '../video/video.model'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'avatar-channel',
@@ -15,19 +14,9 @@ export class AvatarComponent implements OnInit {
   channelLinkTitle = ''
   accountLinkTitle = ''
 
-  constructor (
-    private i18n: I18n
-  ) {}
-
   ngOnInit () {
-    this.channelLinkTitle = this.i18n(
-      '{{name}} (channel page)',
-      { name: this.video.channel.name, handle: this.video.byVideoChannel }
-    )
-    this.accountLinkTitle = this.i18n(
-      '{{name}} (account page)',
-      { name: this.video.account.name, handle: this.video.byAccount }
-    )
+    this.channelLinkTitle = $localize`${this.video.account.name} (channel page)`
+    this.accountLinkTitle = $localize`${this.video.byAccount} (account page)`
   }
 
   isChannelAvatarNull () {
diff --git a/client/src/app/shared/shared-main/angular/from-now.pipe.ts b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
index 9851468ee..5d85590bb 100644
--- a/client/src/app/shared/shared-main/angular/from-now.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/from-now.pipe.ts
@@ -1,39 +1,36 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 // Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
 @Pipe({ name: 'myFromNow' })
 export class FromNowPipe implements PipeTransform {
 
-  constructor (private i18n: I18n) { }
-
   transform (arg: number | Date | string) {
     const argDate = new Date(arg)
     const seconds = Math.floor((Date.now() - argDate.getTime()) / 1000)
 
     let interval = Math.floor(seconds / 31536000)
-    if (interval > 1) return this.i18n('{{interval}} years ago', { interval })
-    if (interval === 1) return this.i18n('{{interval}} year ago', { interval })
+    if (interval > 1) return $localize`${interval} years ago`
+    if (interval === 1) return $localize`${interval} year ago`
 
     interval = Math.floor(seconds / 2592000)
-    if (interval > 1) return this.i18n('{{interval}} months ago', { interval })
-    if (interval === 1) return this.i18n('{{interval}} month ago', { interval })
+    if (interval > 1) return $localize`${interval} months ago`
+    if (interval === 1) return $localize`${interval} month ago`
 
     interval = Math.floor(seconds / 604800)
-    if (interval > 1) return this.i18n('{{interval}} weeks ago', { interval })
-    if (interval === 1) return this.i18n('{{interval}} week ago', { interval })
+    if (interval > 1) return $localize`${interval} weeks ago`
+    if (interval === 1) return $localize`${interval} week ago`
 
     interval = Math.floor(seconds / 86400)
-    if (interval > 1) return this.i18n('{{interval}} days ago', { interval })
-    if (interval === 1) return this.i18n('{{interval}} day ago', { interval })
+    if (interval > 1) return $localize`${interval} days ago`
+    if (interval === 1) return $localize`${interval} day ago`
 
     interval = Math.floor(seconds / 3600)
-    if (interval > 1) return this.i18n('{{interval}} hours ago', { interval })
-    if (interval === 1) return this.i18n('{{interval}} hour ago', { interval })
+    if (interval > 1) return $localize`${interval} hours ago`
+    if (interval === 1) return $localize`${interval} hour ago`
 
     interval = Math.floor(seconds / 60)
-    if (interval >= 1) return this.i18n('{{interval}} min ago', { interval })
+    if (interval >= 1) return $localize`${interval} min ago`
 
-    return this.i18n('just now')
+    return $localize`just now`
   }
 }
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
index aced0f881..18995422a 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-delete-button',
@@ -11,17 +10,15 @@ export class DeleteButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
 
-  constructor (private i18n: I18n) { }
-
   ngOnInit () {
     // <my-delete-button /> No label
     if (this.label === undefined && !this.title) {
-      this.title = this.i18n('Delete')
+      this.title = $localize`Delete`
     }
 
     // <my-delete-button label /> Use default label
     if (this.label === '') {
-      this.label = this.i18n('Delete')
+      this.label = $localize`Delete`
 
       if (!this.title) {
         this.title = this.label
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index d8ae39b84..4b76551ca 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-edit-button',
@@ -12,17 +11,15 @@ export class EditButtonComponent implements OnInit {
   @Input() title: string
   @Input() routerLink: string[] | string = []
 
-  constructor (private i18n: I18n) { }
-
   ngOnInit () {
     // <my-edit-button /> No label
     if (this.label === undefined && !this.title) {
-      this.title = this.i18n('Update')
+      this.title = $localize`Update`
     }
 
     // <my-edit-button label /> Use default label
     if (this.label === '') {
-      this.label = this.i18n('Update')
+      this.label = $localize`Update`
 
       if (!this.title) {
         this.title = this.label
diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts
index 0825b96de..ebc965a88 100644
--- a/client/src/app/shared/shared-main/misc/help.component.ts
+++ b/client/src/app/shared/shared-main/misc/help.component.ts
@@ -1,6 +1,5 @@
 import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
 import { MarkdownService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { PeerTubeTemplateDirective } from '../angular'
 
 @Component({
@@ -22,8 +21,6 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
   customHtmlTemplate: TemplateRef<any>
   postHtmlTemplate: TemplateRef<any>
 
-  constructor (private i18n: I18n) { }
-
   ngOnInit () {
     this.init()
   }
@@ -71,17 +68,17 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
 
   private formatMarkdownSupport (rules: string[]) {
     // tslint:disable:max-line-length
-    return this.i18n('<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:') +
+    return $localize`<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:` +
       this.createMarkdownList(rules)
   }
 
   private createMarkdownList (rules: string[]) {
     const rulesToText = {
-      'emphasis': this.i18n('Emphasis'),
-      'link': this.i18n('Links'),
-      'newline': this.i18n('New lines'),
-      'list': this.i18n('Lists'),
-      'image': this.i18n('Images')
+      'emphasis': $localize`Emphasis`,
+      'link': $localize`Links`,
+      'newline': $localize`New lines`,
+      'list': $localize`Lists`,
+      'image': $localize`Images`
     }
 
     const bullets = rules.map(r => rulesToText[r])
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 6186db4d6..7f4676dd1 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -13,7 +13,6 @@ import {
   NgbPopoverModule,
   NgbTooltipModule
 } from '@ng-bootstrap/ng-bootstrap'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account'
 import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective, BytesPipe } from './angular'
@@ -129,8 +128,6 @@ import { VideoChannelService } from './video-channel'
   ],
 
   providers: [
-    I18n,
-
     DatePipe,
 
     FromNowPipe,
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts
index 6830ad8fe..b38619186 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.ts
+++ b/client/src/app/shared/shared-main/users/user-quota.component.ts
@@ -1,7 +1,6 @@
 import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
 import { User, UserService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { BytesPipe } from '../angular'
 
 @Component({
@@ -22,10 +21,7 @@ export class UserQuotaComponent implements OnInit {
   userVideoQuotaUsedDaily = 0
   userVideoQuotaDailyPercentage = 15
 
-  constructor (
-    private userService: UserService,
-    private i18n: I18n
-  ) { }
+  constructor (private userService: UserService) { }
 
   ngOnInit () {
     this.userInformationLoaded.subscribe(
@@ -33,13 +29,13 @@ export class UserQuotaComponent implements OnInit {
         if (this.user.videoQuota !== -1) {
           this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
         } else {
-          this.userVideoQuota = this.i18n('Unlimited')
+          this.userVideoQuota = $localize`Unlimited`
         }
 
         if (this.user.videoQuotaDaily !== -1) {
           this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString()
         } else {
-          this.userVideoQuotaDaily = this.i18n('Unlimited')
+          this.userVideoQuotaDaily = $localize`Unlimited`
         }
       }
     )
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 978f775bf..b01e919aa 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -4,7 +4,6 @@ import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core'
 import { objectToFormData } from '@app/helpers'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import {
   FeedFormat,
   NSFWPolicyType,
@@ -15,11 +14,11 @@ import {
   Video as VideoServerModel,
   VideoConstant,
   VideoDetails as VideoDetailsServerModel,
+  VideoFileMetadata,
   VideoFilter,
   VideoPrivacy,
   VideoSortField,
-  VideoUpdate,
-  VideoFileMetadata
+  VideoUpdate
 } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 import { Account, AccountService } from '../account'
@@ -48,8 +47,7 @@ export class VideoService implements VideosProvider {
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
     private restService: RestService,
-    private serverService: ServerService,
-    private i18n: I18n
+    private serverService: ServerService
   ) {}
 
   getVideoViewUrl (uuid: string) {
@@ -339,19 +337,19 @@ export class VideoService implements VideosProvider {
     const base = [
       {
         id: VideoPrivacy.PRIVATE,
-        description: this.i18n('Only I can see this video')
+        description: $localize`Only I can see this video`
       },
       {
         id: VideoPrivacy.UNLISTED,
-        description: this.i18n('Only shareable via a private link')
+        description: $localize`Only shareable via a private link`
       },
       {
         id: VideoPrivacy.PUBLIC,
-        description: this.i18n('Anyone can see this video')
+        description: $localize`Anyone can see this video`
       },
       {
         id: VideoPrivacy.INTERNAL,
-        description: this.i18n('Only users of this instance can see this video')
+        description: $localize`Only users of this instance can see this video`
       }
     ]