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, 53 insertions, 59 deletions

diff --git a/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts b/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts
index b05852ff8..2acbace48 100644
--- a/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts
+++ b/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts
@@ -1,76 +1,75 @@
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Injectable } from '@angular/core'
 
 @Injectable()
 export class I18nPrimengCalendarService {
   private readonly calendarLocale: any = {}
 
-  constructor (private i18n: I18n) {
+  constructor () {
     this.calendarLocale = {
       firstDayOfWeek: 0,
       dayNames: [
-        this.i18n('Sunday'),
-        this.i18n('Monday'),
-        this.i18n('Tuesday'),
-        this.i18n('Wednesday'),
-        this.i18n('Thursday'),
-        this.i18n('Friday'),
-        this.i18n('Saturday')
+        $localize`Sunday`,
+        $localize`Monday`,
+        $localize`Tuesday`,
+        $localize`Wednesday`,
+        $localize`Thursday`,
+        $localize`Friday`,
+        $localize`Saturday`
       ],
 
       dayNamesShort: [
-        this.i18n({ value: 'Sun', description: 'Day name short' }),
-        this.i18n({ value: 'Mon', description: 'Day name short' }),
-        this.i18n({ value: 'Tue', description: 'Day name short' }),
-        this.i18n({ value: 'Wed', description: 'Day name short' }),
-        this.i18n({ value: 'Thu', description: 'Day name short' }),
-        this.i18n({ value: 'Fri', description: 'Day name short' }),
-        this.i18n({ value: 'Sat', description: 'Day name short' })
+        $localize`:Day name short:Sun`,
+        $localize`:Day name short:Mon`,
+        $localize`:Day name short:Tue`,
+        $localize`:Day name short:Wed`,
+        $localize`:Day name short:Thu`,
+        $localize`:Day name short:Fri`,
+        $localize`:Day name short:Sat`
       ],
 
       dayNamesMin: [
-        this.i18n({ value: 'Su', description: 'Day name min' }),
-        this.i18n({ value: 'Mo', description: 'Day name min' }),
-        this.i18n({ value: 'Tu', description: 'Day name min' }),
-        this.i18n({ value: 'We', description: 'Day name min' }),
-        this.i18n({ value: 'Th', description: 'Day name min' }),
-        this.i18n({ value: 'Fr', description: 'Day name min' }),
-        this.i18n({ value: 'Sa', description: 'Day name min' })
+        $localize`:Day name min:Su`,
+        $localize`:Day name min:Mo`,
+        $localize`:Day name min:Tu`,
+        $localize`:Day name min:We`,
+        $localize`:Day name min:Th`,
+        $localize`:Day name min:Fr`,
+        $localize`:Day name min:Sa`
       ],
 
       monthNames: [
-        this.i18n('January'),
-        this.i18n('February'),
-        this.i18n('March'),
-        this.i18n('April'),
-        this.i18n('May'),
-        this.i18n('June'),
-        this.i18n('July'),
-        this.i18n('August'),
-        this.i18n('September'),
-        this.i18n('October'),
-        this.i18n('November'),
-        this.i18n('December')
+        $localize`January`,
+        $localize`February`,
+        $localize`March`,
+        $localize`April`,
+        $localize`May`,
+        $localize`June`,
+        $localize`July`,
+        $localize`August`,
+        $localize`September`,
+        $localize`October`,
+        $localize`November`,
+        $localize`December`
       ],
 
       monthNamesShort: [
-        this.i18n({ value: 'Jan', description: 'Month name short' }),
-        this.i18n({ value: 'Feb', description: 'Month name short' }),
-        this.i18n({ value: 'Mar', description: 'Month name short' }),
-        this.i18n({ value: 'Apr', description: 'Month name short' }),
-        this.i18n({ value: 'May', description: 'Month name short' }),
-        this.i18n({ value: 'Jun', description: 'Month name short' }),
-        this.i18n({ value: 'Jul', description: 'Month name short' }),
-        this.i18n({ value: 'Aug', description: 'Month name short' }),
-        this.i18n({ value: 'Sep', description: 'Month name short' }),
-        this.i18n({ value: 'Oct', description: 'Month name short' }),
-        this.i18n({ value: 'Nov', description: 'Month name short' }),
-        this.i18n({ value: 'Dec', description: 'Month name short' })
+        $localize`:Month name short:Jan`,
+        $localize`:Month name short:Feb`,
+        $localize`:Month name short:Mar`,
+        $localize`:Month name short:Apr`,
+        $localize`:Month name short:May`,
+        $localize`:Month name short:Jun`,
+        $localize`:Month name short:Jul`,
+        $localize`:Month name short:Aug`,
+        $localize`:Month name short:Sep`,
+        $localize`:Month name short:Oct`,
+        $localize`:Month name short:Nov`,
+        $localize`:Month name short:Dec`
       ],
 
-      today: this.i18n('Today'),
+      today: $localize`Today`,
 
-      clear: this.i18n('Clear')
+      clear: $localize`Clear`
     }
   }
 
@@ -86,9 +85,6 @@ export class I18nPrimengCalendarService {
   }
 
   getDateFormat () {
-    return this.i18n({
-      value: 'yy-mm-dd ',
-      description: 'Date format in this locale.'
-    })
+    return $localize`:Date format in this locale.:yy-mm-dd`
   }
 }
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index ba3b7c96a..050b6d931 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -7,7 +7,6 @@ import { removeElementFromArray } from '@app/helpers'
 import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem, VideoValidatorsService } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
@@ -63,7 +62,6 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     private serverService: ServerService,
     private instanceService: InstanceService,
     private i18nPrimengCalendarService: I18nPrimengCalendarService,
-    private i18n: I18n,
     private ngZone: NgZone
   ) {
     this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
@@ -137,8 +135,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       .subscribe(res => {
         this.videoLanguages = res.languages
           .map(l => res.about.instance.languages.includes(l.id)
-            ? { ...l, group: this.i18n('Instance languages'), groupOrder: 0 }
-            : { ...l, group: this.i18n('All languages'), groupOrder: 1 })
+            ? { ...l, group: $localize`Instance languages`, groupOrder: 0 }
+            : { ...l, group: $localize`All languages`, groupOrder: 1 })
           .sort((a, b) => a.groupOrder - b.groupOrder)
       })
 
@@ -148,8 +146,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
         if (this.schedulePublicationPossible) {
           this.videoPrivacies.push({
             id: this.SPECIAL_SCHEDULED_PRIVACY,
-            label: this.i18n('Scheduled'),
-            description: this.i18n('Hide the video until a specific date')
+            label: $localize`Scheduled`,
+            description: $localize`Hide the video until a specific date`
           })
         }
       })