feat: 云盘歌曲显示内嵌歌词 (#2419)

Author: Cinvin

src/api/track.js

@@ -94,6 +94,39 @@ export function getLyric(id) {
   });
 }
 
+/**
+ * 获取云盘歌曲内嵌歌词 * 说明 : 调用此接口 , 传入音乐 id 可获得云盘歌曲的内嵌歌词
+ * @param {number} songId - 音乐 id
+ * @param {number} userId - 用户 id
+ */
+export function getCloudLyric(songId, userId) {
+  const fetchLatest = () => {
+    return request({
+      url: '/api',
+      method: 'get',
+      params: {
+        uri: `/api/cloud/lyric/get`,
+        data: {
+          songId,
+          userId,
+          lv: '-1',
+          kv: '-1',
+        },
+        crypto: 'eapi',
+      },
+    }).then(result => {
+      cacheLyric(songId, result);
+      return result;
+    });
+  };
+
+  fetchLatest();
+
+  return getLyricFromCache(songId).then(result => {
+    return result ?? fetchLatest();
+  });
+}
+
 /**
  * 新歌速递
  * 说明 : 调用此接口 , 可获取新歌速递

src/ncmModDef.js

@@ -614,4 +614,9 @@ module.exports = [
     route: '/activate/init/profile',
     module: require('@neteaseapireborn/api/module/activate_init_profile'),
   },
+  {
+    identifier: 'api',
+    route: '/api',
+    module: require('@neteaseapireborn/api/module/api'),
+  },
 ];

src/utils/lyrics.js

@@ -25,7 +25,7 @@ const extractTimestampRegex =
  * @returns {ParsedLyric[]} The parsed lyric.
  * @example parseLyric("[00:00.00] Hello, World!\n[00:00.10] Test\n");
  */
-function parseLyric(lrc) {
+export function parseLyric(lrc) {
   /**
    * A sorted list of parsed lyric and its timestamp.
    *

src/views/lyrics.vue

@@ -306,8 +306,8 @@ import { mapState, mapMutations, mapActions } from 'vuex';
 import VueSlider from 'vue-slider-component';
 import ContextMenu from '@/components/ContextMenu.vue';
 import { formatTrackTime } from '@/utils/common';
-import { getLyric } from '@/api/track';
-import { lyricParser, copyLyric } from '@/utils/lyrics';
+import { getLyric, getCloudLyric } from '@/api/track';
+import { lyricParser, copyLyric, parseLyric } from '@/utils/lyrics';
 import ButtonIcon from '@/components/ButtonIcon.vue';
 import * as Vibrant from 'node-vibrant/dist/vibrant.worker.min.js';
 import Color from 'color';
@@ -544,6 +544,23 @@ export default {
     },
     getLyric() {
       if (!this.currentTrack.id) return;
+      if (
+        this.currentTrack.pc !== null &&
+        this.currentTrack.cd === null &&
+        this.$store.state.data.user?.userId
+      ) {
+        //云盘未设置关联的歌曲获取其内置歌词
+        return getCloudLyric(
+          this.currentTrack.id,
+          this.$store.state.data.user?.userId
+        ).then(data => {
+          this.tlyric = [];
+          this.romalyric = [];
+          this.lyric = data?.lrc?.length > 0 ? parseLyric(data.lrc) : [];
+          this.lyricType = 'translation';
+          return true;
+        });
+      }
       return getLyric(this.currentTrack.id).then(data => {
         if (!data?.lrc?.lyric) {
           this.lyric = [];
@@ -708,6 +725,7 @@ export default {
   position: absolute;
   height: 100vh;
   width: 100vw;
+
   .top-right,
   .bottom-left {
     z-index: 0;
@@ -740,6 +758,7 @@ export default {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -814,6 +833,7 @@ export default {
           margin: 0 10px;
           display: flex;
           align-items: center;
+
           .volume-bar {
             width: 84px;
           }
@@ -895,6 +915,7 @@ export default {
           width: 22px;
         }
       }
+
       .lyric-switch-icon {
         color: var(--color-text);
         font-size: 14px;
@@ -990,6 +1011,7 @@ export default {
 
     .highlight div.content {
       transform: scale(1);
+
       span {
         opacity: 0.98;
         display: inline-block;
@@ -1054,6 +1076,7 @@ export default {
   .left-side {
     display: none;
   }
+
   .right-side .lyrics-container {
     max-width: 100%;
   }
@@ -1070,7 +1093,10 @@ export default {
   transition: all 0.4s;
 }
 
-.slide-up-enter, .slide-up-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.slide-up-enter,
+.slide-up-leave-to
+
+/* .fade-leave-active below version 2.1.8 */ {
   transform: translateY(100%);
 }