diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 3ba345a52..d0787e6fe 100644 --- a/src/app/app.component.spec.ts +++ b/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(); }) diff --git a/src/app/services/settings.service.spec.ts b/src/app/services/settings.service.spec.ts index 3c448c60d..c4e11367e 100644 --- a/src/app/services/settings.service.spec.ts +++ b/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 diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts index 4762cd2e1..66e12d112 100644 --- a/src/app/services/settings.service.ts +++ b/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 | 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(PACKAGE_JSON_URL).pipe( + map((response) => response['version']), + catchError((err) => { + console.error(err); + throw new Error(err); + }) + ); } } diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index a3521a885..f5a5484d4 100644 --- a/src/app/settings/settings.component.ts +++ b/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 */