新增「设置 → 桌面歌词设置 → 暂停时降低歌词透明度」设置，默认启用（#2294）

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
-- 新增 快进/快退5秒 自定义快捷键设置（#2289）
+- 新增「快进/快退5秒」自定义快捷键设置（#2289）
+- 新增「设置 → 桌面歌词设置 → 暂停时降低歌词透明度」设置，默认启用（#2294）
 
 ### 修复
 

src/common/defaultSetting.ts

@@ -76,6 +76,7 @@ const defaultSetting: LX.AppSetting = {
   'desktopLyric.isShowTaskbar': false,
   'desktopLyric.audioVisualization': false,
   'desktopLyric.fullscreenHide': true,
+  'desktopLyric.pauseHide': true,
   'desktopLyric.width': 450,
   'desktopLyric.height': 300,
   'desktopLyric.x': null,

src/common/types/app_setting.d.ts

@@ -340,6 +340,11 @@ declare global {
        */
       'desktopLyric.fullscreenHide': boolean
 
+      /**
+       * 是否在暂停时隐藏歌词
+       */
+      'desktopLyric.pauseHide': boolean
+
       /**
        * 桌面歌词窗口宽度
        */

src/common/types/desktop_lyric.d.ts

@@ -6,6 +6,7 @@ declare namespace LX {
       'desktopLyric.isAlwaysOnTop': LX.AppSetting['desktopLyric.isAlwaysOnTop']
       'desktopLyric.isAlwaysOnTopLoop': LX.AppSetting['desktopLyric.isAlwaysOnTopLoop']
       'desktopLyric.isShowTaskbar': LX.AppSetting['desktopLyric.isShowTaskbar']
+      'desktopLyric.pauseHide': LX.AppSetting['desktopLyric.pauseHide']
       'desktopLyric.audioVisualization': LX.AppSetting['desktopLyric.audioVisualization']
       'desktopLyric.width': LX.AppSetting['desktopLyric.width']
       'desktopLyric.height': LX.AppSetting['desktopLyric.height']

src/lang/en-us.json

@@ -388,6 +388,7 @@
   "setting__desktop_lyric_line_gap_dec": "Decrease spacing",
   "setting__desktop_lyric_lock": "Lock lyric window",
   "setting__desktop_lyric_lock_screen": "Do not allow lyric window to be dragged out of main screen",
+  "setting__desktop_lyric_pause_hide_hide": "Decrease lyric window transparency when pause",
   "setting__desktop_lyric_played_color": "Played",
   "setting__desktop_lyric_reset": "Reset",
   "setting__desktop_lyric_reset_window": "Reset Desktop Lyric Options",

src/lang/zh-cn.json

@@ -388,6 +388,7 @@
   "setting__desktop_lyric_line_gap_dec": "减小间距",
   "setting__desktop_lyric_lock": "锁定歌词",
   "setting__desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
+  "setting__desktop_lyric_pause_hide_hide": "暂停时降低歌词透明度",
   "setting__desktop_lyric_played_color": "已播放颜色",
   "setting__desktop_lyric_reset": "重置",
   "setting__desktop_lyric_reset_window": "重置窗口设置",

src/lang/zh-tw.json

@@ -388,6 +388,7 @@
   "setting__desktop_lyric_line_gap_dec": "減小間距",
   "setting__desktop_lyric_lock": "鎖定歌詞視窗",
   "setting__desktop_lyric_lock_screen": "不允許歌詞視窗拖出主螢幕之外",
+  "setting__desktop_lyric_pause_hide_hide": "暫停時降低歌詞透明度",
   "setting__desktop_lyric_played_color": "已播放顏色",
   "setting__desktop_lyric_reset": "重設",
   "setting__desktop_lyric_reset_window": "重設視窗設定",

src/main/modules/winLyric/utils.ts

@@ -53,6 +53,7 @@ export const watchConfigKeys = [
   'desktopLyric.isAlwaysOnTop',
   'desktopLyric.isAlwaysOnTopLoop',
   'desktopLyric.isShowTaskbar',
+  'desktopLyric.pauseHide',
   'desktopLyric.audioVisualization',
   'desktopLyric.width',
   'desktopLyric.height',
@@ -82,7 +83,7 @@ export const watchConfigKeys = [
   'player.isShowLyricRoma',
   'player.isPlayLxlrc',
   'player.playbackRate',
-] as const
+] satisfies Array<keyof LX.AppSetting>
 
 export const buildLyricConfig = (appSetting: Partial<LX.AppSetting>): Partial<LX.DesktopLyric.Config> => {
   const setting: Partial<LX.DesktopLyric.Config> = {}

src/renderer-lyric/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="container" :class="[{ lock: setting['desktopLyric.isLock'] }, { hide: isHoverHide && isMouseEnter }]">
+  <div id="container" :class="[{ lock: setting['desktopLyric.isLock'] }, { hide: isHide || (isHoverHide && isMouseEnter) }]">
     <div id="main" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousemove="handleMouseMoveMain">
       <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut">
         <div v-show="!setting['desktopLyric.isLock']" class="control-bar">
@@ -36,6 +36,7 @@ import useCommon from '@lyric/useApp/useCommon'
 import useLyric from '@lyric/useApp/useLyric'
 import useTheme from '@lyric/useApp/useTheme'
 import { init as initLyricPlayer } from '@lyric/core/lyric'
+import usePauseHide from '@lyric/useApp/usePauseHide'
 
 const isShowResize = window.os != 'windows'
 useCommon()
@@ -43,6 +44,7 @@ const { handleMouseDown, handleTouchDown } = useWindowSize()
 const { handleMouseMoveMain, isHoverHide, isMouseEnter } = useHoverHide()
 useLyric()
 useTheme()
+const isHide = usePauseHide()
 
 
 onMounted(() => {

src/renderer-lyric/store/state.ts

@@ -6,6 +6,7 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
   'desktopLyric.isAlwaysOnTop': false,
   'desktopLyric.isAlwaysOnTopLoop': false,
   'desktopLyric.isShowTaskbar': true,
+  'desktopLyric.pauseHide': false,
   'desktopLyric.audioVisualization': false,
   'desktopLyric.width': 450,
   'desktopLyric.height': 300,

src/renderer-lyric/useApp/usePauseHide.ts

@@ -0,0 +1,41 @@
+import { ref, watch } from '@common/utils/vueTools'
+import { isPlay, setting } from '@lyric/store/state'
+
+export default () => {
+  let unWatch: (() => void) | null = null
+  let isHide = ref(false)
+  let timeout: NodeJS.Timeout | null = null
+  const clearIntv = () => {
+    if (!timeout) return
+    clearTimeout(timeout)
+    timeout = null
+  }
+  watch(() => setting['desktopLyric.pauseHide'], (enable) => {
+    if (enable) {
+      unWatch = watch(isPlay, (isPlay) => {
+        clearIntv()
+        if (isPlay) {
+          isHide.value &&= false
+        } else {
+          timeout = setTimeout(() => {
+            timeout = null
+            isHide.value = true
+          }, 1000)
+        }
+      }, {
+        immediate: true,
+      })
+    } else {
+      clearIntv()
+      isHide.value &&= false
+      if (unWatch) {
+        unWatch()
+        unWatch = null
+      }
+    }
+  }, {
+    immediate: true,
+  })
+
+  return isHide
+}

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

@@ -7,6 +7,8 @@ dd
     base-checkbox(id="setting_desktop_lyric_lock" :model-value="appSetting['desktopLyric.isLock']" :label="$t('setting__desktop_lyric_lock')" @update:model-value="updateSetting({ 'desktopLyric.isLock': $event })")
   .gap-top
     base-checkbox(id="setting_desktop_lyric_fullscreen_hide" :model-value="appSetting['desktopLyric.fullscreenHide']" :label="$t('setting__desktop_lyric_fullscreen_hide')" @update:model-value="updateSetting({ 'desktopLyric.fullscreenHide': $event })")
+  .gap-top
+    base-checkbox(id="setting_desktop_lyric_pause_hide" :model-value="appSetting['desktopLyric.pauseHide']" :label="$t('setting__desktop_lyric_pause_hide_hide')" @update:model-value="updateSetting({ 'desktopLyric.pauseHide': $event })")
   .gap-top
     base-checkbox(id="setting_desktop_lyric_audio_visualization" :model-value="appSetting['desktopLyric.audioVisualization']" :label="$t('setting__desktop_lyric_audio_visualization')" @update:model-value="updateSetting({ 'desktopLyric.audioVisualization': $event })")
   .gap-top