优化桌面歌词在开启 缩放当前播放的歌词 并关闭 延迟歌词滚动 时的歌词滚动位置计算问题

publish/changeLog.md

@@ -16,6 +16,7 @@
 - 过滤翻译歌词或罗马音歌词中只有“//”的行（#1499）
 - 点击打开歌单弹窗背景将不再自动关闭弹窗，防止选择输入框里的内容时意外关闭弹窗
 - 优化数据传输逻辑，列表同步指令使用队列机制，保证列表同步操作的顺序
+- 优化桌面歌词在开启 缩放当前播放的歌词 并关闭 延迟歌词滚动 时的歌词滚动位置计算问题，现在歌词滚动应该可以正确滚动到目标位置了
 
 ### 修复
 

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,

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

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,

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