支持桌面歌词拖动

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

@@ -131,7 +131,8 @@ export default {
   created() {
     rendererOn(NAMES.winLyric.set_lyric_info, (event, data) => this.handleSetInfo(data))
     window.lrc = new Lyric({
-      className: 'lrc-content',
+      lineClassName: 'lrc-content',
+      fontClassName: 'font',
       shadowClassName: 'shadow',
       shadowContent: true,
       activeLineClassName: 'active',
@@ -225,7 +226,8 @@ export default {
       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(this.$style.lrcLine)) {
+      console.log(e.target)
+      if (e.target.classList.contains('font') || e.target.parentNode.classList.contains('font')) {
         this.lyricEvent.isMsDown = true
         this.lyricEvent.msDownY = e.clientY
         this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
@@ -321,6 +323,10 @@ export default {
       margin: 16px 0;
       overflow-wrap: break-word;
 
+      .font {
+        display: inline-block;
+      }
+
       .line {
         transition-property: font-size, color !important;
         background: none !important;

src/renderer/components/core/Player.vue

@@ -453,7 +453,8 @@ export default {
       })
 
       window.lrc = new Lyric({
-        className: 'lrc-content',
+        lineClassName: 'lrc-content',
+        fontClassName: 'font',
         shadowContent: false,
         activeLineClassName: 'active',
         onPlay: (line, text) => {

src/renderer/utils/lyric-font-player/font-player.js

@@ -20,10 +20,11 @@ const createAnimation = (dom, duration) => new window.Animation(new window.Keyfr
 // https://jsfiddle.net/ceqpnbky/1/
 
 module.exports = class FontPlayer {
-  constructor({ lyric = '', className = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
+  constructor({ lyric = '', lineClassName = '', fontClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
     this.lyric = lyric
 
-    this.className = className
+    this.lineClassName = lineClassName
+    this.fontClassName = fontClassName
     this.lineModeClassName = lineModeClassName
     this.shadowContent = shadowContent
     this.shadowClassName = shadowClassName
@@ -47,15 +48,18 @@ module.exports = class FontPlayer {
 
     this.isLineMode = false
 
+    this.lineContent = document.createElement('div')
+    this.lineContent.style = 'position:relative;'
+    if (this.lineClassName) this.lineContent.classList.add(this.lineClassName)
     this.fontContent = document.createElement('div')
-    this.fontContent.style = 'position:relative;'
-    this.fontContent.className = this.className
+    if (this.fontClassName) this.fontContent.classList.add(this.fontClassName)
     if (this.shadowContent) {
       this.fontShadowContent = document.createElement('div')
       this.fontShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;'
       this.fontShadowContent.className = this.shadowClassName
-      this.fontContent.appendChild(this.fontShadowContent)
+      this.lineContent.appendChild(this.fontShadowContent)
     }
+    this.lineContent.appendChild(this.fontContent)
     this._parseLyric()
   }
 

src/renderer/utils/lyric-font-player/index.js

@@ -7,7 +7,8 @@ module.exports = class Lyric {
   constructor({
     lyric = '',
     offset = 150,
-    className = '',
+    lineClassName = '',
+    fontClassName = 'font',
     activeLineClassName = 'active',
     lineModeClassName = 'line',
     shadowClassName = '',
@@ -20,7 +21,8 @@ module.exports = class Lyric {
     this.onPlay = onPlay
     this.onSetLyric = onSetLyric
 
-    this.className = className
+    this.lineClassName = lineClassName
+    this.fontClassName = fontClassName
     this.activeLineClassName = activeLineClassName
     this.lineModeClassName = lineModeClassName
     this.shadowClassName = shadowClassName
@@ -52,40 +54,40 @@ module.exports = class Lyric {
         for (let i = this.playingLineNum; i > num - 1; i--) {
           const font = this._lineFonts[i]
           font.reset()
-          font.fontContent.classList.remove(this.activeLineClassName)
+          font.lineContent.classList.remove(this.activeLineClassName)
         }
       } else if (num > this.playingLineNum + 1) {
         for (let i = Math.max(this.playingLineNum, 0); i < num; i++) {
           const font = this._lineFonts[i]
           font.reset()
-          font.fontContent.classList.remove(this.activeLineClassName)
+          font.lineContent.classList.remove(this.activeLineClassName)
         }
       } else if (this.playingLineNum > -1) {
         const font = this._lineFonts[this.playingLineNum]
         font.reset()
-        font.fontContent.classList.remove(this.activeLineClassName)
+        font.lineContent.classList.remove(this.activeLineClassName)
       }
     } else {
       if (num < this.playingLineNum + 1) {
         for (let i = this.playingLineNum; i > num - 1; i--) {
           const font = this._lineFonts[i]
-          font.fontContent.classList.remove(this.activeLineClassName)
+          font.lineContent.classList.remove(this.activeLineClassName)
           font.reset()
         }
       } else if (num > this.playingLineNum + 1) {
         for (let i = Math.max(this.playingLineNum, 0); i < num; i++) {
           const font = this._lineFonts[i]
-          font.fontContent.classList.remove(this.activeLineClassName)
+          font.lineContent.classList.remove(this.activeLineClassName)
           font.finish()
         }
       } else if (this.playingLineNum > -1) {
         const font = this._lineFonts[this.playingLineNum]
-        font.fontContent.classList.remove(this.activeLineClassName)
+        font.lineContent.classList.remove(this.activeLineClassName)
       }
     }
     this.playingLineNum = num
     const font = this._lineFonts[num]
-    font.fontContent.classList.add(this.activeLineClassName)
+    font.lineContent.classList.add(this.activeLineClassName)
     font.play(curTime - this._lines[num].time)
     this.onPlay(num, this._lines[num].text)
   }
@@ -99,7 +101,8 @@ module.exports = class Lyric {
       this._lines = lyricLines.map(line => {
         const fontPlayer = new FontPlayer({
           lyric: line.text,
-          className: this.className,
+          lineClassName: this.lineClassName,
+          fontClassName: this.fontClassName,
           lineModeClassName: this.lineModeClassName,
           shadowClassName: this.shadowClassName,
           shadowContent: this.shadowContent,
@@ -109,14 +112,15 @@ module.exports = class Lyric {
         return {
           text: line.text,
           time: line.time,
-          dom_line: fontPlayer.fontContent,
+          dom_line: fontPlayer.lineContent,
         }
       })
     } else {
       this._lines = lyricLines.map(line => {
         const fontPlayer = new FontPlayer({
           lyric: line.text,
-          className: this.className,
+          lineClassName: this.lineClassName,
+          fontClassName: this.fontClassName,
           shadowClassName: this.shadowClassName,
           shadowContent: this.shadowContent,
         })
@@ -125,7 +129,7 @@ module.exports = class Lyric {
         return {
           text: line.text.replace(fontTimeExp, ''),
           time: line.time,
-          dom_line: fontPlayer.fontContent,
+          dom_line: fontPlayer.lineContent,
         }
       })
     }