@applemusic-like-lyrics/core 0.2.0-alpha.5 → 0.2.0-alpha.6

package/README.md

@@ -1,46 +1,48 @@
-# AMLL Core
-
-> 警告：此为个人项目，且尚未完成开发，可能仍有大量问题，所以请勿直接用于生产环境！
-
-![AMLL-Core](https://img.shields.io/badge/Core-%233178c6?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)
-[![npm](https://img.shields.io/npm/dt/%40applemusic-like-lyrics/core)](https://www.npmjs.com/package/@applemusic-like-lyrics/core)
-[![npm](https://img.shields.io/npm/v/%40applemusic-like-lyrics%2Fcore)](https://www.npmjs.com/package/@applemusic-like-lyrics/core)
-
-AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件。
-
-此处的东西都是 UI 框架无关的，所以可以间接在各种动态页面框架下引用。
-
-或者如果你需要使用组件绑定的话，这里有 [React 绑定版本](../react/README.md) 和 [Vue 绑定版本](../vue/README.md)
-
-## 安装
-
-安装使用的依赖（如果以下列出的依赖包没有安装的话需要自行安装）：
-```bash
-npm install @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # 使用 npm
-yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # 使用 yarn
-```
-
-安装本体框架：
-```bash
-npm install @applemusic-like-lyrics/core # 使用 npm
-yarn add @applemusic-like-lyrics/core # 使用 yarn
-```
-
-## 使用方式摘要
-
-详细的 API 文档请参考 [./docs/modules.md](./docs/modules.md)
-
-一个测试用途的程序可以在 [./src/test.ts](./src/test.ts) 里找到。
-
-```typescript
-import { LyricPlayer } from "@applemusic-like-lyrics/core";
-import "@applemusic-like-lyrics/core/style.css"; // 导入需要的样式
-
-const player = new LyricPlayer(); // 创建歌词播放组件
-document.body.appendChild(player.getElement()); // 将组件的元素添加到页面
-player.setLyricLines([]) // 设置歌词
-player.setCurrentTime(0) // 设定当前播放时间（需要逐帧调用）
-player.update(0) // 更新歌词组件动画（需要逐帧调用）
-```
-
-每次通过 `LyricPlayer.setLyricLines` 设置的歌词是一个 `LyricLine[]` 参数，具体可以参考 [./src/interfaces.ts](./src/interfaces.ts) 中的代码。
+# AMLL Core
+
+English / [简体中文](./README-CN.md)
+
+> Warning: This is a personal project and is still under development. There may still be many issues, so please do not use it directly in production environments!
+
+![AMLL-Core](https://img.shields.io/badge/Core-%233178c6?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)
+[![npm](https://img.shields.io/npm/dt/%40applemusic-like-lyrics/core)](https://www.npmjs.com/package/@applemusic-like-lyrics/core)
+[![npm](https://img.shields.io/npm/v/%40applemusic-like-lyrics%2Fcore)](https://www.npmjs.com/package/@applemusic-like-lyrics/core)
+
+AMLL's pure JS core component framework, including lyric display components and background components and other reusable components.
+
+Everything here is UI framework-independent, so it can be indirectly referenced under various dynamic page frameworks.
+
+Or if you need to use component bindings, there's a [React binding version](../react/README.md) and a [Vue binding version](../vue/README.md)
+
+## Installation
+
+Install the required dependencies (if the dependencies listed below are not installed, you need to install them yourself):
+```bash
+npm install @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # using npm
+yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # using yarn
+```
+
+Install the framework:
+```bash
+npm install @applemusic-like-lyrics/core # using npm
+yarn add @applemusic-like-lyrics/core # using yarn
+```
+
+## Usage Summary
+
+For detailed API documentation, please refer to [./docs/modules.md](./docs/modules.md)
+
+A test program can be found in [./src/test.ts](./src/test.ts).
+
+```typescript
+import { LyricPlayer } from "@applemusic-like-lyrics/core";
+import "@applemusic-like-lyrics/core/style.css"; // Import required styles
+
+const player = new LyricPlayer(); // Create a lyric player component
+document.body.appendChild(player.getElement()); // Add the component's element to the page
+player.setLyricLines([]) // Set lyrics
+player.setCurrentTime(0) // Set current playback time (needs to be called every frame)
+player.update(0) // Update lyric component animation (needs to be called every frame)
+```
+
+The lyrics set through `LyricPlayer.setLyricLines` is a `LyricLine[]` parameter. For details, please refer to the code in [./src/interfaces.ts](./src/interfaces.ts).

package/dist/amll-core.css

@@ -1 +1 @@
-.amll-lyric-player{width:100%;max-width:100%;height:100%;color:var(--amll-lp-color,white);contain:strict;mix-blend-mode:plus-lighter;font-size:var(--amll-lp-font-size,max(max(4.7vh,3.2vw),12px));overflow:hidden}@media screen and (max-width:768px){.amll-lyric-player{font-size:var(--amll-lp-font-size,max(8vw,12px))}}.amll-lyric-player.dom{--amll-lp-line-width-aspect:.8;--amll-lp-line-padding-x:1em;--amll-lp-bg-line-scale:.7;-webkit-user-select:none;user-select:none;box-sizing:content-box;z-index:1;line-height:1.2em}.amll-lyric-player.dom-slim{--amll-lp-line-width-aspect:.8;--amll-lp-line-padding-x:1em;--amll-lp-bg-line-scale:.7;-webkit-user-select:none;user-select:none;box-sizing:content-box;z-index:1;min-width:0;min-height:0;line-height:1.2em;overflow:hidden scroll}.amll-lyric-player.dom-slim::-webkit-scrollbar{opacity:0}.amll-lyric-player.dom-slim:hover::-webkit-scrollbar{opacity:1}.amll-lyric-player.dom-slim>*{content-visibility:auto;contain-intrinsic-size:100% 2em}@media screen and (max-width:768px){.amll-lyric-player{--amll-lp-line-width-aspect:1;--amll-lp-line-padding-x:0}}._lyricLine_1vq69_6{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:0;width:var(--amll-lp-width,100%);min-width:var(--amll-lp-width,100%);max-width:var(--amll-lp-width,100%);contain:content;will-change:transform;box-sizing:border-box;border-radius:.25em;width:100%;height:-moz-fit-content;height:fit-content;padding:.5em 1em;transition:opacity .25s,filter .2s,background-color .25s,box-shadow .25s;position:absolute}._lyricLine_1vq69_6._dirty_1vq69_26{opacity:0;visibility:hidden}._lyricLine_1vq69_6:has(>*):hover{background-color:var(--amll-lp-hover-bg-color,#fff1)}._lyricLine_1vq69_6:has(>*):active{background-color:var(--amll-lp-hover-bg-color,#ffffff05)}._lyricBgLine_1vq69_42{opacity:.0001;font-size:max(calc(1em*var(--amll-lp-bg-line-scale,.7)),10px);padding:1vh calc(var(--amll-lp-line-padding-x,1em)/var(--amll-lp-bg-line-scale,.7));transition:opacity .25s,scale .5s,filter .2s,background-color .25s,box-shadow .25s}._lyricBgLine_1vq69_42._active_1vq69_51{opacity:.4;transition:opacity .5s .25s,scale 1.5s cubic-bezier(0,1,0,1) .25s,filter .2s,background-color .25s,box-shadow .25s}.amll-lyric-player:hover ._lyricLine_1vq69_6{filter:unset!important}.amll-lyric-player._hasDuetLine_1vq69_63 ._lyricLine_1vq69_6:not(._lyricDuetLine_1vq69_64){padding-right:15%}.amll-lyric-player._hasDuetLine_1vq69_63 ._lyricDuetLine_1vq69_64{padding-left:15%}.amll-lyric-player:not(.playing)>._lyricBgLine_1vq69_42{opacity:.4}._lyricDuetLine_1vq69_64{text-align:right;transform-origin:100%}._lyricMainLine_1vq69_83{margin:-1em;padding:1em;transition:opacity .3s .1s}._lyricMainLine_1vq69_83 span{display:inline-block}._lyricMainLine_1vq69_83>span{white-space:pre-wrap;will-change:transform;margin:-1em;padding:1em;display:inline-block}._lyricMainLine_1vq69_83>span._emphasize_1vq69_93{-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83>span._emphasize_1vq69_93>span{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83>span span._emphasize_1vq69_93{-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83>span span._emphasize_1vq69_93>span{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83 span._emphasizeWrapper_1vq69_93{white-space:pre-wrap;will-change:transform;margin:-1em;padding:1em;display:inline-block}._lyricMainLine_1vq69_83 span._emphasizeWrapper_1vq69_93._emphasize_1vq69_93{-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83 span._emphasizeWrapper_1vq69_93._emphasize_1vq69_93>span{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83 span._emphasizeWrapper_1vq69_93 span._emphasize_1vq69_93{-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricMainLine_1vq69_83 span._emphasizeWrapper_1vq69_93 span._emphasize_1vq69_93>span{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;margin:-1em;padding:1em}._lyricSubLine_1vq69_116{opacity:.3;font-size:max(.5em,10px);line-height:1.5em;transition:opacity .2s .25s}._disableSpring_1vq69_123>*{transition:filter .25s,transform .5s,background-color .25s,box-shadow .25s}._interludeDots_1vq69_128{transform-origin:50%;opacity:0;gap:.25em;width:-moz-fit-content;width:fit-content;height:max(.5em,min(1vh,3em));padding:2.5% .75em;transition:opacity .25s;display:flex;position:absolute;left:0}._interludeDots_1vq69_128._enabled_1vq69_140{opacity:1}._interludeDots_1vq69_128>*{aspect-ratio:1;background-color:var(--amll-lp-color,white);border-radius:50%;width:max(.5em,min(1vh,3em));height:max(.5em,min(1vh,3em));margin-right:4px;display:inline-block}._interludeDots_1vq69_128._duet_1vq69_154{transform-origin:50%;right:0}@supports (mix-blend-mode:plus-lighter){._lyricSubLine_1vq69_116{opacity:.3}}._tmpDisableTransition_1vq69_166{transition:none!important}._lyricLine_1ygrf_6{width:var(--amll-lp-width,100%);min-width:var(--amll-lp-width,100%);max-width:var(--amll-lp-width,100%);contain:content;box-sizing:border-box;border-radius:.25em;width:100%;height:-moz-fit-content;height:fit-content;padding:2vh 1em;transition:opacity .25s,filter .2s,background-color .25s,box-shadow .25s}._lyricLine_1ygrf_6:has(>*):hover{background-color:var(--amll-lp-hover-bg-color,#fff1)}._lyricLine_1ygrf_6:has(>*):active{background-color:var(--amll-lp-hover-bg-color,#ffffff05)}._lyricBgLine_1ygrf_33{opacity:0;font-size:max(calc(1em*var(--amll-lp-bg-line-scale,.7)),10px);padding:1vh calc(var(--amll-lp-line-padding-x,1em)/var(--amll-lp-bg-line-scale,.7));transition:opacity .25s,scale .5s,filter .2s,background-color .25s,box-shadow .25s}._lyricBgLine_1ygrf_33._active_1ygrf_42{opacity:.4;transition:opacity .5s .25s,scale 1.5s cubic-bezier(0,1,0,1) .25s,filter .2s,background-color .25s,box-shadow .25s}.amll-lyric-player:hover ._lyricLine_1ygrf_6{filter:unset!important}.amll-lyric-player._hasDuetLine_1ygrf_54 ._lyricLine_1ygrf_6:not(._lyricDuetLine_1ygrf_55){padding-right:15%}.amll-lyric-player._hasDuetLine_1ygrf_54 ._lyricDuetLine_1ygrf_55{padding-left:15%}._lyricDuetLine_1ygrf_55{text-align:right;transform-origin:100%}._lyricMainLine_1ygrf_69{contain:content paint;transition:opacity .3s .1s}._lyricMainLine_1ygrf_69 span{white-space:pre;display:inline-block}._lyricSubLine_1ygrf_79{opacity:.3;font-size:max(.5em,10px);line-height:1.5em;transition:opacity .2s .25s}._interludeDots_1ygrf_86{transform-origin:50%;opacity:0;gap:.25em;width:-moz-fit-content;width:fit-content;height:max(.5em,min(1vh,3em));padding:2.5% .75em;transition:opacity .25s;display:flex;left:0}._interludeDots_1ygrf_86._enabled_1ygrf_97{opacity:1}._interludeDots_1ygrf_86>*{aspect-ratio:1;background-color:var(--amll-lp-color,white);border-radius:50%;width:max(.5em,min(1vh,3em));height:max(.5em,min(1vh,3em));margin-right:4px;display:inline-block}._interludeDots_1ygrf_86._duet_1ygrf_111{transform-origin:50%;right:0}@supports (mix-blend-mode:plus-lighter){._lyricSubLine_1ygrf_79{opacity:.3}}._tmpDisableTransition_1ygrf_123{transition:none!important}
+.amll-lyric-player{width:100%;max-width:100%;height:100%;color:var(--amll-lp-color,white);contain:strict;mix-blend-mode:plus-lighter;font-size:var(--amll-lp-font-size,max(max(5vh,2.5vw),12px));overflow:hidden}@media screen and (max-width:768px){.amll-lyric-player{font-size:var(--amll-lp-font-size,max(8vw,12px))}}.amll-lyric-player.dom{--amll-lp-line-width-aspect:.8;--amll-lp-line-padding-x:1em;--amll-lp-bg-line-scale:.7;-webkit-user-select:none;user-select:none;box-sizing:content-box;z-index:1;line-height:1.2em}.amll-lyric-player.dom-slim{--amll-lp-line-width-aspect:.8;--amll-lp-line-padding-x:1em;--amll-lp-bg-line-scale:.7;-webkit-user-select:none;user-select:none;box-sizing:content-box;z-index:1;min-width:0;min-height:0;line-height:1.2em;overflow:hidden scroll}.amll-lyric-player.dom-slim::-webkit-scrollbar{opacity:0}.amll-lyric-player.dom-slim:hover::-webkit-scrollbar{opacity:1}.amll-lyric-player.dom-slim>*{content-visibility:auto;contain-intrinsic-size:100% 2em}@media screen and (max-width:768px){.amll-lyric-player{--amll-lp-line-width-aspect:1;--amll-lp-line-padding-x:0}}._lyricLine_ut4sn_6{backface-visibility:hidden;transform-origin:0;width:var(--amll-lp-width,100%);min-width:var(--amll-lp-width,100%);max-width:var(--amll-lp-width,100%);contain:content;will-change:transform;box-sizing:border-box;border-radius:.25em;width:100%;height:fit-content;padding:.5em 1em;transition:opacity .25s,filter .2s,background-color .25s,box-shadow .25s;position:absolute}@media screen and (max-width:500px){._lyricLine_ut4sn_6{padding-left:20px;padding-right:20px}}._lyricLine_ut4sn_6._dirty_ut4sn_34{opacity:0;visibility:hidden}._lyricLine_ut4sn_6:has(>*):hover{background-color:var(--amll-lp-hover-bg-color,#fff1)}._lyricLine_ut4sn_6:has(>*):active{background-color:var(--amll-lp-hover-bg-color,#ffffff05)}._lyricBgLine_ut4sn_50{opacity:.0001;font-size:max(calc(1em*var(--amll-lp-bg-line-scale,.7)),10px);padding:1vh calc(var(--amll-lp-line-padding-x,1em)/var(--amll-lp-bg-line-scale,.7));transition:opacity .25s,scale .5s,filter .2s,background-color .25s,box-shadow .25s}._lyricBgLine_ut4sn_50._active_ut4sn_62{opacity:.4;transition:opacity .5s .25s,scale 1.5s cubic-bezier(0,1,0,1) .25s,filter .2s,background-color .25s,box-shadow .25s}.amll-lyric-player:hover ._lyricLine_ut4sn_6{filter:unset!important}.amll-lyric-player._hasDuetLine_ut4sn_78 ._lyricLine_ut4sn_6:not(._lyricDuetLine_ut4sn_79){padding-right:15%}.amll-lyric-player._hasDuetLine_ut4sn_78 ._lyricDuetLine_ut4sn_79{padding-left:15%}.amll-lyric-player:not(.playing)>._lyricBgLine_ut4sn_50{opacity:.4}._lyricDuetLine_ut4sn_79{text-align:right;transform-origin:100%}._lyricMainLine_ut4sn_98{margin:-1em;padding:1em;transition:opacity .3s .1s}._lyricMainLine_ut4sn_98 span{display:inline-block}._lyricMainLine_ut4sn_98 ._romanWord_ut4sn_107{font-size:.5em;line-height:1em}._lyricMainLine_ut4sn_98>span,._lyricMainLine_ut4sn_98 span._emphasizeWrapper_ut4sn_113{white-space:pre-wrap;will-change:transform;margin:-1em;padding:1em;display:inline-block}:is(._lyricMainLine_ut4sn_98>span,._lyricMainLine_ut4sn_98 span._emphasizeWrapper_ut4sn_113)._emphasize_ut4sn_113,:is(._lyricMainLine_ut4sn_98>span,._lyricMainLine_ut4sn_98 span._emphasizeWrapper_ut4sn_113) span._emphasize_ut4sn_113{backface-visibility:hidden;margin:-1em;padding:1em}:is(:is(._lyricMainLine_ut4sn_98>span,._lyricMainLine_ut4sn_98 span._emphasizeWrapper_ut4sn_113)._emphasize_ut4sn_113,:is(._lyricMainLine_ut4sn_98>span,._lyricMainLine_ut4sn_98 span._emphasizeWrapper_ut4sn_113) span._emphasize_ut4sn_113)>span{will-change:transform;backface-visibility:hidden;margin:-1em;padding:1em}._lyricSubLine_ut4sn_136{opacity:.3;font-size:max(.5em,10px);line-height:1.5em;transition:opacity .2s .25s}._disableSpring_ut4sn_143>*{transition:filter .25s,transform .5s,background-color .25s,box-shadow .25s}._interludeDots_ut4sn_151{transform-origin:50%;opacity:0;gap:.25em;width:fit-content;height:clamp(.5em,1vh,3em);padding:2.5% .75em;transition:opacity .25s;display:flex;position:absolute;left:0}._interludeDots_ut4sn_151._enabled_ut4sn_163{opacity:1}._interludeDots_ut4sn_151>*{aspect-ratio:1;background-color:var(--amll-lp-color,white);border-radius:50%;width:clamp(.5em,1vh,3em);height:clamp(.5em,1vh,3em);margin-right:4px;display:inline-block}._interludeDots_ut4sn_151._duet_ut4sn_177{transform-origin:50%;right:0}@supports (mix-blend-mode:plus-lighter){._lyricSubLine_ut4sn_136{opacity:.3}}._tmpDisableTransition_ut4sn_189{transition:none!important}._lyricLine_1jop6_6{width:var(--amll-lp-width,100%);min-width:var(--amll-lp-width,100%);max-width:var(--amll-lp-width,100%);contain:content;box-sizing:border-box;border-radius:.25em;width:100%;height:fit-content;padding:2vh 1em;transition:opacity .25s,filter .2s,background-color .25s,box-shadow .25s}._lyricLine_1jop6_6:has(>*):hover{background-color:var(--amll-lp-hover-bg-color,#fff1)}._lyricLine_1jop6_6:has(>*):active{background-color:var(--amll-lp-hover-bg-color,#ffffff05)}._lyricBgLine_1jop6_36{opacity:0;font-size:max(calc(1em*var(--amll-lp-bg-line-scale,.7)),10px);padding:1vh calc(var(--amll-lp-line-padding-x,1em)/var(--amll-lp-bg-line-scale,.7));transition:opacity .25s,scale .5s,filter .2s,background-color .25s,box-shadow .25s}._lyricBgLine_1jop6_36._active_1jop6_49{opacity:.4;transition:opacity .5s .25s,scale 1.5s cubic-bezier(0,1,0,1) .25s,filter .2s,background-color .25s,box-shadow .25s}.amll-lyric-player:hover ._lyricLine_1jop6_6{filter:unset!important}.amll-lyric-player._hasDuetLine_1jop6_65 ._lyricLine_1jop6_6:not(._lyricDuetLine_1jop6_66){padding-right:15%}.amll-lyric-player._hasDuetLine_1jop6_65 ._lyricDuetLine_1jop6_66{padding-left:15%}._lyricDuetLine_1jop6_66{text-align:right;transform-origin:100%}._lyricMainLine_1jop6_80{contain:content paint;transition:opacity .3s .1s}._lyricMainLine_1jop6_80 span{white-space:pre;display:inline-block}._lyricSubLine_1jop6_90{opacity:.3;font-size:max(.5em,10px);line-height:1.5em;transition:opacity .2s .25s}._interludeDots_1jop6_97{transform-origin:50%;opacity:0;gap:.25em;width:fit-content;height:clamp(.5em,1vh,3em);padding:2.5% .75em;transition:opacity .25s;display:flex;left:0}._interludeDots_1jop6_97._enabled_1jop6_108{opacity:1}._interludeDots_1jop6_97>*{aspect-ratio:1;background-color:var(--amll-lp-color,white);border-radius:50%;width:clamp(.5em,1vh,3em);height:clamp(.5em,1vh,3em);margin-right:4px;display:inline-block}._interludeDots_1jop6_97._duet_1jop6_122{transform-origin:50%;right:0}@supports (mix-blend-mode:plus-lighter){._lyricSubLine_1jop6_90{opacity:.3}}._tmpDisableTransition_1jop6_134{transition:none!important}