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

pull/930/merge
lyswhut 2022-06-14 11:43:18 +08:00
parent 283bdd6246
commit aa5e621184
10 changed files with 88 additions and 7 deletions

View File

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

View File

@ -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,

View File

@ -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",

View File

@ -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": "下载设置",

View File

@ -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": "下載設置",

View File

@ -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) {

View File

@ -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) {

View File

@ -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 {

View File

@ -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

View File

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