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

2 files changed, 29 insertions, 33 deletions

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` }
     ]
   }