@applemusic-like-lyrics/core 0.2.0 → 0.3.0

package/README.md

@@ -14,6 +14,13 @@ Everything here is UI framework-independent, so it can be indirectly referenced
 
 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)
 
+## Features
+
+- Pure frontend rendering for lyrics and background
+- Word-level timed lyrics with translation and romanization
+- Multi-line, duet, and background line support
+- Style customization via CSS variables
+
 ## Installation
 
 Install the required dependencies (if the dependencies listed below are not installed, you need to install them yourself):
@@ -46,3 +53,31 @@ player.update(0) // Update lyric component animation (needs to be called every f
 ```
 
 The lyrics set through `LyricPlayer.setLyricLines` is a `LyricLine[]` parameter. For details, please refer to the code in [./src/interfaces.ts](./src/interfaces.ts).
+
+## Data Model
+
+Lyrics input is `LyricLine[]`, with each line containing:
+
+- `words`: timed word array, each word includes `startTime` / `endTime` / `word`, with optional `romanWord`, `ruby`, and `obscene`
+- `translatedLyric`: translation text
+- `romanLyric`: romanization text
+- `startTime` / `endTime`: line timestamps
+- `isBG` / `isDuet`: background and duet flags
+
+## Styling
+
+The main styles are provided by `@applemusic-like-lyrics/core/style.css`. Common overrides are via CSS variables:
+
+```css
+.amll-lyric-player {
+  --amll-lp-color: #ffffff;
+  --amll-lp-bg-color: rgba(0, 0, 0, 0.35);
+}
+```
+
+## Development
+
+```bash
+pnpm -C packages/core dev
+pnpm -C packages/core build
+```

package/dist/amll-core.css

@@ -1 +1,2 @@
-.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}
+.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 (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 (width<=768px){.amll-lyric-player{--amll-lp-line-width-aspect:1;--amll-lp-line-padding-x:0}}._lyricLine_1g3au_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 (width<=500px){._lyricLine_1g3au_6{padding-left:20px;padding-right:20px}}._lyricLine_1g3au_6._dirty_1g3au_34{opacity:0;visibility:hidden}._lyricLine_1g3au_6:has(>*):hover{background-color:var(--amll-lp-hover-bg-color,#fff1)}._lyricLine_1g3au_6:has(>*):active{background-color:var(--amll-lp-hover-bg-color,#ffffff05)}._lyricBgLine_1g3au_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_1g3au_50._active_1g3au_63{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_1g3au_6{filter:unset!important}.amll-lyric-player._hasDuetLine_1g3au_79 ._lyricLine_1g3au_6:not(._lyricDuetLine_1g3au_80){padding-right:15%}.amll-lyric-player._hasDuetLine_1g3au_79 ._lyricDuetLine_1g3au_80{padding-left:15%}.amll-lyric-player:not(.playing)>._lyricBgLine_1g3au_50{opacity:.4}._lyricDuetLine_1g3au_80{text-align:right;transform-origin:100%}._lyricMainLine_1g3au_99{text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;margin:-1em;padding:1em;transition:opacity .3s .1s}._lyricMainLine_1g3au_99 span{text-align:start;vertical-align:bottom;display:inline-block}._lyricMainLine_1g3au_99 ._romanWord_1g3au_116{padding-inline-end:.3em;font-size:.5em;line-height:1em;display:flex}._lyricMainLine_1g3au_99 ._rubyWord_1g3au_123{justify-content:center;min-height:1em;font-size:.5em;line-height:1em;display:flex}._lyricMainLine_1g3au_99 ._wordWithRuby_1g3au_131{vertical-align:bottom;flex-direction:column;align-items:center;display:inline-flex}._lyricMainLine_1g3au_99 ._wordBody_1g3au_138{flex-direction:column;align-items:center;display:flex}._lyricMainLine_1g3au_99>span,._lyricMainLine_1g3au_99 span._emphasizeWrapper_1g3au_145{white-space:pre-wrap;will-change:transform;vertical-align:bottom;margin:-1em;padding:1em;display:inline-block}:is(._lyricMainLine_1g3au_99>span,._lyricMainLine_1g3au_99 span._emphasizeWrapper_1g3au_145)._emphasize_1g3au_145,:is(._lyricMainLine_1g3au_99>span,._lyricMainLine_1g3au_99 span._emphasizeWrapper_1g3au_145) span._emphasize_1g3au_145{backface-visibility:hidden;margin:-1em;padding:1em}:is(:is(._lyricMainLine_1g3au_99>span,._lyricMainLine_1g3au_99 span._emphasizeWrapper_1g3au_145)._emphasize_1g3au_145,:is(._lyricMainLine_1g3au_99>span,._lyricMainLine_1g3au_99 span._emphasizeWrapper_1g3au_145) span._emphasize_1g3au_145)>span{will-change:transform;backface-visibility:hidden;margin:-1em;padding:1em}._lyricSubLine_1g3au_169{opacity:.3;font-size:max(.5em,10px);line-height:1.5em;transition:opacity .2s .25s}._disableSpring_1g3au_176>*{transition:filter .25s,transform .5s,background-color .25s,box-shadow .25s}._interludeDots_1g3au_184{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_1g3au_184._enabled_1g3au_196{opacity:1}._interludeDots_1g3au_184>*{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_1g3au_184._duet_1g3au_210{transform-origin:50%;right:0}@supports (mix-blend-mode:plus-lighter){._lyricSubLine_1g3au_169{opacity:.3}}._tmpDisableTransition_1g3au_222{transition:none!important}._bottomLine_1g3au_226{cursor:default;padding-top:0;padding-bottom:0;line-height:1.8em}._bottomLine_1g3au_226:empty{height:0;margin:0;padding:0;display:none}._lyricLine_1p6y5_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_1p6y5_6:has(>*):hover{background-color:var(--amll-lp-hover-bg-color,#fff1)}._lyricLine_1p6y5_6:has(>*):active{background-color:var(--amll-lp-hover-bg-color,#ffffff05)}._lyricBgLine_1p6y5_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_1p6y5_36._active_1p6y5_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_1p6y5_6{filter:unset!important}.amll-lyric-player._hasDuetLine_1p6y5_65 ._lyricLine_1p6y5_6:not(._lyricDuetLine_1p6y5_66){padding-right:15%}.amll-lyric-player._hasDuetLine_1p6y5_65 ._lyricDuetLine_1p6y5_66{padding-left:15%}._lyricDuetLine_1p6y5_66{text-align:right;transform-origin:100%}._lyricMainLine_1p6y5_80{contain:content paint;transition:opacity .3s .1s}._lyricMainLine_1p6y5_80 span{white-space:pre;display:inline-block}._lyricMainLine_1p6y5_80 ._romanWord_1p6y5_89{font-size:.5em;line-height:1em;display:flex}._lyricMainLine_1p6y5_80 ._rubyWord_1p6y5_95{justify-content:center;min-height:1em;font-size:.5em;line-height:1em;display:flex}._lyricMainLine_1p6y5_80 ._wordWithRuby_1p6y5_103{flex-direction:column;align-items:center;display:inline-flex}._lyricMainLine_1p6y5_80 ._wordBody_1p6y5_109{flex-direction:column;align-items:center;display:flex}._lyricSubLine_1p6y5_116{opacity:.3;font-size:max(.5em,10px);line-height:1.5em;transition:opacity .2s .25s}._interludeDots_1p6y5_123{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_1p6y5_123._enabled_1p6y5_134{opacity:1}._interludeDots_1p6y5_123>*{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_1p6y5_123._duet_1p6y5_148{transform-origin:50%;right:0}@supports (mix-blend-mode:plus-lighter){._lyricSubLine_1p6y5_116{opacity:.3}}._tmpDisableTransition_1p6y5_160{transition:none!important}
+/*$vite$:1*/