兼容桌面歌词以触摸的方式移动、调整大小
lyswhut
parent
7737012103
commit
34825b5063
|
|
@ -8,6 +8,7 @@
|
|||
- 优化开关评论时的动画性能
|
||||
- 优化进入、离开播放详情页的性能
|
||||
- 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
|
||||
- 兼容桌面歌词以触摸的方式移动、调整大小
|
||||
|
||||
### 修复
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
.control-bar(v-show="!lrcConfig.isLock")
|
||||
core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
|
||||
core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTranslation="isShowLyricTranslation")
|
||||
div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
|
||||
div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
|
||||
div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
|
||||
div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)")
|
||||
div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)")
|
||||
div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)")
|
||||
div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)")
|
||||
div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)")
|
||||
div.resize-left(@mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)")
|
||||
div.resize-top(@mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)")
|
||||
div.resize-right(@mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)")
|
||||
div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)")
|
||||
div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)" @touchstart.self="handleTouchDown('top-left', $event)")
|
||||
div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)" @touchstart.self="handleTouchDown('top-right', $event)")
|
||||
div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)" @touchstart.self="handleTouchDown('bottom-left', $event)")
|
||||
div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)" @touchstart.self="handleTouchDown('bottom-right', $event)")
|
||||
core-icons
|
||||
</template>
|
||||
|
||||
|
|
@ -116,16 +116,34 @@ export default {
|
|||
this.isPlayLxlrc = isPlayLxlrc
|
||||
if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
|
||||
},
|
||||
handleMouseDown(origin, event) {
|
||||
handleDown(origin, clientX, clientY) {
|
||||
this.handleMouseUp()
|
||||
this.resize.origin = origin
|
||||
this.resize.msDownX = event.clientX
|
||||
this.resize.msDownY = event.clientY
|
||||
this.resize.msDownX = clientX
|
||||
this.resize.msDownY = clientY
|
||||
},
|
||||
handleMouseUp() {
|
||||
this.resize.origin = null
|
||||
},
|
||||
handleMouseDown(origin, event) {
|
||||
this.handleDown(origin, event.clientX, event.clientY)
|
||||
},
|
||||
handleTouchDown(origin, event) {
|
||||
if (event.changedTouches.length) {
|
||||
const touch = event.changedTouches[0]
|
||||
this.handleDown(origin, touch.clientX, touch.clientY)
|
||||
}
|
||||
},
|
||||
handleMouseMove(event) {
|
||||
this.handleMove(event.clientX, event.clientY)
|
||||
},
|
||||
handleTouchMove(event) {
|
||||
if (event.changedTouches.length) {
|
||||
const touch = event.changedTouches[0]
|
||||
this.handleMove(touch.clientX, touch.clientY)
|
||||
}
|
||||
},
|
||||
handleMove(clientX, clientY) {
|
||||
if (!this.resize.origin) return
|
||||
// if (!event.target.classList.contains('resize-' + this.resize.origin)) return
|
||||
// console.log(event.target)
|
||||
|
|
@ -136,49 +154,49 @@ export default {
|
|||
let temp
|
||||
switch (this.resize.origin) {
|
||||
case 'left':
|
||||
temp = event.clientX - this.resize.msDownX
|
||||
temp = clientX - this.resize.msDownX
|
||||
bounds.w = -temp
|
||||
bounds.x = temp
|
||||
break
|
||||
case 'right':
|
||||
bounds.w = event.clientX - this.resize.msDownX
|
||||
bounds.w = clientX - this.resize.msDownX
|
||||
this.resize.msDownX += bounds.w
|
||||
break
|
||||
case 'top':
|
||||
temp = event.clientY - this.resize.msDownY
|
||||
temp = clientY - this.resize.msDownY
|
||||
bounds.y = temp
|
||||
bounds.h = -temp
|
||||
break
|
||||
case 'bottom':
|
||||
bounds.h = event.clientY - this.resize.msDownY
|
||||
bounds.h = clientY - this.resize.msDownY
|
||||
this.resize.msDownY += bounds.h
|
||||
break
|
||||
case 'top-left':
|
||||
temp = event.clientX - this.resize.msDownX
|
||||
temp = clientX - this.resize.msDownX
|
||||
bounds.w = -temp
|
||||
bounds.x = temp
|
||||
temp = event.clientY - this.resize.msDownY
|
||||
temp = clientY - this.resize.msDownY
|
||||
bounds.y = temp
|
||||
bounds.h = -temp
|
||||
break
|
||||
case 'top-right':
|
||||
temp = event.clientY - this.resize.msDownY
|
||||
temp = clientY - this.resize.msDownY
|
||||
bounds.y = temp
|
||||
bounds.h = -temp
|
||||
bounds.w = event.clientX - this.resize.msDownX
|
||||
bounds.w = clientX - this.resize.msDownX
|
||||
this.resize.msDownX += bounds.w
|
||||
break
|
||||
case 'bottom-left':
|
||||
temp = event.clientX - this.resize.msDownX
|
||||
temp = clientX - this.resize.msDownX
|
||||
bounds.w = -temp
|
||||
bounds.x = temp
|
||||
bounds.h = event.clientY - this.resize.msDownY
|
||||
bounds.h = clientY - this.resize.msDownY
|
||||
this.resize.msDownY += bounds.h
|
||||
break
|
||||
case 'bottom-right':
|
||||
bounds.w = event.clientX - this.resize.msDownX
|
||||
bounds.w = clientX - this.resize.msDownX
|
||||
this.resize.msDownX += bounds.w
|
||||
bounds.h = event.clientY - this.resize.msDownY
|
||||
bounds.h = clientY - this.resize.msDownY
|
||||
this.resize.msDownY += bounds.h
|
||||
break
|
||||
}
|
||||
|
|
@ -187,9 +205,9 @@ export default {
|
|||
bounds.h = window.innerHeight + bounds.h
|
||||
rendererSend(NAMES.winLyric.set_win_bounds, bounds)
|
||||
},
|
||||
handleMouseOver() {
|
||||
// this.handleMouseUp()
|
||||
},
|
||||
// handleMouseOver() {
|
||||
// // this.handleMouseUp()
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template lang="pug">
|
||||
div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.lrcActiveZoom]: lrcConfig.style.isZoomActiveLrc } ]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
|
||||
div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.lrcActiveZoom]: lrcConfig.style.isZoomActiveLrc } ]"
|
||||
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart" ref="dom_lyric")
|
||||
div(:class="$style.lyricSpace")
|
||||
div(:class="[$style.lyricText]" ref="dom_lyric_text")
|
||||
//- div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
|
||||
|
|
@ -167,12 +168,16 @@ export default {
|
|||
mounted() {
|
||||
document.addEventListener('mousemove', this.handleMouseMsMove)
|
||||
document.addEventListener('mouseup', this.handleMouseMsUp)
|
||||
document.addEventListener('touchmove', this.handleTouchMove)
|
||||
document.addEventListener('touchend', this.handleMouseMsUp)
|
||||
rendererSend(NAMES.winLyric.get_lyric_info, 'info')
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearLyricScrollTimeout()
|
||||
document.removeEventListener('mousemove', this.handleMouseMsMove)
|
||||
document.removeEventListener('mouseup', this.handleMouseMsUp)
|
||||
document.removeEventListener('touchmove', this.handleTouchMove)
|
||||
document.removeEventListener('touchend', this.handleMouseMsUp)
|
||||
},
|
||||
methods: {
|
||||
handleSetInfo({ type, data }) {
|
||||
|
|
@ -234,49 +239,59 @@ export default {
|
|||
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)
|
||||
},
|
||||
handleLyricMouseDown(e) {
|
||||
if (e.target.classList.contains('font') ||
|
||||
e.target.parentNode.classList.contains('font') ||
|
||||
e.target.classList.contains('translation') ||
|
||||
e.target.parentNode.classList.contains('translation')) {
|
||||
handleLyricDown(target, x, y) {
|
||||
if (target.classList.contains('font') ||
|
||||
target.parentNode.classList.contains('font') ||
|
||||
target.classList.contains('translation') ||
|
||||
target.parentNode.classList.contains('translation')) {
|
||||
this.lyricEvent.isMsDown = true
|
||||
this.lyricEvent.msDownY = e.clientY
|
||||
this.lyricEvent.msDownY = y
|
||||
this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
|
||||
} else {
|
||||
this.winEvent.isMsDown = true
|
||||
this.winEvent.msDownX = e.clientX
|
||||
this.winEvent.msDownY = e.clientY
|
||||
this.winEvent.msDownX = x
|
||||
this.winEvent.msDownY = y
|
||||
}
|
||||
},
|
||||
handleLyricMouseDown(e) {
|
||||
this.handleLyricDown(e.target, e.clientX, e.clientY)
|
||||
},
|
||||
handleLyricTouchStart(e) {
|
||||
if (e.changedTouches.length) {
|
||||
const touch = e.changedTouches[0]
|
||||
this.handleLyricDown(e.target, touch.clientX, touch.clientY)
|
||||
}
|
||||
},
|
||||
handleMouseMsUp(e) {
|
||||
this.lyricEvent.isMsDown = false
|
||||
this.winEvent.isMsDown = false
|
||||
},
|
||||
handleMouseMsMove(e) {
|
||||
handleMove(x, y) {
|
||||
if (this.lyricEvent.isMsDown) {
|
||||
if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
|
||||
if (cancelScrollFn) {
|
||||
cancelScrollFn()
|
||||
cancelScrollFn = null
|
||||
}
|
||||
this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - e.clientY
|
||||
this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - y
|
||||
this.startLyricScrollTimeout()
|
||||
} else if (this.winEvent.isMsDown) {
|
||||
rendererSend(NAMES.winLyric.set_win_bounds, {
|
||||
x: e.clientX - this.winEvent.msDownX,
|
||||
y: e.clientY - this.winEvent.msDownY,
|
||||
x: x - this.winEvent.msDownX,
|
||||
y: y - this.winEvent.msDownY,
|
||||
w: window.innerWidth,
|
||||
h: window.innerHeight,
|
||||
})
|
||||
}
|
||||
|
||||
// if (this.volumeEvent.isMsDown) {
|
||||
// let val = this.volumeEvent.msDownValue + (e.clientX - this.volumeEvent.msDownX) / 70
|
||||
// this.volume = val < 0 ? 0 : val > 1 ? 1 : val
|
||||
// if (this.audio) this.audio.volume = this.volume
|
||||
// }
|
||||
|
||||
// console.log(val)
|
||||
},
|
||||
handleTouchMove(e) {
|
||||
if (e.changedTouches.length) {
|
||||
const touch = e.changedTouches[0]
|
||||
this.handleMove(touch.clientX, touch.clientY)
|
||||
}
|
||||
},
|
||||
handleMouseMsMove(e) {
|
||||
this.handleMove(e.clientX, e.clientY)
|
||||
},
|
||||
startLyricScrollTimeout() {
|
||||
this.clearLyricScrollTimeout()
|
||||
|
|
|
|||
Loading…
Reference in New Issue