From 66357162f8e1227495f09bd4f68446aad7071c6d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 12 Aug 2020 10:40:04 +0200 Subject: 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 --- .../comment/video-comment.component.ts | 4 +- .../comment/video-comments.component.ts | 8 ++-- .../recommended-videos.component.ts | 6 +-- .../+video-watch/video-duration-formatter.pipe.ts | 11 ++--- .../+video-watch/video-watch-playlist.component.ts | 12 ++--- .../+videos/+video-watch/video-watch.component.ts | 55 ++++++++++------------ 6 files changed, 39 insertions(+), 57 deletions(-) (limited to 'client/src/app/+videos/+video-watch') 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`) ]) } -- cgit v1.2.3