为播放详情页、桌面歌词添加延迟滚动,播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小

This commit is contained in:
lyswhut
2021-12-24 11:06:00 +08:00
parent 400c16ba2d
commit c86b1c259c
4 changed files with 19 additions and 11 deletions
+8 -5
View File
@@ -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;
@@ -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;
}
}
+8 -4
View File
@@ -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)