refactor: add about dialog for pwa

src/app/app.module.ts

@@ -1,26 +1,22 @@
-import 'reflect-metadata';
-import '../polyfills';
-
-import { AppRoutingModule } from './app-routing.module';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import { NgxWhatsNewModule } from 'ngx-whats-new';
-import { SharedModule } from './shared/shared.module';
-
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ServiceWorkerModule } from '@angular/service-worker';
 // NG Translate
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
+import { NgxIndexedDBModule, NgxIndexedDBService } from 'ngx-indexed-db';
+import 'reflect-metadata';
+import { AppConfig } from '../environments/environment';
+import '../polyfills';
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { dbConfig } from './indexed-db.config';
+import { DataService } from './services/data.service';
 import { ElectronService } from './services/electron.service';
 import { PwaService } from './services/pwa.service';
-import { DataService } from './services/data.service';
-import { NgxIndexedDBModule, NgxIndexedDBService } from 'ngx-indexed-db';
-import { AppConfig } from '../environments/environment';
-import { dbConfig } from './indexed-db.config';
-import { ServiceWorkerModule } from '@angular/service-worker';
+import { SharedModule } from './shared/shared.module';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -53,7 +49,6 @@ export function DataFactory(dbService: NgxIndexedDBService, http: HttpClient) {
         BrowserAnimationsModule,
         BrowserModule,
         HttpClientModule,
-        NgxWhatsNewModule,
         SharedModule,
         AppConfig.environment === 'WEB'
             ? NgxIndexedDBModule.forRoot(dbConfig)

src/app/shared/components/about-dialog/about-dialog.component.html

@@ -0,0 +1,38 @@
+<div mat-dialog-content>
+    <img src="./assets/icons/icon-tv-256.png" width="128" /><br />
+    <h1 mat-dialog-title>About IPTVnator</h1>
+    <p>
+        Cross-platform IPTV player application with multiple features, such as
+        support of m3u and m3u8 playlists, favorites, TV guide, TV
+        archive/catchup and more.
+    </p>
+    <p>Version: {{ appVersion }}</p>
+    <p>
+        <a
+            href="https://github.com/4gray/iptvnator"
+            target="_blank"
+            title="ITPVnator repository on GitHub"
+            aria-label="ITPVnator repository on GitHub"
+            ><img
+                src="./assets/icons/github-light.png"
+                title="ITPVnator repository on GitHub" /></a
+        >&nbsp;
+        <a
+            href="http://twitter.com/share?text=IPTVnator &mdash; free cross-platform IPTV player. Available as PWA and as native application.&url=https://github.com/4gray/iptvnator&hashtags=iptv,m3u,video-player"
+            title="Share on Twitter"
+        >
+            <img
+                height="32"
+                src="./assets/icons/twitter-light.png"
+                title="Share on Twitter"
+            />
+        </a>
+        <a
+            href="https://www.buymeacoffee.com/4gray"
+            target="_blank"
+            title="Buy me a coffee"
+            aria-label="Buy me a coffee"
+            ><mat-icon>local_cafe</mat-icon></a
+        >
+    </p>
+</div>

src/app/shared/components/about-dialog/about-dialog.component.scss

@@ -0,0 +1,11 @@
+button {
+    text-transform: uppercase;
+}
+
+a {
+    color: #fff;
+}
+
+.mat-icon {
+    font-size: 32px;
+}

src/app/shared/components/about-dialog/about-dialog.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { MockModule } from 'ng-mocks';
+import { DataService } from '../../../services/data.service';
+import { ElectronServiceStub } from '../../../services/electron.service.stub';
+import { AboutDialogComponent } from './about-dialog.component';
+
+describe('AboutDialogComponent', () => {
+    let component: AboutDialogComponent;
+    let fixture: ComponentFixture<AboutDialogComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [AboutDialogComponent],
+            providers: [
+                {
+                    provide: DataService,
+                    useClass: ElectronServiceStub,
+                },
+            ],
+            imports: [MockModule(MatIconModule)],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AboutDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/shared/components/about-dialog/about-dialog.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { DataService } from '../../../services/data.service';
+
+@Component({
+    selector: 'app-about-dialog',
+    templateUrl: './about-dialog.component.html',
+    styleUrls: ['./about-dialog.component.scss'],
+})
+export class AboutDialogComponent {
+    /** Version of the application */
+    appVersion = this.dataService.getAppVersion();
+
+    /** Default constructor */
+    constructor(private dataService: DataService) {}
+}

src/app/shared/shared.module.ts

@@ -1,22 +1,30 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
+import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { HeaderComponent } from './components/';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '../material.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { FilterPipeModule } from 'ngx-filter-pipe';
-import { MomentDatePipe } from './pipes/moment-date.pipe';
+import { NgxWhatsNewModule } from 'ngx-whats-new';
+import { MaterialModule } from '../material.module';
+import { HeaderComponent } from './components/';
+import { AboutDialogComponent } from './components/about-dialog/about-dialog.component';
 import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
+import { MomentDatePipe } from './pipes/moment-date.pipe';
 
 @NgModule({
-    declarations: [ConfirmDialogComponent, HeaderComponent, MomentDatePipe],
+    declarations: [
+        ConfirmDialogComponent,
+        HeaderComponent,
+        MomentDatePipe,
+        AboutDialogComponent,
+    ],
     imports: [
         CommonModule,
         FilterPipeModule,
         FlexLayoutModule,
         FormsModule,
         MaterialModule,
+        NgxWhatsNewModule,
         ReactiveFormsModule,
         TranslateModule,
     ],
@@ -27,6 +35,7 @@ import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dial
         FormsModule,
         HeaderComponent,
         MaterialModule,
+        NgxWhatsNewModule,
         MomentDatePipe,
         ReactiveFormsModule,
         TranslateModule,