feat: check for updates, show new version on home page

Author: BluDood

src/main/index.ts

@@ -68,6 +68,7 @@ import {
   removeScreensaverImage,
   hasCustomScreensaverImage
 } from './lib/screensaver.js'
+import { getLatestVersion } from './lib/update.js'
 
 let mainWindow: BrowserWindow | null = null
 
@@ -230,7 +231,8 @@ enum IPCHandler {
   RemoveScreensaverImage = 'removeScreensaverImage',
   HasCustomScreensaverImage = 'hasCustomScreensaverImage',
   OpenDevTools = 'openDevTools',
-  GetChannel = 'getChannel'
+  GetChannel = 'getChannel',
+  CheckUpdate = 'checkUpdate'
 }
 
 async function setupIpcHandlers() {
@@ -476,6 +478,18 @@ async function setupIpcHandlers() {
   ipcMain.handle(IPCHandler.GetChannel, () => {
     return isNightly ? 'nightly' : 'stable'
   })
+
+  ipcMain.handle(IPCHandler.CheckUpdate, async () => {
+    const currentVersion = 'v' + app.getVersion()
+    const latestVersion = await getLatestVersion()
+    if (!latestVersion) return null
+
+    return {
+      currentVersion,
+      latestVersion: latestVersion.version,
+      downloadUrl: latestVersion.downloadUrl
+    }
+  })
 }
 
 async function setupTray() {

src/main/lib/update.ts

@@ -0,0 +1,14 @@
+import axios from 'axios'
+
+export async function getLatestVersion() {
+  const res = await axios.get(
+    'https://api.github.com/repos/BluDood/GlanceThing/releases/latest'
+  )
+
+  if (res.status !== 200) return null
+
+  return {
+    version: res.data.tag_name,
+    downloadUrl: res.data.html_url
+  }
+}

src/preload/index.d.ts

@@ -65,6 +65,11 @@ declare global {
       hasCustomScreensaverImage: () => Promise<boolean>
       openDevTools: () => void
       getChannel: () => Promise<'stable' | 'nightly'>
+      checkUpdate: () => Promise<{
+        currentVersion: string
+        latestVersion: string
+        downloadUrl: string
+      } | null>
     }
   }
 }

src/preload/index.ts

@@ -42,7 +42,8 @@ enum IPCHandler {
   DownloadLogs = 'downloadLogs',
   UploadScreensaverImage = 'uploadScreensaverImage',
   RemoveScreensaverImage = 'removeScreensaverImage',
-  HasCustomScreensaverImage = 'hasCustomScreensaverImage'
+  HasCustomScreensaverImage = 'hasCustomScreensaverImage',
+  CheckUpdate = 'checkUpdate'
 }
 
 // Custom APIs for renderer
@@ -116,7 +117,8 @@ const api = {
   removeScreensaverImage: () =>
     ipcRenderer.invoke(IPCHandler.RemoveScreensaverImage),
   openDevTools: () => ipcRenderer.invoke('openDevTools'),
-  getChannel: () => ipcRenderer.invoke('getChannel')
+  getChannel: () => ipcRenderer.invoke('getChannel'),
+  checkUpdate: () => ipcRenderer.invoke(IPCHandler.CheckUpdate)
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/renderer/src/pages/Home/Home.module.css

@@ -63,6 +63,54 @@
   color: #ff9800;
 }
 
+.update {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 20px;
+  background: #111;
+  padding: 12px;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  animation: appear 500ms ease;
+}
+
+.update .title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #fff;
+}
+
+.update .title span {
+  color: #0064ff;
+  font-size: 22px;
+}
+
+.update .content {
+  display: flex;
+  justify-content: space-between;
+  gap: 15px;
+}
+
+.update .content .version {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #bbb;
+  font-size: 14px;
+}
+
+.update .content button {
+  padding: 6px 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
 @keyframes appear {
   from {
     opacity: 0;

src/renderer/src/pages/Home/Home.tsx

@@ -28,6 +28,12 @@ const Home: React.FC = () => {
   const carThingStateRef = useRef(carThingState)
   const [needsPlaybackSetup, setNeedsPlaybackSetup] = useState(false)
 
+  const [updateInfo, setUpdateInfo] = useState<{
+    currentVersion: string
+    latestVersion: string
+    downloadUrl: string
+  } | null>(null)
+
   useEffect(() => {
     window.api.getStorageValue('setupComplete').then(setupComplete => {
       if (!setupComplete) navigate('/setup')
@@ -40,7 +46,7 @@ const Home: React.FC = () => {
       carThingStateRef.current = state
     })
 
-    const timeout = setTimeout(() => {
+    const stateTimeout = setTimeout(() => {
       if (carThingStateRef.current !== null) return
 
       window.api.triggerCarThingStateUpdate()
@@ -50,9 +56,17 @@ const Home: React.FC = () => {
       if (handler === null) setNeedsPlaybackSetup(true)
     })
 
+    window.api.checkUpdate().then(setUpdateInfo)
+
+    const checkUpdateInterval = setInterval(
+      () => window.api.checkUpdate().then(setUpdateInfo),
+      1000 * 60 * 30
+    )
+
     return () => {
       removeListener()
-      clearTimeout(timeout)
+      clearTimeout(stateTimeout)
+      clearInterval(checkUpdateInterval)
     }
   }, [])
 
@@ -119,6 +133,25 @@ const Home: React.FC = () => {
           </button>
         </div>
       ) : null}
+      {updateInfo &&
+      updateInfo.latestVersion !== updateInfo.currentVersion ? (
+        <div className={styles.update}>
+          <div className={styles.title}>
+            <span className="material-icons">download</span>A new
+            GlanceThing update is available!
+          </div>
+          <div className={styles.content}>
+            <p className={styles.version}>
+              {updateInfo.currentVersion}{' '}
+              <span className="material-icons">arrow_forward</span>{' '}
+              {updateInfo.latestVersion}
+            </p>
+            <button onClick={() => window.open(updateInfo.downloadUrl)}>
+              Download <span className="material-icons">open_in_new</span>
+            </button>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }