feat: rebuild about window

bitfocus · Feb 2, 2025 · ed2373c · ed2373c
1 parent a5817bf
commit ed2373c
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 27 deletions.
diff --git a/satellite/package.json b/satellite/package.json
@@ -46,7 +46,6 @@
 		"@xencelabs-quick-keys/node": "^1.0.0",
 		"conf": "^13.1.0",
 		"debounce-fn": "^6.0.0",
-		"electron-about-window": "^1.15.2",
 		"electron-store": "^10.0.1",
 		"exit-hook": "^4.0.0",
 		"infinitton-idisplay": "^1.2.0",

diff --git a/satellite/src/aboutPreload.cts b/satellite/src/aboutPreload.cts
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { contextBridge, ipcRenderer } = require('electron')
+
+const aboutApi = {
+	getVersion: async (): Promise<string> => ipcRenderer.invoke('getVersion'),
+	openShell: async (url: string): Promise<void> => ipcRenderer.invoke('openShell', url),
+}
+
+contextBridge.exposeInMainWorld('aboutApi', aboutApi)
+
+export type { aboutApi }
diff --git a/satellite/src/electron.ts b/satellite/src/electron.ts
@@ -1,9 +1,8 @@
 import '@julusian/segfault-raub'
 
-import { app, Tray, Menu, MenuItem, dialog, nativeImage, BrowserWindow, ipcMain } from 'electron'
+import { app, Tray, Menu, MenuItem, dialog, nativeImage, BrowserWindow, ipcMain, shell } from 'electron'
 import * as path from 'path'
 import electronStore from 'electron-store'
-import openAboutWindow from 'electron-about-window'
 import { DeviceManager } from './devices.js'
 import { CompanionSatelliteClient } from './client.js'
 import { DEFAULT_PORT } from './lib.js'
@@ -21,6 +20,7 @@ ensureFieldsPopulated(appConfig)
 
 let tray: Tray | undefined
 let configWindow: BrowserWindow | undefined
+let aboutWindow: BrowserWindow | undefined
 
 app.on('window-all-closed', () => {
 	// Block default behaviour of exit on close
@@ -186,21 +186,55 @@ function trayScanDevices() {
 }
 
 function trayAbout() {
+	if (aboutWindow?.isVisible()) return
 	console.log('about click')
-	openAboutWindow.default({
-		icon_path: fileURLToPath(new URL('../assets/icon.png', import.meta.url)),
-		product_name: 'Companion Satellite',
-		use_inner_html: true,
-		description: 'Satellite Streamdeck connector for Bitfocus Companion <br />Supports 2.2.0 and newer',
-		adjust_window_size: false,
-		win_options: {
-			resizable: false,
+
+	const isProduction = app.isPackaged
+
+	aboutWindow = new BrowserWindow({
+		show: false,
+		width: 400,
+		height: 400,
+		autoHideMenuBar: isProduction,
+		icon: fileURLToPath(new URL('../assets/icon.png', import.meta.url)),
+		resizable: !isProduction,
+		webPreferences: {
+			preload: fileURLToPath(new URL('../dist/aboutPreload.cjs', import.meta.url)),
 		},
-		bug_report_url: 'https://github.com/bitfocus/companion-satellite/issues',
-		copyright: `${new Date().getFullYear()} Julian Waller`,
-		homepage: 'https://github.com/bitfocus/companion-satellite',
-		license: 'MIT',
 	})
+	aboutWindow.on('close', () => {
+		aboutWindow = undefined
+	})
+	if (isProduction) {
+		aboutWindow.removeMenu()
+		aboutWindow
+			.loadFile(path.join(webRoot, 'about.html'))
+			.then(() => {
+				if (!aboutWindow) return
+
+				aboutWindow.show()
+				aboutWindow.focus()
+
+				aboutWindow.webContents.send('about-version', app.getVersion())
+			})
+			.catch((e) => {
+				console.error('Failed to load file', e)
+			})
+	} else {
+		aboutWindow
+			.loadURL('http://localhost:5173/about.html')
+			.then(() => {
+				if (!aboutWindow) return
+
+				aboutWindow.show()
+				aboutWindow.focus()
+
+				aboutWindow.webContents.send('about-version', app.getVersion())
+			})
+			.catch((e) => {
+				console.error('Failed to load file', e)
+			})
+	}
 }
 
 ipcMain.on('rescan', () => {
@@ -219,3 +253,14 @@ ipcMain.handle('saveConfig', async (_e, newConfig: Partial<ApiConfigData>): Prom
 	updateConfig(appConfig, newConfig)
 	return compileConfig(appConfig)
 })
+
+// about window
+ipcMain.handle('openShell', async (_e, url: string): Promise<void> => {
+	console.log('openShell', url)
+	shell.openExternal(url).catch((e) => {
+		console.error('Failed to open shell', e)
+	})
+})
+ipcMain.handle('getVersion', async (): Promise<string> => {
+	return app.getVersion()
+})
diff --git a/webui/about.html b/webui/about.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/png" href="/icon.png" />
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
+		<title>About Companion Satellite</title>
+
+		<!-- <link rel="stylesheet" href="/src/App.css" /> -->
+		<style type="text/css">
+			body,
+			html {
+				width: 100%;
+				height: 100%;
+				-webkit-user-select: none;
+				user-select: none;
+				-webkit-app-region: drag;
+			}
+
+			body {
+				margin: 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				color: #ccc;
+				background-color: rgb(38, 38, 38);
+				font-size: 12px;
+				font-family: 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,
+					'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
+			}
+
+			.logo {
+				width: 200px;
+				-webkit-user-select: none;
+				user-select: none;
+			}
+
+			.title,
+			.copyright,
+			.description {
+				margin: 0.2em;
+				text-align: center;
+			}
+
+			.clickable {
+				cursor: pointer;
+			}
+
+			.description {
+				margin-bottom: 1em;
+				text-align: center;
+			}
+
+			.versions {
+				border-collapse: collapse;
+				margin-top: 1em;
+			}
+
+			.copyright,
+			.versions {
+				color: #999;
+			}
+
+			.buttons {
+				margin-bottom: 1em;
+				text-align: center;
+			}
+
+			.buttons button {
+				margin-top: 1em;
+				width: 100px;
+				height: 24px;
+			}
+
+			.link {
+				cursor: pointer;
+				color: #80a0c2;
+			}
+
+			.bug-report-link {
+				position: absolute;
+				right: 0.5em;
+				bottom: 0.5em;
+			}
+
+			.clickable,
+			.bug-report-link,
+			.buttons button {
+				-webkit-app-region: no-drag;
+			}
+		</style>
+	</head>
+	<body class="dark">
+		<!-- Page is based on electron-about-window npm package -->
+		<div class="logo">
+			<img id="app-icon" alt="App icon" height="200" src="/icon.png" />
+		</div>
+		<h2 class="title">Companion Satellite</h2>
+		<h3 class="description">
+			Satellite Streamdeck connector for Bitfocus Companion
+			<br />
+			Supports 2.2.0 and newer
+		</h3>
+		<div class="copyright">
+			<span id="year">Copyright</span> Julian Waller
+			<br />
+			Distributed under MIT license.
+		</div>
+		<table class="versions"></table>
+		<div class="buttons"></div>
+		<footer class="footer">
+			<div class="link bug-report-link">Report an issue</div>
+		</footer>
+
+		<!-- https://github.com/electron/electron/issues/2863 -->
+		<script>
+			var exports = exports || {}
+		</script>
+
+		<script src="./src/about.ts"></script>
+	</body>
+</html>
diff --git a/webui/electron.html b/webui/electron.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="dark">
+<!doctype html>
+<html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/png" href="/icon.png" />

diff --git a/webui/index.html b/webui/index.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" data-bs-theme="dark">
+<!doctype html>
+<html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/png" href="/icon.png" />

diff --git a/webui/src/about.ts b/webui/src/about.ts
@@ -0,0 +1,37 @@
+declare const aboutApi: typeof import('../../satellite/dist/aboutPreload.cjs').aboutApi
+
+const bug_report = document.querySelector('.bug-report-link') as HTMLDivElement
+bug_report.addEventListener('click', (e) => {
+	e.preventDefault()
+	aboutApi.openShell('https://github.com/bitfocus/companion-satellite/issues').catch((e) => {
+		console.error('failed to open bug report url', e)
+	})
+})
+
+const open_home = () => {
+	aboutApi.openShell('https://github.com/bitfocus/companion-satellite').catch((e) => {
+		console.error('failed to open homepage url', e)
+	})
+}
+
+const title_elem = document.querySelector('.title') as HTMLHeadingElement
+// title_elem.innerText += ` ${version}`
+
+title_elem.addEventListener('click', open_home)
+title_elem.classList.add('clickable')
+const logo_elem = document.querySelector('.logo') as HTMLHeadingElement
+logo_elem.addEventListener('click', open_home)
+logo_elem.classList.add('clickable')
+
+const yearElm = document.querySelector('#year') as HTMLSpanElement
+yearElm.innerText = new Date().getFullYear().toString()
+
+aboutApi
+	.getVersion()
+	.then((version) => {
+		console.log('eaa', version)
+		title_elem.innerText += ` ${version}`
+	})
+	.catch((e) => {
+		console.error('failed to get version', e)
+	})
diff --git a/webui/vite.config.ts b/webui/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
 			input: {
 				main: resolve(__dirname, 'index.html'),
 				electron: resolve(__dirname, 'electron.html'),
+				about: resolve(__dirname, 'about.html'),
 				// preload: resolve(__dirname, 'preload.ts'),
 			},
 		},

diff --git a/yarn.lock b/yarn.lock
@@ -3793,13 +3793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-about-window@npm:^1.15.2":
-  version: 1.15.2
-  resolution: "electron-about-window@npm:1.15.2"
-  checksum: 10c0/fdcc9123fb9418a278738b6dca82cc0df050d2bb69a2f6de3c2e336bbb66045310f33fa5d099ef8b4353f9abf2e9b11fad126ccd03527d176d0f831932ded8d0
-  languageName: node
-  linkType: hard
-
 "electron-builder@npm:^26.0.1":
   version: 26.0.1
   resolution: "electron-builder@npm:26.0.1"
@@ -7976,7 +7969,6 @@ __metadata:
     cross-env: "npm:^7.0.3"
     debounce-fn: "npm:^6.0.0"
     electron: "npm:34.0.2"
-    electron-about-window: "npm:^1.15.2"
     electron-builder: "npm:^26.0.1"
     electron-store: "npm:^10.0.1"
     exit-hook: "npm:^4.0.0"