feat: add internationalization

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,
                 });

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',
+}

src/app/settings/settings.component.html

@@ -67,6 +67,34 @@
                         </p>
                     </div>
                 </mat-list-item>
+                <mat-list-item>
+                    <div matLine fxLayout="row">
+                        <p fxFlex>
+                            {{ 'SETTINGS.LANGUAGE' | translate }}
+                        </p>
+                        <p fxFlex fxLayoutAlign="start center">
+                            <mat-form-field appearance="fill">
+                                <mat-label>{{
+                                    'SETTINGS.VIDEO_PLAYER_PLACEHOLDER'
+                                        | translate
+                                }}</mat-label>
+                                <mat-select formControlName="language">
+                                    <mat-option
+                                        *ngFor="
+                                            let language of languageEnum
+                                                | keyvalue
+                                        "
+                                        [value]="language.value"
+                                        >{{
+                                            'LANGUAGES.' + language.key
+                                                | translate
+                                        }}</mat-option
+                                    >
+                                </mat-select>
+                            </mat-form-field>
+                        </p>
+                    </div>
+                </mat-list-item>
                 <mat-list-item>
                     <div matLine fxLayout="row">
                         <p fxFlex>{{ 'SETTINGS.VERSION' | translate }}</p>

src/app/settings/settings.component.scss

@@ -7,6 +7,12 @@ button {
     text-transform: uppercase;
 }
 
-::ng-deep .mat-card {
+::ng-deep{
-    border-radius: 0 !important;
+    .mat-card {
+        border-radius: 0 !important;
+    }
+
+    .mat-list-item {
+        height: 70px !important;
+    }
 }

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 */
+    /** List with available languages as enum */
-    latestPackageJsonUrl =
+    languageEnum = Language;
-        'https://raw.githubusercontent.com/4gray/iptvnator/master/package.json';
 
     /** 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
+                    );
                 })
         );
     }

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;
 }

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"
     }
 }