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

package/README.md

@@ -1,46 +1,46 @@
-# 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
+
+> 警告：此为个人项目，且尚未完成开发，可能仍有大量问题，所以请勿直接用于生产环境！
+
+![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) 中的代码。

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(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}