@applemusic-like-lyrics/react 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/amll-react.js +1 -1
- package/dist/amll-react.js.map +1 -1
- package/dist/amll-react.mjs +42 -42
- package/dist/amll-react.mjs.map +1 -1
- package/dist/lyric-player.d.ts +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/amll-react.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),v=require("@applemusic-like-lyrics/core"),r=require("react"),q=r.forwardRef(({albumImageUrl:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),v=require("@applemusic-like-lyrics/core"),r=require("react"),q=r.forwardRef(({albumImageUrl:d,fps:i,playing:o,flowSpeed:a,renderScale:E,...l},p)=>{const c=r.useRef(),f=r.useRef(null);return r.useEffect(()=>(c.current=new v.BackgroundRender,()=>{var u;(u=c.current)==null||u.dispose()}),[]),r.useEffect(()=>{var u;d&&((u=c.current)==null||u.setAlbumImage(d))},[d]),r.useEffect(()=>{var u;i&&((u=c.current)==null||u.setFPS(i))},[i]),r.useEffect(()=>{var u,s,t;o===void 0?(u=c.current)==null||u.resume():o?(s=c.current)==null||s.resume():(t=c.current)==null||t.pause()},[o]),r.useEffect(()=>{var u;a&&((u=c.current)==null||u.setFlowSpeed(a))},[a]),r.useEffect(()=>{var u;E&&((u=c.current)==null||u.setRenderScale(E))},[E]),r.useEffect(()=>{var u;if(c.current){const s=c.current.getElement();s.style.width="100%",s.style.height="100%",(u=f.current)==null||u.appendChild(s)}}),r.useImperativeHandle(p,()=>({wrapperEl:f.current,bgRender:c.current}),[f.current,c.current]),m.jsx("div",{...l,ref:f})}),F=r.forwardRef(({disabled:d,alignAnchor:i,enableSpring:o,enableBlur:a,lyricLines:E,currentTime:l,linePosXSpringParams:p,linePosYSpringParams:c,lineScaleSpringParams:f,...u},s)=>{const t=r.useRef(),y=r.useRef(null);return r.useEffect(()=>(t.current=new v.LyricPlayer,()=>{var e;(e=t.current)==null||e.dispose()}),[]),r.useEffect(()=>{if(!d){let e=!1,n=-1;const w=R=>{var L;e||(n===-1&&(n=R),(L=t.current)==null||L.update(R-n),n=R,requestAnimationFrame(w))};return requestAnimationFrame(w),()=>{e=!0}}},[d]),r.useEffect(()=>{var e;t.current&&((e=y.current)==null||e.appendChild(t.current.getElement()))},[y.current]),r.useEffect(()=>{var e;i&&((e=t.current)==null||e.setAlignAnchor(i))},[i]),r.useEffect(()=>{var e,n;o?(e=t.current)==null||e.setEnableSpring(o):(n=t.current)==null||n.setEnableSpring(!0)},[o]),r.useEffect(()=>{var e;(e=t.current)==null||e.setEnableBlur(a??!0)},[a]),r.useEffect(()=>{var e,n,w,R;E?((e=t.current)==null||e.setLyricLines(E),(n=t.current)==null||n.update()):((w=t.current)==null||w.setLyricLines([]),(R=t.current)==null||R.update())},[E]),r.useEffect(()=>{var e,n;l?(e=t.current)==null||e.setCurrentTime(l):(n=t.current)==null||n.setCurrentTime(0)},[l]),r.useEffect(()=>{var e;p&&((e=t.current)==null||e.setLinePosXSpringParams(p))},[p]),r.useEffect(()=>{var e;c&&((e=t.current)==null||e.setLinePosYSpringParams(c))},[c]),r.useEffect(()=>{var e;f&&((e=t.current)==null||e.setLineScaleSpringParams(f))},[f]),r.useImperativeHandle(s,()=>({wrapperEl:y.current,lyricPlayer:t.current}),[y.current,t.current]),m.jsx("div",{...u,ref:y})});exports.BackgroundRender=q;exports.LyricPlayer=F;
|
|
2
2
|
//# sourceMappingURL=amll-react.js.map
|
package/dist/amll-react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"amll-react.js","sources":["../src/bg-render.tsx","../src/lyric-player.tsx"],"sourcesContent":["import { BackgroundRender as CoreBackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 背景渲染组件的属性\n */\nexport interface BackgroundRenderProps {\n\t/**\n\t * 设置背景专辑图片\n\t */\n\talbumImageUrl?: string;\n\t/**\n\t * 设置当前背景动画帧率,如果为 `undefined` 则默认为 `30`\n\t */\n\tfps?: number;\n\t/**\n\t * 设置当前播放状态,如果为 `undefined` 则默认为 `true`\n\t */\n\tplaying?: boolean;\n\t/**\n\t * 设置当前动画流动速度,如果为 `undefined` 则默认为 `2`\n\t */\n\tflowSpeed?: number;\n\t/**\n\t * 设置当前渲染缩放比例,如果为 `undefined` 则默认为 `0.5`\n\t */\n\trenderScale?: number;\n}\n\n/**\n * 背景渲染组件的引用\n */\nexport interface BackgroundRenderRef {\n\t/**\n\t * 背景渲染实例引用\n\t */\n\tbgRender?: CoreBackgroundRender;\n\t/**\n\t * 将背景渲染实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 流体背景渲染组件,通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果\n */\nexport const BackgroundRender = forwardRef<\n\tBackgroundRenderRef,\n\tHTMLProps<HTMLDivElement> & BackgroundRenderProps\n>(({ albumImageUrl, fps, playing, flowSpeed, renderScale, ...props }, ref) => {\n\tconst coreBGRenderRef = useRef<CoreBackgroundRender>();\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tcoreBGRenderRef.current = new CoreBackgroundRender();\n\t\treturn () => {\n\t\t\tcoreBGRenderRef.current?.dispose();\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (albumImageUrl) coreBGRenderRef.current?.setAlbumImage(albumImageUrl);\n\t}, [albumImageUrl]);\n\n\tuseEffect(() => {\n\t\tif (fps) coreBGRenderRef.current?.setFPS(fps);\n\t}, [fps]);\n\n\tuseEffect(() => {\n\t\tif (playing === undefined) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else if (playing) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else {\n\t\t\tcoreBGRenderRef.current?.pause();\n\t\t}\n\t}, [playing]);\n\n\tuseEffect(() => {\n\t\tif (flowSpeed) coreBGRenderRef.current?.setFlowSpeed(flowSpeed);\n\t}, [flowSpeed]);\n\n\tuseEffect(() => {\n\t\tif (renderScale) coreBGRenderRef.current?.setRenderScale(renderScale);\n\t}, [renderScale]);\n\n\tuseEffect(() => {\n\t\tif (coreBGRenderRef.current) {\n\t\t\tconst el = coreBGRenderRef.current.getElement();\n\t\t\tel.style.width = \"100%\";\n\t\t\tel.style.height = \"100%\";\n\t\t\twrapperRef.current?.appendChild(el);\n\t\t}\n\t});\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\twrapperEl: wrapperRef.current,\n\t\t\tbgRender: coreBGRenderRef.current,\n\t\t}),\n\t\t[wrapperRef.current, coreBGRenderRef.current],\n\t);\n\n\treturn <div {...props} ref={wrapperRef} />;\n});\n","import {\n\tLyricPlayer as CoreLyricPlayer,\n\ttype LyricLine,\n\ttype spring,\n} from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 歌词播放组件的属性\n */\nexport interface LyricPlayerProps {\n\t/**\n\t * 是否启用歌词播放组件,默认为 `true`,设置为 `true` 将会开始逐帧更新歌词的动画效果,并对传入的其他参数变更做出反馈。\n\t *\n\t * 如果不设置该选项,你也可以通过引用取得原始渲染组件实例,手动逐帧调用其 `update` 函数来更新动画效果。\n\t */\n\tenable?: boolean;\n\t/**\n\t * 设置歌词行的对齐方式,如果为 `undefined` 则默认为 `top`\n\t *\n\t * - 设置成 `top` 的话歌词将会向组件顶部对齐\n\t * - 设置成 `bottom` 的话歌词将会向组件底部对齐\n\t * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐\n\t */\n\talignAnchor?: \"top\" | \"bottom\" | number;\n\t/**\n\t * 设置是否使用物理弹簧算法实现歌词动画效果,默认启用\n\t *\n\t * 如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行\n\t *\n\t * 如果不启用,则会回退到基于 `transition` 的过渡效果,对低性能的机器比较友好,但是效果会比较单一\n\t */\n\tenableSpring?: boolean;\n\t/**\n\t * 设置是否启用歌词行的模糊效果,默认为 `true`\n\t */\n\tenableBlur?: boolean;\n\t/**\n\t * 设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误\n\t */\n\tlyricLines?: LyricLine[];\n\t/**\n\t * 设置当前播放进度,单位为毫秒且**必须是整数**,此时将会更新内部的歌词进度信息\n\t * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好\n\t */\n\tcurrentTime?: number;\n\t/**\n\t * 设置所有歌词行在横坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosXSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosYSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlineScaleSpringParams?: Partial<spring.SpringParams>;\n}\n\n/**\n * 歌词播放组件的引用\n */\nexport interface LyricPlayerRef {\n\t/**\n\t * 歌词播放实例\n\t */\n\tlyricPlayer?: CoreLyricPlayer;\n\t/**\n\t * 将歌词播放实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 歌词播放组件,本框架的核心组件\n *\n * 尽可能贴切 Apple Music for iPad 的歌词效果设计,且做了力所能及的优化措施\n */\nexport const LyricPlayer = forwardRef<\n\tLyricPlayerRef,\n\tHTMLProps<HTMLDivElement> & LyricPlayerProps\n>(\n\t(\n\t\t{\n\t\t\tenable,\n\t\t\talignAnchor,\n\t\t\tenableSpring,\n\t\t\tenableBlur,\n\t\t\tlyricLines,\n\t\t\tcurrentTime,\n\t\t\tlinePosXSpringParams,\n\t\t\tlinePosYSpringParams,\n\t\t\tlineScaleSpringParams,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst corePlayerRef = useRef<CoreLyricPlayer>();\n\t\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current = new CoreLyricPlayer();\n\t\t\treturn () => {\n\t\t\t\tcorePlayerRef.current?.dispose();\n\t\t\t};\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (enable !== undefined && enable) {\n\t\t\t\tlet canceled = false;\n\t\t\t\tlet lastTime = -1;\n\t\t\t\tconst onFrame = (time: number) => {\n\t\t\t\t\tif (canceled) return;\n\t\t\t\t\tif (lastTime === -1) {\n\t\t\t\t\t\tlastTime = time;\n\t\t\t\t\t}\n\t\t\t\t\tcorePlayerRef.current?.update(time - lastTime);\n\t\t\t\t\tlastTime = time;\n\t\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\t};\n\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\treturn () => {\n\t\t\t\t\tcanceled = true;\n\t\t\t\t};\n\t\t\t}\n\t\t}, [enable]);\n\n\t\tuseEffect(() => {\n\t\t\tif (corePlayerRef.current)\n\t\t\t\twrapperRef.current?.appendChild(corePlayerRef.current.getElement());\n\t\t}, [wrapperRef.current]);\n\n\t\tuseEffect(() => {\n\t\t\tif (alignAnchor) corePlayerRef.current?.setAlignAnchor(alignAnchor);\n\t\t}, [alignAnchor]);\n\n\t\tuseEffect(() => {\n\t\t\tif (enableSpring) corePlayerRef.current?.setEnableSpring(enableSpring);\n\t\t\telse corePlayerRef.current?.setEnableSpring(true);\n\t\t}, [enableSpring]);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current?.setEnableBlur(enableBlur ?? true);\n\t\t}, [enableBlur]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lyricLines) {\n\t\t\t\tcorePlayerRef.current?.setLyricLines(lyricLines);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t} else {\n\t\t\t\tcorePlayerRef.current?.setLyricLines([]);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t}\n\t\t}, [lyricLines]);\n\n\t\tuseEffect(() => {\n\t\t\tif (currentTime) corePlayerRef.current?.setCurrentTime(currentTime);\n\t\t\telse corePlayerRef.current?.setCurrentTime(0);\n\t\t}, [currentTime]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosXSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosXSpringParams(linePosXSpringParams);\n\t\t}, [linePosXSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosYSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosYSpringParams(linePosYSpringParams);\n\t\t}, [linePosYSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lineScaleSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLineScaleSpringParams(lineScaleSpringParams);\n\t\t}, [lineScaleSpringParams]);\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\twrapperEl: wrapperRef.current,\n\t\t\t\tlyricPlayer: corePlayerRef.current,\n\t\t\t}),\n\t\t\t[wrapperRef.current, corePlayerRef.current],\n\t\t);\n\n\t\treturn <div {...props} ref={wrapperRef} />;\n\t},\n);\n"],"names":["BackgroundRender","forwardRef","albumImageUrl","fps","playing","flowSpeed","renderScale","props","ref","coreBGRenderRef","useRef","wrapperRef","useEffect","CoreBackgroundRender","_a","_b","_c","el","useImperativeHandle","jsx","LyricPlayer","enable","alignAnchor","enableSpring","enableBlur","lyricLines","currentTime","linePosXSpringParams","linePosYSpringParams","lineScaleSpringParams","corePlayerRef","CoreLyricPlayer","canceled","lastTime","onFrame","time","_d"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"amll-react.js","sources":["../src/bg-render.tsx","../src/lyric-player.tsx"],"sourcesContent":["import { BackgroundRender as CoreBackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 背景渲染组件的属性\n */\nexport interface BackgroundRenderProps {\n\t/**\n\t * 设置背景专辑图片\n\t */\n\talbumImageUrl?: string;\n\t/**\n\t * 设置当前背景动画帧率,如果为 `undefined` 则默认为 `30`\n\t */\n\tfps?: number;\n\t/**\n\t * 设置当前播放状态,如果为 `undefined` 则默认为 `true`\n\t */\n\tplaying?: boolean;\n\t/**\n\t * 设置当前动画流动速度,如果为 `undefined` 则默认为 `2`\n\t */\n\tflowSpeed?: number;\n\t/**\n\t * 设置当前渲染缩放比例,如果为 `undefined` 则默认为 `0.5`\n\t */\n\trenderScale?: number;\n}\n\n/**\n * 背景渲染组件的引用\n */\nexport interface BackgroundRenderRef {\n\t/**\n\t * 背景渲染实例引用\n\t */\n\tbgRender?: CoreBackgroundRender;\n\t/**\n\t * 将背景渲染实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 流体背景渲染组件,通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果\n */\nexport const BackgroundRender = forwardRef<\n\tBackgroundRenderRef,\n\tHTMLProps<HTMLDivElement> & BackgroundRenderProps\n>(({ albumImageUrl, fps, playing, flowSpeed, renderScale, ...props }, ref) => {\n\tconst coreBGRenderRef = useRef<CoreBackgroundRender>();\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tcoreBGRenderRef.current = new CoreBackgroundRender();\n\t\treturn () => {\n\t\t\tcoreBGRenderRef.current?.dispose();\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (albumImageUrl) coreBGRenderRef.current?.setAlbumImage(albumImageUrl);\n\t}, [albumImageUrl]);\n\n\tuseEffect(() => {\n\t\tif (fps) coreBGRenderRef.current?.setFPS(fps);\n\t}, [fps]);\n\n\tuseEffect(() => {\n\t\tif (playing === undefined) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else if (playing) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else {\n\t\t\tcoreBGRenderRef.current?.pause();\n\t\t}\n\t}, [playing]);\n\n\tuseEffect(() => {\n\t\tif (flowSpeed) coreBGRenderRef.current?.setFlowSpeed(flowSpeed);\n\t}, [flowSpeed]);\n\n\tuseEffect(() => {\n\t\tif (renderScale) coreBGRenderRef.current?.setRenderScale(renderScale);\n\t}, [renderScale]);\n\n\tuseEffect(() => {\n\t\tif (coreBGRenderRef.current) {\n\t\t\tconst el = coreBGRenderRef.current.getElement();\n\t\t\tel.style.width = \"100%\";\n\t\t\tel.style.height = \"100%\";\n\t\t\twrapperRef.current?.appendChild(el);\n\t\t}\n\t});\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\twrapperEl: wrapperRef.current,\n\t\t\tbgRender: coreBGRenderRef.current,\n\t\t}),\n\t\t[wrapperRef.current, coreBGRenderRef.current],\n\t);\n\n\treturn <div {...props} ref={wrapperRef} />;\n});\n","import {\n\tLyricPlayer as CoreLyricPlayer,\n\ttype LyricLine,\n\ttype spring,\n} from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 歌词播放组件的属性\n */\nexport interface LyricPlayerProps {\n\t/**\n\t * 是否禁用歌词播放组件,默认为 `false`,歌词组件启用后将会开始逐帧更新歌词的动画效果,并对传入的其他参数变更做出反馈。\n\t *\n\t * 如果禁用了歌词组件动画,你也可以通过引用取得原始渲染组件实例,手动逐帧调用其 `update` 函数来更新动画效果。\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * 设置歌词行的对齐方式,如果为 `undefined` 则默认为 `top`\n\t *\n\t * - 设置成 `top` 的话歌词将会向组件顶部对齐\n\t * - 设置成 `bottom` 的话歌词将会向组件底部对齐\n\t * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐\n\t */\n\talignAnchor?: \"top\" | \"bottom\" | number;\n\t/**\n\t * 设置是否使用物理弹簧算法实现歌词动画效果,默认启用\n\t *\n\t * 如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行\n\t *\n\t * 如果不启用,则会回退到基于 `transition` 的过渡效果,对低性能的机器比较友好,但是效果会比较单一\n\t */\n\tenableSpring?: boolean;\n\t/**\n\t * 设置是否启用歌词行的模糊效果,默认为 `true`\n\t */\n\tenableBlur?: boolean;\n\t/**\n\t * 设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误\n\t */\n\tlyricLines?: LyricLine[];\n\t/**\n\t * 设置当前播放进度,单位为毫秒且**必须是整数**,此时将会更新内部的歌词进度信息\n\t * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好\n\t */\n\tcurrentTime?: number;\n\t/**\n\t * 设置所有歌词行在横坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosXSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosYSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlineScaleSpringParams?: Partial<spring.SpringParams>;\n}\n\n/**\n * 歌词播放组件的引用\n */\nexport interface LyricPlayerRef {\n\t/**\n\t * 歌词播放实例\n\t */\n\tlyricPlayer?: CoreLyricPlayer;\n\t/**\n\t * 将歌词播放实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 歌词播放组件,本框架的核心组件\n *\n * 尽可能贴切 Apple Music for iPad 的歌词效果设计,且做了力所能及的优化措施\n */\nexport const LyricPlayer = forwardRef<\n\tLyricPlayerRef,\n\tHTMLProps<HTMLDivElement> & LyricPlayerProps\n>(\n\t(\n\t\t{\n\t\t\tdisabled,\n\t\t\talignAnchor,\n\t\t\tenableSpring,\n\t\t\tenableBlur,\n\t\t\tlyricLines,\n\t\t\tcurrentTime,\n\t\t\tlinePosXSpringParams,\n\t\t\tlinePosYSpringParams,\n\t\t\tlineScaleSpringParams,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst corePlayerRef = useRef<CoreLyricPlayer>();\n\t\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current = new CoreLyricPlayer();\n\t\t\treturn () => {\n\t\t\t\tcorePlayerRef.current?.dispose();\n\t\t\t};\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!disabled) {\n\t\t\t\tlet canceled = false;\n\t\t\t\tlet lastTime = -1;\n\t\t\t\tconst onFrame = (time: number) => {\n\t\t\t\t\tif (canceled) return;\n\t\t\t\t\tif (lastTime === -1) {\n\t\t\t\t\t\tlastTime = time;\n\t\t\t\t\t}\n\t\t\t\t\tcorePlayerRef.current?.update(time - lastTime);\n\t\t\t\t\tlastTime = time;\n\t\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\t};\n\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\treturn () => {\n\t\t\t\t\tcanceled = true;\n\t\t\t\t};\n\t\t\t}\n\t\t}, [disabled]);\n\n\t\tuseEffect(() => {\n\t\t\tif (corePlayerRef.current)\n\t\t\t\twrapperRef.current?.appendChild(corePlayerRef.current.getElement());\n\t\t}, [wrapperRef.current]);\n\n\t\tuseEffect(() => {\n\t\t\tif (alignAnchor) corePlayerRef.current?.setAlignAnchor(alignAnchor);\n\t\t}, [alignAnchor]);\n\n\t\tuseEffect(() => {\n\t\t\tif (enableSpring) corePlayerRef.current?.setEnableSpring(enableSpring);\n\t\t\telse corePlayerRef.current?.setEnableSpring(true);\n\t\t}, [enableSpring]);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current?.setEnableBlur(enableBlur ?? true);\n\t\t}, [enableBlur]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lyricLines) {\n\t\t\t\tcorePlayerRef.current?.setLyricLines(lyricLines);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t} else {\n\t\t\t\tcorePlayerRef.current?.setLyricLines([]);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t}\n\t\t}, [lyricLines]);\n\n\t\tuseEffect(() => {\n\t\t\tif (currentTime) corePlayerRef.current?.setCurrentTime(currentTime);\n\t\t\telse corePlayerRef.current?.setCurrentTime(0);\n\t\t}, [currentTime]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosXSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosXSpringParams(linePosXSpringParams);\n\t\t}, [linePosXSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosYSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosYSpringParams(linePosYSpringParams);\n\t\t}, [linePosYSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lineScaleSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLineScaleSpringParams(lineScaleSpringParams);\n\t\t}, [lineScaleSpringParams]);\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\twrapperEl: wrapperRef.current,\n\t\t\t\tlyricPlayer: corePlayerRef.current,\n\t\t\t}),\n\t\t\t[wrapperRef.current, corePlayerRef.current],\n\t\t);\n\n\t\treturn <div {...props} ref={wrapperRef} />;\n\t},\n);\n"],"names":["BackgroundRender","forwardRef","albumImageUrl","fps","playing","flowSpeed","renderScale","props","ref","coreBGRenderRef","useRef","wrapperRef","useEffect","CoreBackgroundRender","_a","_b","_c","el","useImperativeHandle","jsx","LyricPlayer","disabled","alignAnchor","enableSpring","enableBlur","lyricLines","currentTime","linePosXSpringParams","linePosYSpringParams","lineScaleSpringParams","corePlayerRef","CoreLyricPlayer","canceled","lastTime","onFrame","time","_d"],"mappings":"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"}
|
package/dist/amll-react.mjs
CHANGED
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as F } from "react/jsx-runtime";
|
|
2
2
|
import { BackgroundRender as B, LyricPlayer as C } from "@applemusic-like-lyrics/core";
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
const x =
|
|
3
|
+
import { forwardRef as h, useRef as L, useEffect as n, useImperativeHandle as v } from "react";
|
|
4
|
+
const x = h(({ albumImageUrl: a, fps: i, playing: o, flowSpeed: p, renderScale: d, ...R }, m) => {
|
|
5
5
|
const u = L(), s = L(null);
|
|
6
6
|
return n(() => (u.current = new B(), () => {
|
|
7
7
|
var t;
|
|
8
8
|
(t = u.current) == null || t.dispose();
|
|
9
9
|
}), []), n(() => {
|
|
10
10
|
var t;
|
|
11
|
-
|
|
12
|
-
}, [
|
|
11
|
+
a && ((t = u.current) == null || t.setAlbumImage(a));
|
|
12
|
+
}, [a]), n(() => {
|
|
13
13
|
var t;
|
|
14
|
-
|
|
14
|
+
i && ((t = u.current) == null || t.setFPS(i));
|
|
15
|
+
}, [i]), n(() => {
|
|
16
|
+
var t, f, r;
|
|
17
|
+
o === void 0 ? (t = u.current) == null || t.resume() : o ? (f = u.current) == null || f.resume() : (r = u.current) == null || r.pause();
|
|
15
18
|
}, [o]), n(() => {
|
|
16
|
-
var t, i, r;
|
|
17
|
-
d === void 0 ? (t = u.current) == null || t.resume() : d ? (i = u.current) == null || i.resume() : (r = u.current) == null || r.pause();
|
|
18
|
-
}, [d]), n(() => {
|
|
19
|
-
var t;
|
|
20
|
-
a && ((t = u.current) == null || t.setFlowSpeed(a));
|
|
21
|
-
}, [a]), n(() => {
|
|
22
19
|
var t;
|
|
23
|
-
p && ((t = u.current) == null || t.
|
|
20
|
+
p && ((t = u.current) == null || t.setFlowSpeed(p));
|
|
24
21
|
}, [p]), n(() => {
|
|
22
|
+
var t;
|
|
23
|
+
d && ((t = u.current) == null || t.setRenderScale(d));
|
|
24
|
+
}, [d]), n(() => {
|
|
25
25
|
var t;
|
|
26
26
|
if (u.current) {
|
|
27
|
-
const
|
|
28
|
-
|
|
27
|
+
const f = u.current.getElement();
|
|
28
|
+
f.style.width = "100%", f.style.height = "100%", (t = s.current) == null || t.appendChild(f);
|
|
29
29
|
}
|
|
30
|
-
}),
|
|
30
|
+
}), v(
|
|
31
31
|
m,
|
|
32
32
|
() => ({
|
|
33
33
|
wrapperEl: s.current,
|
|
34
34
|
bgRender: u.current
|
|
35
35
|
}),
|
|
36
36
|
[s.current, u.current]
|
|
37
|
-
), /* @__PURE__ */
|
|
38
|
-
}), $ =
|
|
37
|
+
), /* @__PURE__ */ F("div", { ...R, ref: s });
|
|
38
|
+
}), $ = h(
|
|
39
39
|
({
|
|
40
|
-
|
|
41
|
-
alignAnchor:
|
|
42
|
-
enableSpring:
|
|
43
|
-
enableBlur:
|
|
44
|
-
lyricLines:
|
|
45
|
-
currentTime:
|
|
40
|
+
disabled: a,
|
|
41
|
+
alignAnchor: i,
|
|
42
|
+
enableSpring: o,
|
|
43
|
+
enableBlur: p,
|
|
44
|
+
lyricLines: d,
|
|
45
|
+
currentTime: R,
|
|
46
46
|
linePosXSpringParams: m,
|
|
47
47
|
linePosYSpringParams: u,
|
|
48
48
|
lineScaleSpringParams: s,
|
|
49
49
|
...t
|
|
50
|
-
},
|
|
50
|
+
}, f) => {
|
|
51
51
|
const r = L(), y = L(null);
|
|
52
52
|
return n(() => (r.current = new C(), () => {
|
|
53
53
|
var e;
|
|
54
54
|
(e = r.current) == null || e.dispose();
|
|
55
55
|
}), []), n(() => {
|
|
56
|
-
if (
|
|
56
|
+
if (!a) {
|
|
57
57
|
let e = !1, c = -1;
|
|
58
|
-
const E = (
|
|
58
|
+
const E = (l) => {
|
|
59
59
|
var w;
|
|
60
|
-
e || (c === -1 && (c =
|
|
60
|
+
e || (c === -1 && (c = l), (w = r.current) == null || w.update(l - c), c = l, requestAnimationFrame(E));
|
|
61
61
|
};
|
|
62
62
|
return requestAnimationFrame(E), () => {
|
|
63
63
|
e = !0;
|
|
64
64
|
};
|
|
65
65
|
}
|
|
66
|
-
}, [
|
|
66
|
+
}, [a]), n(() => {
|
|
67
67
|
var e;
|
|
68
68
|
r.current && ((e = y.current) == null || e.appendChild(r.current.getElement()));
|
|
69
69
|
}, [y.current]), n(() => {
|
|
70
70
|
var e;
|
|
71
|
-
|
|
72
|
-
}, [
|
|
71
|
+
i && ((e = r.current) == null || e.setAlignAnchor(i));
|
|
72
|
+
}, [i]), n(() => {
|
|
73
73
|
var e, c;
|
|
74
|
-
|
|
75
|
-
}, [
|
|
74
|
+
o ? (e = r.current) == null || e.setEnableSpring(o) : (c = r.current) == null || c.setEnableSpring(!0);
|
|
75
|
+
}, [o]), n(() => {
|
|
76
76
|
var e;
|
|
77
|
-
(e = r.current) == null || e.setEnableBlur(
|
|
78
|
-
}, [a]), n(() => {
|
|
79
|
-
var e, c, E, R;
|
|
80
|
-
p ? ((e = r.current) == null || e.setLyricLines(p), (c = r.current) == null || c.update()) : ((E = r.current) == null || E.setLyricLines([]), (R = r.current) == null || R.update());
|
|
77
|
+
(e = r.current) == null || e.setEnableBlur(p ?? !0);
|
|
81
78
|
}, [p]), n(() => {
|
|
79
|
+
var e, c, E, l;
|
|
80
|
+
d ? ((e = r.current) == null || e.setLyricLines(d), (c = r.current) == null || c.update()) : ((E = r.current) == null || E.setLyricLines([]), (l = r.current) == null || l.update());
|
|
81
|
+
}, [d]), n(() => {
|
|
82
82
|
var e, c;
|
|
83
|
-
|
|
84
|
-
}, [
|
|
83
|
+
R ? (e = r.current) == null || e.setCurrentTime(R) : (c = r.current) == null || c.setCurrentTime(0);
|
|
84
|
+
}, [R]), n(() => {
|
|
85
85
|
var e;
|
|
86
86
|
m && ((e = r.current) == null || e.setLinePosXSpringParams(m));
|
|
87
87
|
}, [m]), n(() => {
|
|
@@ -90,14 +90,14 @@ const x = F(({ albumImageUrl: f, fps: o, playing: d, flowSpeed: a, renderScale:
|
|
|
90
90
|
}, [u]), n(() => {
|
|
91
91
|
var e;
|
|
92
92
|
s && ((e = r.current) == null || e.setLineScaleSpringParams(s));
|
|
93
|
-
}, [s]),
|
|
94
|
-
|
|
93
|
+
}, [s]), v(
|
|
94
|
+
f,
|
|
95
95
|
() => ({
|
|
96
96
|
wrapperEl: y.current,
|
|
97
97
|
lyricPlayer: r.current
|
|
98
98
|
}),
|
|
99
99
|
[y.current, r.current]
|
|
100
|
-
), /* @__PURE__ */
|
|
100
|
+
), /* @__PURE__ */ F("div", { ...t, ref: y });
|
|
101
101
|
}
|
|
102
102
|
);
|
|
103
103
|
export {
|
package/dist/amll-react.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"amll-react.mjs","sources":["../src/bg-render.tsx","../src/lyric-player.tsx"],"sourcesContent":["import { BackgroundRender as CoreBackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 背景渲染组件的属性\n */\nexport interface BackgroundRenderProps {\n\t/**\n\t * 设置背景专辑图片\n\t */\n\talbumImageUrl?: string;\n\t/**\n\t * 设置当前背景动画帧率,如果为 `undefined` 则默认为 `30`\n\t */\n\tfps?: number;\n\t/**\n\t * 设置当前播放状态,如果为 `undefined` 则默认为 `true`\n\t */\n\tplaying?: boolean;\n\t/**\n\t * 设置当前动画流动速度,如果为 `undefined` 则默认为 `2`\n\t */\n\tflowSpeed?: number;\n\t/**\n\t * 设置当前渲染缩放比例,如果为 `undefined` 则默认为 `0.5`\n\t */\n\trenderScale?: number;\n}\n\n/**\n * 背景渲染组件的引用\n */\nexport interface BackgroundRenderRef {\n\t/**\n\t * 背景渲染实例引用\n\t */\n\tbgRender?: CoreBackgroundRender;\n\t/**\n\t * 将背景渲染实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 流体背景渲染组件,通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果\n */\nexport const BackgroundRender = forwardRef<\n\tBackgroundRenderRef,\n\tHTMLProps<HTMLDivElement> & BackgroundRenderProps\n>(({ albumImageUrl, fps, playing, flowSpeed, renderScale, ...props }, ref) => {\n\tconst coreBGRenderRef = useRef<CoreBackgroundRender>();\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tcoreBGRenderRef.current = new CoreBackgroundRender();\n\t\treturn () => {\n\t\t\tcoreBGRenderRef.current?.dispose();\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (albumImageUrl) coreBGRenderRef.current?.setAlbumImage(albumImageUrl);\n\t}, [albumImageUrl]);\n\n\tuseEffect(() => {\n\t\tif (fps) coreBGRenderRef.current?.setFPS(fps);\n\t}, [fps]);\n\n\tuseEffect(() => {\n\t\tif (playing === undefined) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else if (playing) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else {\n\t\t\tcoreBGRenderRef.current?.pause();\n\t\t}\n\t}, [playing]);\n\n\tuseEffect(() => {\n\t\tif (flowSpeed) coreBGRenderRef.current?.setFlowSpeed(flowSpeed);\n\t}, [flowSpeed]);\n\n\tuseEffect(() => {\n\t\tif (renderScale) coreBGRenderRef.current?.setRenderScale(renderScale);\n\t}, [renderScale]);\n\n\tuseEffect(() => {\n\t\tif (coreBGRenderRef.current) {\n\t\t\tconst el = coreBGRenderRef.current.getElement();\n\t\t\tel.style.width = \"100%\";\n\t\t\tel.style.height = \"100%\";\n\t\t\twrapperRef.current?.appendChild(el);\n\t\t}\n\t});\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\twrapperEl: wrapperRef.current,\n\t\t\tbgRender: coreBGRenderRef.current,\n\t\t}),\n\t\t[wrapperRef.current, coreBGRenderRef.current],\n\t);\n\n\treturn <div {...props} ref={wrapperRef} />;\n});\n","import {\n\tLyricPlayer as CoreLyricPlayer,\n\ttype LyricLine,\n\ttype spring,\n} from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 歌词播放组件的属性\n */\nexport interface LyricPlayerProps {\n\t/**\n\t * 是否启用歌词播放组件,默认为 `true`,设置为 `true` 将会开始逐帧更新歌词的动画效果,并对传入的其他参数变更做出反馈。\n\t *\n\t * 如果不设置该选项,你也可以通过引用取得原始渲染组件实例,手动逐帧调用其 `update` 函数来更新动画效果。\n\t */\n\tenable?: boolean;\n\t/**\n\t * 设置歌词行的对齐方式,如果为 `undefined` 则默认为 `top`\n\t *\n\t * - 设置成 `top` 的话歌词将会向组件顶部对齐\n\t * - 设置成 `bottom` 的话歌词将会向组件底部对齐\n\t * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐\n\t */\n\talignAnchor?: \"top\" | \"bottom\" | number;\n\t/**\n\t * 设置是否使用物理弹簧算法实现歌词动画效果,默认启用\n\t *\n\t * 如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行\n\t *\n\t * 如果不启用,则会回退到基于 `transition` 的过渡效果,对低性能的机器比较友好,但是效果会比较单一\n\t */\n\tenableSpring?: boolean;\n\t/**\n\t * 设置是否启用歌词行的模糊效果,默认为 `true`\n\t */\n\tenableBlur?: boolean;\n\t/**\n\t * 设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误\n\t */\n\tlyricLines?: LyricLine[];\n\t/**\n\t * 设置当前播放进度,单位为毫秒且**必须是整数**,此时将会更新内部的歌词进度信息\n\t * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好\n\t */\n\tcurrentTime?: number;\n\t/**\n\t * 设置所有歌词行在横坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosXSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosYSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlineScaleSpringParams?: Partial<spring.SpringParams>;\n}\n\n/**\n * 歌词播放组件的引用\n */\nexport interface LyricPlayerRef {\n\t/**\n\t * 歌词播放实例\n\t */\n\tlyricPlayer?: CoreLyricPlayer;\n\t/**\n\t * 将歌词播放实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 歌词播放组件,本框架的核心组件\n *\n * 尽可能贴切 Apple Music for iPad 的歌词效果设计,且做了力所能及的优化措施\n */\nexport const LyricPlayer = forwardRef<\n\tLyricPlayerRef,\n\tHTMLProps<HTMLDivElement> & LyricPlayerProps\n>(\n\t(\n\t\t{\n\t\t\tenable,\n\t\t\talignAnchor,\n\t\t\tenableSpring,\n\t\t\tenableBlur,\n\t\t\tlyricLines,\n\t\t\tcurrentTime,\n\t\t\tlinePosXSpringParams,\n\t\t\tlinePosYSpringParams,\n\t\t\tlineScaleSpringParams,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst corePlayerRef = useRef<CoreLyricPlayer>();\n\t\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current = new CoreLyricPlayer();\n\t\t\treturn () => {\n\t\t\t\tcorePlayerRef.current?.dispose();\n\t\t\t};\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (enable !== undefined && enable) {\n\t\t\t\tlet canceled = false;\n\t\t\t\tlet lastTime = -1;\n\t\t\t\tconst onFrame = (time: number) => {\n\t\t\t\t\tif (canceled) return;\n\t\t\t\t\tif (lastTime === -1) {\n\t\t\t\t\t\tlastTime = time;\n\t\t\t\t\t}\n\t\t\t\t\tcorePlayerRef.current?.update(time - lastTime);\n\t\t\t\t\tlastTime = time;\n\t\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\t};\n\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\treturn () => {\n\t\t\t\t\tcanceled = true;\n\t\t\t\t};\n\t\t\t}\n\t\t}, [enable]);\n\n\t\tuseEffect(() => {\n\t\t\tif (corePlayerRef.current)\n\t\t\t\twrapperRef.current?.appendChild(corePlayerRef.current.getElement());\n\t\t}, [wrapperRef.current]);\n\n\t\tuseEffect(() => {\n\t\t\tif (alignAnchor) corePlayerRef.current?.setAlignAnchor(alignAnchor);\n\t\t}, [alignAnchor]);\n\n\t\tuseEffect(() => {\n\t\t\tif (enableSpring) corePlayerRef.current?.setEnableSpring(enableSpring);\n\t\t\telse corePlayerRef.current?.setEnableSpring(true);\n\t\t}, [enableSpring]);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current?.setEnableBlur(enableBlur ?? true);\n\t\t}, [enableBlur]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lyricLines) {\n\t\t\t\tcorePlayerRef.current?.setLyricLines(lyricLines);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t} else {\n\t\t\t\tcorePlayerRef.current?.setLyricLines([]);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t}\n\t\t}, [lyricLines]);\n\n\t\tuseEffect(() => {\n\t\t\tif (currentTime) corePlayerRef.current?.setCurrentTime(currentTime);\n\t\t\telse corePlayerRef.current?.setCurrentTime(0);\n\t\t}, [currentTime]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosXSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosXSpringParams(linePosXSpringParams);\n\t\t}, [linePosXSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosYSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosYSpringParams(linePosYSpringParams);\n\t\t}, [linePosYSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lineScaleSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLineScaleSpringParams(lineScaleSpringParams);\n\t\t}, [lineScaleSpringParams]);\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\twrapperEl: wrapperRef.current,\n\t\t\t\tlyricPlayer: corePlayerRef.current,\n\t\t\t}),\n\t\t\t[wrapperRef.current, corePlayerRef.current],\n\t\t);\n\n\t\treturn <div {...props} ref={wrapperRef} />;\n\t},\n);\n"],"names":["BackgroundRender","forwardRef","albumImageUrl","fps","playing","flowSpeed","renderScale","props","ref","coreBGRenderRef","useRef","wrapperRef","useEffect","CoreBackgroundRender","_a","_b","_c","el","useImperativeHandle","jsx","LyricPlayer","enable","alignAnchor","enableSpring","enableBlur","lyricLines","currentTime","linePosXSpringParams","linePosYSpringParams","lineScaleSpringParams","corePlayerRef","CoreLyricPlayer","canceled","lastTime","onFrame","time","_d"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"amll-react.mjs","sources":["../src/bg-render.tsx","../src/lyric-player.tsx"],"sourcesContent":["import { BackgroundRender as CoreBackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 背景渲染组件的属性\n */\nexport interface BackgroundRenderProps {\n\t/**\n\t * 设置背景专辑图片\n\t */\n\talbumImageUrl?: string;\n\t/**\n\t * 设置当前背景动画帧率,如果为 `undefined` 则默认为 `30`\n\t */\n\tfps?: number;\n\t/**\n\t * 设置当前播放状态,如果为 `undefined` 则默认为 `true`\n\t */\n\tplaying?: boolean;\n\t/**\n\t * 设置当前动画流动速度,如果为 `undefined` 则默认为 `2`\n\t */\n\tflowSpeed?: number;\n\t/**\n\t * 设置当前渲染缩放比例,如果为 `undefined` 则默认为 `0.5`\n\t */\n\trenderScale?: number;\n}\n\n/**\n * 背景渲染组件的引用\n */\nexport interface BackgroundRenderRef {\n\t/**\n\t * 背景渲染实例引用\n\t */\n\tbgRender?: CoreBackgroundRender;\n\t/**\n\t * 将背景渲染实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 流体背景渲染组件,通过提供图片链接可以显示出酷似 Apple Music 的流体背景效果\n */\nexport const BackgroundRender = forwardRef<\n\tBackgroundRenderRef,\n\tHTMLProps<HTMLDivElement> & BackgroundRenderProps\n>(({ albumImageUrl, fps, playing, flowSpeed, renderScale, ...props }, ref) => {\n\tconst coreBGRenderRef = useRef<CoreBackgroundRender>();\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tcoreBGRenderRef.current = new CoreBackgroundRender();\n\t\treturn () => {\n\t\t\tcoreBGRenderRef.current?.dispose();\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (albumImageUrl) coreBGRenderRef.current?.setAlbumImage(albumImageUrl);\n\t}, [albumImageUrl]);\n\n\tuseEffect(() => {\n\t\tif (fps) coreBGRenderRef.current?.setFPS(fps);\n\t}, [fps]);\n\n\tuseEffect(() => {\n\t\tif (playing === undefined) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else if (playing) {\n\t\t\tcoreBGRenderRef.current?.resume();\n\t\t} else {\n\t\t\tcoreBGRenderRef.current?.pause();\n\t\t}\n\t}, [playing]);\n\n\tuseEffect(() => {\n\t\tif (flowSpeed) coreBGRenderRef.current?.setFlowSpeed(flowSpeed);\n\t}, [flowSpeed]);\n\n\tuseEffect(() => {\n\t\tif (renderScale) coreBGRenderRef.current?.setRenderScale(renderScale);\n\t}, [renderScale]);\n\n\tuseEffect(() => {\n\t\tif (coreBGRenderRef.current) {\n\t\t\tconst el = coreBGRenderRef.current.getElement();\n\t\t\tel.style.width = \"100%\";\n\t\t\tel.style.height = \"100%\";\n\t\t\twrapperRef.current?.appendChild(el);\n\t\t}\n\t});\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\twrapperEl: wrapperRef.current,\n\t\t\tbgRender: coreBGRenderRef.current,\n\t\t}),\n\t\t[wrapperRef.current, coreBGRenderRef.current],\n\t);\n\n\treturn <div {...props} ref={wrapperRef} />;\n});\n","import {\n\tLyricPlayer as CoreLyricPlayer,\n\ttype LyricLine,\n\ttype spring,\n} from \"@applemusic-like-lyrics/core\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n\tuseImperativeHandle,\n\ttype HTMLProps,\n} from \"react\";\n\n/**\n * 歌词播放组件的属性\n */\nexport interface LyricPlayerProps {\n\t/**\n\t * 是否禁用歌词播放组件,默认为 `false`,歌词组件启用后将会开始逐帧更新歌词的动画效果,并对传入的其他参数变更做出反馈。\n\t *\n\t * 如果禁用了歌词组件动画,你也可以通过引用取得原始渲染组件实例,手动逐帧调用其 `update` 函数来更新动画效果。\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * 设置歌词行的对齐方式,如果为 `undefined` 则默认为 `top`\n\t *\n\t * - 设置成 `top` 的话歌词将会向组件顶部对齐\n\t * - 设置成 `bottom` 的话歌词将会向组件底部对齐\n\t * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐\n\t */\n\talignAnchor?: \"top\" | \"bottom\" | number;\n\t/**\n\t * 设置是否使用物理弹簧算法实现歌词动画效果,默认启用\n\t *\n\t * 如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行\n\t *\n\t * 如果不启用,则会回退到基于 `transition` 的过渡效果,对低性能的机器比较友好,但是效果会比较单一\n\t */\n\tenableSpring?: boolean;\n\t/**\n\t * 设置是否启用歌词行的模糊效果,默认为 `true`\n\t */\n\tenableBlur?: boolean;\n\t/**\n\t * 设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误\n\t */\n\tlyricLines?: LyricLine[];\n\t/**\n\t * 设置当前播放进度,单位为毫秒且**必须是整数**,此时将会更新内部的歌词进度信息\n\t * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好\n\t */\n\tcurrentTime?: number;\n\t/**\n\t * 设置所有歌词行在横坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosXSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlinePosYSpringParams?: Partial<spring.SpringParams>;\n\t/**\n\t * 设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。\n\t *\n\t * @param params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样\n\t */\n\tlineScaleSpringParams?: Partial<spring.SpringParams>;\n}\n\n/**\n * 歌词播放组件的引用\n */\nexport interface LyricPlayerRef {\n\t/**\n\t * 歌词播放实例\n\t */\n\tlyricPlayer?: CoreLyricPlayer;\n\t/**\n\t * 将歌词播放实例的元素包裹起来的 DIV 元素实例\n\t */\n\twrapperEl: HTMLDivElement | null;\n}\n\n/**\n * 歌词播放组件,本框架的核心组件\n *\n * 尽可能贴切 Apple Music for iPad 的歌词效果设计,且做了力所能及的优化措施\n */\nexport const LyricPlayer = forwardRef<\n\tLyricPlayerRef,\n\tHTMLProps<HTMLDivElement> & LyricPlayerProps\n>(\n\t(\n\t\t{\n\t\t\tdisabled,\n\t\t\talignAnchor,\n\t\t\tenableSpring,\n\t\t\tenableBlur,\n\t\t\tlyricLines,\n\t\t\tcurrentTime,\n\t\t\tlinePosXSpringParams,\n\t\t\tlinePosYSpringParams,\n\t\t\tlineScaleSpringParams,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst corePlayerRef = useRef<CoreLyricPlayer>();\n\t\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current = new CoreLyricPlayer();\n\t\t\treturn () => {\n\t\t\t\tcorePlayerRef.current?.dispose();\n\t\t\t};\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!disabled) {\n\t\t\t\tlet canceled = false;\n\t\t\t\tlet lastTime = -1;\n\t\t\t\tconst onFrame = (time: number) => {\n\t\t\t\t\tif (canceled) return;\n\t\t\t\t\tif (lastTime === -1) {\n\t\t\t\t\t\tlastTime = time;\n\t\t\t\t\t}\n\t\t\t\t\tcorePlayerRef.current?.update(time - lastTime);\n\t\t\t\t\tlastTime = time;\n\t\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\t};\n\t\t\t\trequestAnimationFrame(onFrame);\n\t\t\t\treturn () => {\n\t\t\t\t\tcanceled = true;\n\t\t\t\t};\n\t\t\t}\n\t\t}, [disabled]);\n\n\t\tuseEffect(() => {\n\t\t\tif (corePlayerRef.current)\n\t\t\t\twrapperRef.current?.appendChild(corePlayerRef.current.getElement());\n\t\t}, [wrapperRef.current]);\n\n\t\tuseEffect(() => {\n\t\t\tif (alignAnchor) corePlayerRef.current?.setAlignAnchor(alignAnchor);\n\t\t}, [alignAnchor]);\n\n\t\tuseEffect(() => {\n\t\t\tif (enableSpring) corePlayerRef.current?.setEnableSpring(enableSpring);\n\t\t\telse corePlayerRef.current?.setEnableSpring(true);\n\t\t}, [enableSpring]);\n\n\t\tuseEffect(() => {\n\t\t\tcorePlayerRef.current?.setEnableBlur(enableBlur ?? true);\n\t\t}, [enableBlur]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lyricLines) {\n\t\t\t\tcorePlayerRef.current?.setLyricLines(lyricLines);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t} else {\n\t\t\t\tcorePlayerRef.current?.setLyricLines([]);\n\t\t\t\tcorePlayerRef.current?.update();\n\t\t\t}\n\t\t}, [lyricLines]);\n\n\t\tuseEffect(() => {\n\t\t\tif (currentTime) corePlayerRef.current?.setCurrentTime(currentTime);\n\t\t\telse corePlayerRef.current?.setCurrentTime(0);\n\t\t}, [currentTime]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosXSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosXSpringParams(linePosXSpringParams);\n\t\t}, [linePosXSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (linePosYSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLinePosYSpringParams(linePosYSpringParams);\n\t\t}, [linePosYSpringParams]);\n\n\t\tuseEffect(() => {\n\t\t\tif (lineScaleSpringParams)\n\t\t\t\tcorePlayerRef.current?.setLineScaleSpringParams(lineScaleSpringParams);\n\t\t}, [lineScaleSpringParams]);\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\twrapperEl: wrapperRef.current,\n\t\t\t\tlyricPlayer: corePlayerRef.current,\n\t\t\t}),\n\t\t\t[wrapperRef.current, corePlayerRef.current],\n\t\t);\n\n\t\treturn <div {...props} ref={wrapperRef} />;\n\t},\n);\n"],"names":["BackgroundRender","forwardRef","albumImageUrl","fps","playing","flowSpeed","renderScale","props","ref","coreBGRenderRef","useRef","wrapperRef","useEffect","CoreBackgroundRender","_a","_b","_c","el","useImperativeHandle","jsx","LyricPlayer","disabled","alignAnchor","enableSpring","enableBlur","lyricLines","currentTime","linePosXSpringParams","linePosYSpringParams","lineScaleSpringParams","corePlayerRef","CoreLyricPlayer","canceled","lastTime","onFrame","time","_d"],"mappings":"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"}
|
package/dist/lyric-player.d.ts
CHANGED
|
@@ -5,11 +5,11 @@ import { type HTMLProps } from "react";
|
|
|
5
5
|
*/
|
|
6
6
|
export interface LyricPlayerProps {
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* 是否禁用歌词播放组件,默认为 `false`,歌词组件启用后将会开始逐帧更新歌词的动画效果,并对传入的其他参数变更做出反馈。
|
|
9
9
|
*
|
|
10
|
-
*
|
|
10
|
+
* 如果禁用了歌词组件动画,你也可以通过引用取得原始渲染组件实例,手动逐帧调用其 `update` 函数来更新动画效果。
|
|
11
11
|
*/
|
|
12
|
-
|
|
12
|
+
disabled?: boolean;
|
|
13
13
|
/**
|
|
14
14
|
* 设置歌词行的对齐方式,如果为 `undefined` 则默认为 `top`
|
|
15
15
|
*
|
|
@@ -76,4 +76,4 @@ export interface LyricPlayerRef {
|
|
|
76
76
|
*
|
|
77
77
|
* 尽可能贴切 Apple Music for iPad 的歌词效果设计,且做了力所能及的优化措施
|
|
78
78
|
*/
|
|
79
|
-
export declare const LyricPlayer: import("react").ForwardRefExoticComponent<Pick<HTMLProps<HTMLDivElement> & LyricPlayerProps, "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" |
|
|
79
|
+
export declare const LyricPlayer: import("react").ForwardRefExoticComponent<Pick<HTMLProps<HTMLDivElement> & LyricPlayerProps, "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "alignAnchor" | "enableSpring" | "enableBlur" | "lyricLines" | "currentTime" | "linePosXSpringParams" | "linePosYSpringParams" | "lineScaleSpringParams"> & import("react").RefAttributes<LyricPlayerRef>>;
|
package/package.json
CHANGED