refactor: improvements in settings module

src/app/app.component.spec.ts

@@ -1,3 +1,4 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import {
     ComponentFixture,
     inject,
@@ -53,6 +54,7 @@ describe('AppComponent', () => {
                     MockModule(MatSnackBarModule),
                     MockModule(NgxWhatsNewModule),
                     RouterTestingModule,
+                    HttpClientTestingModule,
                 ],
             }).compileComponents();
         })

src/app/services/settings.service.spec.ts

@@ -1,4 +1,5 @@
-import { TestBed, inject } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { inject, TestBed } from '@angular/core/testing';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { of } from 'rxjs';
 import { Theme } from '../settings/theme.enum';
@@ -9,6 +10,7 @@ describe('Service: Settings', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             providers: [SettingsService],
+            imports: [HttpClientTestingModule],
         });
     });
 
@@ -33,8 +35,8 @@ describe('Service: Settings', () => {
     ));
 
     it('should get value from the local storage', inject(
-        [SettingsService, StorageMap],
-        (service: SettingsService, storage: StorageMap) => {
+        [SettingsService],
+        (service: SettingsService) => {
             const version = '2.1.0';
             service.setValueToLocalStorage(STORE_KEY.Version, version);
             service

src/app/services/settings.service.ts

@@ -1,14 +1,20 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { StorageMap } from '@ngx-pwa/local-storage';
+import { catchError, map, Observable } from 'rxjs';
 import { STORE_KEY } from '../shared/enums/store-keys.enum';
 import { Theme } from './../settings/theme.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';
+
 @Injectable({
     providedIn: 'root',
 })
 export class SettingsService {
     /** Creates an instance of SettingsService */
-    constructor(private storage: StorageMap) {}
+    constructor(private http: HttpClient, private storage: StorageMap) {}
 
     /**
      * Changes the visual theme of the application
@@ -35,8 +41,30 @@ export class SettingsService {
      * Sets the given key/value pair in the local storage
      * @param key key to set
      * @param value value to set
+     * @param withCallback if true, the callback will be called after the value is set
      */
-    setValueToLocalStorage(key: STORE_KEY, value: unknown) {
-        this.storage.set(key, value).subscribe(() => {});
+    setValueToLocalStorage(
+        key: STORE_KEY,
+        value: unknown,
+        withCallback = false
+    ): Observable<unknown> | never {
+        if (withCallback) {
+            return this.storage.set(key, value);
+        } else {
+            this.storage.set(key, value).subscribe(() => {});
+        }
+    }
+
+    /**
+     * Returns the version of the released app
+     */
+    getAppVersion() {
+        return this.http.get<string>(PACKAGE_JSON_URL).pipe(
+            map((response) => response['version']),
+            catchError((err) => {
+                console.error(err);
+                throw new Error(err);
+            })
+        );
     }
 }

src/app/settings/settings.component.ts

@@ -1,4 +1,3 @@
-import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import {
     FormArray,
@@ -8,10 +7,8 @@ import {
 } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
-import { StorageMap } from '@ngx-pwa/local-storage';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { catchError } from 'rxjs/operators';
 import * as semver from 'semver';
 import { DataService } from '../services/data.service';
 import { EpgService } from '../services/epg.service';
@@ -22,10 +19,6 @@ import { Language } from './language.enum';
 import { Settings, VideoPlayer } from './settings.interface';
 import { Theme } from './theme.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',
     templateUrl: './settings.component.html',
@@ -47,15 +40,6 @@ export class SettingsComponent implements OnInit {
         },
     ];
 
-    /** Settings form object */
-    settingsForm = this.formBuilder.group({
-        player: [VideoPlayer.VideoJs],
-        epgUrl: new FormArray([]),
-        language: Language.ENGLISH,
-        showCaptions: false,
-        theme: Theme.LightTheme,
-    });
-
     /** Current version of the app */
     version: string;
 
@@ -73,6 +57,15 @@ export class SettingsComponent implements OnInit {
     /** All available visual themes */
     themeEnum = Theme;
 
+    /** Settings form object */
+    settingsForm = this.formBuilder.group({
+        player: [VideoPlayer.VideoJs],
+        ...(this.isElectron ? { epgUrl: new FormArray([]) } : {}),
+        language: Language.ENGLISH,
+        showCaptions: false,
+        theme: Theme.LightTheme,
+    });
+
     /** Form array with epg sources */
     epgUrl = this.settingsForm.get('epgUrl') as FormArray;
 
@@ -85,11 +78,9 @@ export class SettingsComponent implements OnInit {
         private electronService: DataService,
         private epgService: EpgService,
         private formBuilder: FormBuilder,
-        private http: HttpClient,
         private router: Router,
         private settingsService: SettingsService,
         private snackBar: MatSnackBar,
-        private storage: StorageMap,
         private translate: TranslateService
     ) {}
 
@@ -98,6 +89,14 @@ export class SettingsComponent implements OnInit {
      * storage (indexed db)
      */
     ngOnInit(): void {
+        this.setSettings();
+        this.checkAppVersion();
+    }
+
+    /**
+     * Sets saved settings from the indexed db store
+     */
+    setSettings(): void {
         this.settingsService
             .getValueFromLocalStorage(STORE_KEY.Settings)
             .subscribe((settings: Settings) => {
@@ -106,7 +105,7 @@ export class SettingsComponent implements OnInit {
                         player: settings.player
                             ? settings.player
                             : VideoPlayer.VideoJs,
-                        epgUrl: [],
+                        ...(this.isElectron ? { epgUrl: new Array() } : {}),
                         language: settings.language
                             ? settings.language
                             : Language.ENGLISH,
@@ -118,11 +117,11 @@ export class SettingsComponent implements OnInit {
                             : Theme.LightTheme,
                     });
 
-                    this.setEpgUrls(settings.epgUrl);
+                    if (this.isElectron) {
+                        this.setEpgUrls(settings.epgUrl);
+                    }
                 }
             });
-
-        this.checkAppVersion();
     }
 
     /**
@@ -152,17 +151,9 @@ export class SettingsComponent implements OnInit {
      * settings UI
      */
     checkAppVersion(): void {
-        this.http
-            .get(PACKAGE_JSON_URL)
-            .pipe(
-                catchError((err) => {
-                    console.error(err);
-                    throw new Error(err);
-                })
-            )
-            .subscribe((response: { version: string }) => {
-                this.showVersionInformation(response.version);
-            });
+        this.settingsService.getAppVersion().subscribe((version) => {
+            this.showVersionInformation(version);
+        });
     }
 
     /**
@@ -202,26 +193,39 @@ export class SettingsComponent implements OnInit {
      * the indexed db store
      */
     onSubmit(): void {
-        this.storage
-            .set(STORE_KEY.Settings, this.settingsForm.value)
+        this.settingsService
+            .setValueToLocalStorage(
+                STORE_KEY.Settings,
+                this.settingsForm.value,
+                true
+            )
             .subscribe(() => {
-                this.settingsForm.markAsPristine();
-                // check whether the epg url was changed or not
-                if (this.settingsForm.value.epgUrl) {
-                    this.fetchEpg(this.settingsForm.value.epgUrl);
-                }
-                this.translate.use(this.settingsForm.value.language);
-                this.settingsService.changeTheme(this.settingsForm.value.theme);
-                this.snackBar.open(
-                    this.translate.instant('SETTINGS.SETTINGS_SAVED'),
-                    null,
-                    {
-                        duration: 2000,
-                    }
-                );
+                this.applyChangedSettings();
             });
     }
 
+    /**
+     * Applies the changed settings to the app
+     */
+    applyChangedSettings(): void {
+        this.settingsForm.markAsPristine();
+        // check whether the epg url was changed or not
+        if (this.isElectron) {
+            if (this.settingsForm.value.epgUrl) {
+                this.fetchEpg(this.settingsForm.value.epgUrl);
+            }
+        }
+        this.translate.use(this.settingsForm.value.language);
+        this.settingsService.changeTheme(this.settingsForm.value.theme);
+        this.snackBar.open(
+            this.translate.instant('SETTINGS.SETTINGS_SAVED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
+
     /**
      * Navigates back to the applications homepage
      */