修复桌面歌词的 鼠标移入歌词区域时提高透明度 设置不稳定的问题 (#2679)

Co-authored-by: lyswhut <lyswhut@qq.com>

publish/changeLog.md

@@ -1,12 +1,6 @@
 我们很高兴地宣布新项目 Any Listen 的桌面版已发布，目前已支持列表跟随本地文件自动更新、加载并播放WebDAV上的歌曲等功能，更多功能仍在积极开发中，桌面版与Web版将同步更新。
 对于有播放本地音乐或播放服务器上音乐需求的人可以试试，若遇到任何问题可以发 issue 反馈。
 
-### 优化
-
-- 优化托盘图标行为：在非 Windows 系统中，点击托盘图标时不再显示主窗口
-
 ### 修复
 
-- 修复音量条在调整音量时实际音量与显示的数值不一致的问题（#2606）
+- 修复桌面歌词的 鼠标移入歌词区域时提高透明度 设置不稳定的问题（#2679, @Little100）
-- 修复某些情况下搜索框的搜索按钮布局错位的问题（#2622）
-- 修复 wyy 部分歌曲无法被搜索的问题（#2666, @ikun0014）

src/common/ipcNames.ts

@@ -166,6 +166,7 @@ const modules = {
     key_down: 'key_down',
     request_main_window_channel: 'request_main_window_channel',
     provide_main_window_channel: 'provide_main_window_channel',
+    mouse_enter_leave: 'mouse_enter_leave',
   },
   hotKey: {
     enable: 'enable',

src/main/modules/winLyric/config.ts

@@ -1,7 +1,8 @@
 import { isLinux } from '@common/utils'
 import { closeWindow, createWindow, getBounds, isExistWindow, alwaysOnTopTools, setBounds, setIgnoreMouseEvents, setSkipTaskbar } from './main'
-import { sendConfigChange } from './rendererEvent'
+import { sendConfigChange, sendMouseLeave } from './rendererEvent'
 import { buildLyricConfig, getLyricWindowBounds, initWindowSize, watchConfigKeys } from './utils'
+import { mouseCheckTools } from './mouseCheckTools'
 
 let isLock: boolean
 let isEnable: boolean
@@ -21,8 +22,10 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
       isLock = global.lx.appSetting['desktopLyric.isLock']
       if (global.lx.appSetting['desktopLyric.isLock']) {
         setIgnoreMouseEvents(true, { forward: !isLinux && global.lx.appSetting['desktopLyric.isHoverHide'] })
+        mouseCheckTools.runCheck(sendMouseLeave)
       } else {
         setIgnoreMouseEvents(false, { forward: !isLinux && global.lx.appSetting['desktopLyric.isHoverHide'] })
+        mouseCheckTools.cacnelCheck()
       }
     }
     if (keys.includes('desktopLyric.isHoverHide') && isHoverHide != global.lx.appSetting['desktopLyric.isHoverHide']) {
@@ -30,6 +33,7 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
       if (!isLinux) {
         setIgnoreMouseEvents(global.lx.appSetting['desktopLyric.isLock'], { forward: global.lx.appSetting['desktopLyric.isHoverHide'] })
       }
+      mouseCheckTools.runCheck(sendMouseLeave)
     }
     if (keys.includes('desktopLyric.isAlwaysOnTop') && isAlwaysOnTop != global.lx.appSetting['desktopLyric.isAlwaysOnTop']) {
       isAlwaysOnTop = global.lx.appSetting['desktopLyric.isAlwaysOnTop']
@@ -54,7 +58,7 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
     if (keys.includes('desktopLyric.isLockScreen') && isLockScreen != global.lx.appSetting['desktopLyric.isLockScreen']) {
       isLockScreen = global.lx.appSetting['desktopLyric.isLockScreen']
       if (global.lx.appSetting['desktopLyric.isLockScreen']) {
-        setBounds(getLyricWindowBounds(getBounds(), {
+        setBounds(getLyricWindowBounds(getBounds()!, {
           x: 0,
           y: 0,
           w: global.lx.appSetting['desktopLyric.width'],
@@ -77,6 +81,7 @@ export const setLrcConfig = (keys: Array<keyof LX.AppSetting>, setting: Partial<
       createWindow()
     } else {
       alwaysOnTopTools.clearLoop()
+      mouseCheckTools.cacnelCheck()
       closeWindow()
     }
   }

src/main/modules/winLyric/main.ts

@@ -172,8 +172,8 @@ export const sendEvent = <T = any>(name: string, params?: T) => {
   mainSend(browserWindow, name, params)
 }
 
-export const getBounds = (): Electron.Rectangle => {
+export const getBounds = (): Electron.Rectangle | null => {
-  if (!browserWindow) throw new Error('window is not available')
+  if (!browserWindow) return null
   return browserWindow.getBounds()
 }
 

src/main/modules/winLyric/mouseCheckTools.ts

@@ -0,0 +1,57 @@
+import { screen } from 'electron'
+import { getBounds } from './main'
+import { isLinux } from '@common/utils'
+
+
+export const mouseCheckTools = {
+  timer: null as NodeJS.Timeout | null,
+  isMouseInWindow: false,
+  sendMouseLeave: null as (() => void) | null,
+
+  onInBoundsChange(isInBounds: boolean) {
+    if (isInBounds) return
+    this.stop()
+    this.sendMouseLeave?.()
+  },
+
+  checkMousePosition() {
+    const bounds = getBounds()
+    if (!bounds) return
+    const point = screen.getCursorScreenPoint()
+    const isInBounds = point.x >= bounds.x && point.x <= bounds.x + bounds.width &&
+                       point.y >= bounds.y && point.y <= bounds.y + bounds.height
+    if (isInBounds !== this.isMouseInWindow) {
+      this.isMouseInWindow = isInBounds
+      this.onInBoundsChange(isInBounds)
+    }
+  },
+
+  start() {
+    this.timer = setTimeout(() => {
+      this.timer = null
+      this.checkMousePosition()
+      this.start()
+    }, 500)
+  },
+
+  stop() {
+    if (!this.timer) return
+    clearTimeout(this.timer)
+    this.timer = null
+    // console.log('stop check')
+  },
+
+  setMouseInWindow(isInWindow: boolean) {
+    this.isMouseInWindow = isInWindow
+  },
+  runCheck(sendMouseLeave: () => void) {
+    if (isLinux || !global.lx.appSetting['desktopLyric.isLock'] || !global.lx.appSetting['desktopLyric.isHoverHide'] || !this.isMouseInWindow) return
+    // console.log('run check')
+    this.sendMouseLeave = sendMouseLeave
+    this.stop()
+    this.start()
+  },
+  cacnelCheck() {
+    this.stop()
+  },
+}

src/main/modules/winLyric/rendererEvent.ts

@@ -5,6 +5,7 @@ import { buildLyricConfig, getLyricWindowBounds } from './utils'
 import { sendNewDesktopLyricClient } from '@main/modules/winMain'
 import { getBounds, getMainFrame, sendEvent, setBounds, setResizeable } from './main'
 import { MessageChannelMain } from 'electron'
+import { mouseCheckTools } from './mouseCheckTools'
 
 
 export default () => {
@@ -26,7 +27,7 @@ export default () => {
   })
 
   mainOn<LX.DesktopLyric.NewBounds>(WIN_LYRIC_RENDERER_EVENT_NAME.set_win_bounds, ({ params: options }) => {
-    setBounds(getLyricWindowBounds(getBounds(), options))
+    setBounds(getLyricWindowBounds(getBounds()!, options))
   })
 
   mainOn<boolean>(WIN_LYRIC_RENDERER_EVENT_NAME.set_win_resizeable, ({ params: resizable }) => {
@@ -45,6 +46,16 @@ export default () => {
     // without going through the main process!
     console.log('request_main_window_channel')
   })
+
+  mainOn<boolean>(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, ({ params: isEnter }) => {
+    if (isEnter) {
+      mouseCheckTools.setMouseInWindow(true)
+      mouseCheckTools.runCheck(sendMouseLeave)
+    } else {
+      mouseCheckTools.setMouseInWindow(false)
+      mouseCheckTools.cacnelCheck()
+    }
+  })
 }
 
 export const sendConfigChange = (setting: Partial<LX.DesktopLyric.Config>) => {
@@ -55,3 +66,6 @@ export const sendMainWindowInitedEvent = () => {
   sendEvent(WIN_LYRIC_RENDERER_EVENT_NAME.main_window_inited)
 }
 
+export const sendMouseLeave = () => {
+  sendEvent(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, false)
+}

src/renderer-lyric/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="container" :class="[{ lock: setting['desktopLyric.isLock'] }, { hide: isHide || (isHoverHide && isMouseEnter) }]">
+  <div id="container" :class="[{ lock: setting['desktopLyric.isLock'] }, { hide: isHide || isHoverHide }]">
-    <div id="main" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousemove="handleMouseMoveMain">
+    <div id="main">
       <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut">
         <div v-show="!setting['desktopLyric.isLock']" class="control-bar">
           <layout-control-bar />
@@ -41,7 +41,7 @@ import usePauseHide from '@lyric/useApp/usePauseHide'
 const isShowResize = window.os != 'windows'
 useCommon()
 const { handleMouseDown, handleTouchDown } = useWindowSize()
-const { handleMouseMoveMain, isHoverHide, isMouseEnter } = useHoverHide()
+const isHoverHide = useHoverHide()
 useLyric()
 useTheme()
 const isHide = usePauseHide()
@@ -87,7 +87,8 @@ body {
   }
   &.hide {
     opacity: .05;
-    &:hover {
+
+    &:not(.lock):hover {
       opacity: 1;
     }
   }

src/renderer-lyric/useApp/useHoverHide.ts

@@ -1,98 +1,41 @@
-import { computed, ref } from '@common/utils/vueTools'
+import { computed, ref, onBeforeUnmount } from '@common/utils/vueTools'
 import { setting } from '@lyric/store/state'
-
+import { sendMouseEnterLeave, onMouseEnterLeave } from '@lyric/utils/ipc'
-let mouseCheckTools: {
-  x: number
-  y: number
-  preX: number
-  preY: number
-  timeout: NodeJS.Timeout | null
-  handleCheck: (setShow: () => void) => void
-  handleMove: (x: number, y: number, setShow: () => void) => void
-  startTimeout: (setShow: () => void) => void
-  stopTimeout: () => void
-} = {
-  x: 0,
-  y: 0,
-  preX: 0,
-  preY: 0,
-  timeout: null,
-  handleCheck(setShow: () => void) {
-    let xDiff = Math.abs(this.x - this.preX)
-    let yDiff = Math.abs(this.y - this.preY)
-    if (xDiff > 8) {
-      if (this.x > this.preX) {
-        if (this.x + xDiff * 1.25 > window.innerWidth - 16) {
-          setShow()
-          return
-        }
-      } else {
-        if (this.x - xDiff * 1.25 < 8) {
-          setShow()
-          return
-        }
-      }
-    }
-    if (yDiff > 8) {
-      if (this.y > this.preY) {
-        if (this.y + yDiff * 1.25 > window.innerHeight - 16) {
-          setShow()
-        }
-      } else {
-        if (this.y - yDiff * 1.25 < 8) {
-          setShow()
-        }
-      }
-    }
-
-    // setShow(false)
-  },
-  handleMove(x: number, y: number, setShow: () => void) {
-    // console.log(x, y, this.x, this.y)
-    this.preX = this.x
-    this.preY = this.y
-    this.x = x
-    this.y = y
-    this.startTimeout(setShow)
-  },
-  startTimeout(setShow: () => void) {
-    this.stopTimeout()
-    this.timeout = setTimeout(this.handleCheck.bind(this), 200, setShow)
-  },
-  stopTimeout() {
-    if (!this.timeout) return
-    clearTimeout(this.timeout)
-    this.timeout = null
-  },
-}
 
 export default () => {
   const isMouseEnter = ref(false)
 
   const isHoverHide = computed(() => {
-    return setting['desktopLyric.isLock'] && setting['desktopLyric.isHoverHide']
+    return setting['desktopLyric.isHoverHide'] && isMouseEnter.value
   })
 
-  const handleMouseMoveMain = (event: MouseEvent) => {
+  const handleMouseMove = () => {
-    if (!isHoverHide.value) return
     handleMouseEnter()
-    mouseCheckTools.handleMove(event.clientX, event.clientY, () => {
-      handleMouseLeave()
-    })
   }
   const handleMouseEnter = () => {
-    if (!isHoverHide.value || isMouseEnter.value) return
+    if (isMouseEnter.value) return
     isMouseEnter.value = true
+    sendMouseEnterLeave(true)
   }
   const handleMouseLeave = () => {
-    if (!isHoverHide.value) return
+    if (!isMouseEnter.value) return
     isMouseEnter.value = false
-    mouseCheckTools.stopTimeout()
+    sendMouseEnterLeave(false)
   }
 
-  return {
+  const removeMouseEnterLeaveListener = onMouseEnterLeave(({ params: isEnter }) => {
-    isMouseEnter,
+    isMouseEnter.value = isEnter
-    isHoverHide,
+  })
-    handleMouseMoveMain,
+  document.body.addEventListener('mousemove', handleMouseMove)
-  }
+  document.body.addEventListener('mouseenter', handleMouseEnter)
+  document.body.addEventListener('mouseleave', handleMouseLeave)
+
+  onBeforeUnmount(() => {
+    removeMouseEnterLeaveListener()
+    document.body.removeEventListener('mousemove', handleMouseMove)
+    document.body.removeEventListener('mouseenter', handleMouseEnter)
+    document.body.removeEventListener('mouseleave', handleMouseLeave)
+  })
+
+  return isHoverHide
 }

src/renderer-lyric/utils/ipc.ts

@@ -42,6 +42,16 @@ export const onMainWindowInited = (listener: LX.IpcRendererEventListener): Remov
   }
 }
 
+export const sendMouseEnterLeave = (isEnter: boolean) => {
+  rendererSend(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, isEnter)
+}
+export const onMouseEnterLeave = (listener: LX.IpcRendererEventListenerParams<boolean>): RemoveListener => {
+  rendererOn<boolean>(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, listener)
+  return () => {
+    rendererOff(WIN_LYRIC_RENDERER_EVENT_NAME.mouse_enter_leave, listener)
+  }
+}
+
 /**
  * On Theme Change
  * @param listener LX.IpcRendererEventListenerParams<shouldUseDarkColors: boolean>