From 989e526abf0c0dd7958deb630df009608561bb67 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 31 May 2018 18:12:15 +0200 Subject: Prepare i18n files --- client/src/app/app.component.ts | 7 ++- client/src/app/app.module.ts | 20 ++++++- client/src/app/core/routing/redirect.service.ts | 4 +- client/src/app/shared/misc/utils.ts | 2 +- client/src/app/shared/shared.module.ts | 4 +- .../videos/+video-watch/video-watch.component.html | 66 +++++++++++----------- .../videos/+video-watch/video-watch.component.ts | 41 +++++++++----- .../app/videos/video-list/video-local.component.ts | 20 ++++--- .../video-list/video-recently-added.component.ts | 20 ++++--- .../videos/video-list/video-search.component.ts | 21 ++++--- .../videos/video-list/video-trending.component.ts | 20 ++++--- 11 files changed, 140 insertions(+), 85 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 0bd127063..6087dbf80 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,8 +1,9 @@ import { Component, OnInit } from '@angular/core' import { DomSanitizer, SafeHtml } from '@angular/platform-browser' -import { GuardsCheckStart, Router, NavigationEnd } from '@angular/router' +import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' import { AuthService, RedirectService, ServerService } from '@app/core' import { isInSmallView } from '@app/shared/misc/utils' +import { is18nPath } from '../../../shared/models/i18n' @Component({ selector: 'my-app', @@ -33,7 +34,7 @@ export class AppComponent implements OnInit { private serverService: ServerService, private domSanitizer: DomSanitizer, private redirectService: RedirectService - ) {} + ) { } get serverVersion () { return this.serverService.getConfig().serverVersion @@ -53,7 +54,7 @@ export class AppComponent implements OnInit { this.router.events.subscribe(e => { if (e instanceof NavigationEnd) { const pathname = window.location.pathname - if (!pathname || pathname === '/') { + if (!pathname || pathname === '/' || is18nPath(pathname)) { this.redirectService.redirectToHomepage() } } diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index cf533629f..44552021f 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core' +import { LOCALE_ID, NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { AboutModule } from '@app/about' import { ServerService } from '@app/core' @@ -16,6 +16,7 @@ import { MenuComponent } from './menu' import { SharedModule } from './shared' import { SignupModule } from './signup' import { VideosModule } from './videos' +import { buildFileLocale, getDefaultLocale } from '../../../shared/models/i18n' export function metaFactory (serverService: ServerService): MetaLoader { return new MetaStaticLoader({ @@ -61,6 +62,21 @@ export function metaFactory (serverService: ServerService): MetaLoader { AppRoutingModule // Put it after all the module because it has the 404 route ], - providers: [ ] + providers: [ + { + provide: TRANSLATIONS, + useFactory: (locale) => { + const fileLocale = buildFileLocale(locale) + + // Default locale, nothing to translate + const defaultFileLocale = buildFileLocale(getDefaultLocale()) + if (fileLocale === defaultFileLocale) return '' + + return require(`raw-loader!../locale/target/messages_${fileLocale}.xml`) + }, + deps: [ LOCALE_ID ] + }, + { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' } + ] }) export class AppModule {} diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index 844f184b4..b7803cce2 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -31,7 +31,7 @@ export class RedirectService { redirectToHomepage () { console.log('Redirecting to %s...', RedirectService.DEFAULT_ROUTE) - this.router.navigate([ RedirectService.DEFAULT_ROUTE ], { replaceUrl: true }) + this.router.navigate([ RedirectService.DEFAULT_ROUTE ], { skipLocationChange: true }) .catch(() => { console.error( 'Cannot navigate to %s, resetting default route to %s.', @@ -40,7 +40,7 @@ export class RedirectService { ) RedirectService.DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE - return this.router.navigate([ RedirectService.DEFAULT_ROUTE ], { replaceUrl: true }) + return this.router.navigate([ RedirectService.DEFAULT_ROUTE ], { skipLocationChange: true }) }) } diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 11933e90b..2219ac802 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -98,7 +98,7 @@ function lineFeedToHtml (obj: object, keyToNormalize: string) { // Try to cache a little bit window.innerWidth let windowInnerWidth = window.innerWidth -// setInterval(() => windowInnerWidth = window.innerWidth, 500) +setInterval(() => windowInnerWidth = window.innerWidth, 500) function isInSmallView () { return windowInnerWidth < 600 diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 20019e47a..fba099401 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -33,6 +33,7 @@ import { VideoThumbnailComponent } from './video/video-thumbnail.component' import { VideoService } from './video/video.service' import { AccountService } from '@app/shared/account/account.service' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' +import { I18n } from '@ngx-translate/i18n-polyfill' @NgModule({ imports: [ @@ -108,7 +109,8 @@ import { VideoChannelService } from '@app/shared/video-channel/video-channel.ser VideoService, AccountService, MarkdownService, - VideoChannelService + VideoChannelService, + I18n ] }) export class SharedModule { } diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 583a97562..202a12fb0 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -3,7 +3,7 @@
-
Video not found :'(
+
Video not found :'(
@@ -12,21 +12,21 @@
{{ video.name }}
-
+
{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
- + {{ video.channel.displayName }} - +
- - By {{ video.by }} + + By {{ video.by }} Account avatar
@@ -38,24 +38,24 @@ *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" class="action-button action-button-like" > - +
- +
- Support + Support
- Share + Share
@@ -65,32 +65,32 @@ @@ -109,20 +109,20 @@
- Show more + Show more
- Show less + Show less
- + Privacy @@ -131,7 +131,7 @@
- + Category @@ -140,7 +140,7 @@
- + Licence @@ -149,7 +149,7 @@
- + Language @@ -158,7 +158,7 @@
- + Tags @@ -172,7 +172,7 @@
-
+
Other videos
@@ -184,13 +184,15 @@
- Friendly Reminder: + Friendly Reminder:
- The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be accessed publicly. - More information + + The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be accessed publicly. + + More information
-
+
OK
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 ad572ef58..f3b4f7a2b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -23,6 +23,7 @@ import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' import { getVideojsOptions } from '../../../assets/player/peertube-player' import { ServerService } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-video-watch', @@ -70,7 +71,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private notificationsService: NotificationsService, private markdownService: MarkdownService, private zone: NgZone, - private redirectService: RedirectService + private redirectService: RedirectService, + private i18n: I18n ) {} get user () { @@ -153,17 +155,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy { async blacklistVideo (event: Event) { event.preventDefault() - const res = await this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist') + const res = await this.confirmService.confirm(this.i18n('Do you really want to blacklist this video?'), this.i18n('Blacklist')) if (res === false) return this.videoBlacklistService.blacklistVideo(this.video.id) .subscribe( status => { - this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`) + this.notificationsService.success( + this.i18n('Success'), + this.i18n('Video {{ videoName }} had been blacklisted.', { videoName: this.video.name }) + ) this.redirectService.redirectToHomepage() }, - error => this.notificationsService.error('Error', error.message) + error => this.notificationsService.error(this.i18n('Error'), error.message) ) } @@ -198,7 +203,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { error => { this.descriptionLoading = false - this.notificationsService.error('Error', error.message) + this.notificationsService.error(this.i18n('Error'), error.message) } ) } @@ -252,19 +257,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { async removeVideo (event: Event) { event.preventDefault() - const res = await this.confirmService.confirm('Do you really want to delete this video?', 'Delete') + const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete')) if (res === false) return this.videoService.removeVideo(this.video.id) .subscribe( status => { - this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) + this.notificationsService.success( + this.i18n('Success'), + this.i18n('Video {{ videoName }} deleted.', { videoName: this.video.name }) + ) // Go back to the video-list. this.redirectService.redirectToHomepage() }, - error => this.notificationsService.error('Error', error.message) + error => this.notificationsService.error(this.i18n('Error'), error.message) ) } @@ -288,7 +296,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } private setVideoLikesBarTooltipText () { - this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes` + this.likesBarTooltipText = this.i18n( + '{{ likesNumber }} likes / {{ dislikesNumber }} dislikes', + { likesNumber: this.video.likes, dislikes: this.video.dislikes } + ) } private handleError (err: any) { @@ -298,12 +309,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { let message = '' if (errorMessage.indexOf('http error') !== -1) { - message = 'Cannot fetch video from server, maybe down.' + message = this.i18n('Cannot fetch video from server, maybe down.') } else { message = errorMessage } - this.notificationsService.error('Error', message) + this.notificationsService.error(this.i18n('Error'), message) } private checkUserRating () { @@ -318,7 +329,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } }, - err => this.notificationsService.error('Error', err.message) + err => this.notificationsService.error(this.i18n('Error'), err.message) ) } @@ -333,8 +344,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) { const res = await this.confirmService.confirm( - 'This video contains mature or explicit content. Are you sure you want to watch it?', - 'Mature or explicit content' + this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'), + this.i18n('Mature or explicit content') ) if (res === false) return this.redirectService.redirectToHomepage() } @@ -399,7 +410,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.updateVideoRating(this.userRating, nextRating) this.userRating = nextRating }, - err => this.notificationsService.error('Error', err.message) + err => this.notificationsService.error(this.i18n('Error'), err.message) ) } 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 abab7504f..03568b618 100644 --- a/client/src/app/videos/video-list/video-local.component.ts +++ b/client/src/app/videos/video-list/video-local.component.ts @@ -8,6 +8,7 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' import { VideoFilter } from '../../../../../shared/models/videos/video-query.type' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-videos-local', @@ -15,18 +16,23 @@ import { VideoFilter } from '../../../../../shared/models/videos/video-query.typ templateUrl: '../../shared/video/abstract-video-list.html' }) export class VideoLocalComponent extends AbstractVideoList implements OnInit, OnDestroy { - titlePage = 'Local videos' + titlePage: string currentRoute = '/videos/local' sort = '-publishedAt' as VideoSortField filter: VideoFilter = 'local' - constructor (protected router: Router, - protected route: ActivatedRoute, - protected notificationsService: NotificationsService, - protected authService: AuthService, - protected location: Location, - private videoService: VideoService) { + constructor ( + protected router: Router, + protected route: ActivatedRoute, + protected notificationsService: NotificationsService, + protected authService: AuthService, + protected location: Location, + private videoService: VideoService, + private i18n: I18n + ) { super() + + this.titlePage = i18n('Local videos') } ngOnInit () { 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 d064d9628..5768d9fe0 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 @@ -7,6 +7,7 @@ import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-videos-recently-added', @@ -14,17 +15,22 @@ import { VideoService } from '../../shared/video/video.service' templateUrl: '../../shared/video/abstract-video-list.html' }) export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy { - titlePage = 'Recently added' + titlePage: string currentRoute = '/videos/recently-added' sort: VideoSortField = '-publishedAt' - constructor (protected router: Router, - protected route: ActivatedRoute, - protected location: Location, - protected notificationsService: NotificationsService, - protected authService: AuthService, - private videoService: VideoService) { + constructor ( + protected router: Router, + protected route: ActivatedRoute, + protected location: Location, + protected notificationsService: NotificationsService, + protected authService: AuthService, + private videoService: VideoService, + private i18n: I18n + ) { super() + + this.titlePage = i18n('Recently added') } ngOnInit () { diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts index aab896d84..35566a7bd 100644 --- a/client/src/app/videos/video-list/video-search.component.ts +++ b/client/src/app/videos/video-list/video-search.component.ts @@ -8,6 +8,7 @@ import { Subscription } from 'rxjs' import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoService } from '../../shared/video/video.service' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-videos-search', @@ -15,7 +16,7 @@ import { VideoService } from '../../shared/video/video.service' templateUrl: '../../shared/video/abstract-video-list.html' }) export class VideoSearchComponent extends AbstractVideoList implements OnInit, OnDestroy { - titlePage = 'Search' + titlePage: string currentRoute = '/videos/search' loadOnInit = false @@ -24,15 +25,19 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O } private subActivatedRoute: Subscription - constructor (protected router: Router, - protected route: ActivatedRoute, - protected notificationsService: NotificationsService, - protected authService: AuthService, - protected location: Location, - private videoService: VideoService, - private redirectService: RedirectService + constructor ( + protected router: Router, + protected route: ActivatedRoute, + protected notificationsService: NotificationsService, + protected authService: AuthService, + protected location: Location, + private videoService: VideoService, + private redirectService: RedirectService, + private i18n: I18n ) { super() + + this.titlePage = i18n('Search') } 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 ea65070f9..760470e8c 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -7,6 +7,7 @@ import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-videos-trending', @@ -14,17 +15,22 @@ import { VideoService } from '../../shared/video/video.service' templateUrl: '../../shared/video/abstract-video-list.html' }) export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { - titlePage = 'Trending' + titlePage: string currentRoute = '/videos/trending' defaultSort: VideoSortField = '-views' - constructor (protected router: Router, - protected route: ActivatedRoute, - protected notificationsService: NotificationsService, - protected authService: AuthService, - protected location: Location, - private videoService: VideoService) { + constructor ( + protected router: Router, + protected route: ActivatedRoute, + protected notificationsService: NotificationsService, + protected authService: AuthService, + protected location: Location, + private videoService: VideoService, + private i18n: I18n + ) { super() + + this.titlePage = i18n('Trending') } ngOnInit () { -- cgit v1.2.3