@applemusic-like-lyrics/core 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# AMLL Core
+
+AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件。
+
+此处的东西都是 UI 框架无关的，所以可以间接在各种动态页面框架下引用。
+
+## 开发调试

package/dist/amll-core.js

@@ -0,0 +1 @@
+"use strict";var w=Object.defineProperty;var v=(d,t,e)=>t in d?w(d,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):d[t]=e;var l=(d,t,e)=>(v(d,typeof t!="symbol"?t+"":t,e),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("@pixi/display"),C=require("@pixi/app"),f=require("@pixi/filter-blur"),b=require("@pixi/filter-color-matrix"),M=require("@pixi/core"),L=require("@pixi/sprite"),z=require("jss"),B=require("jss-preset-default");class I extends x.Container{constructor(){super(...arguments);l(this,"time",0)}}class A{constructor(t){l(this,"observer");l(this,"app");l(this,"curContainer");l(this,"lastContainer",new Set);l(this,"onTick",t=>{for(const e of this.lastContainer)e.alpha=Math.max(0,e.alpha-t/60),e.alpha<=0&&(this.app.stage.removeChild(e),this.lastContainer.delete(e));if(this.curContainer){this.curContainer.alpha=Math.min(1,this.curContainer.alpha+t/60);const[e,r,s,a]=this.curContainer.children,h=Math.max(this.app.screen.width,this.app.screen.height);e.position.set(this.app.screen.width/2,this.app.screen.height/2),r.position.set(this.app.screen.width/2.5,this.app.screen.height/2.5),s.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),e.width=h*Math.sqrt(2),e.height=e.width,r.width=h*.8,r.height=r.width,s.width=h*.5,s.height=s.width,a.width=h*.25,a.height=a.width,this.curContainer.time+=t*this.flowSpeed,e.rotation+=t/1e3*this.flowSpeed,r.rotation-=t/500*this.flowSpeed,s.rotation+=t/1e3*this.flowSpeed,a.rotation-=t/750*this.flowSpeed,s.x=this.app.screen.width/2+this.app.screen.width/4*Math.cos(this.curContainer.time/1e3*.75),s.y=this.app.screen.height/2+this.app.screen.width/4*Math.cos(this.curContainer.time/1e3*.75),a.x=this.app.screen.width/2+this.app.screen.width/4*.1+Math.cos(this.curContainer.time*.006*.75),a.y=this.app.screen.height/2+this.app.screen.width/4*.1+Math.cos(this.curContainer.time*.006*.75)}});l(this,"flowSpeed",2);l(this,"currerntRenderScale",.75);this.canvas=t;const e=t.getBoundingClientRect();this.canvas.width=e.width*this.currerntRenderScale,this.canvas.height=e.height*this.currerntRenderScale,this.observer=new ResizeObserver(()=>{const r=t.getBoundingClientRect();this.canvas.width=Math.max(1,r.width),this.canvas.height=Math.max(1,r.height),this.app.renderer.resize(this.canvas.width*this.currerntRenderScale,this.canvas.height*this.currerntRenderScale),this.rebuildFilters()}),this.observer.observe(t),this.app=new C.Application({view:t,resizeTo:this.canvas,powerPreference:"low-power",backgroundAlpha:0}),this.rebuildFilters(),this.app.ticker.add(this.onTick),this.app.ticker.start()}setRenderScale(t){this.currerntRenderScale=t;const e=this.canvas.getBoundingClientRect();this.canvas.width=Math.max(1,e.width),this.canvas.height=Math.max(1,e.height),this.app.renderer.resize(this.canvas.width*this.currerntRenderScale,this.canvas.height*this.currerntRenderScale),this.rebuildFilters()}rebuildFilters(){const t=Math.min(this.canvas.width,this.canvas.height),e=new b.ColorMatrixFilter;e.saturate(1.2,!1);const r=new b.ColorMatrixFilter;r.brightness(.6,!1);const s=new b.ColorMatrixFilter;s.contrast(.3,!0),this.app.stage.filters=[],this.app.stage.filters.push(new f.BlurFilter(5,1)),this.app.stage.filters.push(new f.BlurFilter(10,1)),this.app.stage.filters.push(new f.BlurFilter(20,2)),this.app.stage.filters.push(new f.BlurFilter(40,2)),t>512&&this.app.stage.filters.push(new f.BlurFilter(80,2)),t>768&&this.app.stage.filters.push(new f.BlurFilter(160,4)),t>768*2&&this.app.stage.filters.push(new f.BlurFilter(320,4)),this.app.stage.filters.push(e,r,s),this.app.stage.filters.push(new f.BlurFilter(5,1))}setFPS(t){this.app.ticker.maxFPS=t}pause(){this.app.ticker.stop(),this.app.render()}resume(){this.app.ticker.start()}async setAlbumImage(t){const e=await M.Texture.fromURL(t),r=new I,s=new L.Sprite(e),a=new L.Sprite(e),h=new L.Sprite(e),i=new L.Sprite(e);s.anchor.set(.5,.5),a.anchor.set(.5,.5),h.anchor.set(.5,.5),i.anchor.set(.5,.5),s.rotation=Math.random()*Math.PI*2,a.rotation=Math.random()*Math.PI*2,h.rotation=Math.random()*Math.PI*2,i.rotation=Math.random()*Math.PI*2,r.addChild(s,a,h,i),this.curContainer&&this.lastContainer.add(this.curContainer),this.curContainer=r,this.app.stage.addChild(this.curContainer),this.curContainer.alpha=0}dispose(){this.observer.disconnect(),this.app.ticker.remove(this.onTick)}}class D extends A{constructor(){const e=document.createElement("canvas");super(e);l(this,"element");this.element=e,e.style.pointerEvents="none",e.style.zIndex="-1"}getElement(){return this.element}dispose(){super.dispose(),this.element.remove()}}const k=(d,t)=>d.size===t.size&&[...d].every(e=>t.has(e));function q(d){const e=2.5949095;return d<.5?Math.pow(2*d,2)*((e+1)*2*d-e)/2:(Math.pow(2*d-2,2)*((e+1)*(d*2-2)+e)+2)/2}const y=(d,t,e)=>Math.max(d,Math.min(t,e));class F{constructor(t){l(this,"element",document.createElement("div"));l(this,"dot0",document.createElement("span"));l(this,"dot1",document.createElement("span"));l(this,"dot2",document.createElement("span"));l(this,"left",0);l(this,"top",0);l(this,"scale",1);l(this,"lastStyle","");l(this,"currentInterlude");l(this,"currentTime",0);l(this,"targetBreatheDuration",1500);this.lyricPlayer=t,this.element.className=this.lyricPlayer.style.classes.interludeDots,this.element.appendChild(this.dot0),this.element.appendChild(this.dot1),this.element.appendChild(this.dot2)}getElement(){return this.element}setTransform(t=this.left,e=this.top){this.left=t,this.top=e,this.update()}setInterlude(t){this.currentInterlude=t,this.currentTime=(t==null?void 0:t[0])??0}update(t=0){this.currentTime+=t;let e="";if(e+=`transform:translate(${this.left}px, ${this.top}px)`,this.currentInterlude){const r=this.currentInterlude[1]-this.currentInterlude[0],s=this.currentTime-this.currentInterlude[0];if(s<=r){const a=r/Math.ceil(r/this.targetBreatheDuration);let h=1,i=1;h*=Math.sin(1.5*Math.PI-s/a*2)/10+1,s<1e3&&(h*=1-Math.pow((1e3-s)/1e3,2)),s<500?i=0:s<1e3&&(i*=(s-500)/500),r-s<750&&(h*=1-q((750-(r-s))/750/2)),r-s<375&&(i*=y(0,(r-s)/375,1)),h=Math.max(0,h),e+=` scale(${h})`;const n=y(.25,s*3/r*.75,1),c=y(.25,(s-r/3)*3/r*.75,1),o=y(.25,(s-r/3*2)*3/r*.75,1);this.dot0.style.opacity=`${y(0,Math.max(0,i*n),1)}`,this.dot1.style.opacity=`${y(0,Math.max(0,i*c),1)}`,this.dot2.style.opacity=`${y(0,Math.max(0,i*o),1)}`}else e+=" scale(0)",this.dot0.style.opacity="0",this.dot1.style.opacity="0",this.dot2.style.opacity="0"}else e+=" scale(0)",this.dot0.style.opacity="0",this.dot1.style.opacity="0",this.dot2.style.opacity="0";e+=";",this.lastStyle!==e&&(this.element.setAttribute("style",e),this.lastStyle=e)}dispose(){this.element.remove()}}class S{constructor(t=0){l(this,"currentPosition",0);l(this,"targetPosition",0);l(this,"currentTime",0);l(this,"params",{});l(this,"currentSolver");l(this,"getV");l(this,"queueParams");l(this,"queuePosition");this.targetPosition=t,this.currentPosition=this.targetPosition,this.currentSolver=()=>this.targetPosition,this.getV=()=>0}resetSolver(){const t=this.getV(this.currentTime);this.currentTime=0,this.currentSolver=$(this.currentPosition,t,this.targetPosition,0,this.params),this.getV=O(this.currentSolver)}arrived(){return Math.abs(this.targetPosition-this.currentPosition)<.01&&this.getV(this.currentTime)<.01&&this.queueParams===void 0&&this.queuePosition===void 0}setPosition(t){this.targetPosition=t,this.currentPosition=t,this.currentSolver=()=>this.targetPosition,this.getV=()=>0}update(t=0){this.currentTime+=t,this.currentPosition=this.currentSolver(this.currentTime),this.queueParams&&(this.queueParams.time-=t,this.queueParams.time<=0&&this.updateParams({...this.queueParams})),this.queuePosition&&(this.queuePosition.time-=t,this.queuePosition.time<=0&&this.setTargetPosition(this.queuePosition.position)),this.arrived()&&this.setPosition(this.targetPosition)}updateParams(t,e=0){e>0?this.queueParams={...t,time:e}:(this.params={...this.params,...t},this.resetSolver())}setTargetPosition(t,e=0){e>0?this.queuePosition={position:t,time:e}:(this.queuePosition=void 0,this.targetPosition=t,this.resetSolver())}getCurrentPosition(){return this.currentPosition}}function $(d,t,e,r=0,s){const a=(s==null?void 0:s.soft)??!1,h=(s==null?void 0:s.stiffness)??100,i=(s==null?void 0:s.damping)??10,n=(s==null?void 0:s.mass)??1,c=e-d;if(a||1<=i/(2*Math.sqrt(h*n))){const o=-Math.sqrt(h/n),m=-o*c-t;return p=>(p-=r,p<0?d:e-(c+p*m)*Math.E**(p*o))}else{const o=Math.sqrt(4*n*h-i**2),m=(i*c-2*n*t)/o,p=.5*o/n,g=-(.5*i)/n;return u=>(u-=r,u<0?d:e-(Math.cos(u*p)*c+Math.sin(u*p)*m)*Math.E**(u*g))}}function R(d){return e=>(d(e+.001)-d(e-.001))/(2*.001)}function O(d){return R(d)}const T=/^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;function W(d,t="rgba(0,0,0,1)",e="rgba(0,0,0,0.5)"){const r=2+d,s=d/r,a=(1-s)/2;return[`linear-gradient(to right,${t} ${a*100}%,${e} ${(a+s)*100}%)`,s,r]}function P(d){return d.endTime-d.startTime>=1e3&&d.word.length<=7}class G{constructor(t,e={words:[],translatedLyric:"",romanLyric:"",startTime:0,endTime:0,isBG:!1,isDuet:!1}){l(this,"element",document.createElement("div"));l(this,"left",0);l(this,"top",0);l(this,"scale",1);l(this,"blur",0);l(this,"delay",0);l(this,"splittedWords",[]);l(this,"lineSize",[0,0]);l(this,"lineTransforms",{posX:new S(0),posY:new S(0),scale:new S(1)});l(this,"_hide",!0);l(this,"lastStyle","");this.lyricPlayer=t,this.lyricLine=e,this.element.setAttribute("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 r=this.element.children[0],s=this.element.children[1],a=this.element.children[2];r.setAttribute("class",this.lyricPlayer.style.classes.lyricMainLine),s.setAttribute("class",this.lyricPlayer.style.classes.lyricSubLine),a.setAttribute("class",this.lyricPlayer.style.classes.lyricSubLine),this.rebuildElement(),this.rebuildStyle()}enable(){this.element.classList.add("active");const t=this.element.children[0];this.splittedWords.forEach(e=>{e.elementAnimations.forEach(r=>{r.currentTime=0,r.playbackRate=1,r.play()})}),t.classList.add("active")}disable(){this.element.classList.remove("active");const t=this.element.children[0];this.splittedWords.forEach(e=>{e.elementAnimations.forEach(r=>{r.id==="float-word"&&(r.playbackRate=-1,r.play())})}),t.classList.remove("active")}setLine(t){this.lyricLine=t,this.lyricLine.isBG?this.element.classList.add(this.lyricPlayer.style.classes.lyricBgLine):this.element.classList.remove(this.lyricPlayer.style.classes.lyricBgLine),this.lyricLine.isDuet?this.element.classList.add(this.lyricPlayer.style.classes.lyricDuetLine):this.element.classList.remove(this.lyricPlayer.style.classes.lyricDuetLine),this.rebuildElement(),this.rebuildStyle()}getLine(){return this.lyricLine}show(){this._hide=!1,this.rebuildStyle()}hide(){this._hide=!0,this.rebuildStyle()}rebuildStyle(){if(this._hide){this.lastStyle!=="visibility:hidden;transform:translate(0,-10000px);"&&(this.lastStyle="visibility:hidden;transform:translate(0,-10000px);",this.element.setAttribute("style","visibility:hidden;transform:translate(0,-10000px);"));return}let t=`transform:translate(${this.lineTransforms.posX.getCurrentPosition()}px,${this.lineTransforms.posY.getCurrentPosition()}px) scale(${this.lineTransforms.scale.getCurrentPosition()});`;this.lyricPlayer.disableSpring&&this.isInSight&&(t+=`transition-delay:${this.delay}ms;`),t+=`filter:blur(${Math.min(32,this.blur)}px);`,t!==this.lastStyle&&(this.lastStyle=t,this.element.setAttribute("style",t))}rebuildElement(){const t=this.element.children[0],e=this.element.children[1],r=this.element.children[2];this.splittedWords=[],this.lyricLine.words.forEach(n=>{if(T.test(n.word))this.splittedWords.push({...n,width:0,height:0,elements:[],elementAnimations:[],shouldEmphasize:P(n)});else{const c=/(\s*)(\S*)(\s*)/.exec(n.word);c&&(c[1].length>0&&this.splittedWords.push({word:" ",startTime:0,endTime:0,width:0,height:0,elements:[],elementAnimations:[],shouldEmphasize:!1}),this.splittedWords.push({word:c[2],startTime:n.startTime,endTime:n.endTime,width:0,height:0,elements:[],elementAnimations:[],shouldEmphasize:P(n)}),c[3].length>0&&this.splittedWords.push({word:" ",startTime:0,endTime:0,width:0,height:0,elements:[],elementAnimations:[],shouldEmphasize:!1}))}});const s=[],a=[];function h(n){for(;n.firstChild;)n.firstChild.nodeType===Node.ELEMENT_NODE?s.push(t.firstChild):n.firstChild.nodeType===Node.TEXT_NODE&&a.push(t.firstChild),n.removeChild(n.firstChild),h(n.firstChild)}h(t);let i=null;this.splittedWords.forEach(n=>{if(n.word.trim().length>0)if(n.shouldEmphasize){const c=s.pop()??document.createElement("span");c.className="emphasize",n.elements=[c];for(const o of n.word){const m=s.pop()??document.createElement("span");m.className="",m.innerText=o,c.appendChild(m),n.elements.push(m)}if(n.elementAnimations=this.initEmphasizeAnimation(n),console.log(n.word,T.test(n.word)),i&&!T.test(n.word))if(i.childElementCount>0)i.appendChild(c);else{const o=s.pop()??document.createElement("span");o.className="",i.remove(),o.appendChild(i),o.appendChild(c),t.appendChild(o),i=o}else i=T.test(n.word)?null:c,t.appendChild(c)}else{const c=s.pop()??document.createElement("span");if(c.className="",c.innerText=n.word,n.elements=[c],n.elementAnimations.push(this.initFloatAnimation(n,c)),i)if(i.childElementCount>0)i.appendChild(c);else{const o=s.pop()??document.createElement("span");o.className="",i.remove(),o.appendChild(i),o.appendChild(c),t.appendChild(o),i=o}else i=c,t.appendChild(c)}else if(n.word.length>0){const c=a.pop()??document.createTextNode(" ");t.appendChild(c),i=null}else i=null}),e.innerText=this.lyricLine.translatedLyric,r.innerText=this.lyricLine.romanLyric}initFloatAnimation(t,e){const r=e.animate([{transform:"translateY(0px)"},{transform:"translateY(-3%)"}],{duration:Math.max(1e3,t.endTime-t.startTime),delay:t.startTime-this.lyricLine.startTime,id:"float-word",composite:"add",fill:"both"});return r.pause(),r}initEmphasizeAnimation(t){const e=t.startTime-this.lyricLine.startTime,r=t.endTime-t.startTime;return t.elements.map((s,a,h)=>{if(a===0)return this.initFloatAnimation(t,s);{const i=s.animate([{offset:0,transform:"translate3d(0, 0px, 0px)",filter:"drop-shadow(0 0 0 var(--amll-lyric-line-color))"},{offset:.5,transform:"translate3d(0, -2%, 20px)",filter:"drop-shadow(0 0 0.2rem var(--amll-lyric-line-color))"},{offset:1,transform:"translate3d(0, 0px, 0)",filter:"drop-shadow(0 0 0 var(--amll-lyric-line-color))"}],{duration:Math.max(1e3,t.endTime-t.startTime),delay:e+r/(h.length-1)*(a-1),id:"glow-word",iterations:1,composite:"replace",fill:"both"});return i.pause(),i}})}updateMaskImage(){this.splittedWords.forEach(t=>{const e=t.elements[0];if(e){t.width=e.clientWidth,t.height=e.clientHeight;const[r,s,a]=W(16/t.width,"rgba(0,0,0,0.75)","rgba(0,0,0,0.25)"),h=`${a*100}% 100%`;this.lyricPlayer.supportMaskImage?(e.style.maskImage=r,e.style.maskOrigin="left",e.style.maskSize=h):(e.style.webkitMaskImage=r,e.style.webkitMaskOrigin="left",e.style.webkitMaskSize=h);const i=t.width+16,n=`clamp(${-i}px,calc(${-i}px + (var(--amll-player-time) - ${t.startTime})*${i/Math.abs(t.endTime-t.startTime)}px),0px) 0px, left top`;e.style.maskPosition=n,e.style.webkitMaskPosition=n}})}getElement(){return this.element}setTransform(t=this.left,e=this.top,r=this.scale,s=1,a=0,h=!1,i=0){this.left=t,this.top=e,this.scale=r,this.delay=i*1e3|0;const n=this.element.children[0];n.style.opacity=`${s}`,h||this.lyricPlayer.disableSpring?(this.blur=Math.min(32,a),h&&this.element.classList.add(this.lyricPlayer.style.classes.tmpDisableTransition),this.lineTransforms.posX.setPosition(t),this.lineTransforms.posY.setPosition(e),this.lineTransforms.scale.setPosition(r),this.lyricPlayer.disableSpring?this.show():this.rebuildStyle(),h&&requestAnimationFrame(()=>{this.element.classList.remove(this.lyricPlayer.style.classes.tmpDisableTransition)})):(this.lineTransforms.posX.setTargetPosition(t,i),this.lineTransforms.posY.setTargetPosition(e,i),this.lineTransforms.scale.setTargetPosition(r),this.blur!==Math.min(32,a)&&(this.blur=Math.min(32,a),this.element.style.filter=`blur(${Math.min(32,a)}px)`))}update(t=0){this.lyricPlayer.disableSpring||(this.lineTransforms.posX.update(t),this.lineTransforms.posY.update(t),this.lineTransforms.scale.update(t),this.isInSight?this.show():this.hide())}get isInSight(){const t=this.lineTransforms.posX.getCurrentPosition(),e=this.lineTransforms.posY.getCurrentPosition(),r=t+this.lineSize[0],s=e+this.lineSize[1],a=this.lyricPlayer.pos[0],h=this.lyricPlayer.pos[1],i=this.lyricPlayer.pos[0]+this.lyricPlayer.size[0],n=this.lyricPlayer.pos[1]+this.lyricPlayer.size[1];return!(t>i||e>n||r<a||s<h)}dispose(){this.element.remove()}}const X=z.create(B());class Y extends EventTarget{constructor(){super();l(this,"element",document.createElement("div"));l(this,"currentTime",0);l(this,"lyricLines",[]);l(this,"processedLines",[]);l(this,"lyricLinesEl",[]);l(this,"lyricLinesSize",new Map);l(this,"hotLines",new Set);l(this,"bufferedLines",new Set);l(this,"scrollToIndex",0);l(this,"resizeObserver",new ResizeObserver(e=>{const r=e[0].contentRect;this.size[0]=r.width,this.size[1]=r.height,this.pos[0]=r.left,this.pos[1]=r.top,this.rebuildStyle(),this.calcLayout(!0),this.lyricLinesEl.forEach(s=>s.updateMaskImage())}));l(this,"posXSpringParams",{mass:1,damping:10,stiffness:100});l(this,"posYSpringParams",{mass:1,damping:15,stiffness:100});l(this,"scaleSpringParams",{mass:1,damping:20,stiffness:100});l(this,"enableBlur",!0);l(this,"interludeDots");l(this,"interludeDotsSize",[0,0]);l(this,"supportPlusLighter",CSS.supports("mix-blend-mode","plus-lighter"));l(this,"supportMaskImage",CSS.supports("mask-image","none"));l(this,"disableSpring",!1);l(this,"alignAnchor",.5);l(this,"size",[0,0]);l(this,"pos",[0,0]);l(this,"style",X.createStyleSheet({lyricPlayer:{userSelect:"none",padding:"1rem",boxSizing:"border-box",fontSize:"max(5vh, 12px)",fontWeight:"bold",width:"100%",height:"100%",overflow:"hidden",maxWidth:"100%",maxHeight:"100%",zIndex:1,color:"var(--amll-lyric-line-color)",mixBlendMode:"plus-lighter",contain:"strict"},lyricLine:{position:"absolute",transformOrigin:"left",maxWidth:"65%",padding:"max(2vh, 1rem) 1rem",contain:"content",transition:"filter 0.25s",margin:"max(2vh, 1rem) -1rem"},"@media (max-width: 1024px)":{lyricLine:{maxWidth:"75%",padding:"max(1vh, 1rem) 1rem",margin:"0 -1rem"}},lyricDuetLine:{textAlign:"right",transformOrigin:"right"},lyricBgLine:{opacity:0,fontSize:"max(50%, 10px)",transition:"opacity 0.25s","&.active":{transition:"opacity 0.25s 0.25s",opacity:1}},lyricMainLine:{transition:"opacity 0.3s 0.25s",margin:"-1rem",padding:"1rem","& span":{display:"inline-block",margin:"-1rem",padding:"1rem"},"& > span":{whiteSpace:"pre-wrap",wordBreak:"keep-all",maxLines:"1","&.emphasize":{margin:"-1rem",padding:"1rem",transformStyle:"preserve-3d",perspective:"50vw"}}},lyricSubLine:{fontSize:"max(50%, 10px)",opacity:.5},disableSpring:{"& > *":{transition:"filter 0.25s, transform 0.5s"}},interludeDots:{height:"min(1rem,2.5vh)",transformOrigin:"center",width:"fit-content",padding:"2.5% 0",position:"absolute",display:"flex",gap:"0.5rem","& > *":{width:"100%",display:"inline-block",borderRadius:"50%",aspectRatio:"1 / 1",backgroundColor:"var(--amll-lyric-line-color)",marginRight:"4px"},"&.duet":{right:"1rem",transformOrigin:"center"}},"@supports (mix-blend-mode: plus-lighter)":{lyricSubLine:{opacity:.3}},tmpDisableTransition:{transition:"none !important"}}));l(this,"onPageShow",()=>{this.calcLayout(!0)});this.interludeDots=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.style.attach(),this.interludeDots.setTransform(0,200),window.addEventListener("pageshow",this.onPageShow)}setEnableSpring(e=!0){this.disableSpring=!e,e?this.element.classList.remove(this.style.classes.disableSpring):this.element.classList.add(this.style.classes.disableSpring),this.calcLayout(!0)}getCurrentInterlude(){var s,a,h;if(this.bufferedLines.size>0)return;const e=this.currentTime+20,r=this.scrollToIndex;if(r===0){if((s=this.processedLines[0])!=null&&s.startTime&&this.processedLines[0].startTime>e)return[0,this.processedLines[0].startTime]}else if((a=this.processedLines[r])!=null&&a.endTime&&((h=this.processedLines[r+1])!=null&&h.startTime)&&this.processedLines[r+1].startTime>e&&this.processedLines[r].endTime<e)return[this.processedLines[r].endTime,this.processedLines[r+1].startTime]}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)}setEnableBlur(e){this.enableBlur!==e&&(this.enableBlur=e,this.calcLayout())}setLyricLines(e){this.lyricLines=e;const r=750;this.processedLines=e.map((s,a,h)=>{if(s.isBG)return{...s};{const i=h[a-1],n=h[a-2];if(i!=null&&i.isBG&&n){if(n.endTime<s.startTime)return{...s,startTime:Math.max(n.endTime,s.startTime-r)||s.startTime}}else if(i!=null&&i.endTime&&i.endTime<s.startTime)return{...s,startTime:Math.max(i==null?void 0:i.endTime,s.startTime-r)||s.startTime};return{...s}}}),this.processedLines.forEach((s,a,h)=>{const i=h[a+1],n=s.words[s.words.length-1];n&&P(n)&&(i?i.startTime>s.endTime&&(s.endTime=Math.min(s.endTime+1500,i.startTime)):s.endTime=s.endTime+1500)}),this.processedLines.forEach((s,a,h)=>{if(s.isBG)return;const i=h[a+1];i!=null&&i.isBG&&(i.startTime=Math.min(i.startTime,s.startTime))}),this.lyricLinesEl.forEach(s=>s.dispose()),this.lyricLinesEl=this.processedLines.map(s=>new G(this,s)),this.lyricLinesEl.forEach(s=>(this.element.appendChild(s.getElement()),s.updateMaskImage())),this.setLinePosXSpringParams({}),this.setLinePosYSpringParams({}),this.setLineScaleSpringParams({}),this.setCurrentTime(0,!0),this.calcLayout(!0)}calcLayout(e=!1){e&&(this.lyricLinesEl.forEach(o=>{const m=[o.getElement().clientWidth,o.getElement().clientHeight];this.lyricLinesSize.set(o,m),o.lineSize=m}),this.interludeDotsSize[0]=this.interludeDots.getElement().clientWidth,this.interludeDotsSize[1]=this.interludeDots.getElement().clientHeight);const r=.95;let a=-this.lyricLinesEl.slice(0,this.scrollToIndex).reduce((o,m)=>o+(m.getLine().isBG?0:this.lyricLinesSize.get(m)[1]),0);if(this.alignAnchor==="bottom"){a+=this.element.clientHeight/2;const o=this.lyricLinesEl[this.scrollToIndex];if(o){const m=this.lyricLinesSize.get(o)[1];a-=m/2}}else if(typeof this.alignAnchor=="number"){a+=this.element.clientHeight*this.alignAnchor;const o=this.lyricLinesEl[this.scrollToIndex];if(o){const m=this.lyricLinesSize.get(o)[1];a-=m/2}}const h=this.currentTime===0?void 0:this.getCurrentInterlude();let i=0;if(h&&(i=h[1]-h[0],i>=5e3)){const o=this.currentTime===0?this.lyricLinesEl[0]:this.lyricLinesEl[this.scrollToIndex+1];o&&(a-=this.lyricLinesSize.get(o)[1])}const n=Math.max(...this.bufferedLines);let c=0;this.lyricLinesEl.forEach((o,m)=>{const p=this.bufferedLines.has(m),g=p||m>=this.scrollToIndex&&m<n,u=o.getLine();let E=0;u.isDuet&&(E=this.size[0]-this.lyricLinesSize.get(o)[0]),m===this.scrollToIndex+1&&i>=5e3&&(this.interludeDots.setTransform(0,a),this.interludeDots.setInterlude(this.getCurrentInterlude()),a+=this.interludeDotsSize[1]),o.setTransform(E,a,g?1:r,p?1:1/3,this.enableBlur?3*(g?0:1+(m<this.scrollToIndex?Math.abs(this.scrollToIndex-m):Math.abs(m-Math.max(this.scrollToIndex,n)))):0,e,c),u.isBG&&g?a+=this.lyricLinesSize.get(o)[1]:u.isBG||(a+=this.lyricLinesSize.get(o)[1]),a>=0&&(c+=.05)})}getCurrentTime(){return this.currentTime}getLyrics(){return this.lyricLines}getElement(){return this.element}setCurrentTime(e,r=!1){this.currentTime=e,this.element.style.setProperty("--amll-player-time",`${e}`);const s=new Set,a=new Set,h=new Set;this.hotLines.forEach(i=>{const n=this.processedLines[i];if(!n.isBG)if(n){const c=this.processedLines[i+1];if(c!=null&&c.isBG){const o=Math.min(n.startTime,c==null?void 0:c.startTime),m=Math.max(n.endTime,c==null?void 0:c.endTime);(o>e||m<=e)&&(this.hotLines.delete(i),s.add(i),this.hotLines.delete(i+1),s.add(i+1),r&&(this.lyricLinesEl[i].disable(),this.lyricLinesEl[i+1].disable()))}else(n.startTime>e||n.endTime<=e)&&(this.hotLines.delete(i),s.add(i),r&&this.lyricLinesEl[i].disable())}else this.hotLines.delete(i),s.add(i),r&&this.lyricLinesEl[i].disable()}),this.processedLines.forEach((i,n,c)=>{var o;!i.isBG&&i.startTime<=e&&i.endTime>e&&(this.hotLines.has(n)||(this.hotLines.add(n),h.add(n),r&&this.lyricLinesEl[n].enable(),(o=c[n+1])!=null&&o.isBG&&(this.hotLines.add(n+1),h.add(n+1),r&&this.lyricLinesEl[n+1].enable())))}),this.bufferedLines.forEach(i=>{this.hotLines.has(i)||(a.add(i),r&&this.lyricLinesEl[i].disable())}),r?(this.bufferedLines.size>0?this.scrollToIndex=Math.min(...this.bufferedLines):this.scrollToIndex=this.processedLines.findIndex(i=>i.startTime>=e),this.bufferedLines.clear(),this.hotLines.forEach(i=>this.bufferedLines.add(i)),this.calcLayout(!0)):(a.size>0||h.size>0)&&(a.size===0&&h.size>0?(h.forEach(i=>{this.bufferedLines.add(i),this.lyricLinesEl[i].enable()}),this.scrollToIndex=Math.min(...this.bufferedLines)):h.size===0&&a.size>0?k(a,this.bufferedLines)&&this.bufferedLines.forEach(i=>{this.hotLines.has(i)||(this.bufferedLines.delete(i),this.lyricLinesEl[i].disable())}):(h.forEach(i=>{this.bufferedLines.add(i),this.lyricLinesEl[i].enable()}),a.forEach(i=>{this.bufferedLines.delete(i),this.lyricLinesEl[i].disable()}),this.bufferedLines.size>0&&(this.scrollToIndex=Math.min(...this.bufferedLines))),this.calcLayout())}update(e=0){const r=e/1e3;this.interludeDots.update(e),this.lyricLinesEl.forEach(s=>s.update(r))}setLinePosXSpringParams(e){this.posXSpringParams={...this.posXSpringParams,...e},this.lyricLinesEl.forEach(r=>r.lineTransforms.posX.updateParams(this.posXSpringParams))}setLinePosYSpringParams(e){this.posYSpringParams={...this.posYSpringParams,...e},this.lyricLinesEl.forEach(r=>r.lineTransforms.posY.updateParams(this.posYSpringParams))}setLineScaleSpringParams(e){this.scaleSpringParams={...this.scaleSpringParams,...e},this.lyricLinesEl.forEach(r=>r.lineTransforms.scale.updateParams(this.scaleSpringParams))}dispose(){this.element.remove(),this.resizeObserver.disconnect(),this.style.detach(),this.lyricLinesEl.forEach(e=>e.dispose()),window.removeEventListener("pageshow",this.onPageShow)}}exports.BackgroundRender=D;exports.LyricPlayer=Y;

package/dist/amll-core.mjs

@@ -0,0 +1,904 @@
+var w = Object.defineProperty;
+var v = (d, t, e) => t in d ? w(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e;
+var l = (d, t, e) => (v(d, typeof t != "symbol" ? t + "" : t, e), e);
+import { Container as x } from "@pixi/display";
+import { Application as C } from "@pixi/app";
+import { BlurFilter as f } from "@pixi/filter-blur";
+import { ColorMatrixFilter as b } from "@pixi/filter-color-matrix";
+import { Texture as M } from "@pixi/core";
+import { Sprite as L } from "@pixi/sprite";
+import { create as z } from "jss";
+import I from "jss-preset-default";
+class A extends x {
+  constructor() {
+    super(...arguments);
+    l(this, "time", 0);
+  }
+}
+class B {
+  constructor(t) {
+    l(this, "observer");
+    l(this, "app");
+    l(this, "curContainer");
+    l(this, "lastContainer", /* @__PURE__ */ new Set());
+    l(this, "onTick", (t) => {
+      for (const e of this.lastContainer)
+        e.alpha = Math.max(0, e.alpha - t / 60), e.alpha <= 0 && (this.app.stage.removeChild(e), this.lastContainer.delete(e));
+      if (this.curContainer) {
+        this.curContainer.alpha = Math.min(
+          1,
+          this.curContainer.alpha + t / 60
+        );
+        const [e, n, s, a] = this.curContainer.children, h = Math.max(this.app.screen.width, this.app.screen.height);
+        e.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
+        ), s.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), e.width = h * Math.sqrt(2), e.height = e.width, n.width = h * 0.8, n.height = n.width, s.width = h * 0.5, s.height = s.width, a.width = h * 0.25, a.height = a.width, this.curContainer.time += t * this.flowSpeed, e.rotation += t / 1e3 * this.flowSpeed, n.rotation -= t / 500 * this.flowSpeed, s.rotation += t / 1e3 * this.flowSpeed, a.rotation -= t / 750 * this.flowSpeed, s.x = this.app.screen.width / 2 + this.app.screen.width / 4 * Math.cos(this.curContainer.time / 1e3 * 0.75), s.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);
+      }
+    });
+    l(this, "flowSpeed", 2);
+    l(this, "currerntRenderScale", 0.75);
+    this.canvas = t;
+    const e = t.getBoundingClientRect();
+    this.canvas.width = e.width * this.currerntRenderScale, this.canvas.height = e.height * this.currerntRenderScale, this.observer = new ResizeObserver(() => {
+      const n = t.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.observer.observe(t), this.app = new C({
+      view: t,
+      resizeTo: this.canvas,
+      powerPreference: "low-power",
+      backgroundAlpha: 0
+    }), this.rebuildFilters(), this.app.ticker.add(this.onTick), this.app.ticker.start();
+  }
+  setRenderScale(t) {
+    this.currerntRenderScale = t;
+    const e = this.canvas.getBoundingClientRect();
+    this.canvas.width = Math.max(1, e.width), this.canvas.height = Math.max(1, e.height), this.app.renderer.resize(
+      this.canvas.width * this.currerntRenderScale,
+      this.canvas.height * this.currerntRenderScale
+    ), this.rebuildFilters();
+  }
+  rebuildFilters() {
+    const t = Math.min(this.canvas.width, this.canvas.height), e = new b();
+    e.saturate(1.2, !1);
+    const n = new b();
+    n.brightness(0.6, !1);
+    const s = new b();
+    s.contrast(0.3, !0), this.app.stage.filters = [], this.app.stage.filters.push(new f(5, 1)), this.app.stage.filters.push(new f(10, 1)), this.app.stage.filters.push(new f(20, 2)), this.app.stage.filters.push(new f(40, 2)), t > 512 && this.app.stage.filters.push(new f(80, 2)), t > 768 && this.app.stage.filters.push(new f(160, 4)), t > 768 * 2 && this.app.stage.filters.push(new f(320, 4)), this.app.stage.filters.push(e, n, s), this.app.stage.filters.push(new f(5, 1));
+  }
+  setFPS(t) {
+    this.app.ticker.maxFPS = t;
+  }
+  pause() {
+    this.app.ticker.stop(), this.app.render();
+  }
+  resume() {
+    this.app.ticker.start();
+  }
+  async setAlbumImage(t) {
+    const e = await M.fromURL(t), n = new A(), s = new L(e), a = new L(e), h = new L(e), i = new L(e);
+    s.anchor.set(0.5, 0.5), a.anchor.set(0.5, 0.5), h.anchor.set(0.5, 0.5), i.anchor.set(0.5, 0.5), s.rotation = Math.random() * Math.PI * 2, a.rotation = Math.random() * Math.PI * 2, h.rotation = Math.random() * Math.PI * 2, i.rotation = Math.random() * Math.PI * 2, n.addChild(s, a, h, i), this.curContainer && this.lastContainer.add(this.curContainer), this.curContainer = n, this.app.stage.addChild(this.curContainer), this.curContainer.alpha = 0;
+  }
+  dispose() {
+    this.observer.disconnect(), this.app.ticker.remove(this.onTick);
+  }
+}
+class Q extends B {
+  constructor() {
+    const e = document.createElement("canvas");
+    super(e);
+    l(this, "element");
+    this.element = e, e.style.pointerEvents = "none", e.style.zIndex = "-1";
+  }
+  getElement() {
+    return this.element;
+  }
+  dispose() {
+    super.dispose(), this.element.remove();
+  }
+}
+const D = (d, t) => d.size === t.size && [...d].every((e) => t.has(e));
+function k(d) {
+  const e = 2.5949095;
+  return d < 0.5 ? Math.pow(2 * d, 2) * ((e + 1) * 2 * d - e) / 2 : (Math.pow(2 * d - 2, 2) * ((e + 1) * (d * 2 - 2) + e) + 2) / 2;
+}
+const y = (d, t, e) => Math.max(d, Math.min(t, e));
+class $ {
+  constructor(t) {
+    l(this, "element", document.createElement("div"));
+    l(this, "dot0", document.createElement("span"));
+    l(this, "dot1", document.createElement("span"));
+    l(this, "dot2", document.createElement("span"));
+    l(this, "left", 0);
+    l(this, "top", 0);
+    l(this, "scale", 1);
+    l(this, "lastStyle", "");
+    l(this, "currentInterlude");
+    l(this, "currentTime", 0);
+    l(this, "targetBreatheDuration", 1500);
+    this.lyricPlayer = t, this.element.className = this.lyricPlayer.style.classes.interludeDots, this.element.appendChild(this.dot0), this.element.appendChild(this.dot1), this.element.appendChild(this.dot2);
+  }
+  getElement() {
+    return this.element;
+  }
+  setTransform(t = this.left, e = this.top) {
+    this.left = t, this.top = e, this.update();
+  }
+  setInterlude(t) {
+    this.currentInterlude = t, this.currentTime = (t == null ? void 0 : t[0]) ?? 0;
+  }
+  update(t = 0) {
+    this.currentTime += t;
+    let e = "";
+    if (e += `transform:translate(${this.left}px, ${this.top}px)`, this.currentInterlude) {
+      const n = this.currentInterlude[1] - this.currentInterlude[0], s = this.currentTime - this.currentInterlude[0];
+      if (s <= n) {
+        const a = n / Math.ceil(n / this.targetBreatheDuration);
+        let h = 1, i = 1;
+        h *= Math.sin(1.5 * Math.PI - s / a * 2) / 10 + 1, s < 1e3 && (h *= 1 - Math.pow((1e3 - s) / 1e3, 2)), s < 500 ? i = 0 : s < 1e3 && (i *= (s - 500) / 500), n - s < 750 && (h *= 1 - k(
+          (750 - (n - s)) / 750 / 2
+        )), n - s < 375 && (i *= y(
+          0,
+          (n - s) / 375,
+          1
+        )), h = Math.max(0, h), e += ` scale(${h})`;
+        const r = y(
+          0.25,
+          s * 3 / n * 0.75,
+          1
+        ), c = y(
+          0.25,
+          (s - n / 3) * 3 / n * 0.75,
+          1
+        ), o = y(
+          0.25,
+          (s - n / 3 * 2) * 3 / n * 0.75,
+          1
+        );
+        this.dot0.style.opacity = `${y(
+          0,
+          Math.max(0, i * r),
+          1
+        )}`, this.dot1.style.opacity = `${y(
+          0,
+          Math.max(0, i * c),
+          1
+        )}`, this.dot2.style.opacity = `${y(
+          0,
+          Math.max(0, i * o),
+          1
+        )}`;
+      } else
+        e += " scale(0)", this.dot0.style.opacity = "0", this.dot1.style.opacity = "0", this.dot2.style.opacity = "0";
+    } else
+      e += " scale(0)", this.dot0.style.opacity = "0", this.dot1.style.opacity = "0", this.dot2.style.opacity = "0";
+    e += ";", this.lastStyle !== e && (this.element.setAttribute("style", e), this.lastStyle = e);
+  }
+  dispose() {
+    this.element.remove();
+  }
+}
+class S {
+  constructor(t = 0) {
+    l(this, "currentPosition", 0);
+    l(this, "targetPosition", 0);
+    l(this, "currentTime", 0);
+    l(this, "params", {});
+    l(this, "currentSolver");
+    l(this, "getV");
+    l(this, "queueParams");
+    l(this, "queuePosition");
+    this.targetPosition = t, this.currentPosition = this.targetPosition, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
+  }
+  resetSolver() {
+    const t = this.getV(this.currentTime);
+    this.currentTime = 0, this.currentSolver = q(
+      this.currentPosition,
+      t,
+      this.targetPosition,
+      0,
+      this.params
+    ), this.getV = W(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(t) {
+    this.targetPosition = t, this.currentPosition = t, this.currentSolver = () => this.targetPosition, this.getV = () => 0;
+  }
+  update(t = 0) {
+    this.currentTime += t, this.currentPosition = this.currentSolver(this.currentTime), this.queueParams && (this.queueParams.time -= t, this.queueParams.time <= 0 && this.updateParams({
+      ...this.queueParams
+    })), this.queuePosition && (this.queuePosition.time -= t, this.queuePosition.time <= 0 && this.setTargetPosition(this.queuePosition.position)), this.arrived() && this.setPosition(this.targetPosition);
+  }
+  updateParams(t, e = 0) {
+    e > 0 ? this.queueParams = {
+      ...t,
+      time: e
+    } : (this.params = {
+      ...this.params,
+      ...t
+    }, this.resetSolver());
+  }
+  setTargetPosition(t, e = 0) {
+    e > 0 ? this.queuePosition = {
+      position: t,
+      time: e
+    } : (this.queuePosition = void 0, this.targetPosition = t, this.resetSolver());
+  }
+  getCurrentPosition() {
+    return this.currentPosition;
+  }
+}
+function q(d, t, e, n = 0, s) {
+  const a = (s == null ? void 0 : s.soft) ?? !1, h = (s == null ? void 0 : s.stiffness) ?? 100, i = (s == null ? void 0 : s.damping) ?? 10, r = (s == null ? void 0 : s.mass) ?? 1, c = e - d;
+  if (a || 1 <= i / (2 * Math.sqrt(h * r))) {
+    const o = -Math.sqrt(h / r), m = -o * c - t;
+    return (p) => (p -= n, p < 0 ? d : e - (c + p * m) * Math.E ** (p * o));
+  } else {
+    const o = Math.sqrt(
+      4 * r * h - i ** 2
+    ), m = (i * c - 2 * r * t) / o, p = 0.5 * o / r, g = -(0.5 * i) / r;
+    return (u) => (u -= n, u < 0 ? d : e - (Math.cos(u * p) * c + Math.sin(u * p) * m) * Math.E ** (u * g));
+  }
+}
+function R(d) {
+  return (e) => (d(e + 1e-3) - d(e - 1e-3)) / (2 * 1e-3);
+}
+function W(d) {
+  return R(d);
+}
+const T = /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u;
+function F(d, t = "rgba(0,0,0,1)", e = "rgba(0,0,0,0.5)") {
+  const n = 2 + d, s = d / n, a = (1 - s) / 2;
+  return [
+    `linear-gradient(to right,${t} ${a * 100}%,${e} ${(a + s) * 100}%)`,
+    s,
+    n
+  ];
+}
+function P(d) {
+  return d.endTime - d.startTime >= 1e3 && d.word.length <= 7;
+}
+class O {
+  constructor(t, e = {
+    words: [],
+    translatedLyric: "",
+    romanLyric: "",
+    startTime: 0,
+    endTime: 0,
+    isBG: !1,
+    isDuet: !1
+  }) {
+    l(this, "element", document.createElement("div"));
+    l(this, "left", 0);
+    l(this, "top", 0);
+    l(this, "scale", 1);
+    l(this, "blur", 0);
+    l(this, "delay", 0);
+    l(this, "splittedWords", []);
+    // 由 LyricPlayer 来设置
+    l(this, "lineSize", [0, 0]);
+    l(this, "lineTransforms", {
+      posX: new S(0),
+      posY: new S(0),
+      scale: new S(1)
+    });
+    l(this, "_hide", !0);
+    l(this, "lastStyle", "");
+    this.lyricPlayer = t, this.lyricLine = e, this.element.setAttribute(
+      "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 n = this.element.children[0], s = this.element.children[1], a = this.element.children[2];
+    n.setAttribute("class", this.lyricPlayer.style.classes.lyricMainLine), s.setAttribute("class", this.lyricPlayer.style.classes.lyricSubLine), a.setAttribute("class", this.lyricPlayer.style.classes.lyricSubLine), this.rebuildElement(), this.rebuildStyle();
+  }
+  enable() {
+    this.element.classList.add("active");
+    const t = this.element.children[0];
+    this.splittedWords.forEach((e) => {
+      e.elementAnimations.forEach((n) => {
+        n.currentTime = 0, n.playbackRate = 1, n.play();
+      });
+    }), t.classList.add("active");
+  }
+  disable() {
+    this.element.classList.remove("active");
+    const t = this.element.children[0];
+    this.splittedWords.forEach((e) => {
+      e.elementAnimations.forEach((n) => {
+        n.id === "float-word" && (n.playbackRate = -1, n.play());
+      });
+    }), t.classList.remove("active");
+  }
+  setLine(t) {
+    this.lyricLine = t, this.lyricLine.isBG ? this.element.classList.add(this.lyricPlayer.style.classes.lyricBgLine) : this.element.classList.remove(this.lyricPlayer.style.classes.lyricBgLine), this.lyricLine.isDuet ? this.element.classList.add(this.lyricPlayer.style.classes.lyricDuetLine) : this.element.classList.remove(
+      this.lyricPlayer.style.classes.lyricDuetLine
+    ), this.rebuildElement(), this.rebuildStyle();
+  }
+  getLine() {
+    return this.lyricLine;
+  }
+  show() {
+    this._hide = !1, this.rebuildStyle();
+  }
+  hide() {
+    this._hide = !0, this.rebuildStyle();
+  }
+  rebuildStyle() {
+    if (this._hide) {
+      this.lastStyle !== "visibility:hidden;transform:translate(0,-10000px);" && (this.lastStyle = "visibility:hidden;transform:translate(0,-10000px);", this.element.setAttribute(
+        "style",
+        "visibility:hidden;transform:translate(0,-10000px);"
+      ));
+      return;
+    }
+    let t = `transform:translate(${this.lineTransforms.posX.getCurrentPosition()}px,${this.lineTransforms.posY.getCurrentPosition()}px) scale(${this.lineTransforms.scale.getCurrentPosition()});`;
+    this.lyricPlayer.disableSpring && this.isInSight && (t += `transition-delay:${this.delay}ms;`), t += `filter:blur(${Math.min(32, this.blur)}px);`, t !== this.lastStyle && (this.lastStyle = t, this.element.setAttribute("style", t));
+  }
+  rebuildElement() {
+    const t = this.element.children[0], e = this.element.children[1], n = this.element.children[2];
+    this.splittedWords = [], this.lyricLine.words.forEach((r) => {
+      if (T.test(r.word))
+        this.splittedWords.push({
+          ...r,
+          width: 0,
+          height: 0,
+          elements: [],
+          elementAnimations: [],
+          shouldEmphasize: P(r)
+        });
+      else {
+        const c = /(\s*)(\S*)(\s*)/.exec(r.word);
+        c && (c[1].length > 0 && this.splittedWords.push({
+          word: " ",
+          startTime: 0,
+          endTime: 0,
+          width: 0,
+          height: 0,
+          elements: [],
+          elementAnimations: [],
+          shouldEmphasize: !1
+        }), this.splittedWords.push({
+          word: c[2],
+          startTime: r.startTime,
+          endTime: r.endTime,
+          width: 0,
+          height: 0,
+          elements: [],
+          elementAnimations: [],
+          shouldEmphasize: P(r)
+        }), c[3].length > 0 && this.splittedWords.push({
+          word: " ",
+          startTime: 0,
+          endTime: 0,
+          width: 0,
+          height: 0,
+          elements: [],
+          elementAnimations: [],
+          shouldEmphasize: !1
+        }));
+      }
+    });
+    const s = [], a = [];
+    function h(r) {
+      for (; r.firstChild; )
+        r.firstChild.nodeType === Node.ELEMENT_NODE ? s.push(t.firstChild) : r.firstChild.nodeType === Node.TEXT_NODE && a.push(t.firstChild), r.removeChild(r.firstChild), h(r.firstChild);
+    }
+    h(t);
+    let i = null;
+    this.splittedWords.forEach((r) => {
+      if (r.word.trim().length > 0)
+        if (r.shouldEmphasize) {
+          const c = s.pop() ?? document.createElement("span");
+          c.className = "emphasize", r.elements = [c];
+          for (const o of r.word) {
+            const m = s.pop() ?? document.createElement("span");
+            m.className = "", m.innerText = o, c.appendChild(m), r.elements.push(m);
+          }
+          if (r.elementAnimations = this.initEmphasizeAnimation(r), console.log(r.word, T.test(r.word)), i && !T.test(r.word))
+            if (i.childElementCount > 0)
+              i.appendChild(c);
+            else {
+              const o = s.pop() ?? document.createElement("span");
+              o.className = "", i.remove(), o.appendChild(i), o.appendChild(c), t.appendChild(o), i = o;
+            }
+          else
+            i = T.test(r.word) ? null : c, t.appendChild(c);
+        } else {
+          const c = s.pop() ?? document.createElement("span");
+          if (c.className = "", c.innerText = r.word, r.elements = [c], r.elementAnimations.push(this.initFloatAnimation(r, c)), i)
+            if (i.childElementCount > 0)
+              i.appendChild(c);
+            else {
+              const o = s.pop() ?? document.createElement("span");
+              o.className = "", i.remove(), o.appendChild(i), o.appendChild(c), t.appendChild(o), i = o;
+            }
+          else
+            i = c, t.appendChild(c);
+        }
+      else if (r.word.length > 0) {
+        const c = a.pop() ?? document.createTextNode(" ");
+        t.appendChild(c), i = null;
+      } else
+        i = null;
+    }), e.innerText = this.lyricLine.translatedLyric, n.innerText = this.lyricLine.romanLyric;
+  }
+  initFloatAnimation(t, e) {
+    const n = e.animate(
+      [
+        {
+          transform: "translateY(0px)"
+        },
+        {
+          transform: "translateY(-3%)"
+        }
+      ],
+      {
+        duration: Math.max(1e3, t.endTime - t.startTime),
+        delay: t.startTime - this.lyricLine.startTime,
+        id: "float-word",
+        composite: "add",
+        fill: "both"
+      }
+    );
+    return n.pause(), n;
+  }
+  initEmphasizeAnimation(t) {
+    const e = t.startTime - this.lyricLine.startTime, n = t.endTime - t.startTime;
+    return t.elements.map((s, a, h) => {
+      if (a === 0)
+        return this.initFloatAnimation(t, s);
+      {
+        const i = s.animate(
+          [
+            {
+              offset: 0,
+              transform: "translate3d(0, 0px, 0px)",
+              filter: "drop-shadow(0 0 0 var(--amll-lyric-line-color))"
+            },
+            {
+              offset: 0.5,
+              transform: "translate3d(0, -2%, 20px)",
+              filter: "drop-shadow(0 0 0.2rem var(--amll-lyric-line-color))"
+            },
+            {
+              offset: 1,
+              transform: "translate3d(0, 0px, 0)",
+              filter: "drop-shadow(0 0 0 var(--amll-lyric-line-color))"
+            }
+          ],
+          {
+            duration: Math.max(1e3, t.endTime - t.startTime),
+            delay: e + n / (h.length - 1) * (a - 1),
+            id: "glow-word",
+            iterations: 1,
+            composite: "replace",
+            fill: "both"
+          }
+        );
+        return i.pause(), i;
+      }
+    });
+  }
+  updateMaskImage() {
+    this.splittedWords.forEach((t) => {
+      const e = t.elements[0];
+      if (e) {
+        t.width = e.clientWidth, t.height = e.clientHeight;
+        const [n, s, a] = F(
+          16 / t.width,
+          "rgba(0,0,0,0.75)",
+          "rgba(0,0,0,0.25)"
+        ), h = `${a * 100}% 100%`;
+        this.lyricPlayer.supportMaskImage ? (e.style.maskImage = n, e.style.maskOrigin = "left", e.style.maskSize = h) : (e.style.webkitMaskImage = n, e.style.webkitMaskOrigin = "left", e.style.webkitMaskSize = h);
+        const i = t.width + 16, r = `clamp(${-i}px,calc(${-i}px + (var(--amll-player-time) - ${t.startTime})*${i / Math.abs(t.endTime - t.startTime)}px),0px) 0px, left top`;
+        e.style.maskPosition = r, e.style.webkitMaskPosition = r;
+      }
+    });
+  }
+  getElement() {
+    return this.element;
+  }
+  setTransform(t = this.left, e = this.top, n = this.scale, s = 1, a = 0, h = !1, i = 0) {
+    this.left = t, this.top = e, this.scale = n, this.delay = i * 1e3 | 0;
+    const r = this.element.children[0];
+    r.style.opacity = `${s}`, h || this.lyricPlayer.disableSpring ? (this.blur = Math.min(32, a), h && this.element.classList.add(
+      this.lyricPlayer.style.classes.tmpDisableTransition
+    ), this.lineTransforms.posX.setPosition(t), this.lineTransforms.posY.setPosition(e), this.lineTransforms.scale.setPosition(n), this.lyricPlayer.disableSpring ? this.show() : this.rebuildStyle(), h && requestAnimationFrame(() => {
+      this.element.classList.remove(
+        this.lyricPlayer.style.classes.tmpDisableTransition
+      );
+    })) : (this.lineTransforms.posX.setTargetPosition(t, i), this.lineTransforms.posY.setTargetPosition(e, i), this.lineTransforms.scale.setTargetPosition(n), this.blur !== Math.min(32, a) && (this.blur = Math.min(32, a), this.element.style.filter = `blur(${Math.min(32, a)}px)`));
+  }
+  update(t = 0) {
+    this.lyricPlayer.disableSpring || (this.lineTransforms.posX.update(t), this.lineTransforms.posY.update(t), this.lineTransforms.scale.update(t), this.isInSight ? this.show() : this.hide());
+  }
+  get isInSight() {
+    const t = this.lineTransforms.posX.getCurrentPosition(), e = this.lineTransforms.posY.getCurrentPosition(), n = t + this.lineSize[0], s = e + this.lineSize[1], a = this.lyricPlayer.pos[0], h = this.lyricPlayer.pos[1], i = this.lyricPlayer.pos[0] + this.lyricPlayer.size[0], r = this.lyricPlayer.pos[1] + this.lyricPlayer.size[1];
+    return !(t > i || e > r || n < a || s < h);
+  }
+  dispose() {
+    this.element.remove();
+  }
+}
+const G = z(I());
+class Z extends EventTarget {
+  constructor() {
+    super();
+    l(this, "element", document.createElement("div"));
+    l(this, "currentTime", 0);
+    l(this, "lyricLines", []);
+    l(this, "processedLines", []);
+    l(this, "lyricLinesEl", []);
+    l(this, "lyricLinesSize", /* @__PURE__ */ new Map());
+    l(this, "hotLines", /* @__PURE__ */ new Set());
+    l(this, "bufferedLines", /* @__PURE__ */ new Set());
+    l(this, "scrollToIndex", 0);
+    l(this, "resizeObserver", new ResizeObserver((e) => {
+      const n = e[0].contentRect;
+      this.size[0] = n.width, this.size[1] = n.height, this.pos[0] = n.left, this.pos[1] = n.top, this.rebuildStyle(), this.calcLayout(!0), this.lyricLinesEl.forEach((s) => s.updateMaskImage());
+    }));
+    l(this, "posXSpringParams", {
+      mass: 1,
+      damping: 10,
+      stiffness: 100
+    });
+    l(this, "posYSpringParams", {
+      mass: 1,
+      damping: 15,
+      stiffness: 100
+    });
+    l(this, "scaleSpringParams", {
+      mass: 1,
+      damping: 20,
+      stiffness: 100
+    });
+    l(this, "enableBlur", !0);
+    l(this, "interludeDots");
+    l(this, "interludeDotsSize", [0, 0]);
+    l(this, "supportPlusLighter", CSS.supports("mix-blend-mode", "plus-lighter"));
+    l(this, "supportMaskImage", CSS.supports("mask-image", "none"));
+    l(this, "disableSpring", !1);
+    l(this, "alignAnchor", 0.5);
+    l(this, "size", [0, 0]);
+    l(this, "pos", [0, 0]);
+    l(this, "style", G.createStyleSheet({
+      lyricPlayer: {
+        userSelect: "none",
+        padding: "1rem",
+        boxSizing: "border-box",
+        fontSize: "max(5vh, 12px)",
+        fontWeight: "bold",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        zIndex: 1,
+        color: "var(--amll-lyric-line-color)",
+        mixBlendMode: "plus-lighter",
+        contain: "strict"
+      },
+      lyricLine: {
+        position: "absolute",
+        transformOrigin: "left",
+        maxWidth: "65%",
+        padding: "max(2vh, 1rem) 1rem",
+        contain: "content",
+        transition: "filter 0.25s",
+        margin: "max(2vh, 1rem) -1rem"
+      },
+      "@media (max-width: 1024px)": {
+        lyricLine: {
+          maxWidth: "75%",
+          padding: "max(1vh, 1rem) 1rem",
+          margin: "0 -1rem"
+        }
+      },
+      lyricDuetLine: {
+        textAlign: "right",
+        transformOrigin: "right"
+      },
+      lyricBgLine: {
+        opacity: 0,
+        fontSize: "max(50%, 10px)",
+        transition: "opacity 0.25s",
+        "&.active": {
+          transition: "opacity 0.25s 0.25s",
+          opacity: 1
+        }
+      },
+      lyricMainLine: {
+        transition: "opacity 0.3s 0.25s",
+        margin: "-1rem",
+        padding: "1rem",
+        "& span": {
+          display: "inline-block",
+          margin: "-1rem",
+          padding: "1rem"
+        },
+        "& > span": {
+          whiteSpace: "pre-wrap",
+          wordBreak: "keep-all",
+          maxLines: "1",
+          "&.emphasize": {
+            margin: "-1rem",
+            padding: "1rem",
+            transformStyle: "preserve-3d",
+            perspective: "50vw"
+          }
+        }
+      },
+      lyricSubLine: {
+        fontSize: "max(50%, 10px)",
+        opacity: 0.5
+      },
+      disableSpring: {
+        "& > *": {
+          transition: "filter 0.25s, transform 0.5s"
+        }
+      },
+      interludeDots: {
+        height: "min(1rem,2.5vh)",
+        transformOrigin: "center",
+        width: "fit-content",
+        padding: "2.5% 0",
+        position: "absolute",
+        display: "flex",
+        gap: "0.5rem",
+        "& > *": {
+          width: "100%",
+          display: "inline-block",
+          borderRadius: "50%",
+          aspectRatio: "1 / 1",
+          backgroundColor: "var(--amll-lyric-line-color)",
+          marginRight: "4px"
+        },
+        "&.duet": {
+          right: "1rem",
+          transformOrigin: "center"
+        }
+      },
+      "@supports (mix-blend-mode: plus-lighter)": {
+        lyricSubLine: {
+          opacity: 0.3
+        }
+      },
+      tmpDisableTransition: {
+        transition: "none !important"
+      }
+    }));
+    l(this, "onPageShow", () => {
+      this.calcLayout(!0);
+    });
+    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);
+  }
+  /**
+   * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+   *
+   * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+   *
+   * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+   */
+  setEnableSpring(e = !0) {
+    this.disableSpring = !e, e ? this.element.classList.remove(this.style.classes.disableSpring) : this.element.classList.add(this.style.classes.disableSpring), this.calcLayout(!0);
+  }
+  /**
+   * 获取当前播放时间里是否处于间奏区间
+   * 如果是则会返回单位为毫秒的始末时间
+   * 否则返回 undefined
+   * @returns [开始时间,结束时间] 或 undefined 如果不处于间奏区间
+   */
+  getCurrentInterlude() {
+    var s, a, h;
+    if (this.bufferedLines.size > 0)
+      return;
+    const e = this.currentTime + 20, n = this.scrollToIndex;
+    if (n === 0) {
+      if ((s = this.processedLines[0]) != null && s.startTime && this.processedLines[0].startTime > e)
+        return [0, this.processedLines[0].startTime];
+    } else if ((a = this.processedLines[n]) != null && a.endTime && ((h = this.processedLines[n + 1]) != null && h.startTime) && this.processedLines[n + 1].startTime > e && this.processedLines[n].endTime < e)
+      return [
+        this.processedLines[n].endTime,
+        this.processedLines[n + 1].startTime
+      ];
+  }
+  /**
+   * 重建样式，这个只允许内部调用
+   */
+  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);
+  }
+  /**
+   * 设置是否启用歌词行的模糊效果
+   * @param enable 是否启用
+   */
+  setEnableBlur(e) {
+    this.enableBlur !== e && (this.enableBlur = e, this.calcLayout());
+  }
+  /**
+   * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
+   * @param lines 歌词数组
+   */
+  setLyricLines(e) {
+    this.lyricLines = e;
+    const n = 750;
+    this.processedLines = e.map((s, a, h) => {
+      if (s.isBG)
+        return {
+          ...s
+        };
+      {
+        const i = h[a - 1], r = h[a - 2];
+        if (i != null && i.isBG && r) {
+          if (r.endTime < s.startTime)
+            return {
+              ...s,
+              startTime: Math.max(r.endTime, s.startTime - n) || s.startTime
+            };
+        } else if (i != null && i.endTime && i.endTime < s.startTime)
+          return {
+            ...s,
+            startTime: Math.max(i == null ? void 0 : i.endTime, s.startTime - n) || s.startTime
+          };
+        return {
+          ...s
+        };
+      }
+    }), this.processedLines.forEach((s, a, h) => {
+      const i = h[a + 1], r = s.words[s.words.length - 1];
+      r && P(r) && (i ? i.startTime > s.endTime && (s.endTime = Math.min(s.endTime + 1500, i.startTime)) : s.endTime = s.endTime + 1500);
+    }), this.processedLines.forEach((s, a, h) => {
+      if (s.isBG)
+        return;
+      const i = h[a + 1];
+      i != null && i.isBG && (i.startTime = Math.min(i.startTime, s.startTime));
+    }), this.lyricLinesEl.forEach((s) => s.dispose()), this.lyricLinesEl = this.processedLines.map(
+      (s) => new O(this, s)
+    ), this.lyricLinesEl.forEach(
+      (s) => (this.element.appendChild(s.getElement()), s.updateMaskImage())
+    ), this.setLinePosXSpringParams({}), this.setLinePosYSpringParams({}), this.setLineScaleSpringParams({}), this.setCurrentTime(0, !0), this.calcLayout(!0);
+  }
+  calcLayout(e = !1) {
+    e && (this.lyricLinesEl.forEach((o) => {
+      const m = [
+        o.getElement().clientWidth,
+        o.getElement().clientHeight
+      ];
+      this.lyricLinesSize.set(o, m), o.lineSize = m;
+    }), this.interludeDotsSize[0] = this.interludeDots.getElement().clientWidth, this.interludeDotsSize[1] = this.interludeDots.getElement().clientHeight);
+    const n = 0.95;
+    let a = -this.lyricLinesEl.slice(0, this.scrollToIndex).reduce(
+      (o, m) => o + (m.getLine().isBG ? 0 : this.lyricLinesSize.get(m)[1]),
+      0
+    );
+    if (this.alignAnchor === "bottom") {
+      a += this.element.clientHeight / 2;
+      const o = this.lyricLinesEl[this.scrollToIndex];
+      if (o) {
+        const m = this.lyricLinesSize.get(o)[1];
+        a -= m / 2;
+      }
+    } else if (typeof this.alignAnchor == "number") {
+      a += this.element.clientHeight * this.alignAnchor;
+      const o = this.lyricLinesEl[this.scrollToIndex];
+      if (o) {
+        const m = this.lyricLinesSize.get(o)[1];
+        a -= m / 2;
+      }
+    }
+    const h = this.currentTime === 0 ? void 0 : this.getCurrentInterlude();
+    let i = 0;
+    if (h && (i = h[1] - h[0], i >= 5e3)) {
+      const o = this.currentTime === 0 ? this.lyricLinesEl[0] : this.lyricLinesEl[this.scrollToIndex + 1];
+      o && (a -= this.lyricLinesSize.get(o)[1]);
+    }
+    const r = Math.max(...this.bufferedLines);
+    let c = 0;
+    this.lyricLinesEl.forEach((o, m) => {
+      const p = this.bufferedLines.has(m), g = p || m >= this.scrollToIndex && m < r, u = o.getLine();
+      let E = 0;
+      u.isDuet && (E = this.size[0] - this.lyricLinesSize.get(o)[0]), m === this.scrollToIndex + 1 && i >= 5e3 && (this.interludeDots.setTransform(0, a), this.interludeDots.setInterlude(this.getCurrentInterlude()), a += this.interludeDotsSize[1]), o.setTransform(
+        E,
+        a,
+        g ? 1 : n,
+        p ? 1 : 1 / 3,
+        this.enableBlur ? 3 * (g ? 0 : 1 + (m < this.scrollToIndex ? Math.abs(this.scrollToIndex - m) : Math.abs(m - Math.max(this.scrollToIndex, r)))) : 0,
+        e,
+        c
+      ), u.isBG && g ? a += this.lyricLinesSize.get(o)[1] : u.isBG || (a += this.lyricLinesSize.get(o)[1]), a >= 0 && (c += 0.05);
+    });
+  }
+  getCurrentTime() {
+    return this.currentTime;
+  }
+  getLyrics() {
+    return this.lyricLines;
+  }
+  getElement() {
+    return this.element;
+  }
+  /**
+   * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
+   * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+   *
+   * 调用完成后，可以每帧调用 `update` 函数来执行歌词动画效果
+   * @param time 当前播放进度，单位为毫秒
+   */
+  setCurrentTime(e, n = !1) {
+    this.currentTime = e, this.element.style.setProperty("--amll-player-time", `${e}`);
+    const s = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
+    this.hotLines.forEach((i) => {
+      const r = this.processedLines[i];
+      if (!r.isBG)
+        if (r) {
+          const c = this.processedLines[i + 1];
+          if (c != null && c.isBG) {
+            const o = Math.min(r.startTime, c == null ? void 0 : c.startTime), m = Math.max(r.endTime, c == null ? void 0 : c.endTime);
+            (o > e || m <= e) && (this.hotLines.delete(i), s.add(i), this.hotLines.delete(i + 1), s.add(i + 1), n && (this.lyricLinesEl[i].disable(), this.lyricLinesEl[i + 1].disable()));
+          } else
+            (r.startTime > e || r.endTime <= e) && (this.hotLines.delete(i), s.add(i), n && this.lyricLinesEl[i].disable());
+        } else
+          this.hotLines.delete(i), s.add(i), n && this.lyricLinesEl[i].disable();
+    }), this.processedLines.forEach((i, r, c) => {
+      var o;
+      !i.isBG && i.startTime <= e && i.endTime > e && (this.hotLines.has(r) || (this.hotLines.add(r), h.add(r), n && this.lyricLinesEl[r].enable(), (o = c[r + 1]) != null && o.isBG && (this.hotLines.add(r + 1), h.add(r + 1), n && this.lyricLinesEl[r + 1].enable())));
+    }), this.bufferedLines.forEach((i) => {
+      this.hotLines.has(i) || (a.add(i), n && this.lyricLinesEl[i].disable());
+    }), n ? (this.bufferedLines.size > 0 ? this.scrollToIndex = Math.min(...this.bufferedLines) : this.scrollToIndex = this.processedLines.findIndex(
+      (i) => i.startTime >= e
+    ), this.bufferedLines.clear(), this.hotLines.forEach((i) => this.bufferedLines.add(i)), this.calcLayout(!0)) : (a.size > 0 || h.size > 0) && (a.size === 0 && h.size > 0 ? (h.forEach((i) => {
+      this.bufferedLines.add(i), this.lyricLinesEl[i].enable();
+    }), this.scrollToIndex = Math.min(...this.bufferedLines)) : h.size === 0 && a.size > 0 ? D(a, this.bufferedLines) && this.bufferedLines.forEach((i) => {
+      this.hotLines.has(i) || (this.bufferedLines.delete(i), this.lyricLinesEl[i].disable());
+    }) : (h.forEach((i) => {
+      this.bufferedLines.add(i), this.lyricLinesEl[i].enable();
+    }), a.forEach((i) => {
+      this.bufferedLines.delete(i), this.lyricLinesEl[i].disable();
+    }), this.bufferedLines.size > 0 && (this.scrollToIndex = Math.min(...this.bufferedLines))), this.calcLayout());
+  }
+  /**
+   * 更新动画，这个函数应该被逐帧调用
+   * @param delta 距离上一次被调用到现在的时长，单位为毫秒（可为浮点数）
+   */
+  update(e = 0) {
+    const n = e / 1e3;
+    this.interludeDots.update(e), this.lyricLinesEl.forEach((s) => s.update(n));
+  }
+  setLinePosXSpringParams(e) {
+    this.posXSpringParams = {
+      ...this.posXSpringParams,
+      ...e
+    }, this.lyricLinesEl.forEach(
+      (n) => n.lineTransforms.posX.updateParams(this.posXSpringParams)
+    );
+  }
+  setLinePosYSpringParams(e) {
+    this.posYSpringParams = {
+      ...this.posYSpringParams,
+      ...e
+    }, this.lyricLinesEl.forEach(
+      (n) => n.lineTransforms.posY.updateParams(this.posYSpringParams)
+    );
+  }
+  setLineScaleSpringParams(e) {
+    this.scaleSpringParams = {
+      ...this.scaleSpringParams,
+      ...e
+    }, this.lyricLinesEl.forEach(
+      (n) => n.lineTransforms.scale.updateParams(this.scaleSpringParams)
+    );
+  }
+  dispose() {
+    this.element.remove(), this.resizeObserver.disconnect(), this.style.detach(), this.lyricLinesEl.forEach((e) => e.dispose()), window.removeEventListener("pageshow", this.onPageShow);
+  }
+}
+export {
+  Q as BackgroundRender,
+  Z as LyricPlayer
+};

package/dist/bg-render/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @fileoverview
+ * 一个播放歌词的组件
+ * @author SteveXMH
+ */
+import type { HasElement, Disposable } from "../interfaces";
+import { PixiRenderer } from "./pixi-renderer";
+export declare class BackgroundRender extends PixiRenderer implements HasElement, Disposable {
+    private element;
+    constructor();
+    getElement(): HTMLCanvasElement;
+    dispose(): void;
+}

package/dist/bg-render/pixi-renderer.d.ts

@@ -0,0 +1,19 @@
+import { Disposable } from "../interfaces";
+export declare class PixiRenderer implements Disposable {
+    private canvas;
+    private observer;
+    private app;
+    private curContainer?;
+    private lastContainer;
+    private onTick;
+    flowSpeed: number;
+    private currerntRenderScale;
+    constructor(canvas: HTMLCanvasElement);
+    setRenderScale(scale: number): void;
+    rebuildFilters(): void;
+    setFPS(fps: number): void;
+    pause(): void;
+    resume(): void;
+    setAlbumImage(albumUrl: string): Promise<void>;
+    dispose(): void;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { BackgroundRender } from "./bg-render";
+export { LyricPlayer } from "./lyric-player";

package/dist/interfaces.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 拥有一个 HTML 元素的接口
+ *
+ * 可以通过 `getElement` 获取这个类所对应的 HTML 元素实例
+ */
+export interface HasElement {
+    /** 获取这个类所对应的 HTML 元素实例 */
+    getElement(): HTMLElement;
+}
+/**
+ * 实现了这个接口的东西需要在使用完毕后
+ *
+ * 手动调用 `dispose` 函数来销毁清除占用资源
+ *
+ * 以免产生泄露
+ */
+export interface Disposable {
+    /**
+     * 销毁实现了该接口的对象实例，释放占用的资源
+     *
+     * 一般情况下，调用本函数后就不可以再调用对象的任何函数了
+     */
+    dispose(): void;
+}
+/** 一个歌词单词 */
+export interface LyricWord {
+    /** 单词的起始时间 */
+    startTime: number;
+    /** 单词的结束时间 */
+    endTime: number;
+    /** 单词 */
+    word: string;
+}
+/** 一行歌词，存储多个单词 */
+export interface LyricLine {
+    /**
+     * 该行的所有单词
+     * 如果是 LyRiC 等只能表达一行歌词的格式，这里就只会有一个单词
+     */
+    words: LyricWord[];
+    translatedLyric: string;
+    romanLyric: string;
+    /** 句子的起始时间 */
+    startTime: number;
+    /** 句子的结束时间 */
+    endTime: number;
+    /** 该行是否为背景歌词行 */
+    isBG: boolean;
+    /** 该行是否为对唱歌词行（即歌词行靠右对齐） */
+    isDuet: boolean;
+}

package/dist/lyric/ttml.d.ts

@@ -0,0 +1,2 @@
+import { LyricLine } from "../interfaces";
+export declare function parseTTML(ttmlText: string): LyricLine[];

package/dist/lyric-player/index.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @fileoverview
+ * 一个播放歌词的组件
+ * @author SteveXMH
+ */
+import type { Disposable, HasElement, LyricLine } from "../interfaces";
+import { SpringParams } from "../utils/spring";
+/**
+ * 一个播放歌词的组件
+ */
+export declare class LyricPlayer extends EventTarget implements HasElement, Disposable {
+    private element;
+    private currentTime;
+    private lyricLines;
+    private processedLines;
+    private lyricLinesEl;
+    private lyricLinesSize;
+    private hotLines;
+    private bufferedLines;
+    private scrollToIndex;
+    private resizeObserver;
+    private posXSpringParams;
+    private posYSpringParams;
+    private scaleSpringParams;
+    private enableBlur;
+    private interludeDots;
+    private interludeDotsSize;
+    readonly supportPlusLighter: boolean;
+    readonly supportMaskImage: boolean;
+    disableSpring: boolean;
+    alignAnchor: "top" | "bottom" | number;
+    readonly size: [number, number];
+    readonly pos: [number, number];
+    /**
+     * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+     *
+     * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+     *
+     * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+     */
+    setEnableSpring(enable?: boolean): void;
+    readonly style: import("jss").StyleSheet<"lyricPlayer" | "lyricLine" | "@media (max-width: 1024px)" | "lyricDuetLine" | "lyricBgLine" | "lyricMainLine" | "lyricSubLine" | "disableSpring" | "interludeDots" | "@supports (mix-blend-mode: plus-lighter)" | "tmpDisableTransition">;
+    private onPageShow;
+    constructor();
+    /**
+     * 获取当前播放时间里是否处于间奏区间
+     * 如果是则会返回单位为毫秒的始末时间
+     * 否则返回 undefined
+     * @returns [开始时间,结束时间] 或 undefined 如果不处于间奏区间
+     */
+    getCurrentInterlude(): [number, number] | undefined;
+    /**
+     * 重建样式，这个只允许内部调用
+     */
+    rebuildStyle(): void;
+    /**
+     * 设置是否启用歌词行的模糊效果
+     * @param enable 是否启用
+     */
+    setEnableBlur(enable: boolean): void;
+    /**
+     * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
+     * @param lines 歌词数组
+     */
+    setLyricLines(lines: LyricLine[]): void;
+    calcLayout(reflow?: boolean): void;
+    getCurrentTime(): number;
+    getLyrics(): LyricLine[];
+    getElement(): HTMLElement;
+    /**
+     * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
+     * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+     *
+     * 调用完成后，可以每帧调用 `update` 函数来执行歌词动画效果
+     * @param time 当前播放进度，单位为毫秒
+     */
+    setCurrentTime(time: number, isSeek?: boolean): void;
+    /**
+     * 更新动画，这个函数应该被逐帧调用
+     * @param delta 距离上一次被调用到现在的时长，单位为毫秒（可为浮点数）
+     */
+    update(delta?: number): void;
+    setLinePosXSpringParams(params: Partial<SpringParams>): void;
+    setLinePosYSpringParams(params: Partial<SpringParams>): void;
+    setLineScaleSpringParams(params: Partial<SpringParams>): void;
+    dispose(): void;
+}

package/dist/lyric-player/interlude-dots.d.ts

@@ -0,0 +1,22 @@
+import { LyricPlayer } from ".";
+import type { Disposable, HasElement } from "../interfaces";
+export declare class InterludeDots implements HasElement, Disposable {
+    private readonly lyricPlayer;
+    private element;
+    private dot0;
+    private dot1;
+    private dot2;
+    private left;
+    private top;
+    private scale;
+    private lastStyle;
+    private currentInterlude?;
+    private currentTime;
+    private targetBreatheDuration;
+    constructor(lyricPlayer: LyricPlayer);
+    getElement(): HTMLElement;
+    setTransform(left?: number, top?: number): void;
+    setInterlude(interlude?: [number, number]): void;
+    update(delta?: number): void;
+    dispose(): void;
+}

package/dist/lyric-player/lyric-line.d.ts

@@ -0,0 +1,40 @@
+import { LyricPlayer } from ".";
+import { Disposable, HasElement, LyricLine, LyricWord } from "../interfaces";
+import { Spring } from "../utils/spring";
+export declare function shouldEmphasize(word: LyricWord): boolean;
+export declare class LyricLineEl implements HasElement, Disposable {
+    private lyricPlayer;
+    private lyricLine;
+    private element;
+    private left;
+    private top;
+    private scale;
+    private blur;
+    private delay;
+    private splittedWords;
+    lineSize: number[];
+    readonly lineTransforms: {
+        posX: Spring;
+        posY: Spring;
+        scale: Spring;
+    };
+    constructor(lyricPlayer: LyricPlayer, lyricLine?: LyricLine);
+    enable(): void;
+    disable(): void;
+    setLine(line: LyricLine): void;
+    getLine(): LyricLine;
+    private _hide;
+    private lastStyle;
+    show(): void;
+    hide(): void;
+    rebuildStyle(): void;
+    rebuildElement(): void;
+    private initFloatAnimation;
+    private initEmphasizeAnimation;
+    updateMaskImage(): void;
+    getElement(): HTMLElement;
+    setTransform(left?: number, top?: number, scale?: number, opacity?: number, blur?: number, force?: boolean, delay?: number): void;
+    update(delta?: number): void;
+    get isInSight(): boolean;
+    dispose(): void;
+}

package/dist/utils/eq-set.d.ts

@@ -0,0 +1 @@
+export declare const eqSet: <T>(xs: Set<T>, ys: Set<T>) => boolean;

package/dist/utils/spring.d.ts

@@ -0,0 +1,25 @@
+/** MIT License github.com/pushkine/ */
+export interface SpringParams {
+    mass: number;
+    damping: number;
+    stiffness: number;
+    soft: boolean;
+}
+export declare class Spring {
+    private currentPosition;
+    private targetPosition;
+    private currentTime;
+    private params;
+    private currentSolver;
+    private getV;
+    private queueParams;
+    private queuePosition;
+    constructor(currentPosition?: number);
+    private resetSolver;
+    arrived(): boolean;
+    setPosition(targetPosition: number): void;
+    update(delta?: number): void;
+    updateParams(params: Partial<SpringParams>, delay?: number): void;
+    setTargetPosition(targetPosition: number, delay?: number): void;
+    getCurrentPosition(): number;
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@applemusic-like-lyrics/core",
+  "packageManager": "yarn@3.6.1",
+  "version": "0.0.1",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/amll-core.cjs",
+  "module": "./dist/amll-core.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/amll-core.mjs",
+      "require": "./dist/amll-core.cjs"
+    }
+  },
+  "devDependencies": {
+    "@types/stats.js": "^0.17.0",
+    "lil-gui": "^0.18.2",
+    "rome": "^12.1.3",
+    "stats.js": "^0.17.0",
+    "vite": "^4.4.6",
+    "vite-plugin-dts": "^3.3.1"
+  },
+  "dependencies": {
+    "jss": "^10.10.0",
+    "jss-preset-default": "^10.10.0",
+    "pixi.js": "^7.2.4"
+  }
+}