@applemusic-like-lyrics/core 0.0.8 → 0.0.11

package/dist/amll-core.mjs

@@ -1,60 +1,60 @@
-import { Container as v } from "@pixi/display";
+import { Container as C } from "@pixi/display";
 import { Application as M } from "@pixi/app";
 import { BlurFilter as y } from "@pixi/filter-blur";
 import { ColorMatrixFilter as E } from "@pixi/filter-color-matrix";
-import { Texture as C } from "@pixi/core";
-import { Sprite as L } from "@pixi/sprite";
-import { create as z } from "jss";
+import { Texture as z } from "@pixi/core";
+import { Sprite as w } from "@pixi/sprite";
+import { create as D } from "jss";
 import A from "jss-preset-default";
-const D = /^(((?<hour>[0-9]+):)?(?<min>[0-9]+):)?(?<sec>[0-9]+([\.:]([0-9]+))?)/;
-function T(d) {
-  const e = D.exec(d);
+const I = /^(((?<hour>[0-9]+):)?(?<min>[0-9]+):)?(?<sec>[0-9]+([\.:]([0-9]+))?)/;
+function T(h) {
+  const e = I.exec(h);
   if (e) {
-    const t = Number(e.groups?.hour || "0"), i = Number(e.groups?.min || "0"), n = Number(e.groups?.sec.replace(/:/, ".") || "0");
-    return Math.floor((t * 3600 + i * 60 + n) * 1e3);
+    const t = Number(e.groups?.hour || "0"), n = Number(e.groups?.min || "0"), i = Number(e.groups?.sec.replace(/:/, ".") || "0");
+    return Math.floor((t * 3600 + n * 60 + i) * 1e3);
   } else
     throw new TypeError("时间戳字符串解析失败");
 }
-function I(d) {
+function B(h) {
   const t = new DOMParser().parseFromString(
-    d,
+    h,
     "application/xml"
   );
-  let i = "v1";
-  for (const a of t.querySelectorAll("ttm\\:agent"))
-    if (a.getAttribute("type") === "person") {
-      const s = a.getAttribute("xml:id");
-      s && (i = s);
+  let n = "v1";
+  for (const l of t.querySelectorAll("ttm\\:agent"))
+    if (l.getAttribute("type") === "person") {
+      const s = l.getAttribute("xml:id");
+      s && (n = s);
     }
-  const n = [];
-  for (const a of t.querySelectorAll("body p[begin][end]")) {
+  const i = [];
+  for (const l of t.querySelectorAll("body p[begin][end]")) {
     const s = {
       words: [],
-      startTime: T(a.getAttribute("begin") ?? "0:0"),
-      endTime: T(a.getAttribute("end") ?? "0:0"),
+      startTime: T(l.getAttribute("begin") ?? "0:0"),
+      endTime: T(l.getAttribute("end") ?? "0:0"),
       translatedLyric: "",
       romanLyric: "",
       isBG: !1,
-      isDuet: a.getAttribute("ttm:agent") !== i
+      isDuet: l.getAttribute("ttm:agent") !== n
     };
     let r = null;
-    for (const l of a.childNodes)
-      if (l.nodeType === Node.TEXT_NODE) {
-        const h = l.textContent ?? "";
-        /^(\s+)$/.test(h) ? s.words.push({
+    for (const a of l.childNodes)
+      if (a.nodeType === Node.TEXT_NODE) {
+        const o = a.textContent ?? "";
+        /^(\s+)$/.test(o) ? s.words.push({
           word: " ",
           startTime: 0,
           endTime: 0
         }) : s.words.push({
-          word: h,
+          word: o,
           startTime: 0,
           endTime: 0
         });
-      } else if (l.nodeType === Node.ELEMENT_NODE) {
-        const h = l, o = h.getAttribute("ttm:role");
-        if (h.nodeName === "span" && o)
-          if (o === "x-bg") {
-            const c = {
+      } else if (a.nodeType === Node.ELEMENT_NODE) {
+        const o = a, c = o.getAttribute("ttm:role");
+        if (o.nodeName === "span" && c)
+          if (c === "x-bg") {
+            const d = {
               words: [],
               startTime: s.startTime,
               endTime: s.endTime,
@@ -63,70 +63,70 @@ function I(d) {
               isBG: !0,
               isDuet: s.isDuet
             };
-            for (const u of h.childNodes)
-              if (u.nodeType === Node.TEXT_NODE) {
-                const f = u.textContent ?? "";
-                /^(\s+)$/.test(f) ? c.words.push({
+            for (const m of o.childNodes)
+              if (m.nodeType === Node.TEXT_NODE) {
+                const p = m.textContent ?? "";
+                /^(\s+)$/.test(p) ? d.words.push({
                   word: " ",
                   startTime: 0,
                   endTime: 0
-                }) : c.words.push({
-                  word: f,
+                }) : d.words.push({
+                  word: p,
                   startTime: 0,
                   endTime: 0
                 });
-              } else if (u.nodeType === Node.ELEMENT_NODE) {
-                const f = u, b = f.getAttribute("ttm:role");
-                if (f.nodeName === "span" && b)
-                  b === "x-translation" ? c.translatedLyric = f.innerHTML.trim() : b === "x-roman" && (c.romanLyric = f.innerHTML.trim());
-                else if (f.hasAttribute("begin") && f.hasAttribute("end")) {
-                  const x = {
-                    word: u.textContent,
-                    startTime: T(f.getAttribute("begin")),
-                    endTime: T(f.getAttribute("end"))
+              } else if (m.nodeType === Node.ELEMENT_NODE) {
+                const p = m, L = p.getAttribute("ttm:role");
+                if (p.nodeName === "span" && L)
+                  L === "x-translation" ? d.translatedLyric = p.innerHTML.trim() : L === "x-roman" && (d.romanLyric = p.innerHTML.trim());
+                else if (p.hasAttribute("begin") && p.hasAttribute("end")) {
+                  const b = {
+                    word: m.textContent,
+                    startTime: T(p.getAttribute("begin")),
+                    endTime: T(p.getAttribute("end"))
                   };
-                  c.words.push(x);
+                  d.words.push(b);
                 }
               }
-            const m = c.words[0];
-            c.startTime = m.startTime, m?.word.startsWith("(") && (m.word = m.word.substring(1));
-            const p = c.words[c.words.length - 1];
-            c.endTime = p.endTime, p?.word.endsWith(")") && (p.word = p.word.substring(
+            const u = d.words[0];
+            d.startTime = u.startTime, u?.word.startsWith("(") && (u.word = u.word.substring(1));
+            const f = d.words[d.words.length - 1];
+            d.endTime = f.endTime, f?.word.endsWith(")") && (f.word = f.word.substring(
               0,
-              p.word.length - 1
-            )), r = c;
+              f.word.length - 1
+            )), r = d;
           } else
-            o === "x-translation" ? s.translatedLyric = h.innerHTML : o === "x-roman" && (s.romanLyric = h.innerHTML);
-        else if (h.hasAttribute("begin") && h.hasAttribute("end")) {
-          const c = {
-            word: l.textContent ?? "",
-            startTime: T(h.getAttribute("begin")),
-            endTime: T(h.getAttribute("end"))
+            c === "x-translation" ? s.translatedLyric = o.innerHTML : c === "x-roman" && (s.romanLyric = o.innerHTML);
+        else if (o.hasAttribute("begin") && o.hasAttribute("end")) {
+          const d = {
+            word: a.textContent ?? "",
+            startTime: T(o.getAttribute("begin")),
+            endTime: T(o.getAttribute("end"))
           };
-          s.words.push(c);
+          s.words.push(d);
         }
       }
-    n.push(s), r && n.push(r);
+    i.push(s), r && i.push(r);
   }
-  return console.log(n), n;
+  return i;
 }
-const Q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  parseTTML: I
+  parseTTML: B
 }, Symbol.toStringTag, { value: "Module" }));
-class B extends v {
+class k extends C {
   time = 0;
 }
-class k {
+class N {
   constructor(e) {
     this.canvas = e;
     const t = e.getBoundingClientRect();
     this.canvas.width = t.width * this.currerntRenderScale, this.canvas.height = t.height * this.currerntRenderScale, this.observer = new ResizeObserver(() => {
-      const i = e.getBoundingClientRect();
-      this.canvas.width = Math.max(1, i.width), this.canvas.height = Math.max(1, i.height), this.app.renderer.resize(
+      const n = e.getBoundingClientRect();
+      this.canvas.width = Math.max(1, n.width), this.canvas.height = Math.max(1, n.height), this.app.renderer.resize(
         this.canvas.width * this.currerntRenderScale,
         this.canvas.height * this.currerntRenderScale
-      ), this.rebuildFilters();
+      ), this.app.ticker.start(), this.rebuildFilters();
     }), this.observer.observe(e), this.app = new M({
       view: e,
       resizeTo: this.canvas,
@@ -137,6 +137,7 @@ class k {
   observer;
   app;
   curContainer;
+  staticMode = !1;
   lastContainer = /* @__PURE__ */ new Set();
   onTick = (e) => {
     for (const t of this.lastContainer)
@@ -146,11 +147,11 @@ class k {
         1,
         this.curContainer.alpha + e / 60
       );
-      const [t, i, n, a] = this.curContainer.children, s = Math.max(this.app.screen.width, this.app.screen.height);
-      t.position.set(this.app.screen.width / 2, this.app.screen.height / 2), i.position.set(
+      const [t, n, i, l] = this.curContainer.children, s = Math.max(this.app.screen.width, this.app.screen.height);
+      t.position.set(this.app.screen.width / 2, this.app.screen.height / 2), n.position.set(
         this.app.screen.width / 2.5,
         this.app.screen.height / 2.5
-      ), n.position.set(this.app.screen.width / 2, this.app.screen.height / 2), a.position.set(this.app.screen.width / 2, this.app.screen.height / 2), t.width = s * Math.sqrt(2), t.height = t.width, i.width = s * 0.8, i.height = i.width, n.width = s * 0.5, n.height = n.width, a.width = s * 0.25, a.height = a.width, this.curContainer.time += e * this.flowSpeed, t.rotation += e / 1e3 * this.flowSpeed, i.rotation -= e / 500 * this.flowSpeed, n.rotation += e / 1e3 * this.flowSpeed, a.rotation -= e / 750 * this.flowSpeed, n.x = this.app.screen.width / 2 + this.app.screen.width / 4 * Math.cos(this.curContainer.time / 1e3 * 0.75), n.y = this.app.screen.height / 2 + this.app.screen.width / 4 * Math.cos(this.curContainer.time / 1e3 * 0.75), a.x = this.app.screen.width / 2 + this.app.screen.width / 4 * 0.1 + Math.cos(this.curContainer.time * 6e-3 * 0.75), a.y = this.app.screen.height / 2 + this.app.screen.width / 4 * 0.1 + Math.cos(this.curContainer.time * 6e-3 * 0.75);
+      ), i.position.set(this.app.screen.width / 2, this.app.screen.height / 2), l.position.set(this.app.screen.width / 2, this.app.screen.height / 2), t.width = s * Math.sqrt(2), t.height = t.width, n.width = s * 0.8, n.height = n.width, i.width = s * 0.5, i.height = i.width, l.width = s * 0.25, l.height = l.width, this.curContainer.time += e * this.flowSpeed, t.rotation += e / 1e3 * this.flowSpeed, n.rotation -= e / 500 * this.flowSpeed, i.rotation += e / 1e3 * this.flowSpeed, l.rotation -= e / 750 * this.flowSpeed, i.x = this.app.screen.width / 2 + this.app.screen.width / 4 * Math.cos(this.curContainer.time / 1e3 * 0.75), i.y = this.app.screen.height / 2 + this.app.screen.width / 4 * Math.cos(this.curContainer.time / 1e3 * 0.75), l.x = this.app.screen.width / 2 + this.app.screen.width / 4 * 0.1 + Math.cos(this.curContainer.time * 6e-3 * 0.75), l.y = this.app.screen.height / 2 + this.app.screen.width / 4 * 0.1 + Math.cos(this.curContainer.time * 6e-3 * 0.75), this.curContainer.alpha >= 1 && this.lastContainer.size === 0 && this.staticMode && this.app.ticker.stop();
     }
   };
   flowSpeed = 2;
@@ -179,10 +180,17 @@ class k {
   rebuildFilters() {
     const e = Math.min(this.canvas.width, this.canvas.height), t = new E();
     t.saturate(1.2, !1);
-    const i = new E();
-    i.brightness(0.6, !1);
     const n = new E();
-    n.contrast(0.3, !0), this.app.stage.filters = [], this.app.stage.filters.push(new y(5, 1)), this.app.stage.filters.push(new y(10, 1)), this.app.stage.filters.push(new y(20, 2)), this.app.stage.filters.push(new y(40, 2)), e > 512 && this.app.stage.filters.push(new y(80, 2)), e > 768 && this.app.stage.filters.push(new y(160, 4)), e > 768 * 2 && this.app.stage.filters.push(new y(320, 4)), this.app.stage.filters.push(t, i, n), this.app.stage.filters.push(new y(5, 1));
+    n.brightness(0.6, !1);
+    const i = new E();
+    i.contrast(0.3, !0), this.app.stage.filters = [], this.app.stage.filters.push(new y(5, 1)), this.app.stage.filters.push(new y(10, 1)), this.app.stage.filters.push(new y(20, 2)), this.app.stage.filters.push(new y(40, 2)), e > 512 && this.app.stage.filters.push(new y(80, 2)), e > 768 && this.app.stage.filters.push(new y(160, 4)), e > 768 * 2 && this.app.stage.filters.push(new y(320, 4)), this.app.stage.filters.push(t, n, i), this.app.stage.filters.push(new y(5, 1));
+  }
+  /**
+   * 是否启用静态模式，即图片在更换后就会保持静止状态并禁用更新，以节省性能
+   * @param enable 是否启用静态模式
+   */
+  setStaticMode(e = !1) {
+    this.staticMode = e, this.app.ticker.start();
   }
   /**
    * 修改背景动画帧率，默认是 30 FPS
@@ -210,14 +218,14 @@ class k {
    * @param albumUrl 图片的目标链接
    */
   async setAlbumImage(e) {
-    const t = await C.fromURL(e), i = new B(), n = new L(t), a = new L(t), s = new L(t), r = new L(t);
-    n.anchor.set(0.5, 0.5), a.anchor.set(0.5, 0.5), s.anchor.set(0.5, 0.5), r.anchor.set(0.5, 0.5), n.rotation = Math.random() * Math.PI * 2, a.rotation = Math.random() * Math.PI * 2, s.rotation = Math.random() * Math.PI * 2, r.rotation = Math.random() * Math.PI * 2, i.addChild(n, a, s, r), this.curContainer && this.lastContainer.add(this.curContainer), this.curContainer = i, this.app.stage.addChild(this.curContainer), this.curContainer.alpha = 0;
+    const t = await z.fromURL(e), n = new k(), i = new w(t), l = new w(t), s = new w(t), r = new w(t);
+    i.anchor.set(0.5, 0.5), l.anchor.set(0.5, 0.5), s.anchor.set(0.5, 0.5), r.anchor.set(0.5, 0.5), i.rotation = Math.random() * Math.PI * 2, l.rotation = Math.random() * Math.PI * 2, s.rotation = Math.random() * Math.PI * 2, r.rotation = Math.random() * Math.PI * 2, n.addChild(i, l, s, r), this.curContainer && this.lastContainer.add(this.curContainer), this.curContainer = n, this.app.stage.addChild(this.curContainer), this.curContainer.alpha = 0, this.app.ticker.start();
   }
   dispose() {
     this.observer.disconnect(), this.app.ticker.remove(this.onTick);
   }
 }
-class Z extends k {
+class te extends N {
   element;
   constructor() {
     const e = document.createElement("canvas");
@@ -230,13 +238,140 @@ class Z extends k {
     super.dispose(), this.element.remove();
   }
 }
-const N = (d, e) => d.size === e.size && [...d].every((t) => e.has(t));
-function O(d) {
+const O = (h, e) => h.size === e.size && [...h].every((t) => e.has(t));
+class S {
+  currentPosition = 0;
+  targetPosition = 0;
+  currentTime = 0;
+  params = {};
+  currentSolver;
+  getV;
+  queueParams;
+  queuePosition;
+  constructor(e = 0) {
+    this.targetPosition = e, this.currentPosition = this.targetPosition, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
+  }
+  resetSolver() {
+    const e = this.getV(this.currentTime);
+    this.currentTime = 0, this.currentSolver = $(
+      this.currentPosition,
+      e,
+      this.targetPosition,
+      0,
+      this.params
+    ), this.getV = q(this.currentSolver);
+  }
+  arrived() {
+    return Math.abs(this.targetPosition - this.currentPosition) < 0.01 && this.getV(this.currentTime) < 0.01 && this.queueParams === void 0 && this.queuePosition === void 0;
+  }
+  setPosition(e) {
+    this.targetPosition = e, this.currentPosition = e, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
+  }
+  update(e = 0) {
+    this.currentTime += e, this.currentPosition = this.currentSolver(this.currentTime), this.queueParams && (this.queueParams.time -= e, this.queueParams.time <= 0 && this.updateParams({
+      ...this.queueParams
+    })), this.queuePosition && (this.queuePosition.time -= e, this.queuePosition.time <= 0 && this.setTargetPosition(this.queuePosition.position)), this.arrived() && this.setPosition(this.targetPosition);
+  }
+  updateParams(e, t = 0) {
+    t > 0 ? this.queueParams = {
+      ...e,
+      time: t
+    } : (this.params = {
+      ...this.params,
+      ...e
+    }, this.resetSolver());
+  }
+  setTargetPosition(e, t = 0) {
+    t > 0 ? this.queuePosition = {
+      position: e,
+      time: t
+    } : (this.queuePosition = void 0, this.targetPosition = e, this.resetSolver());
+  }
+  getCurrentPosition() {
+    return this.currentPosition;
+  }
+}
+function $(h, e, t, n = 0, i) {
+  const l = i?.soft ?? !1, s = i?.stiffness ?? 100, r = i?.damping ?? 10, a = i?.mass ?? 1, o = t - h;
+  if (l || 1 <= r / (2 * Math.sqrt(s * a))) {
+    const c = -Math.sqrt(s / a), d = -c * o - e;
+    return (u) => (u -= n, u < 0 ? h : t - (o + u * d) * Math.E ** (u * c));
+  } else {
+    const c = Math.sqrt(
+      4 * a * s - r ** 2
+    ), d = (r * o - 2 * a * e) / c, u = 0.5 * c / a, f = -(0.5 * r) / a;
+    return (m) => (m -= n, m < 0 ? h : t - (Math.cos(m * u) * o + Math.sin(m * u) * d) * Math.E ** (m * f));
+  }
+}
+function _(h) {
+  return (t) => (h(t + 1e-3) - h(t - 1e-3)) / (2 * 1e-3);
+}
+function q(h) {
+  return _(h);
+}
+class F {
+  constructor(e) {
+    this.lyricPlayer = e, this.element.setAttribute(
+      "class",
+      this.lyricPlayer.style.classes.lyricLine
+    ), this.rebuildStyle();
+  }
+  element = document.createElement("div");
+  left = 0;
+  top = 0;
+  delay = 0;
+  // 由 LyricPlayer 来设置
+  lineSize = [0, 0];
+  lineTransforms = {
+    posX: new S(0),
+    posY: new S(0)
+  };
+  measureSize() {
+    return [
+      this.element.clientWidth,
+      this.element.clientHeight
+    ];
+  }
+  lastStyle = "";
+  show() {
+    this.rebuildStyle();
+  }
+  hide() {
+    this.rebuildStyle();
+  }
+  rebuildStyle() {
+    let e = `transform:translate(${this.lineTransforms.posX.getCurrentPosition()}px,${this.lineTransforms.posY.getCurrentPosition()}px);`;
+    !this.lyricPlayer.getEnableSpring() && this.isInSight && (e += `transition-delay:${this.delay}ms;`), e !== this.lastStyle && (this.lastStyle = e, this.element.setAttribute("style", e));
+  }
+  getElement() {
+    return this.element;
+  }
+  setTransform(e = this.left, t = this.top, n = !1, i = 0) {
+    this.left = e, this.top = t, this.delay = i * 1e3 | 0, n || !this.lyricPlayer.getEnableSpring() ? (n && this.element.classList.add(
+      this.lyricPlayer.style.classes.tmpDisableTransition
+    ), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lyricPlayer.getEnableSpring() ? this.rebuildStyle() : this.show(), n && requestAnimationFrame(() => {
+      this.element.classList.remove(
+        this.lyricPlayer.style.classes.tmpDisableTransition
+      );
+    })) : (this.lineTransforms.posX.setTargetPosition(e, i), this.lineTransforms.posY.setTargetPosition(t, i));
+  }
+  update(e = 0) {
+    this.lyricPlayer.getEnableSpring() && (this.lineTransforms.posX.update(e), this.lineTransforms.posY.update(e), this.isInSight ? this.show() : this.hide());
+  }
+  get isInSight() {
+    const e = this.lineTransforms.posX.getCurrentPosition(), t = this.lineTransforms.posY.getCurrentPosition(), n = e + this.lineSize[0], i = t + this.lineSize[1], l = this.lyricPlayer.pos[0], s = this.lyricPlayer.pos[1], r = this.lyricPlayer.pos[0] + this.lyricPlayer.size[0], a = this.lyricPlayer.pos[1] + this.lyricPlayer.size[1];
+    return !(e > r || t > a || n < l || i < s);
+  }
+  dispose() {
+    this.element.remove();
+  }
+}
+function X(h) {
   const t = 2.5949095;
-  return d < 0.5 ? Math.pow(2 * d, 2) * ((t + 1) * 2 * d - t) / 2 : (Math.pow(2 * d - 2, 2) * ((t + 1) * (d * 2 - 2) + t) + 2) / 2;
+  return h < 0.5 ? Math.pow(2 * h, 2) * ((t + 1) * 2 * h - t) / 2 : (Math.pow(2 * h - 2, 2) * ((t + 1) * (h * 2 - 2) + t) + 2) / 2;
 }
-const g = (d, e, t) => Math.max(d, Math.min(e, t));
-class $ {
+const g = (h, e, t) => Math.max(h, Math.min(e, t));
+class R {
   constructor(e) {
     this.lyricPlayer = e, this.element.className = this.lyricPlayer.style.classes.interludeDots, this.element.appendChild(this.dot0), this.element.appendChild(this.dot1), this.element.appendChild(this.dot2);
   }
@@ -264,41 +399,41 @@ class $ {
     this.currentTime += e;
     let t = "";
     if (t += `transform:translate(${this.left}px, ${this.top}px)`, this.currentInterlude) {
-      const i = this.currentInterlude[1] - this.currentInterlude[0], n = this.currentTime - this.currentInterlude[0];
-      if (n <= i) {
-        const a = i / Math.ceil(i / this.targetBreatheDuration);
+      const n = this.currentInterlude[1] - this.currentInterlude[0], i = this.currentTime - this.currentInterlude[0];
+      if (i <= n) {
+        const l = n / Math.ceil(n / this.targetBreatheDuration);
         let s = 1, r = 1;
-        s *= Math.sin(1.5 * Math.PI - n / a * 2) / 10 + 1, n < 1e3 && (s *= 1 - Math.pow((1e3 - n) / 1e3, 2)), n < 500 ? r = 0 : n < 1e3 && (r *= (n - 500) / 500), i - n < 750 && (s *= 1 - O(
-          (750 - (i - n)) / 750 / 2
-        )), i - n < 375 && (r *= g(
+        s *= Math.sin(1.5 * Math.PI - i / l * 2) / 10 + 1, i < 1e3 && (s *= 1 - Math.pow((1e3 - i) / 1e3, 2)), i < 500 ? r = 0 : i < 1e3 && (r *= (i - 500) / 500), n - i < 750 && (s *= 1 - X(
+          (750 - (n - i)) / 750 / 2
+        )), n - i < 375 && (r *= g(
           0,
-          (i - n) / 375,
+          (n - i) / 375,
           1
         )), s = Math.max(0, s), t += ` scale(${s})`;
-        const l = g(
+        const a = g(
           0.25,
-          n * 3 / i * 0.75,
+          i * 3 / n * 0.75,
           1
-        ), h = g(
+        ), o = g(
           0.25,
-          (n - i / 3) * 3 / i * 0.75,
+          (i - n / 3) * 3 / n * 0.75,
           1
-        ), o = g(
+        ), c = g(
           0.25,
-          (n - i / 3 * 2) * 3 / i * 0.75,
+          (i - n / 3 * 2) * 3 / n * 0.75,
           1
         );
         this.dot0.style.opacity = `${g(
           0,
-          Math.max(0, r * l),
+          Math.max(0, r * a),
           1
         )}`, this.dot1.style.opacity = `${g(
           0,
-          Math.max(0, r * h),
+          Math.max(0, r * o),
           1
         )}`, this.dot2.style.opacity = `${g(
           0,
-          Math.max(0, r * o),
+          Math.max(0, r * c),
           1
         )}`;
       } else
@@ -311,89 +446,19 @@ class $ {
     this.element.remove();
   }
 }
-class S {
-  currentPosition = 0;
-  targetPosition = 0;
-  currentTime = 0;
-  params = {};
-  currentSolver;
-  getV;
-  queueParams;
-  queuePosition;
-  constructor(e = 0) {
-    this.targetPosition = e, this.currentPosition = this.targetPosition, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
-  }
-  resetSolver() {
-    const e = this.getV(this.currentTime);
-    this.currentTime = 0, this.currentSolver = q(
-      this.currentPosition,
-      e,
-      this.targetPosition,
-      0,
-      this.params
-    ), this.getV = R(this.currentSolver);
-  }
-  arrived() {
-    return Math.abs(this.targetPosition - this.currentPosition) < 0.01 && this.getV(this.currentTime) < 0.01 && this.queueParams === void 0 && this.queuePosition === void 0;
-  }
-  setPosition(e) {
-    this.targetPosition = e, this.currentPosition = e, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
-  }
-  update(e = 0) {
-    this.currentTime += e, this.currentPosition = this.currentSolver(this.currentTime), this.queueParams && (this.queueParams.time -= e, this.queueParams.time <= 0 && this.updateParams({
-      ...this.queueParams
-    })), this.queuePosition && (this.queuePosition.time -= e, this.queuePosition.time <= 0 && this.setTargetPosition(this.queuePosition.position)), this.arrived() && this.setPosition(this.targetPosition);
-  }
-  updateParams(e, t = 0) {
-    t > 0 ? this.queueParams = {
-      ...e,
-      time: t
-    } : (this.params = {
-      ...this.params,
-      ...e
-    }, this.resetSolver());
-  }
-  setTargetPosition(e, t = 0) {
-    t > 0 ? this.queuePosition = {
-      position: e,
-      time: t
-    } : (this.queuePosition = void 0, this.targetPosition = e, this.resetSolver());
-  }
-  getCurrentPosition() {
-    return this.currentPosition;
-  }
-}
-function q(d, e, t, i = 0, n) {
-  const a = n?.soft ?? !1, s = n?.stiffness ?? 100, r = n?.damping ?? 10, l = n?.mass ?? 1, h = t - d;
-  if (a || 1 <= r / (2 * Math.sqrt(s * l))) {
-    const o = -Math.sqrt(s / l), c = -o * h - e;
-    return (m) => (m -= i, m < 0 ? d : t - (h + m * c) * Math.E ** (m * o));
-  } else {
-    const o = Math.sqrt(
-      4 * l * s - r ** 2
-    ), c = (r * h - 2 * l * e) / o, m = 0.5 * o / l, p = -(0.5 * r) / l;
-    return (u) => (u -= i, u < 0 ? d : t - (Math.cos(u * m) * h + Math.sin(u * m) * c) * Math.E ** (u * p));
-  }
-}
-function F(d) {
-  return (t) => (d(t + 1e-3) - d(t - 1e-3)) / (2 * 1e-3);
-}
-function R(d) {
-  return F(d);
-}
-const w = /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;
-function W(d, e = "rgba(0,0,0,1)", t = "rgba(0,0,0,0.5)") {
-  const i = 2 + d, n = d / i, a = (1 - n) / 2;
+const v = /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;
+function W(h, e = "rgba(0,0,0,1)", t = "rgba(0,0,0,0.5)") {
+  const n = 2 + h, i = h / n, l = (1 - i) / 2;
   return [
-    `linear-gradient(to right,${e} ${a * 100}%,${t} ${(a + n) * 100}%)`,
-    n,
-    i
+    `linear-gradient(to right,${e} ${l * 100}%,${t} ${(l + i) * 100}%)`,
+    i,
+    n
   ];
 }
-function P(d) {
-  return d.endTime - d.startTime >= 1e3 && d.word.length <= 7;
+function x(h) {
+  return h.endTime - h.startTime >= 1e3 && h.word.length <= 7;
 }
-class _ {
+class Y {
   constructor(e, t = {
     words: [],
     translatedLyric: "",
@@ -407,8 +472,8 @@ class _ {
       "class",
       this.lyricPlayer.style.classes.lyricLine
     ), this.lyricLine.isBG && this.element.classList.add(this.lyricPlayer.style.classes.lyricBgLine), this.lyricLine.isDuet && this.element.classList.add(this.lyricPlayer.style.classes.lyricDuetLine), this.element.appendChild(document.createElement("div")), this.element.appendChild(document.createElement("div")), this.element.appendChild(document.createElement("div"));
-    const i = this.element.children[0], n = this.element.children[1], a = this.element.children[2];
-    i.setAttribute("class", this.lyricPlayer.style.classes.lyricMainLine), n.setAttribute("class", this.lyricPlayer.style.classes.lyricSubLine), a.setAttribute("class", this.lyricPlayer.style.classes.lyricSubLine), this.rebuildElement(), this.rebuildStyle();
+    const n = this.element.children[0], i = this.element.children[1], l = this.element.children[2];
+    n.setAttribute("class", this.lyricPlayer.style.classes.lyricMainLine), i.setAttribute("class", this.lyricPlayer.style.classes.lyricSubLine), l.setAttribute("class", this.lyricPlayer.style.classes.lyricSubLine), this.rebuildElement(), this.rebuildStyle();
   }
   element = document.createElement("div");
   left = 0;
@@ -429,8 +494,8 @@ class _ {
     this.isEnabled = !0, this.element.classList.add("active");
     const e = this.element.children[0];
     this.splittedWords.forEach((t) => {
-      t.elementAnimations.forEach((i) => {
-        i.currentTime = 0, i.playbackRate = 1, i.play();
+      t.elementAnimations.forEach((n) => {
+        n.currentTime = 0, n.playbackRate = 1, n.play();
       });
     }), e.classList.add("active");
   }
@@ -446,8 +511,8 @@ class _ {
     this.isEnabled = !1, this.element.classList.remove("active");
     const e = this.element.children[0];
     this.splittedWords.forEach((t) => {
-      t.elementAnimations.forEach((i) => {
-        i.id === "float-word" && (i.playbackRate = -1, i.play());
+      t.elementAnimations.forEach((n) => {
+        n.id === "float-word" && (n.playbackRate = -1, n.play());
       });
     }), e.classList.remove("active");
   }
@@ -479,12 +544,18 @@ class _ {
     !this.lyricPlayer.getEnableSpring() && this.isInSight && (e += `transition-delay:${this.delay}ms;`), e += `filter:blur(${Math.min(32, this.blur)}px);`, e !== this.lastStyle && (this.lastStyle = e, this.element.setAttribute("style", e));
   }
   rebuildElement() {
-    const e = this.element.children[0], t = this.element.children[1], i = this.element.children[2];
-    this.splittedWords = [], this.lyricLine.words.forEach((l) => {
-      const h = l.word.split(/\s+/), o = h.reduce((m, p) => m + p.length, 0);
-      let c = 0;
-      h.forEach((m, p) => {
-        p > 0 && this.splittedWords.push({
+    const e = this.element.children[0], t = this.element.children[1], n = this.element.children[2];
+    if (this.lyricPlayer._getIsNonDynamic()) {
+      for (; e.firstChild; )
+        e.removeChild(e.firstChild), s(e.firstChild);
+      e.innerText = this.lyricLine.words.map((a) => a.word).join(""), t.innerText = this.lyricLine.translatedLyric, n.innerText = this.lyricLine.romanLyric;
+      return;
+    }
+    this.splittedWords = [], this.lyricLine.words.forEach((a) => {
+      const o = a.word.split(/\s+/), c = o.reduce((u, f) => u + f.length, 0);
+      let d = 0;
+      o.forEach((u, f) => {
+        f > 0 && this.splittedWords.push({
           word: " ",
           startTime: 0,
           endTime: 0,
@@ -494,63 +565,63 @@ class _ {
           elementAnimations: [],
           shouldEmphasize: !1
         }), this.splittedWords.push({
-          word: m,
-          startTime: l.startTime + (l.endTime - l.startTime) / o * c,
-          endTime: l.startTime + (l.endTime - l.startTime) / o * (c + m.length),
+          word: u,
+          startTime: a.startTime + (a.endTime - a.startTime) / c * d,
+          endTime: a.startTime + (a.endTime - a.startTime) / c * (d + u.length),
           width: 0,
           height: 0,
           elements: [],
           elementAnimations: [],
-          shouldEmphasize: P(l)
-        }), c += m.length;
+          shouldEmphasize: x(a)
+        }), d += u.length;
       });
     });
-    const n = [], a = [];
-    function s(l) {
-      for (; l.firstChild; )
-        l.firstChild.nodeType === Node.ELEMENT_NODE ? n.push(e.firstChild) : l.firstChild.nodeType === Node.TEXT_NODE && a.push(e.firstChild), l.removeChild(l.firstChild), s(l.firstChild);
+    const i = [], l = [];
+    function s(a) {
+      for (; a.firstChild; )
+        a.firstChild.nodeType === Node.ELEMENT_NODE ? i.push(e.firstChild) : a.firstChild.nodeType === Node.TEXT_NODE && l.push(e.firstChild), a.removeChild(a.firstChild), s(a.firstChild);
     }
     s(e);
     let r = null;
-    this.splittedWords.forEach((l) => {
-      if (l.word.trim().length > 0)
-        if (l.shouldEmphasize) {
-          const h = n.pop() ?? document.createElement("span");
-          h.className = "emphasize", l.elements = [h];
-          for (const o of l.word) {
-            const c = n.pop() ?? document.createElement("span");
-            c.className = "", c.innerText = o, h.appendChild(c), l.elements.push(c);
+    this.splittedWords.forEach((a) => {
+      if (a.word.trim().length > 0)
+        if (a.shouldEmphasize) {
+          const o = i.pop() ?? document.createElement("span");
+          o.className = "emphasize", a.elements = [o];
+          for (const c of a.word) {
+            const d = i.pop() ?? document.createElement("span");
+            d.className = "", d.innerText = c, o.appendChild(d), a.elements.push(d);
           }
-          if (l.elementAnimations = this.initEmphasizeAnimation(l), console.log(l.word, w.test(l.word)), r && !w.test(l.word))
+          if (a.elementAnimations = this.initEmphasizeAnimation(a), r && !v.test(a.word))
             if (r.childElementCount > 0)
-              r.appendChild(h);
+              r.appendChild(o);
             else {
-              const o = n.pop() ?? document.createElement("span");
-              o.className = "", r.remove(), o.appendChild(r), o.appendChild(h), e.appendChild(o), r = o;
+              const c = i.pop() ?? document.createElement("span");
+              c.className = "", r.remove(), c.appendChild(r), c.appendChild(o), e.appendChild(c), r = c;
             }
           else
-            r = w.test(l.word) ? null : h, e.appendChild(h);
+            r = v.test(a.word) ? null : o, e.appendChild(o);
         } else {
-          const h = n.pop() ?? document.createElement("span");
-          if (h.className = "", h.innerText = l.word, l.elements = [h], l.elementAnimations.push(this.initFloatAnimation(l, h)), r)
+          const o = i.pop() ?? document.createElement("span");
+          if (o.className = "", o.innerText = a.word, a.elements = [o], a.elementAnimations.push(this.initFloatAnimation(a, o)), r)
             if (r.childElementCount > 0)
-              r.appendChild(h);
+              r.appendChild(o);
             else {
-              const o = n.pop() ?? document.createElement("span");
-              o.className = "", r.remove(), o.appendChild(r), o.appendChild(h), e.appendChild(o), r = o;
+              const c = i.pop() ?? document.createElement("span");
+              c.className = "", r.remove(), c.appendChild(r), c.appendChild(o), e.appendChild(c), r = c;
             }
           else
-            r = h, e.appendChild(h);
+            r = o, e.appendChild(o);
         }
-      else if (l.word.length > 0) {
-        const h = a.pop() ?? document.createTextNode(" ");
-        e.appendChild(h), r = null;
+      else if (a.word.length > 0) {
+        const o = l.pop() ?? document.createTextNode(" ");
+        e.appendChild(o), r = null;
       } else
         r = null;
-    }), t.innerText = this.lyricLine.translatedLyric, i.innerText = this.lyricLine.romanLyric;
+    }), t.innerText = this.lyricLine.translatedLyric, n.innerText = this.lyricLine.romanLyric;
   }
   initFloatAnimation(e, t) {
-    const i = e.startTime - this.lyricLine.startTime, n = Math.max(1e3, e.endTime - e.startTime), a = t.animate(
+    const n = e.startTime - this.lyricLine.startTime, i = Math.max(1e3, e.endTime - e.startTime), l = t.animate(
       [
         {
           transform: "translateY(0px)"
@@ -560,49 +631,49 @@ class _ {
         }
       ],
       {
-        duration: isFinite(n) ? n : 0,
-        delay: isFinite(i) ? i : 0,
+        duration: isFinite(i) ? i : 0,
+        delay: isFinite(n) ? n : 0,
         id: "float-word",
         composite: "add",
         fill: "both"
       }
     );
-    return a.pause(), a;
+    return l.pause(), l;
   }
   initEmphasizeAnimation(e) {
-    const t = e.startTime - this.lyricLine.startTime, i = e.endTime - e.startTime;
-    return e.elements.map((n, a, s) => {
-      if (a === 0)
-        return this.initFloatAnimation(e, n);
+    const t = e.startTime - this.lyricLine.startTime, n = e.endTime - e.startTime;
+    return e.elements.map((i, l, s) => {
+      if (l === 0)
+        return this.initFloatAnimation(e, i);
       {
-        const r = n.animate(
+        const r = Math.max(1e3, e.endTime - e.startTime), a = t + n / (s.length - 1) * (l - 1), o = i.animate(
           [
             {
               offset: 0,
               transform: "translate3d(0, 0px, 0px)",
-              filter: "drop-shadow(0 0 0 var(--amll-lyric-line-color))"
+              filter: "drop-shadow(0 0 0 var(--amll-lyric-view-color,white))"
             },
             {
               offset: 0.5,
               transform: "translate3d(0, -2%, 20px)",
-              filter: "drop-shadow(0 0 0.2rem var(--amll-lyric-line-color))"
+              filter: "drop-shadow(0 0 0.05em var(--amll-lyric-view-color,white))"
             },
             {
               offset: 1,
               transform: "translate3d(0, 0px, 0)",
-              filter: "drop-shadow(0 0 0 var(--amll-lyric-line-color))"
+              filter: "drop-shadow(0 0 0 var(--amll-lyric-view-color,white))"
             }
           ],
           {
-            duration: Math.max(1e3, e.endTime - e.startTime),
-            delay: t + i / (s.length - 1) * (a - 1),
+            duration: isFinite(r) ? r : 0,
+            delay: isFinite(a) ? a : 0,
             id: "glow-word",
             iterations: 1,
             composite: "replace",
             fill: "both"
           }
         );
-        return r.pause(), r;
+        return o.pause(), o;
       }
     });
   }
@@ -611,44 +682,44 @@ class _ {
       const t = e.elements[0];
       if (t) {
         e.width = t.clientWidth, e.height = t.clientHeight;
-        const [i, n, a] = W(
+        const [n, i, l] = W(
           16 / e.width,
           "rgba(0,0,0,0.75)",
           "rgba(0,0,0,0.25)"
-        ), s = `${a * 100}% 100%`;
-        this.lyricPlayer.supportMaskImage ? (t.style.maskImage = i, t.style.maskOrigin = "left", t.style.maskSize = s) : (t.style.webkitMaskImage = i, t.style.webkitMaskOrigin = "left", t.style.webkitMaskSize = s);
-        const r = e.width + 16, l = `clamp(${-r}px,calc(${-r}px + (var(--amll-player-time) - ${e.startTime})*${r / Math.abs(e.endTime - e.startTime)}px),0px) 0px, left top`;
-        t.style.maskPosition = l, t.style.webkitMaskPosition = l;
+        ), s = `${l * 100}% 100%`;
+        this.lyricPlayer.supportMaskImage ? (t.style.maskImage = n, t.style.maskOrigin = "left", t.style.maskSize = s) : (t.style.webkitMaskImage = n, t.style.webkitMaskOrigin = "left", t.style.webkitMaskSize = s);
+        const r = e.width + 16, a = `clamp(${-r}px,calc(${-r}px + (var(--amll-player-time) - ${e.startTime})*${r / Math.abs(e.endTime - e.startTime)}px),0px) 0px, left top`;
+        t.style.maskPosition = a, t.style.webkitMaskPosition = a;
       }
     }), this._hide && (this.element.style.display = "none", this.element.style.visibility = "");
   }
   getElement() {
     return this.element;
   }
-  setTransform(e = this.left, t = this.top, i = this.scale, n = 1, a = 0, s = !1, r = 0) {
-    this.left = e, this.top = t, this.scale = i, this.delay = r * 1e3 | 0;
-    const l = this.element.children[0];
-    l.style.opacity = `${n}`, s || !this.lyricPlayer.getEnableSpring() ? (this.blur = Math.min(32, a), s && this.element.classList.add(
+  setTransform(e = this.left, t = this.top, n = this.scale, i = 1, l = 0, s = !1, r = 0) {
+    this.left = e, this.top = t, this.scale = n, this.delay = r * 1e3 | 0;
+    const a = this.element.children[0];
+    a.style.opacity = `${i}`, s || !this.lyricPlayer.getEnableSpring() ? (this.blur = Math.min(32, l), s && this.element.classList.add(
       this.lyricPlayer.style.classes.tmpDisableTransition
-    ), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lineTransforms.scale.setPosition(i), this.lyricPlayer.getEnableSpring() ? this.rebuildStyle() : this.show(), s && requestAnimationFrame(() => {
+    ), this.lineTransforms.posX.setPosition(e), this.lineTransforms.posY.setPosition(t), this.lineTransforms.scale.setPosition(n), this.lyricPlayer.getEnableSpring() ? this.rebuildStyle() : this.show(), s && requestAnimationFrame(() => {
       this.element.classList.remove(
         this.lyricPlayer.style.classes.tmpDisableTransition
       );
-    })) : (this.lineTransforms.posX.setTargetPosition(e, r), this.lineTransforms.posY.setTargetPosition(t, r), this.lineTransforms.scale.setTargetPosition(i), this.blur !== Math.min(32, a) && (this.blur = Math.min(32, a), this.element.style.filter = `blur(${Math.min(32, a)}px)`));
+    })) : (this.lineTransforms.posX.setTargetPosition(e, r), this.lineTransforms.posY.setTargetPosition(t, r), this.lineTransforms.scale.setTargetPosition(n), this.blur !== Math.min(32, l) && (this.blur = Math.min(32, l), this.element.style.filter = `blur(${Math.min(32, l)}px)`));
   }
   update(e = 0) {
     this.lyricPlayer.getEnableSpring() && (this.lineTransforms.posX.update(e), this.lineTransforms.posY.update(e), this.lineTransforms.scale.update(e), this.isInSight ? this.show() : this.hide());
   }
   get isInSight() {
-    const e = this.lineTransforms.posX.getCurrentPosition(), t = this.lineTransforms.posY.getCurrentPosition(), i = e + this.lineSize[0], n = t + this.lineSize[1], a = this.lyricPlayer.pos[0], s = this.lyricPlayer.pos[1], r = this.lyricPlayer.pos[0] + this.lyricPlayer.size[0], l = this.lyricPlayer.pos[1] + this.lyricPlayer.size[1];
-    return !(e > r || t > l || i < a || n < s);
+    const e = this.lineTransforms.posX.getCurrentPosition(), t = this.lineTransforms.posY.getCurrentPosition(), n = e + this.lineSize[0], i = t + this.lineSize[1], l = this.lyricPlayer.pos[0], s = this.lyricPlayer.pos[1], r = this.lyricPlayer.pos[0] + this.lyricPlayer.size[0], a = this.lyricPlayer.pos[1] + this.lyricPlayer.size[1];
+    return !(e > r || t > a || n < l || i < s);
   }
   dispose() {
     this.element.remove();
   }
 }
-const G = z(A());
-class ee extends EventTarget {
+const G = D(A());
+class ie extends EventTarget {
   element = document.createElement("div");
   currentTime = 0;
   lyricLines = [];
@@ -658,9 +729,16 @@ class ee extends EventTarget {
   hotLines = /* @__PURE__ */ new Set();
   bufferedLines = /* @__PURE__ */ new Set();
   scrollToIndex = 0;
+  allowScroll = !0;
+  scrolledHandler = 0;
+  isScrolled = !1;
+  invokedByScrollEvent = !1;
+  scrollOffset = 0;
   resizeObserver = new ResizeObserver((e) => {
     const t = e[0].contentRect;
-    this.size[0] = t.width, this.size[1] = t.height, this.pos[0] = t.left, this.pos[1] = t.top, this.rebuildStyle(), this.calcLayout(!0), this.lyricLinesEl.forEach((i) => i.updateMaskImage());
+    this.size[0] = t.width, this.size[1] = t.height, this.pos[0] = t.left, this.pos[1] = t.top;
+    const n = getComputedStyle(e[0].target), i = this.element.clientWidth - parseFloat(n.paddingLeft) - parseFloat(n.paddingRight), l = this.element.clientHeight - parseFloat(n.paddingTop) - parseFloat(n.paddingBottom);
+    this.innerSize[0] = i, this.innerSize[1] = l, this.rebuildStyle(), this.calcLayout(!0, !0), this.lyricLinesEl.forEach((s) => s.updateMaskImage());
   });
   posXSpringParams = {
     mass: 1,
@@ -680,12 +758,19 @@ class ee extends EventTarget {
   enableBlur = !0;
   interludeDots;
   interludeDotsSize = [0, 0];
+  bottomLine;
   supportPlusLighter = CSS.supports("mix-blend-mode", "plus-lighter");
   supportMaskImage = CSS.supports("mask-image", "none");
   disableSpring = !1;
-  alignAnchor = 0.5;
+  alignAnchor = "center";
+  alignPosition = 0.5;
+  isNonDynamic = !1;
   size = [0, 0];
+  innerSize = [0, 0];
   pos = [0, 0];
+  _getIsNonDynamic() {
+    return this.isNonDynamic;
+  }
   /**
    * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
    *
@@ -706,34 +791,34 @@ class ee extends EventTarget {
   style = G.createStyleSheet({
     lyricPlayer: {
       userSelect: "none",
-      padding: "1rem",
-      boxSizing: "border-box",
-      fontSize: "max(5vh, 12px)",
-      fontWeight: "bold",
+      fontSize: "var(--amll-lyric-player-font-size,max(5vh, 12px))",
+      padding: "1em",
+      margin: "-1em",
       width: "100%",
       height: "100%",
       overflow: "hidden",
       maxWidth: "100%",
       maxHeight: "100%",
       zIndex: 1,
-      color: "var(--amll-lyric-line-color)",
+      color: "var(--amll-lyric-view-color,white)",
       mixBlendMode: "plus-lighter",
       contain: "strict"
     },
     lyricLine: {
       position: "absolute",
       transformOrigin: "left",
-      maxWidth: "65%",
-      padding: "max(2vh, 1rem) 1rem",
+      maxWidth: "var(--amll-lyric-player-width,100%)",
+      minWidth: "var(--amll-lyric-player-width,100%)",
+      width: "var(--amll-lyric-player-width,100%)",
+      padding: "2vh 0.05em",
       contain: "content",
+      willChange: "filter,transform,opacity",
       transition: "filter 0.25s",
-      margin: "max(2vh, 1rem) -1rem"
+      boxSizing: "border-box"
     },
     "@media (max-width: 1024px)": {
       lyricLine: {
-        maxWidth: "75%",
-        padding: "max(1vh, 1rem) 1rem",
-        margin: "0 -1rem"
+        padding: "1vh 0"
       }
     },
     lyricDuetLine: {
@@ -746,27 +831,27 @@ class ee extends EventTarget {
       transition: "opacity 0.25s",
       "&.active": {
         transition: "opacity 0.25s 0.25s",
-        opacity: 1
+        opacity: 0.75
       }
     },
     lyricMainLine: {
       transition: "opacity 0.3s 0.25s",
-      margin: "-1rem",
-      padding: "1rem",
+      willChange: "opacity",
+      margin: "-1em",
+      padding: "1em",
       "& span": {
-        display: "inline-block",
-        margin: "-1rem",
-        padding: "1rem"
+        display: "inline-block"
       },
       "& > span": {
         whiteSpace: "pre-wrap",
         wordBreak: "keep-all",
         maxLines: "1",
+        // willChange: "transform,display,mask-image",
         "&.emphasize": {
-          margin: "-1rem",
-          padding: "1rem",
           transformStyle: "preserve-3d",
-          perspective: "50vw"
+          perspective: "50vw",
+          padding: "1em",
+          margin: "-1em"
         }
       }
     },
@@ -780,23 +865,24 @@ class ee extends EventTarget {
       }
     },
     interludeDots: {
-      height: "min(1rem,2.5vh)",
+      height: "clamp(0.5em,1vh,3em)",
       transformOrigin: "center",
       width: "fit-content",
       padding: "2.5% 0",
       position: "absolute",
       display: "flex",
-      gap: "0.5rem",
+      gap: "0.25em",
+      left: "1em",
       "& > *": {
-        width: "100%",
+        height: "100%",
         display: "inline-block",
         borderRadius: "50%",
         aspectRatio: "1 / 1",
-        backgroundColor: "var(--amll-lyric-line-color)",
+        backgroundColor: "var(--amll-lyric-view-color,white)",
         marginRight: "4px"
       },
       "&.duet": {
-        right: "1rem",
+        right: "1em",
         transformOrigin: "center"
       }
     },
@@ -810,10 +896,14 @@ class ee extends EventTarget {
     }
   });
   onPageShow = () => {
-    this.calcLayout(!0);
+    this.calcLayout(!0, !0);
   };
   constructor() {
-    super(), this.interludeDots = new $(this), this.element.setAttribute("class", this.style.classes.lyricPlayer), this.disableSpring && this.element.classList.add(this.style.classes.disableSpring), this.rebuildStyle(), this.resizeObserver.observe(this.element), this.element.appendChild(this.interludeDots.getElement()), this.style.attach(), this.interludeDots.setTransform(0, 200), window.addEventListener("pageshow", this.onPageShow);
+    super(), this.interludeDots = new R(this), this.bottomLine = new F(this), this.element.setAttribute("class", this.style.classes.lyricPlayer), this.disableSpring && this.element.classList.add(this.style.classes.disableSpring), this.rebuildStyle(), this.resizeObserver.observe(this.element), this.element.appendChild(this.interludeDots.getElement()), this.element.appendChild(this.bottomLine.getElement()), this.style.attach(), this.interludeDots.setTransform(0, 200), window.addEventListener("pageshow", this.onPageShow), this.element.addEventListener("wheel", (e) => {
+      this.allowScroll && (this.isScrolled = !0, clearTimeout(this.scrolledHandler), this.scrolledHandler = setTimeout(() => {
+        this.isScrolled = !1, this.scrollOffset = 0;
+      }, 5e3), this.invokedByScrollEvent = !0, e.deltaMode === e.DOM_DELTA_PIXEL ? (this.scrollOffset += e.deltaY, this.calcLayout(!0)) : (this.scrollOffset += e.deltaY * 50, this.calcLayout(!1)), this.invokedByScrollEvent = !1);
+    });
   }
   /**
    * 获取当前播放时间里是否处于间奏区间
@@ -821,7 +911,7 @@ class ee extends EventTarget {
    * 否则返回 undefined
    *
    * 这个只允许内部调用
-   * @returns [开始时间,结束时间] 或 undefined 如果不处于间奏区间
+   * @returns [开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间
    */
   getCurrentInterlude() {
     if (this.bufferedLines.size > 0)
@@ -829,12 +919,18 @@ class ee extends EventTarget {
     const e = this.currentTime + 20, t = this.scrollToIndex;
     if (t === 0) {
       if (this.processedLines[0]?.startTime && this.processedLines[0].startTime > e)
-        return [0, this.processedLines[0].startTime, -2];
+        return [
+          e,
+          this.processedLines[0].startTime,
+          -2,
+          this.processedLines[0].isDuet
+        ];
     } else if (this.processedLines[t]?.endTime && this.processedLines[t + 1]?.startTime && this.processedLines[t + 1].startTime > e && this.processedLines[t].endTime < e)
       return [
-        this.processedLines[t].endTime,
+        Math.max(this.processedLines[t].endTime, e),
         this.processedLines[t + 1].startTime,
-        t
+        t,
+        this.processedLines[t + 1].isDuet
       ];
   }
   /**
@@ -844,7 +940,7 @@ class ee extends EventTarget {
    */
   rebuildStyle() {
     let e = "";
-    e += "--amll-lyric-player-width:", e += this.element.clientWidth, e += "px;", e += "--amll-lyric-player-height:", e += this.element.clientHeight, e += "px;", e += "--amll-lyric-line-color:", e += "#FFFFFF;", e += "--amll-player-time:", e += this.currentTime, e += ";", this.element.setAttribute("style", e);
+    e += "--amll-lyric-player-width:", e += this.innerSize[0], e += "px;", e += "--amll-lyric-player-height:", e += this.innerSize[1], e += "px;", e += "--amll-player-time:", e += this.currentTime, e += ";", this.element.setAttribute("style", e);
   }
   /**
    * 设置是否启用歌词行的模糊效果
@@ -861,47 +957,57 @@ class ee extends EventTarget {
     this.lyricLines = e;
     const t = 750;
     this.processedLines = e.filter(
-      (i) => i.words.reduce((n, a) => n + a.word.trim().length, 0) > 0
-    ).map((i, n, a) => {
+      (i) => i.words.reduce((l, s) => l + s.word.trim().length, 0) > 0
+    ).map((i, l, s) => {
       if (i.isBG)
         return {
           ...i
         };
       {
-        const s = a[n - 1], r = a[n - 2];
-        if (s?.isBG && r) {
-          if (r.endTime < i.startTime)
+        const r = s[l - 1], a = s[l - 2];
+        if (r?.isBG && a) {
+          if (a.endTime < i.startTime)
             return {
               ...i,
-              startTime: Math.max(r.endTime, i.startTime - t) || i.startTime
+              startTime: Math.max(a.endTime, i.startTime - t) || i.startTime
             };
-        } else if (s?.endTime && s.endTime < i.startTime)
+        } else if (r?.endTime && r.endTime < i.startTime)
           return {
             ...i,
-            startTime: Math.max(s?.endTime, i.startTime - t) || i.startTime
+            startTime: Math.max(r?.endTime, i.startTime - t) || i.startTime
           };
         return {
           ...i
         };
       }
-    }), this.processedLines.forEach((i, n, a) => {
-      const s = a[n + 1], r = i.words[i.words.length - 1];
-      r && P(r) && (s ? s.startTime > i.endTime && (i.endTime = Math.min(i.endTime + 1500, s.startTime)) : i.endTime = i.endTime + 1500);
-    }), this.processedLines.forEach((i, n, a) => {
+    }), this.isNonDynamic = !0;
+    for (const i of this.processedLines)
+      if (i.words.length > 1) {
+        this.isNonDynamic = !1;
+        break;
+      }
+    this.processedLines.forEach((i, l, s) => {
+      const r = s[l + 1], a = i.words[i.words.length - 1];
+      a && x(a) && (r ? r.startTime > i.endTime && (i.endTime = Math.min(i.endTime + 1500, r.startTime)) : i.endTime = i.endTime + 1500);
+    }), this.processedLines.forEach((i, l, s) => {
       if (i.isBG)
         return;
-      const s = a[n + 1];
-      s?.isBG && (s.startTime = Math.min(s.startTime, i.startTime));
-    }), this.lyricLinesEl.forEach((i) => i.dispose()), this.lyricLinesEl = this.processedLines.map(
-      (i) => new _(this, i)
-    ), this.lyricLinesEl.forEach((i) => {
+      const r = s[l + 1];
+      r?.isBG && (r.startTime = Math.min(r.startTime, i.startTime));
+    });
+    const n = this.lyricLinesEl;
+    for (this.lyricLinesEl = this.processedLines.map((i, l) => this.lyricLinesEl[l] ?? new Y(this, i)); n.length > this.processedLines.length; )
+      n.pop()?.dispose();
+    this.lyricLinesEl.forEach((i) => {
       this.element.appendChild(i.getElement()), i.updateMaskImage();
-    }), this.setLinePosXSpringParams({}), this.setLinePosYSpringParams({}), this.setLineScaleSpringParams({}), this.setCurrentTime(0, !0), this.calcLayout(!0);
+    }), this.interludeDots.setInterlude(void 0), this.hotLines.clear(), this.bufferedLines.clear(), this.setLinePosXSpringParams({}), this.setLinePosYSpringParams({}), this.setLineScaleSpringParams({}), this.setCurrentTime(0, !0), this.calcLayout(!0, !0);
   }
   /**
    * 重新布局定位歌词行的位置，调用完成后再逐帧调用 `update`
    * 函数即可让歌词通过动画移动到目标位置。
    *
+   * 函数有一个 `force` 参数，用于指定是否强制修改布局，也就是不经过动画直接调整元素位置和大小。
+   *
    * 此函数还有一个 `reflow` 参数，用于指定是否需要重新计算布局
    *
    * 因为计算布局必定会导致浏览器重排布局，所以会大幅度影响流畅度和性能，故请只在以下情况下将其​设置为 true：
@@ -910,54 +1016,48 @@ class ee extends EventTarget {
    * 2. 加载了新的歌词时（不论前后歌词是否完全一样）
    * 3. 用户自行跳转了歌曲播放位置（不论距离远近）
    *
+   * @param force 是否不经过动画直接修改布局定位
    * @param reflow 是否进行重新布局（重新计算每行歌词大小）
    */
-  calcLayout(e = !1) {
-    e && (this.lyricLinesEl.forEach((o) => {
-      const c = o.measureSize();
-      this.lyricLinesSize.set(o, c), o.lineSize = c;
-    }), this.interludeDotsSize[0] = this.interludeDots.getElement().clientWidth, this.interludeDotsSize[1] = this.interludeDots.getElement().clientHeight);
-    const t = 0.95;
-    let n = -this.lyricLinesEl.slice(0, this.scrollToIndex).reduce(
-      (o, c) => o + (c.getLine().isBG ? 0 : this.lyricLinesSize.get(c)?.[1] ?? 0),
+  calcLayout(e = !1, t = !1) {
+    t && (this.lyricLinesEl.forEach((m) => {
+      const p = m.measureSize();
+      this.lyricLinesSize.set(m, p), m.lineSize = p;
+    }), this.interludeDotsSize[0] = this.interludeDots.getElement().clientWidth, this.interludeDotsSize[1] = this.interludeDots.getElement().clientHeight, this.bottomLine.lineSize = this.bottomLine.measureSize());
+    const n = this.getCurrentInterlude();
+    let i = -this.scrollOffset, l = this.scrollToIndex, s = 0;
+    n ? (s = n[1] - n[0], s >= 5e3 && this.lyricLinesEl[n[2] + 1] && (l = n[2] + 1)) : this.interludeDots.setInterlude(void 0);
+    const r = 0.95, a = this.lyricLinesEl.slice(0, l).reduce(
+      (m, p) => m + (p.getLine().isBG ? 0 : this.lyricLinesSize.get(p)?.[1] ?? 0),
       0
     );
-    if (this.alignAnchor === "bottom") {
-      n += this.element.clientHeight / 2;
-      const o = this.lyricLinesEl[this.scrollToIndex];
-      if (o) {
-        const c = this.lyricLinesSize.get(o)?.[1] ?? 0;
-        n -= c / 2;
+    i -= a, i += this.size[1] * this.alignPosition;
+    const o = this.lyricLinesEl[l];
+    if (o) {
+      const m = this.lyricLinesSize.get(o)?.[1] ?? 0;
+      switch (this.alignAnchor) {
+        case "bottom":
+          i -= m;
+          break;
+        case "center":
+          i -= m / 2;
+          break;
       }
-    } else if (typeof this.alignAnchor == "number") {
-      n += this.element.clientHeight * this.alignAnchor;
-      const o = this.lyricLinesEl[this.scrollToIndex];
-      if (o) {
-        const c = this.lyricLinesSize.get(o)?.[1] ?? 0;
-        n -= c / 2;
-      }
-    }
-    const a = this.getCurrentInterlude();
-    let s = 0;
-    if (a && (s = a[1] - a[0], s >= 5e3)) {
-      const o = this.lyricLinesEl[a[2] + 1];
-      o && (n -= this.lyricLinesSize.get(o)?.[1] ?? 0);
     }
-    const r = Math.max(...this.bufferedLines);
-    let l = 0, h = !1;
-    this.lyricLinesEl.forEach((o, c) => {
-      const m = this.bufferedLines.has(c), p = m || c >= this.scrollToIndex && c < r, u = o.getLine();
-      let f = 0;
-      u.isDuet && (f = this.size[0] - (this.lyricLinesSize.get(o)?.[0] ?? 0)), !h && s >= 5e3 && (c === this.scrollToIndex && a?.[2] === -2 || c === this.scrollToIndex + 1) && (h = !0, this.interludeDots.setTransform(0, n), a && this.interludeDots.setInterlude([a[0], a[1]]), n += this.interludeDotsSize[1]), o.setTransform(
-        f,
-        n,
-        p ? 1 : t,
-        m ? 1 : 1 / 3,
-        this.enableBlur ? 3 * (p ? 0 : 1 + (c < this.scrollToIndex ? Math.abs(this.scrollToIndex - c) : Math.abs(c - Math.max(this.scrollToIndex, r)))) : 0,
+    const c = Math.max(...this.bufferedLines);
+    let d = 0, u = 0.05, f = !1;
+    this.lyricLinesEl.forEach((m, p) => {
+      const L = this.bufferedLines.has(p), b = L || p >= this.scrollToIndex && p < c, P = m.getLine();
+      P.isDuet && this.size[0] - (this.lyricLinesSize.get(m)?.[0] ?? 0), !f && s >= 5e3 && (p === this.scrollToIndex && n?.[2] === -2 || p === this.scrollToIndex + 1) && (f = !0, this.interludeDots.setTransform(32, i), n && this.interludeDots.setInterlude([n[0], n[1]]), i += this.interludeDotsSize[1]), m.setTransform(
+        0,
+        i,
+        b ? 1 : r,
+        L ? 1 : 1 / 3,
+        !this.invokedByScrollEvent && this.enableBlur ? b ? 0 : 1 + (p < this.scrollToIndex ? Math.abs(this.scrollToIndex - p) : Math.abs(p - Math.max(this.scrollToIndex, c))) : 0,
         e,
-        l
-      ), u.isBG && p ? n += this.lyricLinesSize.get(o)?.[1] ?? 0 : u.isBG || (n += this.lyricLinesSize.get(o)?.[1] ?? 0), n >= 0 && (l += 0.05);
-    });
+        d
+      ), P.isBG && b ? i += this.lyricLinesSize.get(m)?.[1] ?? 0 : P.isBG || (i += this.lyricLinesSize.get(m)?.[1] ?? 0), i >= 0 && (d += u, u /= 1.2);
+    }), this.bottomLine.setTransform(0, i, e, d);
   }
   /**
    * 获取当前歌词的播放位置
@@ -981,16 +1081,35 @@ class ee extends EventTarget {
     return this.element;
   }
   /**
-   * 设置歌词行的对齐方式，默认为 `top`
+   * 获取一个特殊的底栏元素，默认是空白的，可以往内部添加任意元素
    *
-   * - 设置成 `top` 的话歌词将会向组件顶部对齐
-   * - 设置成 `bottom` 的话歌词将会向组件底部对齐
-   * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐
+   * 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
+   *
+   * 但是请勿删除该元素，只能在内部存放元素
+   *
+   * @returns 一个元素，可以往内部添加任意元素
+   */
+  getBottomLineElement() {
+    return this.bottomLine.getElement();
+  }
+  /**
+   * 设置目标歌词行的对齐方式，默认为 `center`
+   *
+   * - 设置成 `top` 的话将会向目标歌词行的顶部对齐
+   * - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
+   * - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
    * @param alignAnchor 歌词行对齐方式，详情见函数说明
    */
   setAlignAnchor(e) {
     this.alignAnchor = e;
   }
+  /**
+   * 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，默认为 `0.5`
+   * @param alignPosition 一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
+   */
+  setAlignPosition(e) {
+    this.alignPosition = e;
+  }
   /**
    * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
    * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
@@ -999,33 +1118,35 @@ class ee extends EventTarget {
    * @param time 当前播放进度，单位为毫秒
    */
   setCurrentTime(e, t = !1) {
-    this.currentTime = e, this.element.style.setProperty("--amll-player-time", `${e}`);
-    const i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
+    if (this.currentTime = e, this.element.style.setProperty("--amll-player-time", `${e}`), this.isScrolled)
+      return;
+    const n = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set();
     this.hotLines.forEach((s) => {
       const r = this.processedLines[s];
-      if (!r.isBG)
-        if (r) {
-          const l = this.processedLines[s + 1];
-          if (l?.isBG) {
-            const h = Math.min(r.startTime, l?.startTime), o = Math.max(r.endTime, l?.endTime);
-            (h > e || o <= e) && (this.hotLines.delete(s), i.add(s), this.hotLines.delete(s + 1), i.add(s + 1), t && (this.lyricLinesEl[s].disable(), this.lyricLinesEl[s + 1].disable()));
-          } else
-            (r.startTime > e || r.endTime <= e) && (this.hotLines.delete(s), i.add(s), t && this.lyricLinesEl[s].disable());
+      if (r) {
+        if (r.isBG)
+          return;
+        const a = this.processedLines[s + 1];
+        if (a?.isBG) {
+          const o = Math.min(r.startTime, a?.startTime), c = Math.max(r.endTime, a?.endTime);
+          (o > e || c <= e) && (this.hotLines.delete(s), n.add(s), this.hotLines.delete(s + 1), n.add(s + 1), t && (this.lyricLinesEl[s].disable(), this.lyricLinesEl[s + 1].disable()));
         } else
-          this.hotLines.delete(s), i.add(s), t && this.lyricLinesEl[s].disable();
-    }), this.processedLines.forEach((s, r, l) => {
-      !s.isBG && s.startTime <= e && s.endTime > e && (this.hotLines.has(r) || (this.hotLines.add(r), a.add(r), t && this.lyricLinesEl[r].enable(), l[r + 1]?.isBG && (this.hotLines.add(r + 1), a.add(r + 1), t && this.lyricLinesEl[r + 1].enable())));
+          (r.startTime > e || r.endTime <= e) && (this.hotLines.delete(s), n.add(s), t && this.lyricLinesEl[s].disable());
+      } else
+        this.hotLines.delete(s), n.add(s), t && this.lyricLinesEl[s].disable();
+    }), this.processedLines.forEach((s, r, a) => {
+      !s.isBG && s.startTime <= e && s.endTime > e && (this.hotLines.has(r) || (this.hotLines.add(r), l.add(r), t && this.lyricLinesEl[r].enable(), a[r + 1]?.isBG && (this.hotLines.add(r + 1), l.add(r + 1), t && this.lyricLinesEl[r + 1].enable())));
     }), this.bufferedLines.forEach((s) => {
-      this.hotLines.has(s) || (n.add(s), t && this.lyricLinesEl[s].disable());
+      this.hotLines.has(s) || (i.add(s), t && this.lyricLinesEl[s].disable());
     }), t ? (this.bufferedLines.size > 0 ? this.scrollToIndex = Math.min(...this.bufferedLines) : this.scrollToIndex = this.processedLines.findIndex(
       (s) => s.startTime >= e
-    ), this.bufferedLines.clear(), this.hotLines.forEach((s) => this.bufferedLines.add(s)), this.calcLayout(!0)) : (n.size > 0 || a.size > 0) && (n.size === 0 && a.size > 0 ? (a.forEach((s) => {
+    ), this.bufferedLines.clear(), this.hotLines.forEach((s) => this.bufferedLines.add(s)), this.calcLayout(!0)) : (i.size > 0 || l.size > 0) && (i.size === 0 && l.size > 0 ? (l.forEach((s) => {
       this.bufferedLines.add(s), this.lyricLinesEl[s].enable();
-    }), this.scrollToIndex = Math.min(...this.bufferedLines)) : a.size === 0 && n.size > 0 ? N(n, this.bufferedLines) && this.bufferedLines.forEach((s) => {
+    }), this.scrollToIndex = Math.min(...this.bufferedLines)) : l.size === 0 && i.size > 0 ? O(i, this.bufferedLines) && this.bufferedLines.forEach((s) => {
       this.hotLines.has(s) || (this.bufferedLines.delete(s), this.lyricLinesEl[s].disable());
-    }) : (a.forEach((s) => {
+    }) : (l.forEach((s) => {
       this.bufferedLines.add(s), this.lyricLinesEl[s].enable();
-    }), n.forEach((s) => {
+    }), i.forEach((s) => {
       this.bufferedLines.delete(s), this.lyricLinesEl[s].disable();
     }), this.bufferedLines.size > 0 && (this.scrollToIndex = Math.min(...this.bufferedLines))), this.calcLayout());
   }
@@ -1037,7 +1158,7 @@ class ee extends EventTarget {
    */
   update(e = 0) {
     const t = e / 1e3;
-    this.interludeDots.update(e), this.lyricLinesEl.forEach((i) => i.update(t));
+    this.interludeDots.update(e), this.bottomLine.update(t), this.lyricLinesEl.forEach((n) => n.update(t));
   }
   /**
    * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
@@ -1048,7 +1169,7 @@ class ee extends EventTarget {
     this.posXSpringParams = {
       ...this.posXSpringParams,
       ...e
-    }, this.lyricLinesEl.forEach(
+    }, this.bottomLine.lineTransforms.posX.updateParams(this.posXSpringParams), this.lyricLinesEl.forEach(
       (t) => t.lineTransforms.posX.updateParams(this.posXSpringParams)
     );
   }
@@ -1061,7 +1182,7 @@ class ee extends EventTarget {
     this.posYSpringParams = {
       ...this.posYSpringParams,
       ...e
-    }, this.lyricLinesEl.forEach(
+    }, this.bottomLine.lineTransforms.posY.updateParams(this.posYSpringParams), this.lyricLinesEl.forEach(
       (t) => t.lineTransforms.posY.updateParams(this.posYSpringParams)
     );
   }
@@ -1079,12 +1200,12 @@ class ee extends EventTarget {
     );
   }
   dispose() {
-    this.element.remove(), this.resizeObserver.disconnect(), this.style.detach(), this.lyricLinesEl.forEach((e) => e.dispose()), window.removeEventListener("pageshow", this.onPageShow);
+    this.element.remove(), this.resizeObserver.disconnect(), this.style.detach(), this.lyricLinesEl.forEach((e) => e.dispose()), window.removeEventListener("pageshow", this.onPageShow), this.bottomLine.dispose(), this.interludeDots.dispose();
   }
 }
 export {
-  Z as BackgroundRender,
-  ee as LyricPlayer,
-  Q as ttml
+  te as BackgroundRender,
+  ie as LyricPlayer,
+  ee as ttml
 };
 //# sourceMappingURL=amll-core.mjs.map