From c86b1c259c51036e894a132f9dbad7b9a774473b Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Fri, 24 Dec 2021 11:06:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E6=92=AD=E6=94=BE=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E3=80=81=E6=A1=8C=E9=9D=A2=E6=AD=8C=E8=AF=8D=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BB=B6=E8=BF=9F=E6=BB=9A=E5=8A=A8=EF=BC=8C=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E8=AF=A6=E6=83=85=E9=A1=B5=E7=95=A5=E5=BE=AE=E5=87=8F?=
 =?UTF-8?q?=E5=B0=8F=E5=B7=B2=E6=BF=80=E6=B4=BB=E6=AD=8C=E8=AF=8D=E7=9A=84?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=A4=A7=E5=B0=8F=E5=8F=8A=E6=A1=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E7=BF=BB=E8=AF=91=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                                |  1 +
 src/renderer-lyric/components/core/Lyric.vue        | 13 ++++++++-----
 .../components/core/PlayDetail/LyricPlayer.vue      |  4 ++--
 src/renderer/utils/compositions/useLyric.js         | 12 ++++++++----
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 42066116..eeea05c1 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -13,6 +13,7 @@
 - 调整Mac平台下的图标大小
 - 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
 - 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
+- 为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小
 
 ### 修复
 
diff --git a/src/renderer-lyric/components/core/Lyric.vue b/src/renderer-lyric/components/core/Lyric.vue
index 80c75c23..662af1ba 100644
--- a/src/renderer-lyric/components/core/Lyric.vue
+++ b/src/renderer-lyric/components/core/Lyric.vue
@@ -122,10 +122,13 @@ export default {
       immediate: true,
     },
     'lyric.line': {
-      handler(n) {
+      handler(n, o) {
         if (n < 0) return
         if (n == 0 && this.isSetedLines) return this.isSetedLines = false
-        this.handleScrollLrc()
+        if (o == null || n - o != 1) return this.handleScrollLrc()
+        setTimeout(() => {
+          this.handleScrollLrc(600)
+        }, 600)
       },
       immediate: true,
     },
@@ -229,7 +232,7 @@ export default {
     handleResize() {
       this.setProgressWidth()
     },
-    handleScrollLrc() {
+    handleScrollLrc(duration = 300) {
       if (!this.dom_lines.length) return
       if (cancelScrollFn) {
         cancelScrollFn()
@@ -237,7 +240,7 @@ export default {
       }
       if (this.lyricEvent.isStopScroll) return
       let dom_p = this.dom_lines[this.lyric.line]
-      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0)
+      cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.5 + dom_p.clientHeight / 2) : 0, duration)
     },
     handleLyricDown(target, x, y) {
       if (target.classList.contains('font') ||
@@ -454,7 +457,7 @@ export default {
     .lrc-content {
       &.active {
         .translation {
-          font-size: 1em;
+          font-size: .94em;
         }
         span {
           font-size: 1.2em;
diff --git a/src/renderer/components/core/PlayDetail/LyricPlayer.vue b/src/renderer/components/core/PlayDetail/LyricPlayer.vue
index 43d7cd9d..e62d2552 100644
--- a/src/renderer/components/core/PlayDetail/LyricPlayer.vue
+++ b/src/renderer/components/core/PlayDetail/LyricPlayer.vue
@@ -119,12 +119,12 @@ export default {
           color: @color-theme;
         }
         .translation {
-          font-size: 1em;
+          font-size: .94em;
           color: @color-theme;
         }
         span {
           // color: @color-theme;
-          font-size: 1.2em;
+          font-size: 1.1em;
         }
       }
 
diff --git a/src/renderer/utils/compositions/useLyric.js b/src/renderer/utils/compositions/useLyric.js
index 0c04071c..bad6dc32 100644
--- a/src/renderer/utils/compositions/useLyric.js
+++ b/src/renderer/utils/compositions/useLyric.js
@@ -14,7 +14,7 @@ export default ({ isPlay, lyric }) => {
   let dom_lines
   let isSetedLines = false
 
-  const handleScrollLrc = () => {
+  const handleScrollLrc = (duration = 300) => {
     if (!dom_lines?.length || !dom_lyric.value) return
     if (cancelScrollFn) {
       cancelScrollFn()
@@ -22,7 +22,7 @@ export default ({ isPlay, lyric }) => {
     }
     if (isStopScroll) return
     let dom_p = dom_lines[lyric.line]
-    cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - dom_lyric.value.clientHeight * 0.38) : 0)
+    cancelScrollFn = scrollTo(dom_lyric.value, dom_p ? (dom_p.offsetTop - dom_lyric.value.clientHeight * 0.38) : 0, duration)
   }
   const clearLyricScrollTimeout = () => {
     if (!timeout) return
@@ -103,10 +103,14 @@ export default ({ isPlay, lyric }) => {
     }
   }
 
-  const scrollLine = line => {
+  const scrollLine = (line, oldLine) => {
     if (line < 0) return
     if (line == 0 && isSetedLines) return isSetedLines = false
-    handleScrollLrc()
+    if (oldLine == null || line - oldLine != 1) return handleScrollLrc()
+
+    setTimeout(() => {
+      handleScrollLrc(600)
+    }, 600)
   }
 
   watch(() => lyric.lines, initLrc)