Merge pull request #1025 from MoYingJi/pr/up-amll

chore(deps): 升级 AMLL 有关的依赖

Author: imsyy

package.json

@@ -39,8 +39,8 @@
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
-    "@applemusic-like-lyrics/core": "^0.2.0",
-    "@applemusic-like-lyrics/lyric": "^0.3.0",
+    "@applemusic-like-lyrics/core": "^0.3.2",
+    "@applemusic-like-lyrics/lyric": "^0.4.1",
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
     "@imsyy/color-utils": "^1.0.2",

pnpm-lock.yaml

@@ -118,15 +118,6 @@ const props = defineProps({
     type: Number,
     default: 0.5,
   },
-  /**
-   * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
-   *
-   * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
-   */
-  linePosXSpringParams: {
-    type: Object as PropType<Partial<spring.SpringParams>>,
-    required: false,
-  },
   /**
    * 设置所有歌词行在​纵坐标上的弹簧属性，包括重量、弹力和阻力。
    *
@@ -177,6 +168,30 @@ export interface LyricPlayerRef {
    * 将歌词播放实例的元素包裹起来的 DIV 元素实例
    */
   wrapperEl: Readonly<ShallowRef<HTMLDivElement | null>>;
+  /**
+   * 设置当前播放进度
+   */
+  setCurrentTime: (time: number, isSeek?: boolean) => void;
+  /**
+   * 获取当前 Player 内部使用的歌词行元素
+   */
+  get currentLyricLineObjects(): LyricLineObject[] | undefined;
+}
+
+/**
+ * DomLyricPlayer 内部使用的歌词行元素（被称为 LyricLineEl）
+ *
+ * 用来进行一些神秘的 Hook（如根据歌词行内容设置语言属性）
+ */
+interface LyricLineObject {
+  /**
+   * 歌词行
+   */
+  lyricLine: LyricLine;
+  /**
+   * 歌词行的 HTML 元素
+   */
+  element: HTMLElement;
 }
 
 // 模板引用
@@ -284,55 +299,13 @@ watchEffect(() => {
 });
 
 // 当前播放时间
-watch(
-  () => props.currentTime,
-  (time, oldTime) => {
-    if (time === undefined) return;
-    const isSeek = oldTime !== undefined && Math.abs(time - oldTime) > 1000;
-
-    if (isSeek) {
-      // 针对 v0.2.0 版本的临时修复：手动处理跳转逻辑
-      // 因为 npm 版本的 Core 存在 seek 逻辑缺失，这里手动重置滚动状态
-      const player = playerRef.value as any;
-      if (player) {
-        player.setCurrentTime(time, true);
-
-        // 强制重置缓冲行和滚动位置
-        if (player.bufferedLines && player.hotLines && player.processedLines) {
-          player.bufferedLines.clear();
-          for (const v of player.hotLines) {
-            player.bufferedLines.add(v);
-          }
-
-          if (player.bufferedLines.size > 0) {
-            player.scrollToIndex = Math.min(...player.bufferedLines);
-          } else {
-            const foundIndex = player.processedLines.findIndex(
-              (line: any) => line.startTime >= time,
-            );
-            player.scrollToIndex = foundIndex === -1 ? player.processedLines.length : foundIndex;
-          }
-
-          player.resetScroll?.();
-          player.calcLayout?.();
-        }
-      }
-    } else {
-      playerRef.value?.setCurrentTime(time, false);
-    }
-  },
-  { immediate: true },
-);
-
-// 渐变宽度
 watchEffect(() => {
-  if (props.wordFadeWidth !== undefined) playerRef.value?.setWordFadeWidth(props.wordFadeWidth);
+  if (props.currentTime !== undefined) playerRef.value?.setCurrentTime(props.currentTime);
 });
 
-// X 轴弹簧参数
+// 渐变宽度
 watchEffect(() => {
-  if (props.linePosXSpringParams !== undefined)
-    playerRef.value?.setLinePosXSpringParams(props.linePosXSpringParams);
+  if (props.wordFadeWidth !== undefined) playerRef.value?.setWordFadeWidth(props.wordFadeWidth);
 });
 
 // Y 轴弹簧参数
@@ -351,6 +324,13 @@ watchEffect(() => {
 defineExpose<LyricPlayerRef>({
   lyricPlayer: playerRef,
   wrapperEl: wrapperRef,
+
+  setCurrentTime: (time: number, isSeek?: boolean) => {
+    playerRef.value?.setCurrentTime(time, isSeek);
+  },
+  get currentLyricLineObjects() {
+    return playerRef.value?.currentLyricLineObjects as LyricLineObject[] | undefined;
+  },
 });
 </script>
 

src/components/AMLL/LyricPlayer.vue

@@ -56,6 +56,7 @@
 
 <script setup lang="ts">
 import { LyricLineMouseEvent, type LyricLine } from "@applemusic-like-lyrics/core";
+import { type LyricPlayerRef } from "@/components/AMLL/LyricPlayer.vue";
 import { useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import { getLyricLanguage } from "@/utils/format";
 import { usePlayerController } from "@/core/player/PlayerController";
@@ -75,7 +76,7 @@ const statusStore = useStatusStore();
 const settingStore = useSettingStore();
 const player = usePlayerController();
 
-const lyricPlayerRef = ref<any | null>(null);
+const lyricPlayerRef = ref<LyricPlayerRef | null>(null);
 
 // 当前歌词
 const amLyricsData = computed(() => {
@@ -94,7 +95,7 @@ const amLyricsData = computed(() => {
     // 处理显隐
     if (!showTran) line.translatedLyric = "";
     if (!showRoma) line.romanLyric = "";
-    if (!showWordsRoma) line.words?.forEach((word) => (word.romanWord = ""));
+    if (!showWordsRoma) line.words?.forEach((word) => delete word.romanWord);
     // 调换翻译与音译位置
     if (swapTranRoma) {
       const temp = line.translatedLyric;
@@ -115,29 +116,44 @@ const hasDuet = computed(() => amLyricsData.value?.some((line) => line.isDuet) ?
 // 进度跳转
 const jumpSeek = (line: LyricLineMouseEvent) => {
   const lineContent = line.line.getLine();
-  if (!lineContent?.startTime) return;
-  const time = lineContent.startTime;
+  const lyricTargetTime = lineContent?.startTime;
+  if (
+    typeof lyricTargetTime !== "number" ||
+    !Number.isFinite(lyricTargetTime) ||
+    lyricTargetTime < 0
+  ) {
+    return;
+  }
+  // 让 LyricPlayer 跳转到目标时间，第二个参数 isSeek = true 会重置滚动状态
+  lyricPlayerRef.value?.setCurrentTime(lyricTargetTime, true);
+  // 获取偏移时间，计算歌曲真实的目标时间，并跳转
   const offsetMs = statusStore.getSongOffset(musicStore.playSong?.id);
-  player.setSeek(time - offsetMs);
+  const musicTargetTime = lyricTargetTime - offsetMs;
+  player.setSeek(musicTargetTime);
   player.play();
 };
 
 // 处理歌词语言
 const processLyricLanguage = (player = lyricPlayerRef.value) => {
-  const lyricLineObjects = player?.lyricPlayer?.currentLyricLineObjects;
+  const lyricLineObjects = player?.currentLyricLineObjects;
   if (!Array.isArray(lyricLineObjects) || lyricLineObjects.length === 0) {
     return;
   }
   // 遍历歌词行
   for (let e of lyricLineObjects) {
     // 获取歌词行内容 (合并逐字歌词为一句)
-    const content = e.lyricLine.words.map((word: any) => word.word).join("");
+    const content = e.lyricLine.words.map((word) => word.word).join("");
     // 跳过空行
     if (!content) continue;
     // 获取歌词语言
     const lang = getLyricLanguage(content);
     // 为主歌词设置 lang 属性 (firstChild 获取主歌词 不为翻译和音译设置属性)
-    e.element.firstChild.setAttribute("lang", lang);
+    const lyricMainLineElement = e.element?.firstChild;
+    if (lyricMainLineElement instanceof HTMLElement) {
+      lyricMainLineElement.setAttribute("lang", lang);
+    } else {
+      console.warn("无法获取歌词行元素的主歌词部分，无法设置 lang 属性", e.element);
+    }
   }
 };
 

src/components/Player/PlayerLyric/AMLyric.vue

@@ -721,7 +721,7 @@ class LyricManager {
             word: line.words?.map((w) => w.word)?.join("") || "",
             startTime: line.startTime || 0,
             endTime: line.endTime || 0,
-            romanWord: line.words?.map((w) => w.romanWord)?.join("") || "",
+            romanWord: line.words?.map((w) => w.romanWord)?.join("") || undefined,
           },
         ],
       }));

src/core/player/LyricManager.ts

@@ -316,7 +316,8 @@ export const useStatusStore = defineStore("status", {
     },
     /**
      * 获取指定歌曲的偏移
-     * 单位：毫秒
+     * @param songId 歌曲 id
+     * @returns 歌曲的偏移量（单位：毫秒，正值为歌词提前），默认为 0
      */
     getSongOffset(songId?: number): number {
       if (!songId) return 0;
@@ -326,7 +327,7 @@ export const useStatusStore = defineStore("status", {
     /**
      * 设置指定歌曲的偏移
      * @param songId 歌曲 id
-     * @param offset 偏移量（单位：毫秒）
+     * @param offset 偏移量（单位：毫秒，正值为歌词提前）
      */
     setSongOffset(songId?: number, offset: number = 0) {
       if (!songId) return;
@@ -344,7 +345,7 @@ export const useStatusStore = defineStore("status", {
     /**
      * 调整指定歌曲的偏移（增量）
      * @param songId 歌曲 id
-     * @param delta 偏移增量（单位：毫秒，默认 500ms）
+     * @param delta 偏移增量（单位：毫秒，默认 500ms，正值为歌词提前）
      */
     incSongOffset(songId?: number, delta: number = 500) {
       if (!songId) return;

src/stores/status.ts

@@ -1,4 +1,4 @@
-import type { LyricLine } from "@applemusic-like-lyrics/lyric";
+import type { LyricLine, LyricWord } from "@applemusic-like-lyrics/lyric";
 import { cloneDeep } from "lodash-es";
 import { parseLrc } from "./parseLrc";
 import { extractLyricContent } from "./parseQrc";
@@ -15,9 +15,6 @@ export enum LrcFormat {
   Enhanced = "enhanced",
 }
 
-/** LyricWord 类型 */
-type LyricWord = { word: string; startTime: number; endTime: number; romanWord: string };
-
 // 预编译正则表达式
 const META_TAG_REGEX = /^\[[a-z]+:/i;
 const TIME_TAG_REGEX = /\[(\d{2}):(\d{2})\.(\d{1,})\]/g;
@@ -52,7 +49,6 @@ const createWord = (word: string, startTime: number, endTime: number = startTime
   word,
   startTime,
   endTime,
-  romanWord: "",
 });
 
 /**
@@ -465,10 +461,7 @@ export const parseQRCLyric = (qrcContent: string, trans?: string, roma?: string)
   const qrcLines = parseQRCContent(qrcContent);
   let result: LyricLine[] = qrcLines.map((qrcLine) => {
     return {
-      words: qrcLine.words.map((word) => ({
-        ...word,
-        romanWord: "",
-      })),
+      words: qrcLine.words,
       startTime: qrcLine.startTime,
       endTime: qrcLine.endTime,
       translatedLyric: "",
@@ -502,7 +495,6 @@ export const parseQRCLyric = (qrcContent: string, trans?: string, roma?: string)
               startTime: line.startTime,
               endTime: line.endTime,
               word: line.words.map((w) => w.word).join(""),
-              romanWord: "",
             },
           ],
           startTime: line.startTime,

src/utils/lyric/lyricParser.ts

@@ -117,5 +117,4 @@ const newLyricWord = (): LyricWord => ({
   startTime: 0,
   endTime: 0,
   word: "",
-  romanWord: "",
 });

src/utils/lyric/parseLrc.ts

@@ -88,7 +88,6 @@ const createWord = (word: string, startTime: number, endTime: number): LyricWord
   word,
   startTime,
   endTime,
-  romanWord: "",
 });
 
 /**