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, 39 insertions, 57 deletions

diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
index 36ec6e9f9..a84e91fd3 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
@@ -5,7 +5,6 @@ import { AuthService } from '@app/core/auth'
 import { Account, Actor, DropdownAction, Video } from '@app/shared/shared-main'
 import { CommentReportComponent } from '@app/shared/shared-moderation/report-modals/comment-report.component'
 import { VideoComment, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { User, UserRight } from '@shared/models'
 
 @Component({
@@ -39,7 +38,6 @@ export class VideoCommentComponent implements OnInit, OnChanges {
   commentUser: User
 
   constructor (
-    private i18n: I18n,
     private markdownService: MarkdownService,
     private authService: AuthService,
     private userService: UserService,
@@ -138,7 +136,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
     if (this.isUserLoggedIn() && this.comment.isDeleted === false && this.authService.getUser().account.id !== this.comment.account.id) {
       this.prependModerationActions = [
         {
-          label: this.i18n('Report comment'),
+          label: $localize`Report comment`,
           handler: () => this.showReportModal()
         }
       ]
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
index 66494a20a..517844ab2 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.ts
@@ -5,7 +5,6 @@ import { AuthService, ComponentPagination, ConfirmService, hasMoreItems, Notifie
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { Syndication, VideoDetails } from '@app/shared/shared-main'
 import { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/shared/shared-video-comment'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-comments',
@@ -43,7 +42,6 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     private confirmService: ConfirmService,
     private videoCommentService: VideoCommentService,
     private activatedRoute: ActivatedRoute,
-    private i18n: I18n,
     private hooks: HooksService
   ) {}
 
@@ -162,12 +160,12 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
     let message = 'Do you really want to delete this comment?'
 
     if (commentToDelete.isLocal || this.video.isLocal) {
-      message += this.i18n(' The deletion will be sent to remote instances so they can reflect the change.')
+      message += $localize` The deletion will be sent to remote instances so they can reflect the change.`
     } else {
-      message += this.i18n(' It is a remote comment, so the deletion will only be effective on your instance.')
+      message += $localize` It is a remote comment, so the deletion will only be effective on your instance.`
     }
 
-    const res = await this.confirmService.confirm(message, this.i18n('Delete'))
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
     this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id)
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
index d2372023f..a1c8e0661 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
@@ -4,10 +4,9 @@ import { AuthService, Notifier, SessionStorageService, User, UserService } from
 import { Video } from '@app/shared/shared-main'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { UserLocalStorageKeys } from '@root-helpers/users'
 import { RecommendationInfo } from './recommendation-info.model'
 import { RecommendedVideosStore } from './recommended-videos.store'
-import { UserLocalStorageKeys } from '@root-helpers/users'
 
 @Component({
   selector: 'my-recommended-videos',
@@ -38,7 +37,6 @@ export class RecommendedVideosComponent implements OnInit, OnChanges {
     private userService: UserService,
     private authService: AuthService,
     private notifier: Notifier,
-    private i18n: I18n,
     private store: RecommendedVideosStore,
     private sessionStorageService: SessionStorageService
   ) {
@@ -58,7 +56,7 @@ export class RecommendedVideosComponent implements OnInit, OnChanges {
       )
     }
 
-    this.autoPlayNextVideoTooltip = this.i18n('When active, the next video is automatically played after the current one.')
+    this.autoPlayNextVideoTooltip = $localize`When active, the next video is automatically played after the current one.`
   }
 
   ngOnInit () {
diff --git a/client/src/app/+videos/+video-watch/video-duration-formatter.pipe.ts b/client/src/app/+videos/+video-watch/video-duration-formatter.pipe.ts
index 4b6767415..19b34f984 100644
--- a/client/src/app/+videos/+video-watch/video-duration-formatter.pipe.ts
+++ b/client/src/app/+videos/+video-watch/video-duration-formatter.pipe.ts
@@ -1,28 +1,23 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Pipe({
   name: 'myVideoDurationFormatter'
 })
 export class VideoDurationPipe implements PipeTransform {
 
-  constructor (private i18n: I18n) {
-
-  }
-
   transform (value: number): string {
     const hours = Math.floor(value / 3600)
     const minutes = Math.floor((value % 3600) / 60)
     const seconds = value % 60
 
     if (hours > 0) {
-      return this.i18n('{{hours}} h {{minutes}} min {{seconds}} sec', { hours, minutes, seconds })
+      return $localize`${hours} h ${minutes} min ${seconds} sec`
     }
 
     if (minutes > 0) {
-      return this.i18n('{{minutes}} min {{seconds}} sec', { minutes, seconds })
+      return $localize`${minutes} min ${seconds} sec`
     }
 
-    return this.i18n('{{seconds}} sec', { seconds })
+    return $localize`${seconds} sec`
   }
 }
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts
index 519ce2974..c60ca4671 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts
@@ -1,9 +1,8 @@
 import { Component, Input } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
-import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { I18n } from '@ngx-translate/i18n-polyfill'
+import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
 
 @Component({
@@ -36,7 +35,6 @@ export class VideoWatchPlaylistComponent {
     private userService: UserService,
     private auth: AuthService,
     private notifier: Notifier,
-    private i18n: I18n,
     private videoPlaylist: VideoPlaylistService,
     private localStorageService: LocalStorageService,
     private sessionStorageService: SessionStorageService,
@@ -189,13 +187,13 @@ export class VideoWatchPlaylistComponent {
 
   private setAutoPlayNextVideoPlaylistSwitchText () {
     this.autoPlayNextVideoPlaylistSwitchText = this.autoPlayNextVideoPlaylist
-      ? this.i18n('Stop autoplaying next video')
-      : this.i18n('Autoplay next video')
+      ? $localize`Stop autoplaying next video`
+      : $localize`Autoplay next video`
   }
 
   private setLoopPlaylistSwitchText () {
     this.loopPlaylistSwitchText = this.loopPlaylist
-      ? this.i18n('Stop looping playlist videos')
-      : this.i18n('Loop playlist videos')
+      ? $localize`Stop looping playlist videos`
+      : $localize`Loop playlist videos`
   }
 }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index a53af210a..fb89bf6cd 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -14,7 +14,6 @@ import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { MetaService } from '@ngx-meta/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { ServerConfig, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
 import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
@@ -97,16 +96,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private zone: NgZone,
     private redirectService: RedirectService,
     private videoCaptionService: VideoCaptionService,
-    private i18n: I18n,
     private hotkeysService: HotkeysService,
     private hooks: HooksService,
     private location: PlatformLocation,
     @Inject(LOCALE_ID) private localeId: string
   ) {
-    this.tooltipLike = this.i18n('Like this video')
-    this.tooltipDislike = this.i18n('Dislike this video')
-    this.tooltipSupport = this.i18n('Support options for this video')
-    this.tooltipSaveToPlaylist = this.i18n('Save to playlist')
+    this.tooltipLike = $localize`Like this video`
+    this.tooltipDislike = $localize`Dislike this video`
+    this.tooltipSupport = $localize`Support options for this video`
+    this.tooltipSaveToPlaylist = $localize`Save to playlist`
   }
 
   get user () {
@@ -188,7 +186,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   getRatePopoverText () {
     if (this.isUserLoggedIn()) return undefined
 
-    return this.i18n('You need to be connected to rate this content.')
+    return $localize`You need to be connected to rate this content.`
   }
 
   showMoreDescription () {
@@ -409,10 +407,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private setVideoLikesBarTooltipText () {
-    this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', {
-      likesNumber: this.video.likes,
-      dislikesNumber: this.video.dislikes
-    })
+    this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes`
   }
 
   private handleError (err: any) {
@@ -465,8 +460,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     if (this.isVideoBlur(this.video)) {
       const res = await this.confirmService.confirm(
-        this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
-        this.i18n('Mature or explicit content')
+        $localize`This video contains mature or explicit content. Are you sure you want to watch it?`,
+        $localize`Mature or explicit content`
       )
       if (res === false) return this.location.back()
     }
@@ -515,9 +510,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        */
       this.player.upnext({
         timeout: 10000, // 10s
-        headText: this.i18n('Up Next'),
-        cancelText: this.i18n('Cancel'),
-        suspendedText: this.i18n('Autoplay is suspended'),
+        headText: $localize`Up Next`,
+        cancelText: $localize`Cancel`,
+        suspendedText: $localize`Autoplay is suspended`,
         getTitle: () => this.nextVideoTitle,
         next: () => this.zone.run(() => this.autoplayNext()),
         condition: () => {
@@ -781,22 +776,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private initHotkeys () {
     this.hotkeys = [
       // These hotkeys are managed by the player
-      new Hotkey('f', e => e, undefined, this.i18n('Enter/exit fullscreen (requires player focus)')),
-      new Hotkey('space', e => e, undefined, this.i18n('Play/Pause the video (requires player focus)')),
-      new Hotkey('m', e => e, undefined, this.i18n('Mute/unmute the video (requires player focus)')),
+      new Hotkey('f', e => e, undefined, $localize`Enter/exit fullscreen (requires player focus)`),
+      new Hotkey('space', e => e, undefined, $localize`Play/Pause the video (requires player focus)`),
+      new Hotkey('m', e => e, undefined, $localize`Mute/unmute the video (requires player focus)`),
 
-      new Hotkey('0-9', e => e, undefined, this.i18n('Skip to a percentage of the video: 0 is 0% and 9 is 90% (requires player focus)')),
+      new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90% (requires player focus)`),
 
-      new Hotkey('up', e => e, undefined, this.i18n('Increase the volume (requires player focus)')),
-      new Hotkey('down', e => e, undefined, this.i18n('Decrease the volume (requires player focus)')),
+      new Hotkey('up', e => e, undefined, $localize`Increase the volume (requires player focus)`),
+      new Hotkey('down', e => e, undefined, $localize`Decrease the volume (requires player focus)`),
 
-      new Hotkey('right', e => e, undefined, this.i18n('Seek the video forward (requires player focus)')),
-      new Hotkey('left', e => e, undefined, this.i18n('Seek the video backward (requires player focus)')),
+      new Hotkey('right', e => e, undefined, $localize`Seek the video forward (requires player focus)`),
+      new Hotkey('left', e => e, undefined, $localize`Seek the video backward (requires player focus)`),
 
-      new Hotkey('>', e => e, undefined, this.i18n('Increase playback rate (requires player focus)')),
-      new Hotkey('<', e => e, undefined, this.i18n('Decrease playback rate (requires player focus)')),
+      new Hotkey('>', e => e, undefined, $localize`Increase playback rate (requires player focus)`),
+      new Hotkey('<', e => e, undefined, $localize`Decrease playback rate (requires player focus)`),
 
-      new Hotkey('.', e => e, undefined, this.i18n('Navigate in the video frame by frame (requires player focus)'))
+      new Hotkey('.', e => e, undefined, $localize`Navigate in the video frame by frame (requires player focus)`)
     ]
 
     if (this.isUserLoggedIn()) {
@@ -804,17 +799,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         new Hotkey('shift+l', () => {
           this.setLike()
           return false
-        }, undefined, this.i18n('Like the video')),
+        }, undefined, $localize`Like the video`),
 
         new Hotkey('shift+d', () => {
           this.setDislike()
           return false
-        }, undefined, this.i18n('Dislike the video')),
+        }, undefined, $localize`Dislike the video`),
 
         new Hotkey('shift+s', () => {
           this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe()
           return false
-        }, undefined, this.i18n('Subscribe to the account'))
+        }, undefined, $localize`Subscribe to the account`)
       ])
     }