@applemusic-like-lyrics/core 0.4.2 → 0.5.1

package/dist/style.css

@@ -21,32 +21,6 @@
     z-index: 1;
     line-height: 1.2;
   }
-
-  &.dom-slim {
-    --amll-lp-line-width-aspect: .8;
-    --amll-lp-line-padding-x: 1em;
-    --amll-lp-bg-line-scale: .7;
-    user-select: none;
-    box-sizing: content-box;
-    z-index: 1;
-    min-width: 0;
-    min-height: 0;
-    line-height: 1.2;
-    overflow: hidden scroll;
-
-    &::-webkit-scrollbar {
-      opacity: 0;
-    }
-
-    &:hover::-webkit-scrollbar {
-      opacity: 1;
-    }
-
-    & > * {
-      content-visibility: auto;
-      contain-intrinsic-size: 100% 2em;
-    }
-  }
 }
 
 @media screen and (width <= 768px) {
@@ -55,21 +29,32 @@
     --amll-lp-line-padding-x: 0;
   }
 }
+.FmKaba_lyricLineWrapper {
+  will-change: transform, opacity, filter;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  transition: opacity .4s, filter .4s;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .FmKaba_lyricLine {
-  backface-visibility: hidden;
-  transform-origin: 0;
+  box-sizing: border-box;
   width: var(--amll-lp-width, 100%);
   min-width: var(--amll-lp-width, 100%);
   max-width: var(--amll-lp-width, 100%);
   contain: content;
+  backface-visibility: hidden;
+  transform-origin: 0;
   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;
+  transition: background-color .25s, box-shadow .25s;
+  position: relative;
 
   @media screen and (width <= 500px) {
     padding-left: 20px;
@@ -90,43 +75,6 @@
   }
 }
 
-.FmKaba_lyricBgLine {
-  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;
-
-  & .FmKaba_lyricMainLine {
-    padding: 1.2em 1em;
-  }
-
-  &.FmKaba_active {
-    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 .FmKaba_lyricLine {
-    filter: unset !important;
-  }
-
-  &.FmKaba_hasDuetLine {
-    & .FmKaba_lyricLine:not(.FmKaba_lyricDuetLine) {
-      padding-right: 15%;
-    }
-
-    & .FmKaba_lyricDuetLine {
-      padding-left: 15%;
-    }
-  }
-
-  &:not(.playing) > .FmKaba_lyricBgLine {
-    opacity: .4;
-  }
-}
-
 .FmKaba_lyricDuetLine {
   text-align: right;
   transform-origin: 100%;
@@ -173,8 +121,8 @@
 
   & > span, & span.FmKaba_emphasizeWrapper {
     white-space: pre-wrap;
-    will-change: transform;
     vertical-align: bottom;
+    will-change: transform;
     margin: -1em;
     padding: 1em;
     display: inline-block;
@@ -194,20 +142,87 @@
   }
 }
 
+.FmKaba_lyricBgLine {
+  opacity: .4;
+  padding: 1vh
+		calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, .7));
+  font-size: max(calc(1em * var(--amll-lp-bg-line-scale, .7)), 10px);
+  transition: background-color .25s, box-shadow .25s;
+
+  & .FmKaba_lyricMainLine {
+    padding: 1.2em 1em;
+  }
+
+  &.FmKaba_active {
+    opacity: .4;
+    transition: background-color .25s, box-shadow .25s;
+  }
+}
+
 .FmKaba_lyricSubLine {
   opacity: .3;
   font-size: max(.5em, 10px);
   line-height: 1.5em;
   transition: opacity .2s .25s;
+
+  @supports (mix-blend-mode: plus-lighter) {
+    opacity: .3;
+  }
 }
 
-.FmKaba_disableSpring > * {
-  transition: filter .25s, transform .5s, background-color .25s, box-shadow .25s;
+.FmKaba_bottomLine {
+  cursor: default;
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 1.8em;
+
+  &:empty {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    display: none;
+  }
+}
+
+.FmKaba_bgWrapper {
+  z-index: -1;
+  align-items: inherit;
+  visibility: visible;
+  pointer-events: auto;
+  opacity: 0;
+  width: 100%;
+  transform-origin: var(--lyric-line-padding-x) top;
+  flex-direction: column;
+  transition: opacity .3s;
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+
+.FmKaba_bgWrapperTop {
+  transform-origin: var(--lyric-line-padding-x) bottom;
+  margin-top: -999px;
+  position: relative;
+  top: auto;
+  bottom: auto;
+}
+
+.FmKaba_bgWrapperActive {
+  opacity: 1;
+  position: relative;
+  top: auto;
+  bottom: auto;
+}
+
+.FmKaba_bgWrapperHidden {
+  visibility: hidden;
+  pointer-events: none;
 }
 
 .FmKaba_interludeDots {
-  transform-origin: center;
   opacity: 0;
+  transform-origin: center;
   gap: .25em;
   width: fit-content;
   height: clamp(.5em, 1vh, 3em);
@@ -222,8 +237,8 @@
   }
 
   & > * {
-    aspect-ratio: 1;
     background-color: var(--amll-lp-color, white);
+    aspect-ratio: 1;
     border-radius: 50%;
     width: clamp(.5em, 1vh, 3em);
     height: clamp(.5em, 1vh, 3em);
@@ -237,164 +252,51 @@
   }
 }
 
-@supports (mix-blend-mode: plus-lighter) {
-  .FmKaba_lyricSubLine {
-    opacity: .3;
-  }
+.FmKaba_disableSpring > *, .FmKaba_disableSpring .FmKaba_lyricLine {
+  transition: filter .25s, transform .5s, background-color .25s, box-shadow .25s;
 }
 
 .FmKaba_tmpDisableTransition {
   transition: none !important;
 }
 
-.FmKaba_bottomLine {
-  cursor: default;
-  padding-top: 0;
-  padding-bottom: 0;
-  line-height: 1.8em;
-}
-
-.FmKaba_bottomLine:empty {
-  height: 0;
-  margin: 0;
-  padding: 0;
-  display: none;
-}
-.KxF9Iq_lyricLine {
-  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;
-
-  &:has( > *):hover {
-    background-color: var(--amll-lp-hover-bg-color, #fff1);
-  }
-
-  &:has( > *):active {
-    background-color: var(--amll-lp-hover-bg-color, #ffffff05);
-  }
-}
-
-.KxF9Iq_lyricBgLine {
-  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;
+.amll-lyric-player {
+  --lyric-line-padding-x: 1em;
 
-  &.KxF9Iq_active {
-    opacity: .4;
-    transition: opacity .5s .25s, scale 1.5s cubic-bezier(0, 1, 0, 1) .25s, filter .2s, background-color .25s, box-shadow .25s;
+  @media screen and (width <= 500px) {
+    --lyric-line-padding-x: 20px;
   }
-}
 
-.amll-lyric-player {
-  &:hover .KxF9Iq_lyricLine {
+  &:hover .FmKaba_lyricLine, &:hover .FmKaba_lyricLineWrapper {
     filter: unset !important;
   }
 
-  &.KxF9Iq_hasDuetLine {
-    & .KxF9Iq_lyricLine:not(.KxF9Iq_lyricDuetLine) {
+  &.FmKaba_hasDuetLine {
+    & .FmKaba_lyricLine:not(.FmKaba_lyricDuetLine) {
       padding-right: 15%;
     }
 
-    & .KxF9Iq_lyricDuetLine {
+    & .FmKaba_lyricDuetLine {
       padding-left: 15%;
     }
-  }
-}
-
-.KxF9Iq_lyricDuetLine {
-  text-align: right;
-  transform-origin: 100%;
-}
-
-.KxF9Iq_lyricMainLine {
-  contain: content paint;
-  transition: opacity .3s .1s;
-
-  & span {
-    white-space: pre;
-    display: inline-block;
-  }
-
-  & .KxF9Iq_romanWord {
-    font-size: .5em;
-    line-height: 1em;
-    display: flex;
-  }
 
-  & .KxF9Iq_rubyWord {
-    justify-content: center;
-    min-height: 1em;
-    font-size: .5em;
-    line-height: 1em;
-    display: flex;
-  }
+    & .FmKaba_lyricLineWrapper:has(.FmKaba_lyricDuetLine) {
+      align-items: flex-end;
 
-  & .KxF9Iq_wordWithRuby {
-    flex-direction: column;
-    align-items: center;
-    display: inline-flex;
-  }
+      & .FmKaba_bgWrapper {
+        transform-origin: calc(100% - var(--lyric-line-padding-x)) top;
+      }
 
-  & .KxF9Iq_wordBody {
-    flex-direction: column;
-    align-items: center;
-    display: flex;
+      & .FmKaba_bgWrapperTop {
+        transform-origin: calc(100% - var(--lyric-line-padding-x)) bottom;
+      }
+    }
   }
-}
-
-.KxF9Iq_lyricSubLine {
-  opacity: .3;
-  font-size: max(.5em, 10px);
-  line-height: 1.5em;
-  transition: opacity .2s .25s;
-}
-
-.KxF9Iq_interludeDots {
-  transform-origin: center;
-  opacity: 0;
-  gap: .25em;
-  width: fit-content;
-  height: clamp(.5em, 1vh, 3em);
-  padding: 2.5% .75em;
-  transition: opacity .25s;
-  display: flex;
-  left: 0;
 
-  &.KxF9Iq_enabled {
+  &:not(.FmKaba_playing) .FmKaba_bgWrapper {
     opacity: 1;
+    position: relative;
+    top: auto;
+    bottom: auto;
   }
-
-  & > * {
-    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;
-  }
-
-  &.KxF9Iq_duet {
-    transform-origin: center;
-    right: 0;
-  }
-}
-
-@supports (mix-blend-mode: plus-lighter) {
-  .KxF9Iq_lyricSubLine {
-    opacity: .3;
-  }
-}
-
-.KxF9Iq_tmpDisableTransition {
-  transition: none !important;
 }

package/package.json

@@ -1,70 +1,88 @@
 {
-	"name": "@applemusic-like-lyrics/core",
-	"version": "0.4.2",
-	"description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
-	"repository": {
-		"url": "https://github.com/amll-dev/applemusic-like-lyrics.git",
-		"directory": "packages/core",
-		"type": "git"
-	},
-	"license": "GPL-3.0",
-	"files": [
-		"dist"
-	],
-	"scripts": {
-		"build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
-		"typecheck": "tsgo -b",
-		"build-only": "tsdown",
-		"build": "run-p typecheck \"build-only {@}\" --",
-		"build:dev": "tsdown",
-		"fmt": "biome format --write ./src",
-		"dev": "nx run @applemusic-like-lyrics/playground-core:dev"
-	},
-	"type": "module",
-	"main": "./dist/amll-core.cjs",
-	"module": "./dist/amll-core.mjs",
-	"typings": "./dist/amll-core.d.mts",
-	"exports": {
-		".": {
-			"import": {
-				"types": "./dist/amll-core.d.mts",
-				"default": "./dist/amll-core.mjs"
-			},
-			"require": {
-				"types": "./dist/amll-core.d.cts",
-				"default": "./dist/amll-core.cjs"
-			}
-		},
-		"./style.css": {
-			"import": "./dist/style.css",
-			"require": "./dist/style.css"
-		}
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.4.8",
-		"@types/deep-freeze": "^0.1.5",
-		"@types/stats.js": "^0.17.3",
-		"@types/ungap__structured-clone": "^1.2.0",
-		"lil-gui": "^0.21.0",
-		"stats.js": "^0.17.0",
-		"typedoc": "^0.28.18",
-		"typedoc-plugin-markdown": "^4.11.0",
-		"@tsdown/css": "^0.21.9",
-		"tsdown": "^0.21.9"
-	},
-	"peerDependencies": {
-		"@pixi/app": "*",
-		"@pixi/core": "*",
-		"@pixi/display": "*",
-		"@pixi/filter-blur": "*",
-		"@pixi/filter-bulge-pinch": "*",
-		"@pixi/filter-color-matrix": "*",
-		"@pixi/sprite": "*"
-	},
-	"dependencies": {
-		"@ungap/structured-clone": "^1.3.0",
-		"bezier-easing": "^3.0.0",
-		"deep-freeze": "^0.0.1",
-		"gl-matrix": "4.0.0-beta.2"
-	}
-}
+  "name": "@applemusic-like-lyrics/core",
+  "version": "0.5.1",
+  "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
+  "repository": {
+    "url": "https://github.com/amll-dev/applemusic-like-lyrics.git",
+    "directory": "packages/core",
+    "type": "git"
+  },
+  "license": "AGPL-3.0-only",
+  "nx": {
+    "tags": [
+      "library"
+    ],
+    "targets": {
+      "nx-release-publish": {
+        "executor": "@nx/js:release-publish",
+        "dependsOn": []
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/amll-core.cjs",
+  "module": "./dist/amll-core.mjs",
+  "typings": "./dist/amll-core.d.mts",
+  "imports": {
+    "#interfaces": "./src/interfaces.ts",
+    "#utils/*": "./src/utils/*",
+    "#styles/*": "./src/styles/*",
+    "#lyric/*": "./src/lyric-player/*",
+    "#bg/*": "./src/bg-player/*"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/amll-core.d.mts",
+        "default": "./dist/amll-core.mjs"
+      },
+      "require": {
+        "types": "./dist/amll-core.d.cts",
+        "default": "./dist/amll-core.cjs"
+      }
+    },
+    "./style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.8",
+    "@types/deep-freeze": "^0.1.5",
+    "@types/stats.js": "^0.17.3",
+    "@types/ungap__structured-clone": "^1.2.0",
+    "lil-gui": "^0.21.0",
+    "stats.js": "^0.17.0",
+    "typedoc": "^0.28.18",
+    "typedoc-plugin-markdown": "^4.11.0",
+    "@tsdown/css": "^0.21.9",
+    "tsdown": "^0.21.9"
+  },
+  "peerDependencies": {
+    "@pixi/app": "*",
+    "@pixi/core": "*",
+    "@pixi/display": "*",
+    "@pixi/filter-blur": "*",
+    "@pixi/filter-bulge-pinch": "*",
+    "@pixi/filter-color-matrix": "*",
+    "@pixi/sprite": "*"
+  },
+  "dependencies": {
+    "@ungap/structured-clone": "^1.3.0",
+    "bezier-easing": "^3.0.0",
+    "deep-freeze": "^0.0.1",
+    "gl-matrix": "4.0.0-beta.2"
+  },
+  "scripts": {
+    "build:docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts",
+    "typecheck": "tsgo -b",
+    "build-only": "tsdown",
+    "build": "run-p typecheck \"build-only {@}\" --",
+    "build:dev": "tsdown",
+    "fmt": "biome format --write ./src",
+    "dev": "nx run @applemusic-like-lyrics/playground-core:dev"
+  }
+}