feat: check for available update

src/app/services/electron.service.ts

@@ -30,4 +30,11 @@ export class ElectronService {
             this.fs = window.require('fs');
         }
     }
+
+    /**
+     * Returns the current version of the application
+     */
+    getAppVersion(): string {
+        return this.remote.app.getVersion();
+    }
 }

src/app/settings/settings.component.html

@@ -1,8 +1,14 @@
-<app-header title="Settings / IPTVnator" subtitle="Change the configuration of the application"></app-header>
+<app-header
+    title="Settings / IPTVnator"
+    subtitle="Change the configuration of the application"
+></app-header>
 <form [formGroup]="settingsForm" (ngSubmit)="onSubmit()" novalidate>
     <mat-card>
         <mat-card-header class="card-header">
-            <div mat-card-subtitle>Please adapt the options from the list below and confirm with a save button</div>
+            <div mat-card-subtitle>
+                Please adapt the options from the list below and confirm with a
+                save button
+            </div>
         </mat-card-header>
         <mat-card-content>
             <mat-list>
@@ -13,23 +19,45 @@
                             <mat-form-field appearance="fill">
                                 <mat-label>Select an option</mat-label>
                                 <mat-select formControlName="player">
-                                    <mat-option *ngFor="let player of players" [value]="player.id">{{player.label}}
+                                    <mat-option
+                                        *ngFor="let player of players"
+                                        [value]="player.id"
+                                        >{{ player.label }}
                                     </mat-option>
                                 </mat-select>
                             </mat-form-field>
                         </p>
                     </div>
                 </mat-list-item>
+                <mat-list-item>
+                    <div matLine fxLayout="row">
+                        <p fxFlex>Version</p>
+                        <p fxFlex>
+                            {{ version }} <br />
+                            {{ updateMessage }}
+                        </p>
+                    </div>
+                </mat-list-item>
             </mat-list>
         </mat-card-content>
         <mat-card-actions>
-            <button mat-button color="primary" type="submit" [disabled]="settingsForm.pristine">
+            <button
+                mat-button
+                color="primary"
+                type="submit"
+                [disabled]="settingsForm.pristine"
+            >
                 <mat-icon>save</mat-icon> Save changes
             </button>
             <div fxFlex></div>
-            <button mat-button color="primary" type="reset" (click)="backToHome()">
+            <button
+                mat-button
+                color="primary"
+                type="reset"
+                (click)="backToHome()"
+            >
                 <mat-icon>chevron_left</mat-icon> Back to home
             </button>
         </mat-card-actions>
     </mat-card>
-</form>
+</form>

src/app/settings/settings.component.ts

@@ -5,6 +5,9 @@ import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
 import { Settings } from './settings.interface';
+import { HttpClient } from '@angular/common/http';
+import * as semver from 'semver';
+import { ElectronService } from 'app/services/electron.service';
 
 @Component({
     selector: 'app-settings',
@@ -15,6 +18,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
     /** Subscription object */
     private subscription: Subscription = new Subscription();
 
+    /** Url of the package.json file in the app repository, required to get the version of the released app */
+    latestPackageJsonUrl =
+        'https://raw.githubusercontent.com/4gray/iptvnator/master/package.json';
+
     /** Player options */
     players = [
         {
@@ -30,6 +37,12 @@ export class SettingsComponent implements OnInit, OnDestroy {
     /** Settings form object */
     settingsForm: FormGroup;
 
+    /** Current version of the app */
+    version: string;
+
+    /** Update message to show */
+    updateMessage: string;
+
     /**
      * Creates an instance of SettingsComponent and injects some dependencies into the component
      * @param formBuilder
@@ -38,7 +51,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
      * @param storage
      */
     constructor(
+        private electronService: ElectronService,
         private formBuilder: FormBuilder,
+        private http: HttpClient,
         private router: Router,
         private snackBar: MatSnackBar,
         private storage: StorageMap
@@ -46,6 +61,24 @@ export class SettingsComponent implements OnInit, OnDestroy {
         this.settingsForm = this.formBuilder.group({
             player: ['html5'], // default value
         });
+
+        this.subscription.add(
+            this.http
+                .get(this.latestPackageJsonUrl)
+                .subscribe((response: { version: string }) => {
+                    this.version = this.electronService.getAppVersion();
+                    const isOutdated = semver.lt(
+                        this.version,
+                        response.version
+                    );
+
+                    if (isOutdated) {
+                        this.updateMessage = `There is a new version available: ${response.version}`;
+                    } else {
+                        this.updateMessage = 'You are using the latest version';
+                    }
+                })
+        );
     }
 
     /**