About dialog now informs user when update is available or when they are up to date based on the github release api

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

@@ -14,7 +14,11 @@
         <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>
+        <p>
+            <ng-container i18n="Version label">Installed version:</ng-container>&nbsp;{{current_version_tag}} - <span style="display: inline-block" *ngIf="checking_for_updates"><mat-spinner class="version-spinner" [diameter]="22"></mat-spinner>&nbsp;<ng-container i18n="Checking for updates text">Checking for updates...</ng-container></span>
+            <mat-icon *ngIf="!checking_for_updates" class="version-checked-icon">done</mat-icon>&nbsp;&nbsp;<a *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] !== current_version_tag" [href]="latestUpdateLink" target="_blank"><ng-container i18n="View latest update">Update available</ng-container> - {{latestGithubRelease['tag_name']}}</a>
+            <span *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] === current_version_tag">You are up to date.</span>
+        </p>
     </div>
 </mat-dialog-content>
 

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

@@ -1,3 +1,16 @@
 i {
     margin-right: 1px;
+}
+
+.version-spinner {
+    top: 4px;
+    margin-right: 5px;
+    margin-left: 5px;
+    display: inline-block;
+}
+
+.version-checked-icon {
+    top: 4px;
+    margin-left: 2px;
+    position: relative;
 }

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
 
 @Component({
   selector: 'app-about-dialog',
@@ -10,12 +11,23 @@ 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'
+  latestGithubRelease = null;
+  checking_for_updates = true;
 
-  version = 'v3.5';
+  current_version_tag = 'v3.5';
 
-  constructor() { }
+  constructor(private postsService: PostsService) { }
 
   ngOnInit(): void {
+    this.getLatestGithubRelease()
+  }
+
+  getLatestGithubRelease() {
+    this.postsService.getLatestGithubRelease().subscribe(res => {
+      this.checking_for_updates = false;
+      this.latestGithubRelease = res;
+      console.log(this.latestGithubRelease)
+    });
   }
 
 }