refactor: add about dialog for pwa

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) {}
+}