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

19 files changed, 156 insertions, 189 deletions

diff --git a/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
index 5f15963f3..56d30d6f9 100644
--- a/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
@@ -1,6 +1,5 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
@@ -9,31 +8,31 @@ export class AbuseValidatorsService {
   readonly ABUSE_MODERATION_COMMENT: BuildFormValidator
   readonly ABUSE_MESSAGE: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.ABUSE_REASON = {
       VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
-        'required': this.i18n('Report reason is required.'),
-        'minlength': this.i18n('Report reason must be at least 2 characters long.'),
-        'maxlength': this.i18n('Report reason cannot be more than 3000 characters long.')
+        'required': $localize`Report reason is required.`,
+        'minlength': $localize`Report reason must be at least 2 characters long.`,
+        'maxlength': $localize`Report reason cannot be more than 3000 characters long.`
       }
     }
 
     this.ABUSE_MODERATION_COMMENT = {
       VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
-        'required': this.i18n('Moderation comment is required.'),
-        'minlength': this.i18n('Moderation comment must be at least 2 characters long.'),
-        'maxlength': this.i18n('Moderation comment cannot be more than 3000 characters long.')
+        'required': $localize`Moderation comment is required.`,
+        'minlength': $localize`Moderation comment must be at least 2 characters long.`,
+        'maxlength': $localize`Moderation comment cannot be more than 3000 characters long.`
       }
     }
 
     this.ABUSE_MESSAGE = {
       VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
       MESSAGES: {
-        'required': this.i18n('Abuse message is required.'),
-        'minlength': this.i18n('Abuse message must be at least 2 characters long.'),
-        'maxlength': this.i18n('Abuse message cannot be more than 3000 characters long.')
+        'required': $localize`Abuse message is required.`,
+        'minlength': $localize`Abuse message must be at least 2 characters long.`,
+        'maxlength': $localize`Abuse message cannot be more than 3000 characters long.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts
index f270b602b..6c7da833f 100644
--- a/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { ValidatorFn, Validators } from '@angular/forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { BuildFormValidator } from './form-validator.service'
 import { validateHost } from './host'
 
@@ -8,13 +7,13 @@ import { validateHost } from './host'
 export class BatchDomainsValidatorsService {
   readonly DOMAINS: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.DOMAINS = {
       VALIDATORS: [ Validators.required, this.validDomains, this.isHostsUnique ],
       MESSAGES: {
-        'required': this.i18n('Domain is required.'),
-        'validDomains': this.i18n('Domains entered are invalid.'),
-        'uniqueDomains': this.i18n('Domains entered contain duplicates.')
+        'required': $localize`Domain is required.`,
+        'validDomains': $localize`Domains entered are invalid.`,
+        'uniqueDomains': $localize`Domains entered contain duplicates.`
       }
     }
   }
@@ -33,7 +32,7 @@ export class BatchDomainsValidatorsService {
 
     for (const host of hosts) {
       if (validateHost(host) === false) {
-        newHostsErrors.push(this.i18n('{{host}} is not valid', { host }))
+        newHostsErrors.push($localize`${host} is not valid`)
       }
     }
 
diff --git a/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts
index c77aba6a1..862ff5470 100644
--- a/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts
@@ -1,7 +1,6 @@
+import { Injectable } from '@angular/core'
 import { Validators } from '@angular/forms'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { BuildFormValidator } from './form-validator.service'
-import { Injectable } from '@angular/core'
 
 @Injectable()
 export class CustomConfigValidatorsService {
@@ -16,82 +15,82 @@ export class CustomConfigValidatorsService {
   readonly INDEX_URL: BuildFormValidator
   readonly SEARCH_INDEX_URL: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.INSTANCE_NAME = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('Instance name is required.')
+        'required': $localize`Instance name is required.`
       }
     }
 
     this.INSTANCE_SHORT_DESCRIPTION = {
       VALIDATORS: [ Validators.max(250) ],
       MESSAGES: {
-        'max': this.i18n('Short description should not be longer than 250 characters.')
+        'max': $localize`Short description should not be longer than 250 characters.`
       }
     }
 
     this.SERVICES_TWITTER_USERNAME = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('Twitter username is required.')
+        'required': $localize`Twitter username is required.`
       }
     }
 
     this.CACHE_PREVIEWS_SIZE = {
       VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
       MESSAGES: {
-        'required': this.i18n('Previews cache size is required.'),
-        'min': this.i18n('Previews cache size must be greater than 1.'),
-        'pattern': this.i18n('Previews cache size must be a number.')
+        'required': $localize`Previews cache size is required.`,
+        'min': $localize`Previews cache size must be greater than 1.`,
+        'pattern': $localize`Previews cache size must be a number.`
       }
     }
 
     this.CACHE_CAPTIONS_SIZE = {
       VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
       MESSAGES: {
-        'required': this.i18n('Captions cache size is required.'),
-        'min': this.i18n('Captions cache size must be greater than 1.'),
-        'pattern': this.i18n('Captions cache size must be a number.')
+        'required': $localize`Captions cache size is required.`,
+        'min': $localize`Captions cache size must be greater than 1.`,
+        'pattern': $localize`Captions cache size must be a number.`
       }
     }
 
     this.SIGNUP_LIMIT = {
       VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
       MESSAGES: {
-        'required': this.i18n('Signup limit is required.'),
-        'min': this.i18n('Signup limit must be greater than 1.'),
-        'pattern': this.i18n('Signup limit must be a number.')
+        'required': $localize`Signup limit is required.`,
+        'min': $localize`Signup limit must be greater than 1.`,
+        'pattern': $localize`Signup limit must be a number.`
       }
     }
 
     this.ADMIN_EMAIL = {
       VALIDATORS: [ Validators.required, Validators.email ],
       MESSAGES: {
-        'required': this.i18n('Admin email is required.'),
-        'email': this.i18n('Admin email must be valid.')
+        'required': $localize`Admin email is required.`,
+        'email': $localize`Admin email must be valid.`
       }
     }
 
     this.TRANSCODING_THREADS = {
       VALIDATORS: [ Validators.required, Validators.min(0) ],
       MESSAGES: {
-        'required': this.i18n('Transcoding threads is required.'),
-        'min': this.i18n('Transcoding threads must be greater or equal to 0.')
+        'required': $localize`Transcoding threads is required.`,
+        'min': $localize`Transcoding threads must be greater or equal to 0.`
       }
     }
 
     this.INDEX_URL = {
       VALIDATORS: [ Validators.pattern(/^https:\/\//) ],
       MESSAGES: {
-        'pattern': this.i18n('Index URL should be a URL')
+        'pattern': $localize`Index URL should be a URL`
       }
     }
 
     this.SEARCH_INDEX_URL = {
       VALIDATORS: [ Validators.pattern(/^https?:\/\//) ],
       MESSAGES: {
-        'pattern': this.i18n('Search index URL should be a URL')
+        'pattern': $localize`Search index URL should be a URL`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts
index 96a35a48f..3628f0b60 100644
--- a/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts
@@ -1,7 +1,6 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Injectable } from '@angular/core'
 import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
-import { Injectable } from '@angular/core'
 
 @Injectable()
 export class InstanceValidatorsService {
@@ -10,13 +9,13 @@ export class InstanceValidatorsService {
   readonly SUBJECT: BuildFormValidator
   readonly BODY: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
 
     this.FROM_EMAIL = {
       VALIDATORS: [ Validators.required, Validators.email ],
       MESSAGES: {
-        'required': this.i18n('Email is required.'),
-        'email': this.i18n('Email must be valid.')
+        'required': $localize`Email is required.`,
+        'email': $localize`Email must be valid.`
       }
     }
 
@@ -27,9 +26,9 @@ export class InstanceValidatorsService {
         Validators.maxLength(120)
       ],
       MESSAGES: {
-        'required': this.i18n('Your name is required.'),
-        'minlength': this.i18n('Your name must be at least 1 character long.'),
-        'maxlength': this.i18n('Your name cannot be more than 120 characters long.')
+        'required': $localize`Your name is required.`,
+        'minlength': $localize`Your name must be at least 1 character long.`,
+        'maxlength': $localize`Your name cannot be more than 120 characters long.`
       }
     }
 
@@ -40,9 +39,9 @@ export class InstanceValidatorsService {
         Validators.maxLength(120)
       ],
       MESSAGES: {
-        'required': this.i18n('A subject is required.'),
-        'minlength': this.i18n('The subject must be at least 1 character long.'),
-        'maxlength': this.i18n('The subject cannot be more than 120 characters long.')
+        'required': $localize`A subject is required.`,
+        'minlength': $localize`The subject must be at least 1 character long.`,
+        'maxlength': $localize`The subject cannot be more than 120 characters long.`
       }
     }
 
@@ -53,9 +52,9 @@ export class InstanceValidatorsService {
         Validators.maxLength(5000)
       ],
       MESSAGES: {
-        'required': this.i18n('A message is required.'),
-        'minlength': this.i18n('The message must be at least 3 characters long.'),
-        'maxlength': this.i18n('The message cannot be more than 5000 characters long.')
+        'required': $localize`A message is required.`,
+        'minlength': $localize`The message must be at least 3 characters long.`,
+        'maxlength': $localize`The message cannot be more than 5000 characters long.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts
index a5837357e..67ea11f20 100644
--- a/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts
@@ -1,6 +1,5 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
@@ -8,13 +7,13 @@ export class LoginValidatorsService {
   readonly LOGIN_USERNAME: BuildFormValidator
   readonly LOGIN_PASSWORD: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.LOGIN_USERNAME = {
       VALIDATORS: [
         Validators.required
       ],
       MESSAGES: {
-        'required': this.i18n('Username is required.')
+        'required': $localize`Username is required.`
       }
     }
 
@@ -23,7 +22,7 @@ export class LoginValidatorsService {
         Validators.required
       ],
       MESSAGES: {
-        'required': this.i18n('Password is required.')
+        'required': $localize`Password is required.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts
index d2085a309..3d0b4dd64 100644
--- a/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts
@@ -1,19 +1,18 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
 export class ResetPasswordValidatorsService {
   readonly RESET_PASSWORD_CONFIRM: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.RESET_PASSWORD_CONFIRM = {
       VALIDATORS: [
         Validators.required
       ],
       MESSAGES: {
-        'required': this.i18n('Confirmation of the password is required.')
+        'required': $localize`Confirmation of the password is required.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts
index 61486bbab..312fc9b1e 100644
--- a/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts
@@ -1,7 +1,6 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Injectable } from '@angular/core'
 import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
-import { Injectable } from '@angular/core'
 
 @Injectable()
 export class UserValidatorsService {
@@ -20,7 +19,7 @@ export class UserValidatorsService {
 
   readonly USER_BAN_REASON: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
 
     this.USER_USERNAME = {
       VALIDATORS: [
@@ -30,10 +29,10 @@ export class UserValidatorsService {
         Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
       ],
       MESSAGES: {
-        'required': this.i18n('Username is required.'),
-        'minlength': this.i18n('Username must be at least 1 character long.'),
-        'maxlength': this.i18n('Username cannot be more than 50 characters long.'),
-        'pattern': this.i18n('Username should be lowercase alphanumeric; dots and underscores are allowed.')
+        'required': $localize`Username is required.`,
+        'minlength': $localize`Username must be at least 1 character long.`,
+        'maxlength': $localize`Username cannot be more than 50 characters long.`,
+        'pattern': $localize`Username should be lowercase alphanumeric; dots and underscores are allowed.`
       }
     }
 
@@ -45,18 +44,18 @@ export class UserValidatorsService {
         Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
       ],
       MESSAGES: {
-        'required': this.i18n('Channel name is required.'),
-        'minlength': this.i18n('Channel name must be at least 1 character long.'),
-        'maxlength': this.i18n('Channel name cannot be more than 50 characters long.'),
-        'pattern': this.i18n('Channel name should be lowercase alphanumeric; dots and underscores are allowed.')
+        'required': $localize`Channel name is required.`,
+        'minlength': $localize`Channel name must be at least 1 character long.`,
+        'maxlength': $localize`Channel name cannot be more than 50 characters long.`,
+        'pattern': $localize`Channel name should be lowercase alphanumeric; dots and underscores are allowed.`
       }
     }
 
     this.USER_EMAIL = {
       VALIDATORS: [ Validators.required, Validators.email ],
       MESSAGES: {
-        'required': this.i18n('Email is required.'),
-        'email': this.i18n('Email must be valid.')
+        'required': $localize`Email is required.`,
+        'email': $localize`Email must be valid.`
       }
     }
 
@@ -67,9 +66,9 @@ export class UserValidatorsService {
         Validators.maxLength(255)
       ],
       MESSAGES: {
-        'required': this.i18n('Password is required.'),
-        'minlength': this.i18n('Password must be at least 6 characters long.'),
-        'maxlength': this.i18n('Password cannot be more than 255 characters long.')
+        'required': $localize`Password is required.`,
+        'minlength': $localize`Password must be at least 6 characters long.`,
+        'maxlength': $localize`Password cannot be more than 255 characters long.`
       }
     }
 
@@ -79,37 +78,37 @@ export class UserValidatorsService {
         Validators.maxLength(255)
       ],
       MESSAGES: {
-        'minlength': this.i18n('Password must be at least 6 characters long.'),
-        'maxlength': this.i18n('Password cannot be more than 255 characters long.')
+        'minlength': $localize`Password must be at least 6 characters long.`,
+        'maxlength': $localize`Password cannot be more than 255 characters long.`
       }
     }
 
     this.USER_CONFIRM_PASSWORD = {
       VALIDATORS: [],
       MESSAGES: {
-        'matchPassword': this.i18n('The new password and the confirmed password do not correspond.')
+        'matchPassword': $localize`The new password and the confirmed password do not correspond.`
       }
     }
 
     this.USER_VIDEO_QUOTA = {
       VALIDATORS: [ Validators.required, Validators.min(-1) ],
       MESSAGES: {
-        'required': this.i18n('Video quota is required.'),
-        'min': this.i18n('Quota must be greater than -1.')
+        'required': $localize`Video quota is required.`,
+        'min': $localize`Quota must be greater than -1.`
       }
     }
     this.USER_VIDEO_QUOTA_DAILY = {
       VALIDATORS: [ Validators.required, Validators.min(-1) ],
       MESSAGES: {
-        'required': this.i18n('Daily upload limit is required.'),
-        'min': this.i18n('Daily upload limit must be greater than -1.')
+        'required': $localize`Daily upload limit is required.`,
+        'min': $localize`Daily upload limit must be greater than -1.`
       }
     }
 
     this.USER_ROLE = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('User role is required.')
+        'required': $localize`User role is required.`
       }
     }
 
@@ -121,8 +120,8 @@ export class UserValidatorsService {
         Validators.maxLength(1000)
       ],
       MESSAGES: {
-        'minlength': this.i18n('Description must be at least 3 characters long.'),
-        'maxlength': this.i18n('Description cannot be more than 1000 characters long.')
+        'minlength': $localize`Description must be at least 3 characters long.`,
+        'maxlength': $localize`Description cannot be more than 1000 characters long.`
       }
     }
 
@@ -131,7 +130,7 @@ export class UserValidatorsService {
         Validators.requiredTrue
       ],
       MESSAGES: {
-        'required': this.i18n('You must agree with the instance terms in order to register on it.')
+        'required': $localize`You must agree with the instance terms in order to register on it.`
       }
     }
 
@@ -141,8 +140,8 @@ export class UserValidatorsService {
         Validators.maxLength(250)
       ],
       MESSAGES: {
-        'minlength': this.i18n('Ban reason must be at least 3 characters long.'),
-        'maxlength': this.i18n('Ban reason cannot be more than 250 characters long.')
+        'minlength': $localize`Ban reason must be at least 3 characters long.`,
+        'maxlength': $localize`Ban reason cannot be more than 250 characters long.`
       }
     }
   }
@@ -154,9 +153,9 @@ export class UserValidatorsService {
         Validators.maxLength(120)
       ],
       MESSAGES: {
-        'required': this.i18n('Display name is required.'),
-        'minlength': this.i18n('Display name must be at least 1 character long.'),
-        'maxlength': this.i18n('Display name cannot be more than 50 characters long.')
+        'required': $localize`Display name is required.`,
+        'minlength': $localize`Display name must be at least 1 character long.`,
+        'maxlength': $localize`Display name cannot be more than 50 characters long.`
       }
     }
 
diff --git a/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts
index 998d616ec..aed9e9cdd 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts
@@ -1,17 +1,16 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
 export class VideoAcceptOwnershipValidatorsService {
   readonly CHANNEL: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.CHANNEL = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('The channel is required.')
+        'required': $localize`The channel is required.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts
index ddf0ab5eb..bce1880dc 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts
@@ -1,18 +1,17 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
 export class VideoBlockValidatorsService {
   readonly VIDEO_BLOCK_REASON: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.VIDEO_BLOCK_REASON = {
       VALIDATORS: [ Validators.minLength(2), Validators.maxLength(300) ],
       MESSAGES: {
-        'minlength': this.i18n('Block reason must be at least 2 characters long.'),
-        'maxlength': this.i18n('Block reason cannot be more than 300 characters long.')
+        'minlength': $localize`Block reason must be at least 2 characters long.`,
+        'maxlength': $localize`Block reason cannot be more than 300 characters long.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts
index 280d28414..7e90264e5 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts
@@ -1,6 +1,5 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
@@ -8,19 +7,19 @@ export class VideoCaptionsValidatorsService {
   readonly VIDEO_CAPTION_LANGUAGE: BuildFormValidator
   readonly VIDEO_CAPTION_FILE: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
 
     this.VIDEO_CAPTION_LANGUAGE = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('Video caption language is required.')
+        'required': $localize`Video caption language is required.`
       }
     }
 
     this.VIDEO_CAPTION_FILE = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('Video caption file is required.')
+        'required': $localize`Video caption file is required.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts
index 59659defd..8c809a0d5 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts
@@ -1,18 +1,17 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { AbstractControl, ValidationErrors, Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { AbstractControl, ValidationErrors, Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
 export class VideoChangeOwnershipValidatorsService {
   readonly USERNAME: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.USERNAME = {
       VALIDATORS: [ Validators.required, this.localAccountValidator ],
       MESSAGES: {
-        'required': this.i18n('The username is required.'),
-        'localAccountOnly': this.i18n('You can only transfer ownership to a local account')
+        'required': $localize`The username is required.`,
+        'localAccountOnly': $localize`You can only transfer ownership to a local account`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts
index bb650b149..3e7444196 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts
@@ -1,6 +1,5 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
@@ -10,7 +9,7 @@ export class VideoChannelValidatorsService {
   readonly VIDEO_CHANNEL_DESCRIPTION: BuildFormValidator
   readonly VIDEO_CHANNEL_SUPPORT: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.VIDEO_CHANNEL_NAME = {
       VALIDATORS: [
         Validators.required,
@@ -19,10 +18,10 @@ export class VideoChannelValidatorsService {
         Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
       ],
       MESSAGES: {
-        'required': this.i18n('Name is required.'),
-        'minlength': this.i18n('Name must be at least 1 character long.'),
-        'maxlength': this.i18n('Name cannot be more than 50 characters long.'),
-        'pattern': this.i18n('Name should be lowercase alphanumeric; dots and underscores are allowed.')
+        'required': $localize`Name is required.`,
+        'minlength': $localize`Name must be at least 1 character long.`,
+        'maxlength': $localize`Name cannot be more than 50 characters long.`,
+        'pattern': $localize`Name should be lowercase alphanumeric; dots and underscores are allowed.`
       }
     }
 
@@ -33,9 +32,9 @@ export class VideoChannelValidatorsService {
         Validators.maxLength(50)
       ],
       MESSAGES: {
-        'required': i18n('Display name is required.'),
-        'minlength': i18n('Display name must be at least 1 character long.'),
-        'maxlength': i18n('Display name cannot be more than 50 characters long.')
+        'required': $localize`Display name is required.`,
+        'minlength': $localize`Display name must be at least 1 character long.`,
+        'maxlength': $localize`Display name cannot be more than 50 characters long.`
       }
     }
 
@@ -45,8 +44,8 @@ export class VideoChannelValidatorsService {
         Validators.maxLength(1000)
       ],
       MESSAGES: {
-        'minlength': i18n('Description must be at least 3 characters long.'),
-        'maxlength': i18n('Description cannot be more than 1000 characters long.')
+        'minlength': $localize`Description must be at least 3 characters long.`,
+        'maxlength': $localize`Description cannot be more than 1000 characters long.`
       }
     }
 
@@ -56,8 +55,8 @@ export class VideoChannelValidatorsService {
         Validators.maxLength(1000)
       ],
       MESSAGES: {
-        'minlength': i18n('Support text must be at least 3 characters long.'),
-        'maxlength': i18n('Support text cannot be more than 1000 characters long.')
+        'minlength': $localize`Support text must be at least 3 characters long.`,
+        'maxlength': $localize`Support text cannot be more than 1000 characters long`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts
index 97c8e967e..18e7ae264 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts
@@ -1,19 +1,18 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
 export class VideoCommentValidatorsService {
   readonly VIDEO_COMMENT_TEXT: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.VIDEO_COMMENT_TEXT = {
       VALIDATORS: [ Validators.required, Validators.minLength(1), Validators.maxLength(3000) ],
       MESSAGES: {
-        'required': this.i18n('Comment is required.'),
-        'minlength': this.i18n('Comment must be at least 2 characters long.'),
-        'maxlength': this.i18n('Comment cannot be more than 3000 characters long.')
+        'required': $localize`Comment is required.`,
+        'minlength': $localize`Comment must be at least 2 characters long.`,
+        'maxlength': $localize`Comment cannot be more than 3000 characters long.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts
index ab9c43625..3b45a40fd 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts
@@ -1,8 +1,7 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { AbstractControl, FormControl, Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
-import { BuildFormValidator } from './form-validator.service'
+import { AbstractControl, Validators } from '@angular/forms'
 import { VideoPlaylistPrivacy } from '@shared/models'
+import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
 export class VideoPlaylistValidatorsService {
@@ -11,7 +10,7 @@ export class VideoPlaylistValidatorsService {
   readonly VIDEO_PLAYLIST_DESCRIPTION: BuildFormValidator
   readonly VIDEO_PLAYLIST_CHANNEL_ID: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.VIDEO_PLAYLIST_DISPLAY_NAME = {
       VALIDATORS: [
         Validators.required,
@@ -19,9 +18,9 @@ export class VideoPlaylistValidatorsService {
         Validators.maxLength(120)
       ],
       MESSAGES: {
-        'required': this.i18n('Display name is required.'),
-        'minlength': this.i18n('Display name must be at least 1 character long.'),
-        'maxlength': this.i18n('Display name cannot be more than 120 characters long.')
+        'required': $localize`Display name is required.`,
+        'minlength': $localize`Display name must be at least 1 character long.`,
+        'maxlength': $localize`Display name cannot be more than 120 characters long.`
       }
     }
 
@@ -30,7 +29,7 @@ export class VideoPlaylistValidatorsService {
         Validators.required
       ],
       MESSAGES: {
-        'required': this.i18n('Privacy is required.')
+        'required': $localize`Privacy is required.`
       }
     }
 
@@ -40,15 +39,15 @@ export class VideoPlaylistValidatorsService {
         Validators.maxLength(1000)
       ],
       MESSAGES: {
-        'minlength': i18n('Description must be at least 3 characters long.'),
-        'maxlength': i18n('Description cannot be more than 1000 characters long.')
+        'minlength': $localize`Description must be at least 3 characters long.`,
+        'maxlength': $localize`Description cannot be more than 1000 characters long.`
       }
     }
 
     this.VIDEO_PLAYLIST_CHANNEL_ID = {
       VALIDATORS: [ ],
       MESSAGES: {
-        'required': this.i18n('The channel is required when the playlist is public.')
+        'required': $localize`The channel is required when the playlist is public.`
       }
     }
   }
diff --git a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
index c96e4ef66..8119c1ae7 100644
--- a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
+++ b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
@@ -1,6 +1,5 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms'
 import { Injectable } from '@angular/core'
+import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.service'
 
 @Injectable()
@@ -19,21 +18,21 @@ export class VideoValidatorsService {
   readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator
   readonly VIDEO_ORIGINALLY_PUBLISHED_AT: BuildFormValidator
 
-  constructor (private i18n: I18n) {
+  constructor () {
 
     this.VIDEO_NAME = {
       VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
       MESSAGES: {
-        'required': this.i18n('Video name is required.'),
-        'minlength': this.i18n('Video name must be at least 3 characters long.'),
-        'maxlength': this.i18n('Video name cannot be more than 120 characters long.')
+        'required': $localize`Video name is required.`,
+        'minlength': $localize`Video name must be at least 3 characters long.`,
+        'maxlength': $localize`Video name cannot be more than 120 characters long.`
       }
     }
 
     this.VIDEO_PRIVACY = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('Video privacy is required.')
+        'required': $localize`Video privacy is required.`
       }
     }
 
@@ -60,46 +59,46 @@ export class VideoValidatorsService {
     this.VIDEO_CHANNEL = {
       VALIDATORS: [ Validators.required ],
       MESSAGES: {
-        'required': this.i18n('Video channel is required.')
+        'required': $localize`Video channel is required.`
       }
     }
 
     this.VIDEO_DESCRIPTION = {
       VALIDATORS: [ Validators.minLength(3), Validators.maxLength(10000) ],
       MESSAGES: {
-        'minlength': this.i18n('Video description must be at least 3 characters long.'),
-        'maxlength': this.i18n('Video description cannot be more than 10000 characters long.')
+        'minlength': $localize`Video description must be at least 3 characters long.`,
+        'maxlength': $localize`Video description cannot be more than 10000 characters long.`
       }
     }
 
     this.VIDEO_TAG = {
       VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ],
       MESSAGES: {
-        'minlength': this.i18n('A tag should be more than 2 characters long.'),
-        'maxlength': this.i18n('A tag should be less than 30 characters long.')
+        'minlength': $localize`A tag should be more than 2 characters long.`,
+        'maxlength': $localize`A tag should be less than 30 characters long.`
       }
     }
 
     this.VIDEO_TAGS_ARRAY = {
       VALIDATORS: [ Validators.maxLength(5), this.arrayTagLengthValidator() ],
       MESSAGES: {
-        'maxlength': this.i18n('A maximum of 5 tags can be used on a video.'),
-        'arrayTagLength': this.i18n('A tag should be more than 2, and less than 30 characters long.')
+        'maxlength': $localize`A maximum of 5 tags can be used on a video.`,
+        'arrayTagLength': $localize`A tag should be more than 2, and less than 30 characters long.`
       }
     }
 
     this.VIDEO_SUPPORT = {
       VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ],
       MESSAGES: {
-        'minlength': this.i18n('Video support must be at least 3 characters long.'),
-        'maxlength': this.i18n('Video support cannot be more than 1000 characters long.')
+        'minlength': $localize`Video support must be at least 3 characters long.`,
+        'maxlength': $localize`Video support cannot be more than 1000 characters long.`
       }
     }
 
     this.VIDEO_SCHEDULE_PUBLICATION_AT = {
       VALIDATORS: [ ],
       MESSAGES: {
-        'required': this.i18n('A date is required to schedule video update.')
+        'required': $localize`A date is required to schedule video update.`
       }
     }
 
diff --git a/client/src/app/shared/shared-forms/input-readonly-copy.component.ts b/client/src/app/shared/shared-forms/input-readonly-copy.component.ts
index 7528fb7a1..a67b0c691 100644
--- a/client/src/app/shared/shared-forms/input-readonly-copy.component.ts
+++ b/client/src/app/shared/shared-forms/input-readonly-copy.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { Notifier } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-input-readonly-copy',
@@ -10,12 +9,9 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class InputReadonlyCopyComponent {
   @Input() value = ''
 
-  constructor (
-    private notifier: Notifier,
-    private i18n: I18n
-  ) { }
+  constructor (private notifier: Notifier) { }
 
   activateCopiedMessage () {
-    this.notifier.success(this.i18n('Copied'))
+    this.notifier.success($localize`Copied`)
   }
 }
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.ts b/client/src/app/shared/shared-forms/preview-upload.component.ts
index 7afff0b31..a55dcdd9a 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.ts
+++ b/client/src/app/shared/shared-forms/preview-upload.component.ts
@@ -2,7 +2,6 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
 import { BytesPipe } from '../shared-main'
 
@@ -34,11 +33,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
 
   constructor (
     private sanitizer: DomSanitizer,
-    private serverService: ServerService,
-    private i18n: I18n
+    private serverService: ServerService
   ) {
     this.bytesPipe = new BytesPipe()
-    this.maxSizeText = this.i18n('max size')
+    this.maxSizeText = $localize`max size`
   }
 
   get videoImageExtensions () {
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index 9ebf487ce..eeb2a3fd8 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@ang
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-reactive-file',
@@ -31,10 +30,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
 
   private file: File
 
-  constructor (
-    private notifier: Notifier,
-    private i18n: I18n
-  ) {}
+  constructor (private notifier: Notifier) { }
 
   get filename () {
     if (!this.file) return ''
@@ -51,16 +47,13 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
       const [ file ] = event.target.files
 
       if (file.size > this.maxFileSize) {
-        this.notifier.error(this.i18n('This file is too large.'))
+        this.notifier.error($localize`This file is too large.`)
         return
       }
 
       const extension = '.' + file.name.split('.').pop()
       if (this.extensions.includes(extension) === false) {
-        const message = this.i18n(
-          'PeerTube cannot handle this kind of file. Accepted extensions are {{extensions}}.',
-          { extensions: this.allowedExtensionsMessage }
-        )
+        const message = $localize`PeerTube cannot handle this kind of file. Accepted extensions are ${this.allowedExtensionsMessage}}.`
         this.notifier.error(message)
 
         return
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
index fd683ae5d..eb0c49034 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
@@ -1,7 +1,6 @@
-import { Component, Input, forwardRef, OnInit } from '@angular/core'
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+import { Component, forwardRef, Input, OnInit } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { SelectOptionsItem } from './select-options.component'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 export type ItemSelectCheckboxValue = { id?: string | number, group?: string } | string
 
@@ -25,12 +24,8 @@ export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
   @Input() maxSelectedItems: number
   @Input() placeholder: string
 
-  constructor (
-    private i18n: I18n
-  ) {}
-
   ngOnInit () {
-    if (!this.placeholder) this.placeholder = this.i18n('Add a new option')
+    if (!this.placeholder) this.placeholder = $localize`Add a new option`
   }
 
   propagateChange = (_: any) => { /* empty */ }