完善歌词

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

@@ -20,11 +20,13 @@ const createAnimation = (dom, duration) => new window.Animation(new window.Keyfr
 // https://jsfiddle.net/ceqpnbky/1/
 
 module.exports = class FontPlayer {
-  constructor({ lyric = '', lineClassName = '', fontClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
+  constructor({ lyric = '', translationLyric = '', lineClassName = '', fontClassName = '', translationClassName = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
     this.lyric = lyric
+    this.translationLyric = translationLyric
 
     this.lineClassName = lineClassName
     this.fontClassName = fontClassName
+    this.translationClassName = translationClassName
     this.lineModeClassName = lineModeClassName
     this.shadowContent = shadowContent
     this.shadowClassName = shadowClassName
@@ -49,17 +51,33 @@ 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;display:inline-block;'
     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.lineContent.appendChild(this.fontShadowContent)
+      this.fontContent.appendChild(this.fontShadowContent)
     }
     this.lineContent.appendChild(this.fontContent)
+    if (this.translationLyric) {
+      this.translationContent = document.createElement('div')
+      this.translationContent.style = 'position:relative;display:inline-block;'
+      this.translationContent.className = this.translationClassName
+      this.translationContent.textContent = this.translationLyric
+      this.lineContent.appendChild(document.createElement('br'))
+      this.lineContent.appendChild(this.translationContent)
+
+      if (this.shadowContent) {
+        this.translationShadowContent = document.createElement('div')
+        this.translationShadowContent.style = 'position:absolute;top:0;left:0;width:100%;z-index:-1;'
+        this.translationShadowContent.className = this.shadowClassName
+        this.translationShadowContent.textContent = this.translationLyric
+        this.translationContent.appendChild(this.translationShadowContent)
+      }
+    }
     this._parseLyric()
   }
 

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

@@ -6,9 +6,11 @@ const fontTimeExp = /<(\d+),(\d+)>/g
 module.exports = class Lyric {
   constructor({
     lyric = '',
+    translationLyric = '',
     offset = 150,
     lineClassName = '',
     fontClassName = 'font',
+    translationClassName = 'translation',
     activeLineClassName = 'active',
     lineModeClassName = 'line',
     shadowClassName = '',
@@ -17,12 +19,14 @@ module.exports = class Lyric {
     onSetLyric = function() { },
   }) {
     this.lyric = lyric
+    this.translationLyric = translationLyric
     this.offset = offset
     this.onPlay = onPlay
     this.onSetLyric = onSetLyric
 
     this.lineClassName = lineClassName
     this.fontClassName = fontClassName
+    this.translationClassName = translationClassName
     this.activeLineClassName = activeLineClassName
     this.lineModeClassName = lineModeClassName
     this.shadowClassName = shadowClassName
@@ -37,10 +41,11 @@ module.exports = class Lyric {
     this.isLineMode = false
 
     if (this.linePlayer) {
-      this.linePlayer.setLyric(this.lyric)
+      this.linePlayer.setLyric(this.lyric, this.translationLyric)
     } else {
       this.linePlayer = new LinePlayer({
         lyric: this.lyric,
+        translationLyric: this.translationLyric,
         offset: this.offset,
         onPlay: this._handleLinePlayerOnPlay,
         onSetLyric: this._handleLinePlayerOnSetLyric,
@@ -93,6 +98,7 @@ module.exports = class Lyric {
   }
 
   _handleLinePlayerOnSetLyric = lyricLines => {
+    // console.log(lyricLines)
     // this._lines = lyricsLines
     this.isLineMode = lyricLines.length && !/^<\d+,\d+>/.test(lyricLines[0].text)
 
@@ -101,8 +107,10 @@ module.exports = class Lyric {
       this._lines = lyricLines.map(line => {
         const fontPlayer = new FontPlayer({
           lyric: line.text,
+          translationLyric: line.translation,
           lineClassName: this.lineClassName,
           fontClassName: this.fontClassName,
+          translationClassName: this.translationClassName,
           lineModeClassName: this.lineModeClassName,
           shadowClassName: this.shadowClassName,
           shadowContent: this.shadowContent,
@@ -119,8 +127,10 @@ module.exports = class Lyric {
       this._lines = lyricLines.map(line => {
         const fontPlayer = new FontPlayer({
           lyric: line.text,
+          translationLyric: line.translation,
           lineClassName: this.lineClassName,
           fontClassName: this.fontClassName,
+          translationClassName: this.translationClassName,
           shadowClassName: this.shadowClassName,
           shadowContent: this.shadowContent,
         })
@@ -148,8 +158,9 @@ module.exports = class Lyric {
     if (this.playingLineNum > -1) this._lineFonts[this.playingLineNum].pause()
   }
 
-  setLyric(lyric) {
+  setLyric(lyric, translationLyric) {
     this.lyric = lyric
+    this.translationLyric = translationLyric
     this._init()
   }
 }

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

@@ -12,10 +12,12 @@ const tagRegMap = {
 const timeoutTools = new TimeoutTools()
 
 module.exports = class LinePlayer {
-  constructor({ lyric = '', offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) {
+  constructor({ lyric = '', translationLyric = '', offset = 0, onPlay = function() { }, onSetLyric = function() { } } = {}) {
     this.lyric = lyric
+    this.translationLyric = translationLyric
     this.tags = {}
     this.lines = null
+    this.translationLines = null
     this.onPlay = onPlay
     this.onSetLyric = onSetLyric
     this.isPlay = false
@@ -30,6 +32,7 @@ module.exports = class LinePlayer {
 
   _init() {
     if (this.lyric == null) this.lyric = ''
+    if (this.translationLyric == null) this.translationLyric = ''
     this._initTag()
     this._initLines()
     this.onSetLyric(this.lines)
@@ -44,26 +47,45 @@ module.exports = class LinePlayer {
 
   _initLines() {
     this.lines = []
+    this.translationLines = []
     const lines = this.lyric.split('\n')
+    const linesMap = {}
+    // const translationLines = this.translationLyric.split('\n')
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i].trim()
       let result = timeExp.exec(line)
       if (result) {
         const text = line.replace(timeExp, '').trim()
         if (text) {
-          const timeArr = RegExp.$1.split(':')
+          const timeStr = RegExp.$1
+          const timeArr = timeStr.split(':')
           if (timeArr.length < 3) timeArr.unshift(0)
           if (timeArr[2].indexOf('.') > -1) {
             timeArr.push(...timeArr[2].split('.'))
             timeArr.splice(2, 1)
           }
-          this.lines.push({
+          linesMap[timeStr] = {
             time: parseInt(timeArr[0]) * 60 * 60 * 1000 + parseInt(timeArr[1]) * 60 * 1000 + parseInt(timeArr[2]) * 1000 + parseInt(timeArr[3] || 0),
             text,
-          })
+          }
         }
       }
     }
+
+    const translationLines = this.translationLyric.split('\n')
+    for (let i = 0; i < translationLines.length; i++) {
+      const line = translationLines[i].trim()
+      let result = timeExp.exec(line)
+      if (result) {
+        const text = line.replace(timeExp, '').trim()
+        if (text) {
+          const timeStr = RegExp.$1
+          const targetLine = linesMap[timeStr]
+          if (targetLine) targetLine.translation = text
+        }
+      }
+    }
+    this.lines = Object.values(linesMap)
     this.lines.sort((a, b) => {
       return a.time - b.time
     })
@@ -145,9 +167,11 @@ module.exports = class LinePlayer {
     }
   }
 
-  setLyric(lyric) {
+  setLyric(lyric, translationLyric) {
+    console.log(translationLyric)
     if (this.isPlay) this.pause()
     this.lyric = lyric
+    this.translationLyric = translationLyric
     this._init()
   }
 }