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

5 files changed, 10 insertions, 25 deletions

diff --git a/client/src/app/+videos/video-list/video-local.component.ts b/client/src/app/+videos/video-list/video-local.component.ts
index b4c71ac49..07063d4d4 100644
--- a/client/src/app/+videos/video-list/video-local.component.ts
+++ b/client/src/app/+videos/video-list/video-local.component.ts
@@ -5,7 +5,6 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserRight, VideoFilter, VideoSortField } from '@shared/models'
 
 @Component({
@@ -21,7 +20,6 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
   useUserVideoPreferences = true
 
   constructor (
-    protected i18n: I18n,
     protected router: Router,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
@@ -35,7 +33,7 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
   ) {
     super()
 
-    this.titlePage = i18n('Local videos')
+    this.titlePage = $localize`Local videos`
   }
 
   ngOnInit () {
diff --git a/client/src/app/+videos/video-list/video-most-liked.component.ts b/client/src/app/+videos/video-list/video-most-liked.component.ts
index ca14851bb..e5f7bd152 100644
--- a/client/src/app/+videos/video-list/video-most-liked.component.ts
+++ b/client/src/app/+videos/video-list/video-most-liked.component.ts
@@ -5,7 +5,6 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoSortField } from '@shared/models'
 
 @Component({
@@ -20,7 +19,6 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit
   useUserVideoPreferences = true
 
   constructor (
-    protected i18n: I18n,
     protected router: Router,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
@@ -40,8 +38,8 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit
 
     this.generateSyndicationList()
 
-    this.titlePage = this.i18n('Most liked videos')
-    this.titleTooltip = this.i18n('Videos that have the higher number of likes.')
+    this.titlePage = $localize`Most liked videos`
+    this.titleTooltip = $localize`Videos that have the higher number of likes.`
   }
 
   getVideosObservable (page: number) {
diff --git a/client/src/app/+videos/video-list/video-recently-added.component.ts b/client/src/app/+videos/video-list/video-recently-added.component.ts
index c9395133f..34db6aabd 100644
--- a/client/src/app/+videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/+videos/video-list/video-recently-added.component.ts
@@ -5,7 +5,6 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoSortField } from '@shared/models'
 
 @Component({
@@ -21,7 +20,6 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
   useUserVideoPreferences = true
 
   constructor (
-    protected i18n: I18n,
     protected route: ActivatedRoute,
     protected serverService: ServerService,
     protected router: Router,
@@ -35,7 +33,7 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
   ) {
     super()
 
-    this.titlePage = i18n('Recently added')
+    this.titlePage = $localize`Recently added`
   }
 
   ngOnInit () {
diff --git a/client/src/app/+videos/video-list/video-trending.component.ts b/client/src/app/+videos/video-list/video-trending.component.ts
index 10eab18de..babcb9067 100644
--- a/client/src/app/+videos/video-list/video-trending.component.ts
+++ b/client/src/app/+videos/video-list/video-trending.component.ts
@@ -5,7 +5,6 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoSortField } from '@shared/models'
 
 @Component({
@@ -20,7 +19,6 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
   useUserVideoPreferences = true
 
   constructor (
-    protected i18n: I18n,
     protected router: Router,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
@@ -45,14 +43,11 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
         const trendingDays = config.trending.videos.intervalDays
 
         if (trendingDays === 1) {
-          this.titlePage = this.i18n('Trending for the last 24 hours')
-          this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours')
+          this.titlePage = $localize`Trending for the last 24 hours`
+          this.titleTooltip = $localize`Trending videos are those totalizing the greatest number of views during the last 24 hours`
         } else {
-          this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays })
-          this.titleTooltip = this.i18n(
-            'Trending videos are those totalizing the greatest number of views during the last {{days}} days',
-            { days: trendingDays }
-          )
+          this.titlePage = `Trending for the last ${trendingDays} days`
+          this.titleTooltip = `Trending videos are those totalizing the greatest number of views during the last ${trendingDays} days`
         }
       })
   }
diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
index 41ad9b277..b02988169 100644
--- a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
@@ -3,10 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
-import { VideoService } from '@app/shared/shared-main'
 import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
 import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoSortField } from '@shared/models'
 
 @Component({
@@ -21,7 +19,6 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
   groupByDate = true
 
   constructor (
-    protected i18n: I18n,
     protected router: Router,
     protected serverService: ServerService,
     protected route: ActivatedRoute,
@@ -31,15 +28,14 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
     protected screenService: ScreenService,
     protected storageService: LocalStorageService,
     private userSubscription: UserSubscriptionService,
-    private videoService: VideoService,
     private hooks: HooksService
   ) {
     super()
 
-    this.titlePage = i18n('Videos from your subscriptions')
+    this.titlePage = $localize`Videos from your subscriptions`
     this.actions.push({
       routerLink: '/my-account/subscriptions',
-      label: i18n('Subscriptions'),
+      label: $localize`Subscriptions`,
       iconName: 'cog'
     })
   }