From 03f322f92a0c0431cbc2b2b2ab218af1249e1e75 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Tue, 29 Aug 2023 17:45:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A1=8C=E9=9D=A2=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E5=9C=A8=E5=BC=80=E5=90=AF=20=E7=BC=A9=E6=94=BE?= =?UTF-8?q?=E5=BD=93=E5=89=8D=E6=92=AD=E6=94=BE=E7=9A=84=E6=AD=8C=E8=AF=8D?= =?UTF-8?q?=20=E5=B9=B6=E5=85=B3=E9=97=AD=20=E5=BB=B6=E8=BF=9F=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E6=BB=9A=E5=8A=A8=20=E6=97=B6=E7=9A=84=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E6=BB=9A=E5=8A=A8=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish/changeLog.md | 1 + .../layout/LyricHorizontal/index.vue | 5 +++- .../layout/LyricHorizontal/useLyric.js | 22 +++++++++++++++-- .../components/layout/LyricVertical/index.vue | 5 +++- .../layout/LyricVertical/useLyric.js | 24 ++++++++++++++++--- 5 files changed, 50 insertions(+), 7 deletions(-) diff --git a/publish/changeLog.md b/publish/changeLog.md index f630f3f3..ff4bd59c 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -16,6 +16,7 @@ - 过滤翻译歌词或罗马音歌词中只有“//”的行（#1499） - 点击打开歌单弹窗背景将不再自动关闭弹窗，防止选择输入框里的内容时意外关闭弹窗 - 优化数据传输逻辑，列表同步指令使用队列机制，保证列表同步操作的顺序 +- 优化桌面歌词在开启 缩放当前播放的歌词 并关闭 延迟歌词滚动 时的歌词滚动位置计算问题，现在歌词滚动应该可以正确滚动到目标位置了 ### 修复 diff --git a/src/renderer-lyric/components/layout/LyricHorizontal/index.vue b/src/renderer-lyric/components/layout/LyricHorizontal/index.vue index 02bb0884..dd1657d7 100644 --- a/src/renderer-lyric/components/layout/LyricHorizontal/index.vue +++ b/src/renderer-lyric/components/layout/LyricHorizontal/index.vue @@ -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, diff --git a/src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js b/src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js index bb287949..9ba94b1d 100644 --- a/src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js +++ b/src/renderer-lyric/components/layout/LyricHorizontal/useLyric.js @@ -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 diff --git a/src/renderer-lyric/components/layout/LyricVertical/index.vue b/src/renderer-lyric/components/layout/LyricVertical/index.vue index d475fb0b..a844912a 100644 --- a/src/renderer-lyric/components/layout/LyricVertical/index.vue +++ b/src/renderer-lyric/components/layout/LyricVertical/index.vue @@ -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, diff --git a/src/renderer-lyric/components/layout/LyricVertical/useLyric.js b/src/renderer-lyric/components/layout/LyricVertical/useLyric.js index 9af28706..ea15dfde 100644 --- a/src/renderer-lyric/components/layout/LyricVertical/useLyric.js +++ b/src/renderer-lyric/components/layout/LyricVertical/useLyric.js @@ -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