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

3 files changed, 29 insertions, 43 deletions

diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
index 039c389e4..5c438c3bf 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
@@ -3,7 +3,6 @@ import { Router } from '@angular/router'
 import { AuthService, Notifier } from '@app/core'
 import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
 import { VideoChannelService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoChannelCreate } from '@shared/models'
 import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
 
@@ -21,9 +20,8 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
     private videoChannelValidatorsService: VideoChannelValidatorsService,
     private notifier: Notifier,
     private router: Router,
-    private videoChannelService: VideoChannelService,
-    private i18n: I18n
-  ) {
+    private videoChannelService: VideoChannelService
+    ) {
     super()
   }
 
@@ -55,15 +53,13 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
       () => {
         this.authService.refreshUserInformation()
 
-        this.notifier.success(
-          this.i18n('Video channel {{videoChannelName}} created.', { videoChannelName: videoChannelCreate.displayName })
-        )
+        this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
         this.router.navigate([ '/my-account', 'video-channels' ])
       },
 
       err => {
         if (err.status === 409) {
-          this.error = this.i18n('This name already exists on this instance.')
+          this.error = $localize`This name already exists on this instance.`
           return
         }
 
@@ -77,6 +73,6 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
   }
 
   getFormButtonTitle () {
-    return this.i18n('Create')
+    return $localize`Create`
   }
 }
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
index 489c437ea..485521dcc 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
@@ -4,7 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig, VideoChannelUpdate } from '@shared/models'
 import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
 
@@ -29,7 +28,6 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
     private router: Router,
     private route: ActivatedRoute,
     private videoChannelService: VideoChannelService,
-    private i18n: I18n,
     private serverService: ServerService
   ) {
     super()
@@ -87,9 +85,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
       () => {
         this.authService.refreshUserInformation()
 
-        this.notifier.success(
-          this.i18n('Video channel {{videoChannelName}} updated.', { videoChannelName: videoChannelUpdate.displayName })
-        )
+        this.notifier.success($localize`Video channel ${videoChannelUpdate.displayName} updated.`)
 
         this.router.navigate([ '/my-account', 'video-channels' ])
       },
@@ -102,7 +98,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
     this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData)
         .subscribe(
           data => {
-            this.notifier.success(this.i18n('Avatar changed.'))
+            this.notifier.success($localize`Avatar changed.`)
 
             this.videoChannelToUpdate.updateAvatar(data.avatar)
           },
@@ -124,7 +120,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
   }
 
   getFormButtonTitle () {
-    return this.i18n('Update')
+    return $localize`Update`
   }
 
   isBulkUpdateVideosDisplayed () {
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
index ad9368794..2aff09cd9 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels.component.ts
@@ -1,11 +1,10 @@
 import { ChartData } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
-import { flatMap, debounceTime } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+import { debounceTime, mergeMap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Subject } from 'rxjs'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -30,9 +29,8 @@ export class MyAccountVideoChannelsComponent implements OnInit {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoChannelService: VideoChannelService,
-    private screenService: ScreenService,
-    private i18n: I18n
-  ) {}
+    private screenService: ScreenService
+    ) {}
 
   ngOnInit () {
     this.user = this.authService.getUser()
@@ -110,17 +108,13 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   async deleteVideoChannel (videoChannel: VideoChannel) {
     const res = await this.confirmService.confirmWithInput(
-      this.i18n(
-        // tslint:disable
-        'Do you really want to delete {{channelDisplayName}}? It will delete {{videosCount}} videos uploaded in this channel, and you will not be able to create another channel with the same name ({{channelName}})!',
-        { channelDisplayName: videoChannel.displayName, videosCount: videoChannel.videosCount, channelName: videoChannel.name }
-      ),
-      this.i18n(
-        'Please type the display name of the video channel ({{displayName}}) to confirm',
-        { displayName: videoChannel.displayName }
-      ),
-      videoChannel.displayName,
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${videoChannel.displayName}?
+It will delete ${videoChannel.videosCount} videos uploaded in this channel, and you will not be able to create another
+channel with the same name (${videoChannel.name})!`,
+
+      $localize`Please type the display name of the video channel (${videoChannel.displayName}) to confirm`,
+
+      $localize`Delete`
     )
     if (res === false) return
 
@@ -128,9 +122,7 @@ export class MyAccountVideoChannelsComponent implements OnInit {
       .subscribe(
         () => {
           this.loadVideoChannels()
-          this.notifier.success(
-            this.i18n('Video channel {{videoChannelName}} deleted.', { videoChannelName: videoChannel.displayName })
-          )
+          this.notifier.success($localize`Video channel ${videoChannel.displayName} deleted.`)
         },
 
         error => this.notifier.error(error.message)
@@ -139,7 +131,7 @@ export class MyAccountVideoChannelsComponent implements OnInit {
 
   private loadVideoChannels () {
     this.authService.userInformationLoaded
-        .pipe(flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
+        .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
         .subscribe(res => {
           this.videoChannels = res.data
           this.totalItems = res.total
@@ -149,10 +141,10 @@ export class MyAccountVideoChannelsComponent implements OnInit {
             labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
             datasets: [
               {
-                  label: this.i18n('Views for the day'),
-                  data: v.viewsPerDay.map(day => day.views),
-                  fill: false,
-                  borderColor: "#c6c6c6"
+                label: $localize`Views for the day`,
+                data: v.viewsPerDay.map(day => day.views),
+                fill: false,
+                borderColor: '#c6c6c6'
               }
             ]
           } as ChartData))
@@ -160,13 +152,15 @@ export class MyAccountVideoChannelsComponent implements OnInit {
           // chart options that depend on chart data:
           // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
           this.videoChannelsMinimumDailyViews = min(
-            this.videoChannels.map(v => minBy( // compute local minimum daily views for each channel, by their "views" attribute
+            // compute local minimum daily views for each channel, by their "views" attribute
+            this.videoChannels.map(v => minBy(
               v.viewsPerDay,
               day => day.views
             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
           )
           this.videoChannelsMaximumDailyViews = max(
-            this.videoChannels.map(v => maxBy( // compute local maximum daily views for each channel, by their "views" attribute
+            // compute local maximum daily views for each channel, by their "views" attribute
+            this.videoChannels.map(v => maxBy(
               v.viewsPerDay,
               day => day.views
             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute