Added about page

src/app/app.component.html

@@ -21,6 +21,10 @@
                           <mat-icon>settings</mat-icon>
                           <span i18n="Settings menu label">Settings</span>
                         </button>
+                        <button (click)="openAboutDialog()" mat-menu-item>
+                            <mat-icon>info</mat-icon>
+                            <span i18n="About menu label">About</span>
+                        </button>
                     </mat-menu>
                 </div>
             </div>

src/app/app.component.ts

@@ -21,6 +21,7 @@ import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { THEMES_CONFIG } from '../themes';
 import { SettingsComponent } from './settings/settings.component';
+import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
 
 @Component({
   selector: 'app-root',
@@ -165,5 +166,11 @@ onSetTheme(theme, old_theme) {
     });
   }
 
+  openAboutDialog() {
+    const dialogRef = this.dialog.open(AboutDialogComponent, {
+      width: '80vw'
+    });
+  }
+
 }
 

src/app/app.module.ts

@@ -48,6 +48,7 @@ import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dia
 import { SettingsComponent } from './settings/settings.component';
 
 import es from '@angular/common/locales/es';
+import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
 registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -68,7 +69,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     SubscriptionComponent,
     SubscriptionFileCardComponent,
     SubscriptionInfoDialogComponent,
-    SettingsComponent
+    SettingsComponent,
+    AboutDialogComponent
   ],
   imports: [
     BrowserModule,

src/app/dialogs/about-dialog/about-dialog.component.html

@@ -0,0 +1,23 @@
+<h4 mat-dialog-title i18n="About dialog title">About YoutubeDL-Material</h4>
+
+<mat-dialog-content>
+    <div style="margin-bottom: 5px;">
+        <p>
+            <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About first paragraph">is an open-source YouTube downloader built under Google's Material Design specifications. You can seamlessly download your favorite videos as video or audio files, and even subscribe to your favorite channels and playlists to keep updated with their new videos.</ng-container>
+        </p>
+        <p>
+            <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About second paragraph">has some awesome features included! An extensive API, Docker support, and localization (translation) support. Read up on all the supported features by clicking on the GitHub icon below.</ng-container>
+        </p>
+        <p>
+            <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
+        </p>
+        <a [href]="projectLink" target="_blank">
+            <img style="width: 32px; margin-bottom: 10px;" src="assets/images/GitHub-64px.png">
+        </a>
+        <p><ng-container i18n="Version label">Installed version:</ng-container>&nbsp;{{version}} - <a [href]="latestUpdateLink" target="_blank"><ng-container i18n="View latest update">View latest update</ng-container></a></p>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>

src/app/dialogs/about-dialog/about-dialog.component.scss

@@ -0,0 +1,3 @@
+i {
+    margin-right: 1px;
+}

src/app/dialogs/about-dialog/about-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutDialogComponent } from './about-dialog.component';
+
+describe('AboutDialogComponent', () => {
+  let component: AboutDialogComponent;
+  let fixture: ComponentFixture<AboutDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dialogs/about-dialog/about-dialog.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-dialog',
+  templateUrl: './about-dialog.component.html',
+  styleUrls: ['./about-dialog.component.scss']
+})
+export class AboutDialogComponent implements OnInit {
+
+  projectLink = 'https://github.com/Tzahi12345/YoutubeDL-Material';
+  issuesLink = 'https://github.com/Tzahi12345/YoutubeDL-Material/issues';
+  latestUpdateLink = 'https://github.com/Tzahi12345/YoutubeDL-Material/releases/latest'
+
+  version = 'v3.5';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}