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

6 files changed, 86 insertions, 104 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`
           })
         }
       })
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 3a8e6eecc..e9ad8af7a 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -4,10 +4,9 @@ import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@a
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
-import { VideoSend } from './video-send'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPrivacy, VideoUpdate } from '@shared/models'
+import { VideoSend } from './video-send'
 
 @Component({
   selector: 'my-video-import-torrent',
@@ -43,9 +42,8 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
     private router: Router,
-    private videoImportService: VideoImportService,
-    private i18n: I18n
-  ) {
+    private videoImportService: VideoImportService
+    ) {
     super()
   }
 
@@ -127,7 +125,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Ca
         .subscribe(
           () => {
             this.isUpdatingVideo = false
-            this.notifier.success(this.i18n('Video to import updated.'))
+            this.notifier.success($localize`Video to import updated.`)
 
             this.router.navigate([ '/my-account', 'video-imports' ])
           },
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index da25663d7..8bad81097 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -5,10 +5,9 @@ import { AuthService, CanComponentDeactivate, Notifier, ServerService } from '@a
 import { getAbsoluteAPIUrl, scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
-import { VideoSend } from './video-send'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPrivacy, VideoUpdate } from '@shared/models'
+import { VideoSend } from './video-send'
 
 @Component({
   selector: 'my-video-import-url',
@@ -42,9 +41,8 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
     private router: Router,
-    private videoImportService: VideoImportService,
-    private i18n: I18n
-  ) {
+    private videoImportService: VideoImportService
+    ) {
     super()
   }
 
@@ -137,7 +135,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, CanCom
         .subscribe(
           () => {
             this.isUpdatingVideo = false
-            this.notifier.success(this.i18n('Video to import updated.'))
+            this.notifier.success($localize`Video to import updated.`)
 
             this.router.navigate([ '/my-account', 'video-imports' ])
           },
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index e18e3c9a7..416b655a4 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -7,7 +7,6 @@ import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPrivacy } from '@shared/models'
 import { VideoSend } from './video-send'
 
@@ -59,9 +58,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
     private userService: UserService,
-    private router: Router,
-    private i18n: I18n
-  ) {
+    private router: Router
+    ) {
     super()
   }
 
@@ -88,10 +86,10 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
 
     if (this.videoUploaded === true) {
       // FIXME: cannot concatenate strings inside i18n service :/
-      text = this.i18n('Your video was uploaded to your account and is private.') + ' ' +
-        this.i18n('But associated data (tags, description...) will be lost, are you sure you want to leave this page?')
+      text = $localize`Your video was uploaded to your account and is private.` + ' ' +
+        $localize`But associated data (tags, description...) will be lost, are you sure you want to leave this page?`
     } else {
-      text = this.i18n('Your video is not uploaded yet, are you sure you want to leave this page?')
+      text = $localize`Your video is not uploaded yet, are you sure you want to leave this page?`
     }
 
     return {
@@ -111,9 +109,9 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
 
   getAudioUploadLabel () {
     const videofile = this.getVideoFile()
-    if (!videofile) return this.i18n('Upload')
+    if (!videofile) return $localize`Upload`
 
-    return this.i18n('Upload {{videofileName}}', { videofileName: videofile.name })
+    return $localize`Upload ${videofile.name}`
   }
 
   fileChange () {
@@ -130,7 +128,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
 
       this.firstStepError.emit()
 
-      this.notifier.info(this.i18n('Upload cancelled'))
+      this.notifier.info($localize`Upload cancelled`)
     }
   }
 
@@ -242,7 +240,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
             this.isUpdatingVideo = false
             this.isUploadingVideo = false
 
-            this.notifier.success(this.i18n('Video published.'))
+            this.notifier.success($localize`Video published.`)
             this.router.navigate([ '/videos/watch', video.uuid ])
           },
 
@@ -260,14 +258,12 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     // Check global user quota
     const videoQuota = this.authService.getUser().videoQuota
     if (videoQuota !== -1 && (this.userVideoQuotaUsed + videofile.size) > videoQuota) {
-      const msg = this.i18n(
-        'Your video quota is exceeded with this video (video size: {{videoSize}}, used: {{videoQuotaUsed}}, quota: {{videoQuota}})',
-        {
-          videoSize: bytePipes.transform(videofile.size, 0),
-          videoQuotaUsed: bytePipes.transform(this.userVideoQuotaUsed, 0),
-          videoQuota: bytePipes.transform(videoQuota, 0)
-        }
-      )
+      const videoSizeBytes = bytePipes.transform(videofile.size, 0)
+      const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
+      const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
+
+      const msg = $localize`Your video quota is exceeded with this video (
+video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
       this.notifier.error(msg)
 
       return false
@@ -282,14 +278,12 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     // Check daily user quota
     const videoQuotaDaily = this.authService.getUser().videoQuotaDaily
     if (videoQuotaDaily !== -1 && (this.userVideoQuotaUsedDaily + videofile.size) > videoQuotaDaily) {
-      const msg = this.i18n(
-        'Your daily video quota is exceeded with this video (video size: {{videoSize}}, used: {{quotaUsedDaily}}, quota: {{quotaDaily}})',
-        {
-          videoSize: bytePipes.transform(videofile.size, 0),
-          quotaUsedDaily: bytePipes.transform(this.userVideoQuotaUsedDaily, 0),
-          quotaDaily: bytePipes.transform(videoQuotaDaily, 0)
-        }
-      )
+      const videoSizeBytes = bytePipes.transform(videofile.size, 0)
+      const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
+      const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
+
+      const msg = $localize`Your daily video quota is exceeded with this video (
+video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
       this.notifier.error(msg)
 
       return false
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index abd08f05c..2e1d0f89d 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -5,7 +5,6 @@ import { Notifier } from '@app/core'
 import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPrivacy } from '@shared/models'
 
 @Component({
@@ -31,9 +30,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     private notifier: Notifier,
     private videoService: VideoService,
     private loadingBar: LoadingBarService,
-    private videoCaptionService: VideoCaptionService,
-    private i18n: I18n
-  ) {
+    private videoCaptionService: VideoCaptionService
+    ) {
     super()
   }
 
@@ -78,7 +76,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   canDeactivate (): { canDeactivate: boolean, text?: string } {
     if (this.updateDone === true) return { canDeactivate: true }
 
-    const text = this.i18n('You have unsaved changes! If you leave, your changes will be lost.')
+    const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
 
     for (const caption of this.videoCaptions) {
       if (caption.action) return { canDeactivate: false, text }
@@ -115,7 +113,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
             this.updateDone = true
             this.isUpdatingVideo = false
             this.loadingBar.useRef().complete()
-            this.notifier.success(this.i18n('Video updated.'))
+            this.notifier.success($localize`Video updated.`)
             this.router.navigate([ '/videos/watch', this.video.uuid ])
           },