兼容桌面歌词以触摸的方式移动、调整大小

publish/changeLog.md

@@ -8,6 +8,7 @@
 - 优化开关评论时的动画性能
 - 优化进入、离开播放详情页的性能
 - 大幅优化我的列表、下载、歌单、排行榜列表性能，现在即使同一列表内的歌曲很多时也不会卡顿了
+- 兼容桌面歌词以触摸的方式移动、调整大小
 
 ### 修复
 

src/renderer-lyric/App.vue

@@ -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-left(@mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)")
-  div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
+  div.resize-top(@mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)")
-  div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
+  div.resize-right(@mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)")
-  div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)")
+  div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)")
-  div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $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)")
+  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)")
+  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)")
+  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.msDownX = clientX
-      this.resize.msDownY = event.clientY
+      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() {
+    // handleMouseOver() {
-      // this.handleMouseUp()
+    //   // this.handleMouseUp()
-    },
+    // },
   },
 }
 </script>

src/renderer-lyric/components/core/Lyric.vue

@@ -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) {
+    handleLyricDown(target, x, y) {
-      if (e.target.classList.contains('font') ||
+      if (target.classList.contains('font') ||
-        e.target.parentNode.classList.contains('font') ||
+        target.parentNode.classList.contains('font') ||
-        e.target.classList.contains('translation') ||
+        target.classList.contains('translation') ||
-        e.target.parentNode.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.msDownX = x
-        this.winEvent.msDownY = e.clientY
+        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,
+          x: x - this.winEvent.msDownX,
-          y: e.clientY - this.winEvent.msDownY,
+          y: y - this.winEvent.msDownY,
           w: window.innerWidth,
           h: window.innerHeight,
         })
       }
-
+    },
-      // if (this.volumeEvent.isMsDown) {
+    handleTouchMove(e) {
-      //   let val = this.volumeEvent.msDownValue + (e.clientX - this.volumeEvent.msDownX) / 70
+      if (e.changedTouches.length) {
-      //   this.volume = val < 0 ? 0 : val > 1 ? 1 : val
+        const touch = e.changedTouches[0]
-      //   if (this.audio) this.audio.volume = this.volume
+        this.handleMove(touch.clientX, touch.clientY)
-      // }
+      }
-
+    },
-      // console.log(val)
+    handleMouseMsMove(e) {
+      this.handleMove(e.clientX, e.clientY)
     },
     startLyricScrollTimeout() {
       this.clearLyricScrollTimeout()