新增设置-桌面歌词设置-鼠标移入歌词区域时降低歌词透明度（#883）

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
 - 新增设置-以全屏模式启动设置
+- 新增设置-桌面歌词设置-鼠标移入歌词区域时降低歌词透明度，默认关闭，注：此功能存在平台兼容性问题，若鼠标移入移出的间隔过短可能会导致无法恢复到正常透明度，这时尝试再移入移出即可恢复（#883）
 
 ### 优化
 

src/common/defaultSetting.js

@@ -2,7 +2,7 @@ const path = require('path')
 const os = require('os')
 
 const defaultSetting = {
-  version: '1.0.58',
+  version: '1.0.59',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -41,6 +41,7 @@ const defaultSetting = {
     theme: 0,
     isLockScreen: true,
     isDelayScroll: true,
+    isHoverHide: false,
     style: {
       font: '',
       fontSize: 120,

src/lang/en-us.json

@@ -269,6 +269,7 @@
   "setting__desktop_lyric_enable": "Display lyrics",
   "setting__desktop_lyric_font": "Lyric font",
   "setting__desktop_lyric_font_default": "Default",
+  "setting__desktop_lyric_hover_hide": "Reduce the transparency of lyrics when the mouse moves into the lyrics area (this feature has platform compatibility issues)",
   "setting__desktop_lyric_lock": "Lock lyrics",
   "setting__desktop_lyric_lock_screen": "It is not allowed to drag the lyrics window out of the main screen",
   "setting__download": "Download",

src/lang/zh-cn.json

@@ -269,6 +269,7 @@
   "setting__desktop_lyric_enable": "显示歌词",
   "setting__desktop_lyric_font": "歌词字体",
   "setting__desktop_lyric_font_default": "默认",
+  "setting__desktop_lyric_hover_hide": "鼠标移入歌词区域时降低歌词透明度（此功能存在平台兼容性问题）",
   "setting__desktop_lyric_lock": "锁定歌词",
   "setting__desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
   "setting__download": "下载设置",

src/lang/zh-tw.json

@@ -269,6 +269,7 @@
   "setting__desktop_lyric_enable": "顯示歌詞",
   "setting__desktop_lyric_font": "歌詞字體",
   "setting__desktop_lyric_font_default": "默認",
+  "setting__desktop_lyric_hover_hide": "鼠標移入歌詞區域時降低歌詞透明度（此功能存在平台兼容性問題）",
   "setting__desktop_lyric_lock": "鎖定歌詞",
   "setting__desktop_lyric_lock_screen": "不允許歌詞窗口拖出主屏幕之外",
   "setting__download": "下載設置",

src/main/modules/winLyric/event.js

@@ -47,9 +47,9 @@ const setLrcConfig = () => {
     if (isLock != desktopLyric.isLock) {
       isLock = desktopLyric.isLock
       if (desktopLyric.isLock) {
-        global.modules.lyricWindow.setIgnoreMouseEvents(true, { forward: false })
+        global.modules.lyricWindow.setIgnoreMouseEvents(true, { forward: true })
       } else {
-        global.modules.lyricWindow.setIgnoreMouseEvents(false)
+        global.modules.lyricWindow.setIgnoreMouseEvents(false, { forward: true })
       }
     }
     if (isAlwaysOnTop != desktopLyric.isAlwaysOnTop) {

src/main/modules/winLyric/index.js

@@ -64,7 +64,7 @@ const winEvent = lyricWindow => {
   lyricWindow.once('ready-to-show', () => {
     lyricWindow.show()
     if (global.appSetting.desktopLyric.isLock) {
-      global.modules.lyricWindow.setIgnoreMouseEvents(true, { forward: false })
+      global.modules.lyricWindow.setIgnoreMouseEvents(true, { forward: true })
     }
     // linux下每次重开时貌似要重新设置置顶
     if (isLinux && global.appSetting.desktopLyric.isAlwaysOnTop) {

src/renderer-lyric/App.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-#container(:class="[theme, lrcConfig.isLock ? 'lock' : null]")
-  #main
+#container(:class="[theme, { lock: lrcConfig.isLock }, { hide: isHoverHide && isMouseEnter }]")
+  #main(@mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave")
     transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
       .control-bar(v-show="!lrcConfig.isLock")
         core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
@@ -21,6 +21,51 @@ import { rendererOn, rendererInvoke, rendererSend, NAMES } from '../common/ipc'
 
 window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
 
+let mouseCheckTools = {
+  x: 0,
+  y: 0,
+  preX: 0,
+  preY: 0,
+  timeout: null,
+  handleCheck(setShow) {
+    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) return setShow()
+      } else {
+        if (this.x - xDiff * 1.25 < 8) return setShow()
+      }
+    }
+    if (yDiff > 8) {
+      if (this.y > this.preY) {
+        if (this.y + yDiff * 1.25 > window.innerHeight - 16) return setShow()
+      } else {
+        if (this.y - yDiff * 1.25 < 8) return setShow()
+      }
+    }
+
+    // setShow(false)
+  },
+  handleMove(x, y, setShow) {
+    // 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) {
+    this.stopTimeout()
+    this.timeout = setTimeout(this.handleCheck.bind(this), 200, setShow)
+  },
+  stopTimeout() {
+    if (!this.timeout) return
+    clearTimeout(this.timeout)
+    this.timeout = null
+  },
+}
+
 export default {
   data() {
     return {
@@ -39,6 +84,7 @@ export default {
         x: -1,
         y: -1,
         theme: 0,
+        isHoverHide: false,
         style: {
           font: '',
           fontSize: 125,
@@ -91,6 +137,7 @@ export default {
           className: 'blue2',
         },
       ],
+      isMouseEnter: false,
     }
   },
   computed: {
@@ -98,6 +145,9 @@ export default {
       let theme = this.themeList.find(t => t.id == this.lrcConfig.theme) || this.themeList[0]
       return theme.className
     },
+    isHoverHide() {
+      return this.lrcConfig.isLock && this.lrcConfig.isHoverHide
+    },
   },
   created() {
     rendererOn(NAMES.winLyric.set_lyric_config, (event, config) => this.handleUpdateConfig(config))
@@ -139,6 +189,13 @@ export default {
     },
     handleMouseMove(event) {
       this.handleMove(event.clientX, event.clientY)
+
+      if (this.isHoverHide) {
+        this.handleMouseEnter()
+        mouseCheckTools.handleMove(event.clientX, event.clientY, () => {
+          this.handleMouseLeave()
+        })
+      }
     },
     handleTouchMove(event) {
       if (event.changedTouches.length) {
@@ -147,7 +204,7 @@ export default {
       }
     },
     handleMove(clientX, clientY) {
-      if (!this.resize.origin) return
+      if (!this.resize.origin || this.lrcConfig.isLock) return
       // if (!event.target.classList.contains('resize-' + this.resize.origin)) return
       // console.log(event.target)
       let bounds = {
@@ -211,6 +268,17 @@ export default {
     // handleMouseOver() {
     //   // this.handleMouseUp()
     // },
+    handleMouseEnter() {
+      // console.log('enter - >')
+      if (!this.isHoverHide || this.isMouseEnter) return
+      this.isMouseEnter = true
+    },
+    handleMouseLeave() {
+      // console.log('leave - <')
+      if (!this.isHoverHide) return
+      this.isMouseEnter = false
+      mouseCheckTools.stopTimeout()
+    },
   },
 }
 </script>
@@ -240,11 +308,16 @@ body {
   padding: 8px;
   box-sizing: border-box;
   height: 100%;
+  transition: opacity .3s ease;
+  opacity: 1;
   &.lock {
     #main {
       background-color: transparent;
     }
   }
+  &.hide {
+    opacity: .05;
+  }
 }
 
 .resize-left {

src/renderer/views/setting/components/SettingDesktopLyric.vue

@@ -13,6 +13,8 @@ dd
     base-checkbox(id="setting_desktop_lyric_alwaysOnTopLoop" v-model="currentStting.desktopLyric.isAlwaysOnTopLoop" :label="$t('setting__desktop_lyric_always_on_top_loop')")
   .gap-top
     base-checkbox(id="setting_desktop_lyric_lockScreen" v-model="currentStting.desktopLyric.isLockScreen" :label="$t('setting__desktop_lyric_lock_screen')")
+  .gap-top
+    base-checkbox(id="setting_desktop_lyric_hoverHide" v-model="currentStting.desktopLyric.isHoverHide" :label="$t('setting__desktop_lyric_hover_hide')")
 dd
   h3#desktop_lyric_font {{$t('setting__desktop_lyric_font')}}
   div

src/renderer/views/setting/setting.js

@@ -36,6 +36,7 @@ export const currentStting = ref({
     theme: '',
     isLockScreen: true,
     isDelayScroll: true,
+    isHoverHide: false,
     style: {
       font: '',
       fontSize: 125,