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)