feat: tray

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "fideo",
+  "name": "fideo-beta",
   "version": "1.0.5",
   "description": "this is a easy live record app",
   "main": "./out/main/index.js",
@@ -84,5 +84,12 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
+  },
+  "build": {
+    "mac": {
+      "extendInfo": {
+        "LSBackgroundOnly": 1
+      }
+    }
   }
 }

src/main/index.ts

@@ -1,4 +1,14 @@
-import { app, shell, BrowserWindow, ipcMain, dialog, Notification } from 'electron'
+import {
+  app,
+  shell,
+  BrowserWindow,
+  ipcMain,
+  dialog,
+  Notification,
+  Tray,
+  Menu,
+  nativeImage
+} from 'electron'
 import { join, resolve } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 
@@ -106,9 +116,11 @@ const stopDownloadDepTimerWhenAllDownloadDepEnd = () => {
 }
 
 let win: BrowserWindow | null
+let tray: Tray | null
 async function createWindow() {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
+    skipTaskbar: true,
     width: 900,
     height: 670,
     titleBarStyle: 'hidden',
@@ -121,6 +133,7 @@ async function createWindow() {
       devTools: is.dev
     }
   })
+
   win = mainWindow
 
   mainWindow.on('ready-to-show', () => {
@@ -134,7 +147,7 @@ async function createWindow() {
 
   mainWindow.on('close', (e) => {
     e.preventDefault()
-    mainWindow.webContents.send(USER_CLOSE_WINDOW)
+    mainWindow.hide()
   })
 
   // HMR for renderer base on electron-vite cli.
@@ -147,6 +160,32 @@ async function createWindow() {
   await handleMakeSureDependenciesExist()
 }
 
+async function createTray() {
+  is.dev && app.dock.hide()
+  const isChinese = ['zh', 'zh-CN', 'zh-TW', 'zh-HK'].includes(app.getLocale())
+  const icon = nativeImage.createFromPath(join(process.cwd(), './build/iconTemplate.png'))
+  tray = new Tray(icon)
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: isChinese ? '打开Fideo' : 'Open Fideo',
+      click: () => {
+        win?.show()
+      }
+    },
+    {
+      label: isChinese ? '退出' : 'Quit',
+      click: () => {
+        if (!isAllFfmpegProcessEnd()) {
+          win?.show()
+        }
+        win?.webContents.send(USER_CLOSE_WINDOW)
+      }
+    }
+  ])
+  tray.setToolTip('Fideo')
+  tray.setContextMenu(contextMenu)
+}
+
 function showNotification(title: string, body: string) {
   const notification = new Notification({
     title,
@@ -308,6 +347,7 @@ app.whenReady().then(async () => {
   })
 
   await createWindow()
+  await createTray()
 
   setTimeout(() => {
     checkUpdate()
@@ -326,9 +366,9 @@ app.whenReady().then(async () => {
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin' || is.dev) {
-    app.quit()
-  }
+  // if (process.platform !== 'darwin' || is.dev) {
+  app.quit()
+  // }
 })
 
 // In this file you can include the rest of your app"s specific main process

src/renderer/src/components/StreamConfigList/StreamConfigList.tsx

@@ -197,7 +197,7 @@ export default function StreamConfigList() {
   return (
     <>
       {
-        <div className="stream-config-list flex flex-col gap-[12px] p-[24px] overflow-y-auto h-[calc(100vh-80px)]">
+        <div className="show-scrollbar flex flex-col gap-[12px] p-[24px] overflow-y-auto h-[calc(100vh-80px)]">
           {streamConfigList.map((streamConfig) => (
             <div
               key={streamConfig.title}