feat: check for available update

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "iptvnator",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -91,6 +91,14 @@
             "webpack-sources": "1.4.3",
             "webpack-subresource-integrity": "1.4.0",
             "worker-plugin": "4.0.3"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "7.1.3",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
+              "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==",
+              "dev": true
+            }
           }
         },
         "core-js": {
@@ -27727,10 +27735,22 @@
       }
     },
     "semver": {
-      "version": "7.1.3",
+      "version": "7.3.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
-      "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==",
+      "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
-      "dev": true
+      "requires": {
+        "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        }
+      }
     },
     "semver-compare": {
       "version": "1.0.0",
@@ -32073,8 +32093,7 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-      "dev": true
     },
     "yaml": {
       "version": "1.10.0",

package.json

@@ -2,7 +2,7 @@
   "name": "iptvnator",
   "version": "0.3.0",
   "description": "IPTV player application.",
-  "homepage": "https://github.com/4gray/my-iptv-player-pwa",
+  "homepage": "https://github.com/4gray/iptvnator",
   "author": {
     "name": "4gray",
     "email": "dev@artslab.info"
@@ -126,6 +126,7 @@
     "nedb-promises-ts": "0.0.1-4",
     "ngx-filter-pipe": "2.1.2",
     "ngx-uploader": "10.0.0",
+    "semver": "7.3.4",
     "uuid": "8.3.0",
     "video-js": "0.7.0"
   },

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';
+                    }
+                })
+        );
     }
 
     /**