diff --git a/src/renderer-lyric/components/core/Lyric.vue b/src/renderer-lyric/components/core/Lyric.vue index db2e36b6..d3dd6a82 100644 --- a/src/renderer-lyric/components/core/Lyric.vue +++ b/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; diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue index f2b7189e..af89eee6 100644 --- a/src/renderer/components/core/Player.vue +++ b/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) => { diff --git a/src/renderer/utils/lyric-font-player/font-player.js b/src/renderer/utils/lyric-font-player/font-player.js index d0b764bc..6ca40a97 100644 --- a/src/renderer/utils/lyric-font-player/font-player.js +++ b/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() } diff --git a/src/renderer/utils/lyric-font-player/index.js b/src/renderer/utils/lyric-font-player/index.js index 55e2b95b..c19e8575 100644 --- a/src/renderer/utils/lyric-font-player/index.js +++ b/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, } }) }