From 0f8ca2ab1a618dfc3e273ddadfdb51c251912642 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 20 Feb 2021 19:39:38 +0100 Subject: [PATCH] feat: add internationalization --- src/app/app.component.ts | 1 + src/app/settings/language.enum.ts | 6 +++++ src/app/settings/settings.component.html | 28 ++++++++++++++++++++++++ src/app/settings/settings.component.scss | 10 +++++++-- src/app/settings/settings.component.ts | 21 +++++++++++++----- src/app/settings/settings.interface.ts | 3 +++ src/assets/i18n/en.json | 8 ++++++- 7 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 src/app/settings/language.enum.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 96fc74a61..62db01c19 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -101,6 +101,7 @@ export class AppComponent { Object.keys(settings).length > 0 && settings.epgUrl ) { + this.translate.setDefaultLang(settings.language ?? 'en'); this.electronService.ipcRenderer.send(EPG_FETCH, { url: settings.epgUrl, }); diff --git a/src/app/settings/language.enum.ts b/src/app/settings/language.enum.ts new file mode 100644 index 000000000..89d879aec --- /dev/null +++ b/src/app/settings/language.enum.ts @@ -0,0 +1,6 @@ +/** + * Enum with all languages that are available in the application + */ +export enum Language { + ENGLISH = 'en', +} diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index f8e5cebe8..73b0953dd 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -67,6 +67,34 @@

+ +
+

+ {{ 'SETTINGS.LANGUAGE' | translate }} +

+

+ + {{ + 'SETTINGS.VIDEO_PLAYER_PLACEHOLDER' + | translate + }} + + {{ + 'LANGUAGES.' + language.key + | translate + }} + + +

+
+

{{ 'SETTINGS.VERSION' | translate }}

diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index d63390285..26f9dc403 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -7,6 +7,12 @@ button { text-transform: uppercase; } -::ng-deep .mat-card { - border-radius: 0 !important; +::ng-deep{ + .mat-card { + border-radius: 0 !important; + } + + .mat-list-item { + height: 70px !important; + } } diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index 9d4022517..a5d8742ba 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -11,6 +11,11 @@ import * as semver from 'semver'; import { ElectronService } from '../services/electron.service'; import { ChannelQuery } from '../state'; import { EPG_FETCH } from '../../../ipc-commands'; +import { Language } from './language.enum'; + +/** Url of the package.json file in the app repository, required to get the version of the released app */ +const PACKAGE_JSON_URL = + 'https://raw.githubusercontent.com/4gray/iptvnator/master/package.json'; @Component({ selector: 'app-settings', @@ -21,9 +26,8 @@ export class SettingsComponent implements OnInit, OnDestroy { /** Subscription object */ private subscription: Subscription = new Subscription(); - /** Url of the package.json file in the app repository, required to get the version of the released app */ - latestPackageJsonUrl = - 'https://raw.githubusercontent.com/4gray/iptvnator/master/package.json'; + /** List with available languages as enum */ + languageEnum = Language; /** Player options */ players = [ @@ -72,13 +76,14 @@ export class SettingsComponent implements OnInit, OnDestroy { private translate: TranslateService ) { this.settingsForm = this.formBuilder.group({ - player: ['videojs'], // default value + player: ['videojs'], epgUrl: '', + language: Language.ENGLISH, }); this.subscription.add( this.http - .get(this.latestPackageJsonUrl) + .get(PACKAGE_JSON_URL) .subscribe((response: { version: string }) => { this.version = this.electronService.getAppVersion(); const isOutdated = semver.lt( @@ -111,6 +116,9 @@ export class SettingsComponent implements OnInit, OnDestroy { this.settingsForm.setValue({ player: settings.player ? settings.player : 'videojs', epgUrl: settings.epgUrl ? settings.epgUrl : '', + language: settings.language + ? settings.language + : Language.ENGLISH, }); } }) @@ -137,6 +145,9 @@ export class SettingsComponent implements OnInit, OnDestroy { if (this.settingsForm.value.epgUrl) { this.fetchEpg(); } + this.translate.setDefaultLang( + this.settingsForm.value.language + ); }) ); } diff --git a/src/app/settings/settings.interface.ts b/src/app/settings/settings.interface.ts index b954ce5a9..f67818c5c 100644 --- a/src/app/settings/settings.interface.ts +++ b/src/app/settings/settings.interface.ts @@ -1,3 +1,5 @@ +import { Language } from './language.enum'; + export type VideoPlayerType = 'html5' | 'videojs'; /** @@ -6,4 +8,5 @@ export type VideoPlayerType = 'html5' | 'videojs'; export interface Settings { player: VideoPlayerType; epgUrl: string; + language: Language; } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 2e4aa7504..851816289 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -48,7 +48,8 @@ "SAVE_CHANGES": "Save changes", "BACK_TO_HOME": "Back to home", "NEW_VERSION_AVAILABLE": "There is a new version available", - "LATEST_VERSION": "You are using the latest version" + "LATEST_VERSION": "You are using the latest version", + "LANGUAGE": "Language" }, "CHANNELS": { "SEARCH_CHANNEL": "Search channel", @@ -76,5 +77,10 @@ "EPG_NOT_AVAILABLE_DATE": "Ooops, EPG is not available for the selected date", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ooops, EPG is not available for this channel.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Please add/change the url of EPG list the settings of the app." + }, + "LANGUAGES": { + "ENGLISH": "English", + "RUSSIAN": "Russian", + "GERMAN": "German" } } \ No newline at end of file