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

package/README.md

@@ -1,46 +1,48 @@
 # 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 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件。
+AMLL's pure JS core component framework, including lyric display components and background components and other reusable components.
 
-此处的东西都是 UI 框架无关的，所以可以间接在各种动态页面框架下引用。
+Everything here is UI framework-independent, so it can be indirectly referenced under various dynamic page frameworks.
 
-或者如果你需要使用组件绑定的话，这里有 [React 绑定版本](../react/README.md) 和 [Vue 绑定版本](../vue/README.md)
+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 # 使用 npm
-yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite # 使用 yarn
+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 # 使用 npm
-yarn add @applemusic-like-lyrics/core # 使用 yarn
+npm install @applemusic-like-lyrics/core # using npm
+yarn add @applemusic-like-lyrics/core # using yarn
 ```
 
-## 使用方式摘要
+## Usage Summary
 
-详细的 API 文档请参考 [./docs/modules.md](./docs/modules.md)
+For detailed API documentation, please refer to [./docs/modules.md](./docs/modules.md)
 
-一个测试用途的程序可以在 [./src/test.ts](./src/test.ts) 里找到。
+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 "@applemusic-like-lyrics/core/style.css"; // Import required styles
 
-const player = new LyricPlayer(); // 创建歌词播放组件
-document.body.appendChild(player.getElement()); // 将组件的元素添加到页面
-player.setLyricLines([]) // 设置歌词
-player.setCurrentTime(0) // 设定当前播放时间（需要逐帧调用）
-player.update(0) // 更新歌词组件动画（需要逐帧调用）
+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)
 ```
 
-每次通过 `LyricPlayer.setLyricLines` 设置的歌词是一个 `LyricLine[]` 参数，具体可以参考 [./src/interfaces.ts](./src/interfaces.ts) 中的代码。
+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

@@ -0,0 +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(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}