@applemusic-like-lyrics/core 0.3.1 → 0.4.0

package/dist/style.css

@@ -0,0 +1,399 @@
+.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) {
+    font-size: var(--amll-lp-font-size, max(8vw, 12px));
+  }
+
+  &.dom {
+    --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;
+    line-height: 1.2em;
+  }
+
+  &.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.2em;
+    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) {
+  .amll-lyric-player {
+    --amll-lp-line-width-aspect: 1;
+    --amll-lp-line-padding-x: 0;
+  }
+}
+.FmKaba_lyricLine {
+  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) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &.FmKaba_dirty {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &:has( > *):hover {
+    background-color: var(--amll-lp-hover-bg-color, #fff1);
+  }
+
+  &:has( > *):active {
+    background-color: var(--amll-lp-hover-bg-color, #ffffff05);
+  }
+}
+
+.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_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%;
+}
+
+.FmKaba_lyricMainLine {
+  text-wrap: balance;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  margin: -1em;
+  padding: 1em;
+  transition: opacity .3s .1s;
+
+  & span {
+    text-align: start;
+    vertical-align: bottom;
+    display: inline-block;
+  }
+
+  & .FmKaba_romanWord {
+    padding-inline-end: .3em;
+    font-size: .5em;
+    line-height: 1em;
+    display: flex;
+  }
+
+  & .FmKaba_rubyWord {
+    justify-content: center;
+    min-height: 1em;
+    font-size: .5em;
+    line-height: 1em;
+    display: flex;
+  }
+
+  & .FmKaba_wordWithRuby {
+    vertical-align: bottom;
+    flex-direction: column;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  & .FmKaba_wordBody {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+  }
+
+  & > span, & span.FmKaba_emphasizeWrapper {
+    white-space: pre-wrap;
+    will-change: transform;
+    vertical-align: bottom;
+    margin: -1em;
+    padding: 1em;
+    display: inline-block;
+
+    &.FmKaba_emphasize, & span.FmKaba_emphasize {
+      backface-visibility: hidden;
+      margin: -1em;
+      padding: 1em;
+
+      & > span {
+        will-change: transform;
+        backface-visibility: hidden;
+        margin: -1em;
+        padding: 1em;
+      }
+    }
+  }
+}
+
+.FmKaba_lyricSubLine {
+  opacity: .3;
+  font-size: max(.5em, 10px);
+  line-height: 1.5em;
+  transition: opacity .2s .25s;
+}
+
+.FmKaba_disableSpring > * {
+  transition: filter .25s, transform .5s, background-color .25s, box-shadow .25s;
+}
+
+.FmKaba_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;
+  position: absolute;
+  left: 0;
+
+  &.FmKaba_enabled {
+    opacity: 1;
+  }
+
+  & > * {
+    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;
+  }
+
+  &.FmKaba_duet {
+    transform-origin: center;
+    right: 0;
+  }
+}
+
+@supports (mix-blend-mode: plus-lighter) {
+  .FmKaba_lyricSubLine {
+    opacity: .3;
+  }
+}
+
+.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;
+
+  &.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;
+  }
+}
+
+.amll-lyric-player {
+  &:hover .KxF9Iq_lyricLine {
+    filter: unset !important;
+  }
+
+  &.KxF9Iq_hasDuetLine {
+    & .KxF9Iq_lyricLine:not(.KxF9Iq_lyricDuetLine) {
+      padding-right: 15%;
+    }
+
+    & .KxF9Iq_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;
+  }
+
+  & .KxF9Iq_wordWithRuby {
+    flex-direction: column;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  & .KxF9Iq_wordBody {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+  }
+}
+
+.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 {
+    opacity: 1;
+  }
+
+  & > * {
+    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,85 +1,70 @@
 {
-  "name": "@applemusic-like-lyrics/core",
-  "version": "0.3.1",
-  "description": "AMLL 的纯 JS 核心组件框架，包括歌词显示组件和背景组件等其它可以复用的组件",
-  "repository": {
-    "url": "https://github.com/amll-dev/applemusic-like-lyrics.git",
-    "directory": "packages/core",
-    "type": "git"
-  },
-  "license": "GPL-3.0",
-  "nx": {
-    "tags": [
-      "library"
-    ],
-    "targets": {
-      "nx-release-publish": {
-        "executor": "@nx/js:release-publish",
-        "dependsOn": []
-      }
-    }
-  },
-  "files": [
-    "dist/**/*.js",
-    "dist/**/*.ts",
-    "dist/**/*.cjs",
-    "dist/**/*.css",
-    "dist/**/*.map"
-  ],
-  "type": "module",
-  "main": "./dist/amll-core.cjs",
-  "module": "./dist/amll-core.js",
-  "typings": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/amll-core.js",
-      "require": "./dist/amll-core.cjs"
-    },
-    "./style.css": {
-      "import": "./dist/amll-core.css",
-      "require": "./dist/amll-core.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.17",
-    "typedoc-plugin-markdown": "^4.11.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-glsl": "^1.5.6",
-    "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.6.0",
-    "@applemusic-like-lyrics/lyric": "^0.4.1",
-    "@applemusic-like-lyrics/ttml": "^0.2.0"
-  },
-  "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",
-    "build": "vite build",
-    "build:dev": "vite build",
-    "fmt": "biome format --write ./src",
-    "dev": "vite dev",
-    "preinstall": "npx only-allow pnpm"
-  }
-}
+	"name": "@applemusic-like-lyrics/core",
+	"version": "0.4.0",
+	"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.7",
+		"tsdown": "^0.21.7"
+	},
+	"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"
+	}
+}