show update notification

src/ipc/ipc-event.ts

@@ -10,3 +10,5 @@ export const OPEN_LINK = 'open-link'
 export const OPEN_LINK_EXTERNAL = 'open-link-external'
 
 export const CLOSE_SETTINGS_WINDOW = 'close-settings-window'
+
+export const UPDATE_AVAILABLE = 'update-available'

src/ipc/main-process-bindings.ts

@@ -27,6 +27,12 @@ class MainProcessBinding extends EventTarget {
           detail: cfg
         }))
       })
+
+      electron.ipcRenderer.on(ipcEvent.UPDATE_AVAILABLE, (e, updateInfo) => {
+        this.dispatchEvent(new CustomEvent(ipcEvent.UPDATE_AVAILABLE, {
+          detail: updateInfo
+        }))
+      })
     }
   }
 

src/main/updates.ts

@@ -1,6 +1,8 @@
 import { autoUpdater } from 'electron-updater'
 import { logger } from './logger'
 import { rebuildContextMenu } from './tray'
+import { win } from './window'
+import { UPDATE_AVAILABLE } from '@/ipc/ipc-event'
 
 export const UpdateState = {
   canCheck: true,
@@ -12,7 +14,8 @@ autoUpdater.on('update-available', (info: { version: string }) => {
   if (autoUpdater.autoDownload) {
     UpdateState.status = `Downloading v${info.version} ...`
   } else {
-    UpdateState.status = `Update v${info.version} available on Github`
+    UpdateState.status = `Update v${info.version} available on GitHub`
+    win.webContents.send(UPDATE_AVAILABLE, { auto: false, version: info.version })
   }
   rebuildContextMenu()
 })
@@ -33,6 +36,7 @@ autoUpdater.on('update-downloaded', (info: { version: string }) => {
   UpdateState.canCheck = false
   UpdateState.status = `v${info.version} will be installed on exit`
   rebuildContextMenu()
+  win.webContents.send(UPDATE_AVAILABLE, { auto: true, version: info.version })
 })
 
 // on('download-progress') https://github.com/electron-userland/electron-builder/issues/2521

src/web/price-check/AppBootstrap.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="flex flex-col">
+    <div v-if="updateInfo" class="bg-gray-900 mt-2 mx-4 rounded flex items-baseline justify-between py-1 px-2">
+      <div class="font-sans">
+        <div>Update available: {{ updateInfo.version }}</div>
+        <div class="text-gray-500" v-if="updateInfo.auto">It will be installed automatically on exit</div>
+        <div class="text-gray-500" v-else>You can download it from GitHub</div>
+      </div>
+      <button @click="updateInfo = null"><i class="fas fa-times"></i></button>
+    </div>
     <div v-if="leaguesService.isLoading"
-      class="bg-gray-800 text-gray-200 py-1 px-2">
+      class="py-1 px-2">
       <i class="fas fa-info-circle text-gray-600"></i> Loading leagues...</div>
-    <div class="bg-gray-800 text-gray-200 py-1 px-2 flex items-baseline" v-else-if="leaguesService.loadingError">
+    <div class="py-1 px-2 flex items-baseline" v-else-if="leaguesService.loadingError">
       <i class="fas fa-exclamation-circle pr-1 text-red-600"></i>
       <div>
         <div>
@@ -19,11 +27,22 @@
 <script>
 import { Leagues } from './Leagues'
 import { Prices } from './Prices'
+import { MainProcess } from '@/ipc/main-process-bindings'
+import { UPDATE_AVAILABLE } from '@/ipc/ipc-event'
 
 export default {
   name: 'AppBootstrap',
   created () {
     this.retry()
+
+    MainProcess.addEventListener(UPDATE_AVAILABLE, ({ detail: updateInfo }) => {
+      this.updateInfo = updateInfo
+    })
+  },
+  data () {
+    return {
+      updateInfo: null
+    }
   },
   computed: {
     leaguesService: () => Leagues