修改桌面歌词为逐字播放

src/renderer/components/core/Player.vue

@@ -215,8 +215,9 @@ export default {
             singer: this.musicInfo.singer,
             name: this.musicInfo.name,
             album: this.musicInfo.album,
-            lyric: this.musicInfo.lrc,
-            tlyric: this.musicInfo.tlrc,
+            lrc: this.musicInfo.lrc,
+            tlrc: this.musicInfo.tlrc,
+            lxlrc: this.musicInfo.lxlrc,
             isPlay: this.isPlay,
             line: this.lyric.line,
             played_time: audio.currentTime * 1000,
@@ -648,7 +649,7 @@ export default {
       }).catch(() => {
         this.status = this.statusText = this.$t('core.player.lyric_error')
       }).finally(() => {
-        this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc })
+        this.handleUpdateWinLyricInfo('lyric', { lrc: this.musicInfo.lrc, tlrc: this.musicInfo.tlrc, lxlrc: this.musicInfo.lxlrc })
         this.setLyric()
       })
     },

src/renderer/components/core/PlayerDetail.vue

@@ -579,16 +579,26 @@ export default {
   overflow: hidden;
   font-size: 16px;
   cursor: grab;
+  color: @color-theme_2-font;
   &.draging {
     cursor: grabbing;
   }
   :global {
     .lrc-content {
       line-height: 1.2;
-      padding: 8px 0;
+      margin: 16px 0;
       overflow-wrap: break-word;
 
+      .line {
+        transition-property: font-size, color !important;
+        background: none !important;
+        -webkit-text-fill-color: unset;
+        // -webkit-text-fill-color: none !important;
+      }
       &.active {
+        .line {
+          color: @color-theme;
+        }
         span {
           // color: @color-theme;
           font-size: 1.2em;
@@ -597,7 +607,7 @@ export default {
 
       span {
         transition: @transition-theme !important;
-        transition-property: font-size;
+        transition-property: font-size !important;
         font-size: 1em;
         background-repeat: no-repeat;
         background-color: rgba(77, 77, 77, 0.9);
@@ -810,11 +820,18 @@ each(@themes, {
       box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
       // border-color: ~'@{color-@{value}-theme-hover}';
     }
-    :global {
-      .lrc-content {
-        span {
-          // background-color: ~'@{color-@{value}-theme_2-font}';
-          background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-theme}', ~'@{color-@{value}-theme}');
+    .lyric {
+      :global {
+        .lrc-content {
+          &.active {
+            .line {
+              color: ~'@{color-@{value}-theme}';
+            }
+          }
+          span {
+            // background-color: ~'@{color-@{value}-theme_2-font}';
+            background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-theme}', ~'@{color-@{value}-theme}');
+          }
         }
       }
     }

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 = '', shadowContent = false, shadowClassName = '' }) {
+  constructor({ lyric = '', className = '', lineModeClassName = '', shadowContent = false, shadowClassName = '' }) {
     this.lyric = lyric
 
     this.className = className
+    this.lineModeClassName = lineModeClassName
     this.shadowContent = shadowContent
     this.shadowClassName = shadowClassName
 
@@ -100,6 +101,7 @@ module.exports = class FontPlayer {
     this.isLineMode = true
     const dom = document.createElement('span')
     let shadowDom
+    dom.classList.add(this.lineModeClassName)
     dom.textContent = this.lyric
     if (this.shadowContent) {
       shadowDom = document.createElement('span')

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

@@ -9,6 +9,7 @@ module.exports = class Lyric {
     offset = 150,
     className = '',
     activeLineClassName = 'active',
+    lineModeClassName = 'line',
     shadowClassName = '',
     shadowContent = false,
     onPlay = function() { },
@@ -21,6 +22,7 @@ module.exports = class Lyric {
 
     this.className = className
     this.activeLineClassName = activeLineClassName
+    this.lineModeClassName = lineModeClassName
     this.shadowClassName = shadowClassName
     this.shadowContent = shadowContent
 
@@ -98,6 +100,7 @@ module.exports = class Lyric {
         const fontPlayer = new FontPlayer({
           lyric: line.text,
           className: this.className,
+          lineModeClassName: this.lineModeClassName,
           shadowClassName: this.shadowClassName,
           shadowContent: this.shadowContent,
         })