Fixed auto-updating

src/app/components/settings/settings.component.html

@@ -36,7 +36,7 @@
   (this will be possible in a future update to Bridge)
 </div>
 
-<h3 class="ui header">Theme</h3>
+<!-- <h3 class="ui header">Theme</h3>
 <div #themeDropdown class="ui selection dropdown mr">
   <input type="hidden" name="sort" [value]="settingsService.theme">
   <i class="dropdown icon"></i>
@@ -44,9 +44,15 @@
   <div class="menu">
     <div class="item" [attr.data-value]="i" *ngFor="let theme of settingsService.builtinThemes; let i = index">{{theme}}</div>
   </div>
-</div>
+</div> -->
 
 <div class="bottom">
+  <div class="ui buttons">
+    <button *ngIf="updateAvailable" class="ui labeled icon positive button" (click)="downloadUpdate()">
+      <i class="left cloud download alternate icon"></i>Update available</button>
+    <button id="versionNumberButton" class="ui basic disabled button">v0.0.0</button>
+  </div>
+  
   <button class="ui basic icon button" data-tooltip="Toggle developer tools" data-position="top right"
     (click)="toggleDevTools()">
     <i class="cog icon"></i>

src/app/components/settings/settings.component.scss

@@ -17,4 +17,8 @@
   position: absolute;
   bottom: 2em;
   right: 2em;
+}
+
+#versionNumberButton {
+  margin-right: 1em;
 }

src/app/components/settings/settings.component.ts

@@ -8,23 +8,30 @@ import { SettingsService } from 'src/app/core/services/settings.service'
   styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit, AfterViewInit {
-  @ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
+  // @ViewChild('themeDropdown', { static: true }) themeDropdown: ElementRef
 
   cacheSize = 'Calculating...'
+  updateAvailable = false
+  updateVersion: string = null
 
   constructor(public settingsService: SettingsService, private electronService: ElectronService) { }
 
   async ngOnInit() {
     const cacheSize = await this.settingsService.getCacheSize()
     this.cacheSize = Math.round(cacheSize / 1000000) + ' MB'
+    this.electronService.receiveIPC('update-available', (result) => {
+      this.updateVersion = result.version
+      this.updateAvailable = true
+    })
+    this.updateAvailable = await this.electronService.invoke('get-update-available', undefined)
   }
 
   ngAfterViewInit() {
-    $(this.themeDropdown.nativeElement).dropdown({
+    // $(this.themeDropdown.nativeElement).dropdown({
-      onChange: (_value: string, text: string) => {
+    //   onChange: (_value: string, text: string) => {
-        this.settingsService.theme = text
+    //     this.settingsService.theme = text
-      }
+    //   }
-    })
+    // })
   }
 
   async clearCache() {
@@ -55,6 +62,18 @@ export class SettingsComponent implements OnInit, AfterViewInit {
     this.settingsService.rateLimitDelay = Number(inputElement.value)
   }
 
+  downloadUpdate() {
+    this.electronService.sendIPC('download-update', undefined)
+    this.electronService.receiveIPC('update-progress', (result) => console.log(result.percent))
+    this.electronService.receiveIPC('update-downloaded', (result) => {
+      console.log(result)
+      setTimeout(() => {
+        console.log('quit and install...')
+        this.electronService.sendIPC('quit-and-install', undefined)
+      }, 30000)
+    })
+  }
+
   toggleDevTools() {
     const toolsOpened = this.electronService.currentWindow.webContents.isDevToolsOpened()
 

src/app/components/toolbar/toolbar.component.html

@@ -1,8 +1,7 @@
 <div class="ui top menu">
   <a class="item" routerLinkActive="active" routerLink="/browse">Browse</a>
   <a class="item" routerLinkActive="active" routerLink="/library">Library</a>
-  <a class="item" routerLinkActive="active" routerLink="/settings">Settings</a>
+  <a class="item" routerLinkActive="active" routerLink="/settings"><i *ngIf="updateAvailable" class="teal small circle icon"></i>Settings</a>
-  <a class="item" routerLinkActive="active" routerLink="/about"><i class="teal small circle icon"></i>About</a>
 
   <div class="right menu">
     <a class="item traffic-light" (click)="minimize()"><i class="minus icon"></i></a>

src/app/components/toolbar/toolbar.component.ts

@@ -13,7 +13,7 @@ export class ToolbarComponent implements OnInit {
 
   constructor(private electronService: ElectronService, private ref: ChangeDetectorRef) { }
 
-  ngOnInit() {
+  async ngOnInit() {
     this.isMaximized = this.electronService.currentWindow.isMaximized()
     this.electronService.currentWindow.on('unmaximize', () => {
       this.isMaximized = false
@@ -27,6 +27,7 @@ export class ToolbarComponent implements OnInit {
     this.electronService.receiveIPC('update-available', () => {
       this.updateAvailable = true
     })
+    this.updateAvailable = await this.electronService.invoke('get-update-available', undefined)
   }
 
   minimize() {

src/electron/ipc/UpdateHandler.ipc.ts

@@ -9,6 +9,8 @@ export interface UpdateProgress {
   total: number
 }
 
+let updateAvailable = false
+
 /**
  * Checks for updates when the program is launched.
  */
@@ -18,6 +20,9 @@ class UpdateChecker {
     autoUpdater.autoDownload = false
     autoUpdater.logger = null
     this.registerUpdaterListeners()
+  }
+
+  checkForUpdates() {
     autoUpdater.checkForUpdates()
   }
 
@@ -28,13 +33,30 @@ class UpdateChecker {
     })
 
     autoUpdater.on('update-available', (info: UpdateInfo) => {
+      updateAvailable = true
       console.log('update available callback', info)
       emitIPCEvent('update-available', info)
     })
   }
 }
 
-new UpdateChecker()
+export const updateChecker = new UpdateChecker()
+
+/**
+ * Handles the 'get-update-available' event.
+ */
+class GetUpdateAvailableHandler implements IPCInvokeHandler<'get-update-available'> {
+  event: 'get-update-available' = 'get-update-available'
+
+  /**
+   * @returns `true` if an update is available.
+   */
+  handler() {
+    return updateAvailable
+  }
+}
+
+export const getUpdateAvailableHandler = new GetUpdateAvailableHandler()
 
 /**
  * Handles the 'get-current-version' event.

src/electron/main.ts

@@ -1,4 +1,5 @@
 import { app, BrowserWindow, ipcMain } from 'electron'
+import { updateChecker } from './ipc/UpdateHandler.ipc'
 import * as windowStateKeeper from 'electron-window-state'
 import * as path from 'path'
 import * as url from 'url'
@@ -17,7 +18,12 @@ restrictToSingleInstance()
 handleOSXWindowClosed()
 app.on('ready', () => {
   // Load settings from file before the window is created
-  getSettingsHandler.initSettings().then(createBridgeWindow)
+  getSettingsHandler.initSettings().then(() => {
+    createBridgeWindow()
+    if (!isDevBuild) {
+      updateChecker.checkForUpdates()
+    }
+  })
 })
 
 /**

src/electron/shared/IPCHandler.ts

@@ -8,7 +8,7 @@ import { downloadHandler } from '../ipc/download/DownloadHandler'
 import { Settings } from './Settings'
 import { batchSongDetailsHandler } from '../ipc/browse/BatchSongDetailsHandler.ipc'
 import { getSettingsHandler, setSettingsHandler } from '../ipc/SettingsHandler.ipc'
-import { UpdateProgress, getCurrentVersionHandler, downloadUpdateHandler, quitAndInstallHandler } from '../ipc/UpdateHandler.ipc'
+import { UpdateProgress, getCurrentVersionHandler, downloadUpdateHandler, quitAndInstallHandler, getUpdateAvailableHandler } from '../ipc/UpdateHandler.ipc'
 import { UpdateInfo } from 'electron-updater'
 
 /**
@@ -26,7 +26,8 @@ export function getIPCInvokeHandlers(): IPCInvokeHandler<keyof IPCInvokeEvents>[
     songDetailsHandler,
     batchSongDetailsHandler,
     albumArtHandler,
-    getCurrentVersionHandler
+    getCurrentVersionHandler,
+    getUpdateAvailableHandler
   ]
 }
 
@@ -58,6 +59,10 @@ export type IPCInvokeEvents = {
     input: undefined
     output: string
   }
+  'get-update-available': {
+    input: undefined
+    output: boolean
+  }
 }
 
 /**