优化桌面歌词在开启 缩放当前播放的歌词 并关闭 延迟歌词滚动 时的歌词滚动位置计算问题
parent
5cf2acfff2
commit
03f322f92a
|
@ -16,6 +16,7 @@
|
|||
- 过滤翻译歌词或罗马音歌词中只有“//”的行(#1499)
|
||||
- 点击打开歌单弹窗背景将不再自动关闭弹窗,防止选择输入框里的内容时意外关闭弹窗
|
||||
- 优化数据传输逻辑,列表同步指令使用队列机制,保证列表同步操作的顺序
|
||||
- 优化桌面歌词在开启 缩放当前播放的歌词 并关闭 延迟歌词滚动 时的歌词滚动位置计算问题,现在歌词滚动应该可以正确滚动到目标位置了
|
||||
|
||||
### 修复
|
||||
|
||||
|
|
|
@ -41,6 +41,9 @@ export default {
|
|||
'--line-gap': setting['desktopLyric.style.lineGap'] + 'px',
|
||||
'--line-extended-gap': (setting['desktopLyric.style.lineGap'] / 3).toFixed(2) + 'px',
|
||||
}))
|
||||
const isComputeHeight = computed(() => {
|
||||
return setting['desktopLyric.style.isZoomActiveLrc'] && !setting['desktopLyric.isDelayScroll']
|
||||
})
|
||||
const {
|
||||
dom_lyric,
|
||||
dom_lyric_text,
|
||||
|
@ -48,7 +51,7 @@ export default {
|
|||
handleLyricMouseDown,
|
||||
handleLyricTouchStart,
|
||||
handleWheel,
|
||||
} = useLyric()
|
||||
} = useLyric(isComputeHeight)
|
||||
|
||||
return {
|
||||
classNames,
|
||||
|
|
|
@ -11,7 +11,7 @@ const getOffsetTop = (contentHeight, lineHeight) => {
|
|||
}
|
||||
}
|
||||
|
||||
export default () => {
|
||||
export default (isComputeHeight) => {
|
||||
const dom_lyric = ref(null)
|
||||
const dom_lyric_text = ref(null)
|
||||
const isMsDown = ref(false)
|
||||
|
@ -28,7 +28,9 @@ export default () => {
|
|||
let timeout = null
|
||||
let cancelScrollFn
|
||||
let dom_lines
|
||||
let line_heights
|
||||
let isSetedLines = false
|
||||
let prevActiveLine = 0
|
||||
|
||||
|
||||
const handleScrollLrc = (duration = 300) => {
|
||||
|
@ -39,7 +41,18 @@ export default () => {
|
|||
}
|
||||
if (isStopScroll) return
|
||||
let dom_p = dom_lines[lyric.line]
|
||||
cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - getOffsetTop(dom_lyric.value.clientHeight, dom_p.clientHeight)) : 0, duration)
|
||||
|
||||
if (dom_p) {
|
||||
let offset = 0
|
||||
if (isComputeHeight.value) {
|
||||
let prevLineHeight = line_heights[prevActiveLine] ?? 0
|
||||
offset = prevActiveLine < lyric.line ? ((dom_lines[prevActiveLine]?.clientHeight ?? 0) - prevLineHeight) : 0
|
||||
// console.log(prevActiveLine, dom_lines[prevActiveLine]?.clientHeight ?? 0, prevLineHeight, offset)
|
||||
}
|
||||
cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - offset - getOffsetTop(dom_lyric.value.clientHeight, dom_p.clientHeight)) : 0, duration)
|
||||
} else {
|
||||
cancelScrollFn = scrollTo(dom_lyric.value, 0, duration)
|
||||
}
|
||||
}
|
||||
const clearLyricScrollTimeout = () => {
|
||||
if (!timeout) return
|
||||
|
@ -136,11 +149,13 @@ export default () => {
|
|||
dom_lyric_text.value.appendChild(dom_line_content)
|
||||
nextTick(() => {
|
||||
dom_lines = dom_lyric.value.querySelectorAll('.line-content')
|
||||
line_heights = Array.from(dom_lines).map(l => l.clientHeight)
|
||||
handleScrollLrc()
|
||||
})
|
||||
}
|
||||
|
||||
const initLrc = (lines, oLines) => {
|
||||
prevActiveLine = 0
|
||||
isSetedLines = true
|
||||
if (oLines) {
|
||||
if (lines.length) {
|
||||
|
@ -162,6 +177,9 @@ export default () => {
|
|||
|
||||
let delayScrollTimeout
|
||||
const scrollLine = (line, oldLine) => {
|
||||
setImmediate(() => {
|
||||
prevActiveLine = line
|
||||
})
|
||||
if (line < 0 || !lyric.lines.length) return
|
||||
if (line == 0 && isSetedLines) return isSetedLines = false
|
||||
isSetedLines &&= false
|
||||
|
|
|
@ -40,6 +40,9 @@ export default {
|
|||
'--line-gap': Math.ceil(setting['desktopLyric.style.lineGap'] * 1.06) + 'px',
|
||||
'--line-extended-gap': Math.ceil(setting['desktopLyric.style.lineGap'] * 1.06 / 8).toFixed(2) + 'px',
|
||||
}))
|
||||
const isComputeWidth = computed(() => {
|
||||
return setting['desktopLyric.style.isZoomActiveLrc'] && !setting['desktopLyric.isDelayScroll']
|
||||
})
|
||||
const {
|
||||
dom_lyric,
|
||||
dom_lyric_text,
|
||||
|
@ -47,7 +50,7 @@ export default {
|
|||
handleLyricMouseDown,
|
||||
handleLyricTouchStart,
|
||||
handleWheel,
|
||||
} = useLyric()
|
||||
} = useLyric(isComputeWidth)
|
||||
|
||||
return {
|
||||
classNames,
|
||||
|
|
|
@ -6,12 +6,12 @@ import { setWindowBounds } from '@lyric/utils/ipc'
|
|||
|
||||
const getOffsetTop = (contentWidth, lineWidth) => {
|
||||
switch (setting['desktopLyric.scrollAlign']) {
|
||||
case 'top': return contentWidth - lineWidth
|
||||
case 'top': return contentWidth - lineWidth - 2
|
||||
default: return contentWidth * 0.5 - lineWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
export default () => {
|
||||
export default (isComputeWidth) => {
|
||||
const dom_lyric = ref(null)
|
||||
const dom_lyric_text = ref(null)
|
||||
const isMsDown = ref(false)
|
||||
|
@ -28,7 +28,9 @@ export default () => {
|
|||
let timeout = null
|
||||
let cancelScrollFn
|
||||
let dom_lines
|
||||
let line_widths
|
||||
let isSetedLines = false
|
||||
let prevActiveLine = 0
|
||||
|
||||
|
||||
const handleScrollLrc = (duration = 300) => {
|
||||
|
@ -39,7 +41,18 @@ export default () => {
|
|||
}
|
||||
if (isStopScroll) return
|
||||
let dom_p = dom_lines[lyric.line]
|
||||
cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft - getOffsetTop(dom_lyric.value.clientWidth, dom_p.clientWidth)) : 0, duration)
|
||||
|
||||
if (dom_p) {
|
||||
let offset = 0
|
||||
if (isComputeWidth.value) {
|
||||
let prevLineWidth = line_widths[prevActiveLine] ?? 0
|
||||
offset = prevActiveLine < lyric.line ? ((dom_lines[prevActiveLine]?.clientWidth ?? 0) - prevLineWidth) : 0
|
||||
// console.log(prevActiveLine, dom_lines[prevActiveLine]?.clientHeight ?? 0, prevLineWidth, offset)
|
||||
}
|
||||
cancelScrollFn = scrollXRTo(dom_lyric.value, dom_p ? (dom_p.offsetLeft + offset - getOffsetTop(dom_lyric.value.clientWidth, dom_p.clientWidth)) : 0, duration)
|
||||
} else {
|
||||
cancelScrollFn = scrollXRTo(dom_lyric.value, 0, duration)
|
||||
}
|
||||
}
|
||||
const clearLyricScrollTimeout = () => {
|
||||
if (!timeout) return
|
||||
|
@ -136,11 +149,13 @@ export default () => {
|
|||
dom_lyric_text.value.appendChild(dom_line_content)
|
||||
nextTick(() => {
|
||||
dom_lines = dom_lyric.value.querySelectorAll('.line-content')
|
||||
line_widths = Array.from(dom_lines).map(l => l.clientWidth)
|
||||
handleScrollLrc()
|
||||
})
|
||||
}
|
||||
|
||||
const initLrc = (lines, oLines) => {
|
||||
prevActiveLine = 0
|
||||
isSetedLines = true
|
||||
if (oLines) {
|
||||
if (lines.length) {
|
||||
|
@ -162,6 +177,9 @@ export default () => {
|
|||
|
||||
let delayScrollTimeout
|
||||
const scrollLine = (line, oldLine) => {
|
||||
setImmediate(() => {
|
||||
prevActiveLine = line
|
||||
})
|
||||
if (line < 0) return
|
||||
if (line == 0 && isSetedLines) return isSetedLines = false
|
||||
isSetedLines &&= false
|
||||
|
|
Loading…
Reference in New Issue