Merge pull request #947 from imsyy/dev-lrc

Add taskbar lyrics display modes and enhance floating window features

Author: imsyy

electron/main/index.ts

@@ -15,7 +15,7 @@ import { trySendCustomProtocol } from "./utils/protocol";
 import { initSingleLock } from "./utils/single-lock";
 import loadWindow from "./windows/load-window";
 import mainWindow from "./windows/main-window";
-import taskbarLyricWindow from "./windows/taskbar-lyric-window";
+import taskbarLyricManager from "./utils/taskbar-lyric-manager";
 
 // 屏蔽报错
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
@@ -144,7 +144,7 @@ class MainProcess {
         // 清理媒体集成资源
         shutdownMedia();
         // 销毁任务栏歌词窗口
-        taskbarLyricWindow.destroy();
+        taskbarLyricManager.destroyAll();
         // 停止 MPV 服务
         const mpvService = MpvService.getInstance();
         try {

electron/main/ipc/ipc-taskbar.ts

@@ -4,19 +4,26 @@ import type EventEmitter from "node:events";
 import { useStore } from "../store";
 import { getMainTray } from "../tray";
 import mainWindow from "../windows/main-window";
-import taskbarLyricWindow from "../windows/taskbar-lyric-window";
+import taskbarLyricManager from "../utils/taskbar-lyric-manager";
 
 let cachedIsPlaying = false;
 
 const getTaskbarConfig = (): TaskbarConfig => {
   const store = useStore();
   return {
+    mode: store.get("taskbar.mode", "taskbar"),
     maxWidth: store.get("taskbar.maxWidth", 300),
     position: store.get("taskbar.position", "automatic"),
     autoShrink: store.get("taskbar.autoShrink", false),
     margin: store.get("taskbar.margin", 10),
     minWidth: store.get("taskbar.minWidth", 10),
     enabled: store.get("taskbar.enabled", false),
+    floatingAlign: store.get("taskbar.floatingAlign", "right"),
+    floatingAutoWidth: store.get("taskbar.floatingAutoWidth", true),
+    floatingWidth: store.get("taskbar.floatingWidth", 300),
+    floatingHeight: store.get("taskbar.floatingHeight", 48),
+    floatingAlwaysOnTop: store.get("taskbar.floatingAlwaysOnTop", false),
+
     showWhenPaused: store.get("taskbar.showWhenPaused", true),
     showCover: store.get("taskbar.showCover", true),
     themeMode: store.get("taskbar.themeMode", "auto"),
@@ -40,11 +47,11 @@ const updateWindowVisibility = (config: TaskbarConfig) => {
 
   const shouldBeVisible = config.enabled && (cachedIsPlaying || config.showWhenPaused);
 
-  taskbarLyricWindow.setVisibility(shouldBeVisible);
+  taskbarLyricManager.setVisibility(shouldBeVisible);
 };
 
 const updateWindowLayout = (animate: boolean = true) => {
-  taskbarLyricWindow.updateLayout(animate);
+  taskbarLyricManager.updateLayout(animate);
 };
 
 const initTaskbarIpc = () => {
@@ -53,10 +60,14 @@ const initTaskbarIpc = () => {
 
   const initialConfig = getTaskbarConfig();
   if (initialConfig.enabled) {
-    taskbarLyricWindow.create();
+    taskbarLyricManager.create(initialConfig.mode);
     updateWindowVisibility(initialConfig);
   }
 
+  ipcMain.on("taskbar:set-width", (_event, width: number) => {
+    taskbarLyricManager.setContentWidth(width);
+  });
+
   ipcMain.on(
     TASKBAR_IPC_CHANNELS.UPDATE_CONFIG,
     (_event, partialConfig: Partial<TaskbarConfig>) => {
@@ -68,30 +79,53 @@ const initTaskbarIpc = () => {
 
       const newConfig = getTaskbarConfig();
 
-      if (newConfig.enabled && !oldConfig.enabled) {
-        taskbarLyricWindow.create();
+      const modeChanged = newConfig.mode !== oldConfig.mode;
+
+      if (modeChanged) {
+        taskbarLyricManager.close(false);
+      }
+
+      if (newConfig.enabled && (!oldConfig.enabled || modeChanged)) {
+        taskbarLyricManager.create(newConfig.mode);
       }
 
       if (
         newConfig.enabled !== oldConfig.enabled ||
-        newConfig.showWhenPaused !== oldConfig.showWhenPaused
+        newConfig.showWhenPaused !== oldConfig.showWhenPaused ||
+        modeChanged
       ) {
         updateWindowVisibility(newConfig);
       }
 
       if (newConfig.enabled) {
-        if (
-          newConfig.maxWidth !== oldConfig.maxWidth ||
-          newConfig.position !== oldConfig.position ||
-          newConfig.autoShrink !== oldConfig.autoShrink ||
-          newConfig.margin !== oldConfig.margin ||
-          newConfig.minWidth !== oldConfig.minWidth
-        ) {
-          updateWindowLayout(true);
+        if (newConfig.mode === "taskbar") {
+          if (
+            newConfig.maxWidth !== oldConfig.maxWidth ||
+            newConfig.position !== oldConfig.position ||
+            newConfig.autoShrink !== oldConfig.autoShrink ||
+            newConfig.margin !== oldConfig.margin ||
+            newConfig.minWidth !== oldConfig.minWidth
+          ) {
+            updateWindowLayout(true);
+          }
+        } else {
+          const floatingWidthChanged =
+            newConfig.floatingAutoWidth === false && newConfig.floatingWidth !== oldConfig.floatingWidth;
+          if (
+            newConfig.maxWidth !== oldConfig.maxWidth ||
+            newConfig.floatingAlign !== oldConfig.floatingAlign ||
+            newConfig.floatingAutoWidth !== oldConfig.floatingAutoWidth ||
+            floatingWidthChanged ||
+            newConfig.floatingHeight !== oldConfig.floatingHeight ||
+            newConfig.floatingAlwaysOnTop !== oldConfig.floatingAlwaysOnTop ||
+            modeChanged
+          ) {
+            updateWindowLayout(false);
+          }
         }
       }
 
-      taskbarLyricWindow.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, {
+      taskbarLyricManager.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, {
         type: "config-update",
         data: partialConfig,
       } as SyncStatePayload);
@@ -111,11 +145,11 @@ const initTaskbarIpc = () => {
       updateWindowVisibility(getTaskbarConfig());
     }
 
-    taskbarLyricWindow.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, payload);
+    taskbarLyricManager.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, payload);
   });
 
   ipcMain.on(TASKBAR_IPC_CHANNELS.SYNC_TICK, (_event, payload) => {
-    taskbarLyricWindow.send(TASKBAR_IPC_CHANNELS.SYNC_TICK, payload);
+    taskbarLyricManager.send(TASKBAR_IPC_CHANNELS.SYNC_TICK, payload);
   });
 
   ipcMain.on(TASKBAR_IPC_CHANNELS.REQUEST_DATA, () => {
@@ -124,27 +158,28 @@ const initTaskbarIpc = () => {
       mainWin.webContents.send(TASKBAR_IPC_CHANNELS.REQUEST_DATA);
     }
 
-    taskbarLyricWindow.updateLayout(false);
+    taskbarLyricManager.updateLayout(false);
 
     const isDark = nativeTheme.shouldUseDarkColors;
-    taskbarLyricWindow.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, {
+    taskbarLyricManager.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, {
       type: "system-theme",
       data: { isDark },
     } as SyncStatePayload);
   });
 
   ipcMain.on("taskbar:fade-done", () => {
-    taskbarLyricWindow.handleFadeDone();
+    taskbarLyricManager.handleFadeDone();
   });
 
   // 把事件发射到 app 里不太好，但是我觉得也没有必要为了这一个事件创建一个事件总线
   // TODO: 如果有了事件总线，通过那个事件总线发射这个事件
   (app as EventEmitter).on("explorer-restarted", () => {
     const currentEnabled = store.get("taskbar.enabled");
-    if (currentEnabled) {
-      taskbarLyricWindow.close(false);
+    const currentMode = store.get("taskbar.mode", "taskbar");
+    if (currentEnabled && currentMode === "taskbar") {
+      taskbarLyricManager.close(false);
       setTimeout(() => {
-        taskbarLyricWindow.create();
+        taskbarLyricManager.create("taskbar");
       }, 500);
     }
   });

electron/main/store/index.ts

@@ -43,6 +43,8 @@ export interface StoreType {
   taskbar: {
     /** 是否启用 */
     enabled: boolean;
+    /** 模式 */
+    mode?: "taskbar" | "floating";
     /** 最大宽度 */
     maxWidth?: number;
     /** 显示封面 */
@@ -57,6 +59,13 @@ export interface StoreType {
     margin?: number;
     /** 最小宽度 (百分比) */
     minWidth?: number;
+    floatingX?: number;
+    floatingY?: number;
+    floatingAlign?: "left" | "right";
+    floatingAutoWidth?: boolean;
+    floatingWidth?: number;
+    floatingHeight?: number;
+    floatingAlwaysOnTop?: boolean;
   };
   /** 代理 */
   proxy: string;
@@ -112,13 +121,21 @@ export const useStore = () => {
       },
       taskbar: {
         enabled: false,
+        mode: "taskbar",
         maxWidth: 30,
         showCover: true,
         position: "automatic",
         showWhenPaused: true,
         autoShrink: false,
         margin: 10,
         minWidth: 10,
+        floatingX: screenData.workArea.x + screenData.workArea.width / 2 - 150,
+        floatingY: screenData.workArea.y + screenData.workArea.height - 120,
+        floatingAlign: "right",
+        floatingAutoWidth: true,
+        floatingWidth: 300,
+        floatingHeight: 48,
+        floatingAlwaysOnTop: false,
       },
       macos: {
         statusBarLyric: {

electron/main/utils/taskbar-lyric-manager.ts

@@ -0,0 +1,64 @@
+import floatingTaskbarLyricWindow from "../windows/floating-taskbar-lyric-window";
+import taskbarLyricWindow from "../windows/taskbar-lyric-window";
+
+export type TaskbarLyricMode = "taskbar" | "floating";
+
+class TaskbarLyricManager {
+  private mode: TaskbarLyricMode = "taskbar";
+
+  getMode() {
+    return this.mode;
+  }
+
+  private getActive() {
+    return this.mode === "floating" ? floatingTaskbarLyricWindow : taskbarLyricWindow;
+  }
+
+  create(mode: TaskbarLyricMode) {
+    if (mode !== this.mode) {
+      this.close(false);
+      this.mode = mode;
+    }
+    return this.getActive().create();
+  }
+
+  close(animate: boolean = true) {
+    if (this.mode === "floating") {
+      floatingTaskbarLyricWindow.close();
+      return;
+    }
+    taskbarLyricWindow.close(animate);
+  }
+
+  setVisibility(shouldShow: boolean) {
+    this.getActive().setVisibility(shouldShow);
+  }
+
+  updateLayout(animate: boolean = false) {
+    if (this.mode === "floating") {
+      floatingTaskbarLyricWindow.updateLayout(animate);
+      return;
+    }
+    taskbarLyricWindow.updateLayout(animate);
+  }
+
+  setContentWidth(width: number) {
+    this.getActive().setContentWidth(width);
+  }
+
+  handleFadeDone() {
+    this.getActive().handleFadeDone();
+  }
+
+  send(channel: string, ...args: unknown[]) {
+    this.getActive().send(channel, ...args);
+  }
+
+  destroyAll() {
+    floatingTaskbarLyricWindow.close();
+    floatingTaskbarLyricWindow.destroy();
+    taskbarLyricWindow.destroy();
+  }
+}
+
+export default new TaskbarLyricManager();