@applemusic-like-lyrics/vue 0.0.10 → 0.0.12
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/dist/BackgroundRender.vue.d.ts +1 -1
- package/dist/LyricPlayer.vue.d.ts +39 -5
- package/dist/amll-vue.js +1 -1
- package/dist/amll-vue.js.map +1 -1
- package/dist/amll-vue.mjs +97 -73
- package/dist/amll-vue.mjs.map +1 -1
- package/dist/index.d.ts +44 -7
- package/package.json +16 -6
|
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
16
16
|
type: import("vue").PropType<number>;
|
|
17
17
|
};
|
|
18
18
|
}, {
|
|
19
|
-
bgRender
|
|
19
|
+
bgRender?: import("vue").Ref<BackgroundRender | undefined> | undefined;
|
|
20
20
|
wrapperEl: import("vue").Ref<HTMLDivElement | undefined>;
|
|
21
21
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
22
22
|
albumImageUrl: {
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { LyricPlayer } from "@applemusic-like-lyrics/core";
|
|
1
|
+
import { LyricPlayer, type LyricLineMouseEvent } from "@applemusic-like-lyrics/core";
|
|
2
2
|
declare const _default: import("vue").DefineComponent<{
|
|
3
3
|
disabled: {
|
|
4
4
|
type: import("vue").PropType<boolean>;
|
|
5
5
|
};
|
|
6
6
|
alignAnchor: {
|
|
7
|
-
type: import("vue").PropType<
|
|
7
|
+
type: import("vue").PropType<"top" | "bottom" | "center">;
|
|
8
|
+
};
|
|
9
|
+
alignPosition: {
|
|
10
|
+
type: import("vue").PropType<number>;
|
|
8
11
|
};
|
|
9
12
|
enableSpring: {
|
|
10
13
|
type: import("vue").PropType<boolean>;
|
|
@@ -12,6 +15,12 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
12
15
|
enableBlur: {
|
|
13
16
|
type: import("vue").PropType<boolean>;
|
|
14
17
|
};
|
|
18
|
+
enableScale: {
|
|
19
|
+
type: import("vue").PropType<boolean>;
|
|
20
|
+
};
|
|
21
|
+
hidePassedLines: {
|
|
22
|
+
type: import("vue").PropType<boolean>;
|
|
23
|
+
};
|
|
15
24
|
lyricLines: {
|
|
16
25
|
type: import("vue").PropType<import("@applemusic-like-lyrics/core").LyricLine[]>;
|
|
17
26
|
};
|
|
@@ -27,15 +36,26 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
27
36
|
lineScaleSpringParams: {
|
|
28
37
|
type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
|
|
29
38
|
};
|
|
39
|
+
bottomLine: {
|
|
40
|
+
type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
|
+
[key: string]: any;
|
|
42
|
+
}>[]>;
|
|
43
|
+
};
|
|
30
44
|
}, {
|
|
31
45
|
lyricPlayer: import("vue").Ref<LyricPlayer | undefined>;
|
|
32
46
|
wrapperEl: import("vue").Ref<HTMLDivElement | undefined>;
|
|
33
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
47
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
48
|
+
"line-click": (line: LyricLineMouseEvent) => void;
|
|
49
|
+
"line-contextmenu": (line: LyricLineMouseEvent) => void;
|
|
50
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
34
51
|
disabled: {
|
|
35
52
|
type: import("vue").PropType<boolean>;
|
|
36
53
|
};
|
|
37
54
|
alignAnchor: {
|
|
38
|
-
type: import("vue").PropType<
|
|
55
|
+
type: import("vue").PropType<"top" | "bottom" | "center">;
|
|
56
|
+
};
|
|
57
|
+
alignPosition: {
|
|
58
|
+
type: import("vue").PropType<number>;
|
|
39
59
|
};
|
|
40
60
|
enableSpring: {
|
|
41
61
|
type: import("vue").PropType<boolean>;
|
|
@@ -43,6 +63,12 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
43
63
|
enableBlur: {
|
|
44
64
|
type: import("vue").PropType<boolean>;
|
|
45
65
|
};
|
|
66
|
+
enableScale: {
|
|
67
|
+
type: import("vue").PropType<boolean>;
|
|
68
|
+
};
|
|
69
|
+
hidePassedLines: {
|
|
70
|
+
type: import("vue").PropType<boolean>;
|
|
71
|
+
};
|
|
46
72
|
lyricLines: {
|
|
47
73
|
type: import("vue").PropType<import("@applemusic-like-lyrics/core").LyricLine[]>;
|
|
48
74
|
};
|
|
@@ -58,5 +84,13 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
58
84
|
lineScaleSpringParams: {
|
|
59
85
|
type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
|
|
60
86
|
};
|
|
61
|
-
|
|
87
|
+
bottomLine: {
|
|
88
|
+
type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
89
|
+
[key: string]: any;
|
|
90
|
+
}>[]>;
|
|
91
|
+
};
|
|
92
|
+
}>> & {
|
|
93
|
+
"onLine-click"?: ((line: LyricLineMouseEvent) => any) | undefined;
|
|
94
|
+
"onLine-contextmenu"?: ((line: LyricLineMouseEvent) => any) | undefined;
|
|
95
|
+
}, {}, {}>;
|
|
62
96
|
export default _default;
|
package/dist/amll-vue.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),v=require("@applemusic-like-lyrics/core"),g=a.defineComponent({inheritAttrs:!1,__name:"LyricPlayer",props:{disabled:{type:Boolean},alignAnchor:{},alignPosition:{},enableSpring:{type:Boolean},enableBlur:{type:Boolean},enableScale:{type:Boolean},hidePassedLines:{type:Boolean},lyricLines:{},currentTime:{},linePosXSpringParams:{},linePosYSpringParams:{},lineScaleSpringParams:{},bottomLine:{}},emits:["line-click","line-contextmenu"],setup(u,{expose:f,emit:i}){const l=u,t=a.ref(),e=a.ref(),c=n=>i("line-click",n),d=n=>i("line-contextmenu",n);return a.onMounted(()=>{t.value&&(e.value=new v.LyricPlayer,t.value.appendChild(e.value.getElement()),e.value.addEventListener("line-click",c),e.value.addEventListener("line-contextmenu",d))}),a.onUnmounted(()=>{e.value&&(e.value.removeEventListener("line-click",c),e.value.removeEventListener("line-contextmenu",d),e.value.dispose())}),a.watchEffect(n=>{if(!l.disabled){let r=!1,o=-1;const s=p=>{var m;r||(o===-1&&(o=p),(m=e.value)==null||m.update(p-o),o=p,requestAnimationFrame(s))};requestAnimationFrame(s),n(()=>{r=!0})}}),a.watchEffect(()=>{var n;l.alignAnchor!==void 0&&((n=e.value)==null||n.setAlignAnchor(l.alignAnchor))}),a.watchEffect(()=>{var n;l.hidePassedLines!==void 0&&((n=e.value)==null||n.setHidePassedLines(l.hidePassedLines))}),a.watchEffect(()=>{var n;l.alignPosition!==void 0&&((n=e.value)==null||n.setAlignPosition(l.alignPosition))}),a.watchEffect(()=>{var n,r;l.enableSpring!==void 0?(n=e.value)==null||n.setEnableSpring(l.enableSpring):(r=e.value)==null||r.setEnableSpring(!0)}),a.watchEffect(()=>{var n,r;l.enableBlur!==void 0?(n=e.value)==null||n.setEnableBlur(l.enableBlur):(r=e.value)==null||r.setEnableBlur(!0)}),a.watchEffect(()=>{var n,r;l.enableScale!==void 0?(n=e.value)==null||n.setEnableScale(l.enableScale):(r=e.value)==null||r.setEnableScale(!0)}),a.watchEffect(()=>{var n;l.lyricLines!==void 0&&((n=e.value)==null||n.setLyricLines(l.lyricLines))}),a.watchEffect(()=>{var n;l.currentTime!==void 0&&((n=e.value)==null||n.setCurrentTime(l.currentTime))}),a.watchEffect(()=>{var n;l.linePosXSpringParams!==void 0&&((n=e.value)==null||n.setLinePosXSpringParams(l.linePosXSpringParams))}),a.watchEffect(()=>{var n;l.linePosYSpringParams!==void 0&&((n=e.value)==null||n.setLinePosYSpringParams(l.linePosYSpringParams))}),a.watchEffect(()=>{var n;l.lineScaleSpringParams!==void 0&&((n=e.value)==null||n.setLineScaleSpringParams(l.lineScaleSpringParams))}),f({lyricPlayer:e,wrapperEl:t}),(n,r)=>{var o,s;return a.openBlock(),a.createElementBlock(a.Fragment,null,[a.createElementVNode("div",a.mergeProps({ref_key:"wrapperRef",ref:t},n.$attrs),null,16),(o=e.value)!=null&&o.getBottomLineElement()&&l.bottomLine?(a.openBlock(),a.createBlock(a.Teleport,{key:0,to:(s=e.value)==null?void 0:s.getBottomLineElement()},null,8,["to"])):a.createCommentVNode("",!0)],64)}}}),S=a.defineComponent({__name:"BackgroundRender",props:{albumImageUrl:{},fps:{},playing:{type:Boolean},flowSpeed:{},renderScale:{}},setup(u,{expose:f}){const i=u,l=a.ref(),t=a.ref();return a.onMounted(()=>{if(l.value){t.value=new v.BackgroundRender;const e=t.value.getElement();e.style.width="100%",e.style.height="100%",l.value.appendChild(e)}}),a.onUnmounted(()=>{t.value&&t.value.dispose()}),a.watchEffect(()=>{var e;i.albumImageUrl&&((e=t.value)==null||e.setAlbumImage(i.albumImageUrl))}),a.watchEffect(()=>{var e;i.fps&&((e=t.value)==null||e.setFPS(i.fps))}),a.watchEffect(()=>{var e,c;i.playing?(e=t.value)==null||e.pause():(c=t.value)==null||c.resume()}),a.watchEffect(()=>{var e;i.flowSpeed&&((e=t.value)==null||e.setFlowSpeed(i.flowSpeed))}),a.watchEffect(()=>{var e;i.renderScale&&((e=t.value)==null||e.setRenderScale(i.renderScale))}),f({bgRender:t,wrapperEl:l}),(e,c)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"wrapperRef",ref:l},null,512))}});exports.BackgroundRender=S;exports.LyricPlayer=g;
|
|
2
2
|
//# sourceMappingURL=amll-vue.js.map
|
package/dist/amll-vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"amll-vue.js","sources":["../src/LyricPlayer.vue","../src/BackgroundRender.vue"],"sourcesContent":["<template>\n <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { LyricPlayer } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect
|
|
1
|
+
{"version":3,"file":"amll-vue.js","sources":["../src/LyricPlayer.vue","../src/BackgroundRender.vue"],"sourcesContent":["<template>\n <div ref=\"wrapperRef\" v-bind=\"$attrs\"></div>\n <Teleport v-if=\"playerRef?.getBottomLineElement() && props.bottomLine\" :to=\"playerRef?.getBottomLineElement()\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { LyricPlayer, type LyricLineMouseEvent } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { LyricPlayerProps, LyricPlayerEmits, LyricPlayerRef } from \".\";\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = defineProps<LyricPlayerProps>();\nconst emits = defineEmits<LyricPlayerEmits>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst playerRef = ref<LyricPlayer>();\n\nconst lineClickHandler = (e: Event) =>\n emits(\"line-click\", e as LyricLineMouseEvent);\nconst lineContextMenuHandler = (e: Event) =>\n emits(\"line-contextmenu\", e as LyricLineMouseEvent);\n\nonMounted(() => {\n if (wrapperRef.value) {\n playerRef.value = new LyricPlayer();\n wrapperRef.value.appendChild(playerRef.value.getElement());\n playerRef.value.addEventListener(\"line-click\", lineClickHandler);\n playerRef.value.addEventListener(\"line-contextmenu\", lineContextMenuHandler);\n }\n});\n\nonUnmounted(() => {\n if (playerRef.value) {\n playerRef.value.removeEventListener(\"line-click\", lineClickHandler);\n playerRef.value.removeEventListener(\"line-contextmenu\", lineContextMenuHandler);\n playerRef.value.dispose();\n }\n});\n\nwatchEffect((onCleanup) => {\n if (!props.disabled) {\n let canceled = false;\n let lastTime = -1;\n const onFrame = (time: number) => {\n if (canceled) return;\n if (lastTime === -1) {\n lastTime = time;\n }\n playerRef.value?.update(time - lastTime);\n lastTime = time;\n requestAnimationFrame(onFrame);\n };\n requestAnimationFrame(onFrame);\n onCleanup(() => {\n canceled = true;\n });\n }\n});\n\nwatchEffect(() => {\n if (props.alignAnchor !== undefined)\n playerRef.value?.setAlignAnchor(props.alignAnchor);\n});\n\nwatchEffect(() => {\n if (props.hidePassedLines !== undefined)\n playerRef.value?.setHidePassedLines(props.hidePassedLines);\n});\n\nwatchEffect(() => {\n if (props.alignPosition !== undefined)\n playerRef.value?.setAlignPosition(props.alignPosition);\n});\n\nwatchEffect(() => {\n if (props.enableSpring !== undefined)\n playerRef.value?.setEnableSpring(props.enableSpring);\n else\n playerRef.value?.setEnableSpring(true);\n});\n\nwatchEffect(() => {\n if (props.enableBlur !== undefined)\n playerRef.value?.setEnableBlur(props.enableBlur);\n else\n playerRef.value?.setEnableBlur(true);\n});\n\nwatchEffect(() => {\n if (props.enableScale !== undefined)\n playerRef.value?.setEnableScale(props.enableScale);\n else\n playerRef.value?.setEnableScale(true);\n});\n\nwatchEffect(() => {\n if (props.lyricLines !== undefined)\n playerRef.value?.setLyricLines(props.lyricLines);\n});\n\nwatchEffect(() => {\n if (props.currentTime !== undefined)\n playerRef.value?.setCurrentTime(props.currentTime);\n});\n\nwatchEffect(() => {\n if (props.linePosXSpringParams !== undefined)\n playerRef.value?.setLinePosXSpringParams(props.linePosXSpringParams);\n});\n\nwatchEffect(() => {\n if (props.linePosYSpringParams !== undefined)\n playerRef.value?.setLinePosYSpringParams(props.linePosYSpringParams);\n});\n\nwatchEffect(() => {\n if (props.lineScaleSpringParams !== undefined)\n playerRef.value?.setLineScaleSpringParams(props.lineScaleSpringParams);\n});\n\ndefineExpose<LyricPlayerRef>({\n lyricPlayer: playerRef,\n wrapperEl: wrapperRef,\n});\n\n</script>","<template>\n <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { BackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { BackgroundRenderProps, BackgroundRenderRef } from \".\";\n\nconst props = defineProps<BackgroundRenderProps>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst bgRenderRef = ref<BackgroundRender>();\n\nonMounted(() => {\n if (wrapperRef.value) {\n bgRenderRef.value = new BackgroundRender();\n const el = bgRenderRef.value.getElement();\n el.style.width = \"100%\";\n el.style.height = \"100%\";\n wrapperRef.value.appendChild(el);\n }\n});\n\nonUnmounted(() => {\n if (bgRenderRef.value) {\n bgRenderRef.value.dispose();\n }\n});\n\nwatchEffect(() => {\n if (props.albumImageUrl)\n bgRenderRef.value?.setAlbumImage(props.albumImageUrl);\n});\n\nwatchEffect(() => {\n if (props.fps)\n bgRenderRef.value?.setFPS(props.fps);\n});\n\nwatchEffect(() => {\n if (props.playing)\n bgRenderRef.value?.pause();\n else\n bgRenderRef.value?.resume();\n});\n\nwatchEffect(() => {\n if (props.flowSpeed)\n bgRenderRef.value?.setFlowSpeed(props.flowSpeed);\n});\n\nwatchEffect(() => {\n if (props.renderScale)\n bgRenderRef.value?.setRenderScale(props.renderScale);\n});\n\ndefineExpose<BackgroundRenderRef>({\n bgRender: bgRenderRef,\n wrapperEl: wrapperRef,\n});\n\n</script>"],"names":["wrapperRef","ref","playerRef","lineClickHandler","e","emits","lineContextMenuHandler","onMounted","LyricPlayer","onUnmounted","watchEffect","onCleanup","props","canceled","lastTime","onFrame","time","_a","_b","__expose","bgRenderRef","BackgroundRender","el"],"mappings":"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"}
|
package/dist/amll-vue.mjs
CHANGED
|
@@ -1,68 +1,92 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { LyricPlayer as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as S, ref as c, onMounted as P, onUnmounted as y, watchEffect as a, openBlock as v, createElementBlock as b, Fragment as L, createElementVNode as B, mergeProps as E, createBlock as h, Teleport as k, createCommentVNode as w } from "vue";
|
|
2
|
+
import { LyricPlayer as _, BackgroundRender as R } from "@applemusic-like-lyrics/core";
|
|
3
|
+
const C = /* @__PURE__ */ S({
|
|
4
|
+
inheritAttrs: !1,
|
|
4
5
|
__name: "LyricPlayer",
|
|
5
6
|
props: {
|
|
6
7
|
disabled: { type: Boolean },
|
|
7
8
|
alignAnchor: {},
|
|
9
|
+
alignPosition: {},
|
|
8
10
|
enableSpring: { type: Boolean },
|
|
9
11
|
enableBlur: { type: Boolean },
|
|
12
|
+
enableScale: { type: Boolean },
|
|
13
|
+
hidePassedLines: { type: Boolean },
|
|
10
14
|
lyricLines: {},
|
|
11
15
|
currentTime: {},
|
|
12
16
|
linePosXSpringParams: {},
|
|
13
17
|
linePosYSpringParams: {},
|
|
14
|
-
lineScaleSpringParams: {}
|
|
18
|
+
lineScaleSpringParams: {},
|
|
19
|
+
bottomLine: {}
|
|
15
20
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
emits: ["line-click", "line-contextmenu"],
|
|
22
|
+
setup(p, { expose: d, emit: r }) {
|
|
23
|
+
const l = p, i = c(), e = c(), o = (n) => r("line-click", n), f = (n) => r("line-contextmenu", n);
|
|
24
|
+
return P(() => {
|
|
25
|
+
i.value && (e.value = new _(), i.value.appendChild(e.value.getElement()), e.value.addEventListener("line-click", o), e.value.addEventListener("line-contextmenu", f));
|
|
26
|
+
}), y(() => {
|
|
27
|
+
e.value && (e.value.removeEventListener("line-click", o), e.value.removeEventListener("line-contextmenu", f), e.value.dispose());
|
|
28
|
+
}), a((n) => {
|
|
29
|
+
if (!l.disabled) {
|
|
30
|
+
let t = !1, s = -1;
|
|
31
|
+
const u = (m) => {
|
|
32
|
+
var g;
|
|
33
|
+
t || (s === -1 && (s = m), (g = e.value) == null || g.update(m - s), s = m, requestAnimationFrame(u));
|
|
28
34
|
};
|
|
29
|
-
requestAnimationFrame(
|
|
30
|
-
|
|
35
|
+
requestAnimationFrame(u), n(() => {
|
|
36
|
+
t = !0;
|
|
31
37
|
});
|
|
32
38
|
}
|
|
33
|
-
}),
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
}),
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
}),
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
}),
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
}),
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
}),
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
}),
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
}),
|
|
55
|
-
var
|
|
56
|
-
|
|
57
|
-
}),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}), (
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
39
|
+
}), a(() => {
|
|
40
|
+
var n;
|
|
41
|
+
l.alignAnchor !== void 0 && ((n = e.value) == null || n.setAlignAnchor(l.alignAnchor));
|
|
42
|
+
}), a(() => {
|
|
43
|
+
var n;
|
|
44
|
+
l.hidePassedLines !== void 0 && ((n = e.value) == null || n.setHidePassedLines(l.hidePassedLines));
|
|
45
|
+
}), a(() => {
|
|
46
|
+
var n;
|
|
47
|
+
l.alignPosition !== void 0 && ((n = e.value) == null || n.setAlignPosition(l.alignPosition));
|
|
48
|
+
}), a(() => {
|
|
49
|
+
var n, t;
|
|
50
|
+
l.enableSpring !== void 0 ? (n = e.value) == null || n.setEnableSpring(l.enableSpring) : (t = e.value) == null || t.setEnableSpring(!0);
|
|
51
|
+
}), a(() => {
|
|
52
|
+
var n, t;
|
|
53
|
+
l.enableBlur !== void 0 ? (n = e.value) == null || n.setEnableBlur(l.enableBlur) : (t = e.value) == null || t.setEnableBlur(!0);
|
|
54
|
+
}), a(() => {
|
|
55
|
+
var n, t;
|
|
56
|
+
l.enableScale !== void 0 ? (n = e.value) == null || n.setEnableScale(l.enableScale) : (t = e.value) == null || t.setEnableScale(!0);
|
|
57
|
+
}), a(() => {
|
|
58
|
+
var n;
|
|
59
|
+
l.lyricLines !== void 0 && ((n = e.value) == null || n.setLyricLines(l.lyricLines));
|
|
60
|
+
}), a(() => {
|
|
61
|
+
var n;
|
|
62
|
+
l.currentTime !== void 0 && ((n = e.value) == null || n.setCurrentTime(l.currentTime));
|
|
63
|
+
}), a(() => {
|
|
64
|
+
var n;
|
|
65
|
+
l.linePosXSpringParams !== void 0 && ((n = e.value) == null || n.setLinePosXSpringParams(l.linePosXSpringParams));
|
|
66
|
+
}), a(() => {
|
|
67
|
+
var n;
|
|
68
|
+
l.linePosYSpringParams !== void 0 && ((n = e.value) == null || n.setLinePosYSpringParams(l.linePosYSpringParams));
|
|
69
|
+
}), a(() => {
|
|
70
|
+
var n;
|
|
71
|
+
l.lineScaleSpringParams !== void 0 && ((n = e.value) == null || n.setLineScaleSpringParams(l.lineScaleSpringParams));
|
|
72
|
+
}), d({
|
|
73
|
+
lyricPlayer: e,
|
|
74
|
+
wrapperEl: i
|
|
75
|
+
}), (n, t) => {
|
|
76
|
+
var s, u;
|
|
77
|
+
return v(), b(L, null, [
|
|
78
|
+
B("div", E({
|
|
79
|
+
ref_key: "wrapperRef",
|
|
80
|
+
ref: i
|
|
81
|
+
}, n.$attrs), null, 16),
|
|
82
|
+
(s = e.value) != null && s.getBottomLineElement() && l.bottomLine ? (v(), h(k, {
|
|
83
|
+
key: 0,
|
|
84
|
+
to: (u = e.value) == null ? void 0 : u.getBottomLineElement()
|
|
85
|
+
}, null, 8, ["to"])) : w("", !0)
|
|
86
|
+
], 64);
|
|
87
|
+
};
|
|
64
88
|
}
|
|
65
|
-
}),
|
|
89
|
+
}), F = /* @__PURE__ */ S({
|
|
66
90
|
__name: "BackgroundRender",
|
|
67
91
|
props: {
|
|
68
92
|
albumImageUrl: {},
|
|
@@ -71,42 +95,42 @@ const _ = /* @__PURE__ */ m({
|
|
|
71
95
|
flowSpeed: {},
|
|
72
96
|
renderScale: {}
|
|
73
97
|
},
|
|
74
|
-
setup(
|
|
75
|
-
const
|
|
76
|
-
return
|
|
98
|
+
setup(p, { expose: d }) {
|
|
99
|
+
const r = p, l = c(), i = c();
|
|
100
|
+
return P(() => {
|
|
77
101
|
if (l.value) {
|
|
78
|
-
|
|
79
|
-
const e =
|
|
102
|
+
i.value = new R();
|
|
103
|
+
const e = i.value.getElement();
|
|
80
104
|
e.style.width = "100%", e.style.height = "100%", l.value.appendChild(e);
|
|
81
105
|
}
|
|
82
|
-
}),
|
|
83
|
-
|
|
84
|
-
}),
|
|
106
|
+
}), y(() => {
|
|
107
|
+
i.value && i.value.dispose();
|
|
108
|
+
}), a(() => {
|
|
85
109
|
var e;
|
|
86
|
-
|
|
87
|
-
}),
|
|
110
|
+
r.albumImageUrl && ((e = i.value) == null || e.setAlbumImage(r.albumImageUrl));
|
|
111
|
+
}), a(() => {
|
|
88
112
|
var e;
|
|
89
|
-
|
|
90
|
-
}),
|
|
91
|
-
var e,
|
|
92
|
-
|
|
93
|
-
}),
|
|
113
|
+
r.fps && ((e = i.value) == null || e.setFPS(r.fps));
|
|
114
|
+
}), a(() => {
|
|
115
|
+
var e, o;
|
|
116
|
+
r.playing ? (e = i.value) == null || e.pause() : (o = i.value) == null || o.resume();
|
|
117
|
+
}), a(() => {
|
|
94
118
|
var e;
|
|
95
|
-
|
|
96
|
-
}),
|
|
119
|
+
r.flowSpeed && ((e = i.value) == null || e.setFlowSpeed(r.flowSpeed));
|
|
120
|
+
}), a(() => {
|
|
97
121
|
var e;
|
|
98
|
-
|
|
99
|
-
}),
|
|
100
|
-
bgRender:
|
|
122
|
+
r.renderScale && ((e = i.value) == null || e.setRenderScale(r.renderScale));
|
|
123
|
+
}), d({
|
|
124
|
+
bgRender: i,
|
|
101
125
|
wrapperEl: l
|
|
102
|
-
}), (e,
|
|
126
|
+
}), (e, o) => (v(), b("div", {
|
|
103
127
|
ref_key: "wrapperRef",
|
|
104
128
|
ref: l
|
|
105
129
|
}, null, 512));
|
|
106
130
|
}
|
|
107
131
|
});
|
|
108
132
|
export {
|
|
109
|
-
|
|
110
|
-
|
|
133
|
+
F as BackgroundRender,
|
|
134
|
+
C as LyricPlayer
|
|
111
135
|
};
|
|
112
136
|
//# sourceMappingURL=amll-vue.mjs.map
|
package/dist/amll-vue.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"amll-vue.mjs","sources":["../src/LyricPlayer.vue","../src/BackgroundRender.vue"],"sourcesContent":["<template>\n <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { LyricPlayer } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect
|
|
1
|
+
{"version":3,"file":"amll-vue.mjs","sources":["../src/LyricPlayer.vue","../src/BackgroundRender.vue"],"sourcesContent":["<template>\n <div ref=\"wrapperRef\" v-bind=\"$attrs\"></div>\n <Teleport v-if=\"playerRef?.getBottomLineElement() && props.bottomLine\" :to=\"playerRef?.getBottomLineElement()\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { LyricPlayer, type LyricLineMouseEvent } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { LyricPlayerProps, LyricPlayerEmits, LyricPlayerRef } from \".\";\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst props = defineProps<LyricPlayerProps>();\nconst emits = defineEmits<LyricPlayerEmits>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst playerRef = ref<LyricPlayer>();\n\nconst lineClickHandler = (e: Event) =>\n emits(\"line-click\", e as LyricLineMouseEvent);\nconst lineContextMenuHandler = (e: Event) =>\n emits(\"line-contextmenu\", e as LyricLineMouseEvent);\n\nonMounted(() => {\n if (wrapperRef.value) {\n playerRef.value = new LyricPlayer();\n wrapperRef.value.appendChild(playerRef.value.getElement());\n playerRef.value.addEventListener(\"line-click\", lineClickHandler);\n playerRef.value.addEventListener(\"line-contextmenu\", lineContextMenuHandler);\n }\n});\n\nonUnmounted(() => {\n if (playerRef.value) {\n playerRef.value.removeEventListener(\"line-click\", lineClickHandler);\n playerRef.value.removeEventListener(\"line-contextmenu\", lineContextMenuHandler);\n playerRef.value.dispose();\n }\n});\n\nwatchEffect((onCleanup) => {\n if (!props.disabled) {\n let canceled = false;\n let lastTime = -1;\n const onFrame = (time: number) => {\n if (canceled) return;\n if (lastTime === -1) {\n lastTime = time;\n }\n playerRef.value?.update(time - lastTime);\n lastTime = time;\n requestAnimationFrame(onFrame);\n };\n requestAnimationFrame(onFrame);\n onCleanup(() => {\n canceled = true;\n });\n }\n});\n\nwatchEffect(() => {\n if (props.alignAnchor !== undefined)\n playerRef.value?.setAlignAnchor(props.alignAnchor);\n});\n\nwatchEffect(() => {\n if (props.hidePassedLines !== undefined)\n playerRef.value?.setHidePassedLines(props.hidePassedLines);\n});\n\nwatchEffect(() => {\n if (props.alignPosition !== undefined)\n playerRef.value?.setAlignPosition(props.alignPosition);\n});\n\nwatchEffect(() => {\n if (props.enableSpring !== undefined)\n playerRef.value?.setEnableSpring(props.enableSpring);\n else\n playerRef.value?.setEnableSpring(true);\n});\n\nwatchEffect(() => {\n if (props.enableBlur !== undefined)\n playerRef.value?.setEnableBlur(props.enableBlur);\n else\n playerRef.value?.setEnableBlur(true);\n});\n\nwatchEffect(() => {\n if (props.enableScale !== undefined)\n playerRef.value?.setEnableScale(props.enableScale);\n else\n playerRef.value?.setEnableScale(true);\n});\n\nwatchEffect(() => {\n if (props.lyricLines !== undefined)\n playerRef.value?.setLyricLines(props.lyricLines);\n});\n\nwatchEffect(() => {\n if (props.currentTime !== undefined)\n playerRef.value?.setCurrentTime(props.currentTime);\n});\n\nwatchEffect(() => {\n if (props.linePosXSpringParams !== undefined)\n playerRef.value?.setLinePosXSpringParams(props.linePosXSpringParams);\n});\n\nwatchEffect(() => {\n if (props.linePosYSpringParams !== undefined)\n playerRef.value?.setLinePosYSpringParams(props.linePosYSpringParams);\n});\n\nwatchEffect(() => {\n if (props.lineScaleSpringParams !== undefined)\n playerRef.value?.setLineScaleSpringParams(props.lineScaleSpringParams);\n});\n\ndefineExpose<LyricPlayerRef>({\n lyricPlayer: playerRef,\n wrapperEl: wrapperRef,\n});\n\n</script>","<template>\n <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { BackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { BackgroundRenderProps, BackgroundRenderRef } from \".\";\n\nconst props = defineProps<BackgroundRenderProps>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst bgRenderRef = ref<BackgroundRender>();\n\nonMounted(() => {\n if (wrapperRef.value) {\n bgRenderRef.value = new BackgroundRender();\n const el = bgRenderRef.value.getElement();\n el.style.width = \"100%\";\n el.style.height = \"100%\";\n wrapperRef.value.appendChild(el);\n }\n});\n\nonUnmounted(() => {\n if (bgRenderRef.value) {\n bgRenderRef.value.dispose();\n }\n});\n\nwatchEffect(() => {\n if (props.albumImageUrl)\n bgRenderRef.value?.setAlbumImage(props.albumImageUrl);\n});\n\nwatchEffect(() => {\n if (props.fps)\n bgRenderRef.value?.setFPS(props.fps);\n});\n\nwatchEffect(() => {\n if (props.playing)\n bgRenderRef.value?.pause();\n else\n bgRenderRef.value?.resume();\n});\n\nwatchEffect(() => {\n if (props.flowSpeed)\n bgRenderRef.value?.setFlowSpeed(props.flowSpeed);\n});\n\nwatchEffect(() => {\n if (props.renderScale)\n bgRenderRef.value?.setRenderScale(props.renderScale);\n});\n\ndefineExpose<BackgroundRenderRef>({\n bgRender: bgRenderRef,\n wrapperEl: wrapperRef,\n});\n\n</script>"],"names":["wrapperRef","ref","playerRef","lineClickHandler","e","emits","lineContextMenuHandler","onMounted","LyricPlayer","onUnmounted","watchEffect","onCleanup","props","canceled","lastTime","onFrame","time","_a","_b","__expose","bgRenderRef","BackgroundRender","el"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { spring, LyricLine, LyricPlayer as CoreLyricPlayer, BackgroundRender as CoreBackgroundRender } from "@applemusic-like-lyrics/core";
|
|
2
|
-
import type { Ref } from "vue";
|
|
1
|
+
import type { spring, LyricLine, LyricPlayer as CoreLyricPlayer, BackgroundRender as CoreBackgroundRender, LyricLineMouseEvent } from "@applemusic-like-lyrics/core";
|
|
2
|
+
import type { Ref, VNode } from "vue";
|
|
3
3
|
import LyricPlayer from "./LyricPlayer.vue";
|
|
4
4
|
import BackgroundRender from "./BackgroundRender.vue";
|
|
5
5
|
export { LyricPlayer, BackgroundRender };
|
|
@@ -14,13 +14,20 @@ export interface LyricPlayerProps {
|
|
|
14
14
|
*/
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
/**
|
|
17
|
-
* 设置歌词行的对齐方式，如果为 `undefined` 则默认为 `
|
|
17
|
+
* 设置歌词行的对齐方式，如果为 `undefined` 则默认为 `center`
|
|
18
18
|
*
|
|
19
|
-
* - 设置成 `top`
|
|
20
|
-
* - 设置成 `bottom`
|
|
21
|
-
* - 设置成
|
|
19
|
+
* - 设置成 `top` 的话将会向目标歌词行的顶部对齐
|
|
20
|
+
* - 设置成 `bottom` 的话将会向目标歌词行的底部对齐
|
|
21
|
+
* - 设置成 `center` 的话将会向目标歌词行的垂直中心对齐
|
|
22
22
|
*/
|
|
23
|
-
alignAnchor?: "top" | "bottom" |
|
|
23
|
+
alignAnchor?: "top" | "bottom" | "center";
|
|
24
|
+
/**
|
|
25
|
+
* 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，如果为 `undefined`
|
|
26
|
+
* 则默认为 `0.5`
|
|
27
|
+
*
|
|
28
|
+
* 可以设置一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
|
|
29
|
+
*/
|
|
30
|
+
alignPosition?: number;
|
|
24
31
|
/**
|
|
25
32
|
* 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
|
|
26
33
|
*
|
|
@@ -33,6 +40,18 @@ export interface LyricPlayerProps {
|
|
|
33
40
|
* 设置是否启用歌词行的模糊效果，默认为 `true`
|
|
34
41
|
*/
|
|
35
42
|
enableBlur?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
|
|
45
|
+
*
|
|
46
|
+
* 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
|
|
47
|
+
*
|
|
48
|
+
* 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
|
|
49
|
+
*/
|
|
50
|
+
enableScale?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* 设置是否隐藏已经播放过的歌词行，默认不隐藏
|
|
53
|
+
*/
|
|
54
|
+
hidePassedLines?: boolean;
|
|
36
55
|
/**
|
|
37
56
|
* 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
|
|
38
57
|
*/
|
|
@@ -60,6 +79,24 @@ export interface LyricPlayerProps {
|
|
|
60
79
|
* @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
|
|
61
80
|
*/
|
|
62
81
|
lineScaleSpringParams?: Partial<spring.SpringParams>;
|
|
82
|
+
/**
|
|
83
|
+
* 在一个特殊的底栏元素内加入指定元素，默认是空白的，可以往内部添加任意元素
|
|
84
|
+
*
|
|
85
|
+
* 这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息
|
|
86
|
+
*/
|
|
87
|
+
bottomLine?: VNode[];
|
|
88
|
+
}
|
|
89
|
+
export interface LyricPlayerEmits {
|
|
90
|
+
/**
|
|
91
|
+
* 当某个歌词行被左键点击时触发的事件
|
|
92
|
+
* @param line 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引
|
|
93
|
+
*/
|
|
94
|
+
(e: "line-click", line: LyricLineMouseEvent): void;
|
|
95
|
+
/**
|
|
96
|
+
* 当某个歌词行被右键点击时触发的事件
|
|
97
|
+
* @param line 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引
|
|
98
|
+
*/
|
|
99
|
+
(e: "line-contextmenu", line: LyricLineMouseEvent): void;
|
|
63
100
|
}
|
|
64
101
|
/**
|
|
65
102
|
* 歌词播放组件的引用
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applemusic-like-lyrics/vue",
|
|
3
3
|
"packageManager": "yarn@3.6.1",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.12",
|
|
5
5
|
"description": "AMLL 组件库的 Vue 绑定",
|
|
6
6
|
"repository": {
|
|
7
7
|
"url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build": "vite build",
|
|
17
|
+
"build:dev": "vite build",
|
|
17
18
|
"fmt": "rome format --write ./src",
|
|
18
19
|
"dev": "vite dev"
|
|
19
20
|
},
|
|
@@ -27,19 +28,28 @@
|
|
|
27
28
|
}
|
|
28
29
|
},
|
|
29
30
|
"dependencies": {
|
|
30
|
-
"@applemusic-like-lyrics/core": "^0.0.
|
|
31
|
+
"@applemusic-like-lyrics/core": "^0.0.12"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
33
34
|
"vue": "*"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
37
|
+
"@pixi/app": "^7.2.4",
|
|
38
|
+
"@pixi/core": "^7.2.4",
|
|
39
|
+
"@pixi/display": "^7.2.4",
|
|
40
|
+
"@pixi/filter-blur": "^7.2.4",
|
|
41
|
+
"@pixi/filter-color-matrix": "^7.2.4",
|
|
42
|
+
"@pixi/sprite": "^7.2.4",
|
|
36
43
|
"@vitejs/plugin-vue": "^4.2.3",
|
|
37
44
|
"@vue/tsconfig": "^0.4.0",
|
|
45
|
+
"jss": "^10.10.0",
|
|
46
|
+
"jss-preset-default": "^10.10.0",
|
|
38
47
|
"rome": "^12.1.3",
|
|
39
|
-
"typedoc": "^0.
|
|
40
|
-
"typedoc-plugin-markdown": "^3.
|
|
41
|
-
"
|
|
42
|
-
"vite
|
|
48
|
+
"typedoc": "^0.25.2",
|
|
49
|
+
"typedoc-plugin-markdown": "^3.16.0",
|
|
50
|
+
"typescript": "^5.2.2",
|
|
51
|
+
"vite": "^4.4.11",
|
|
52
|
+
"vite-plugin-dts": "^3.6.0",
|
|
43
53
|
"vue": "^3.3.4"
|
|
44
54
|
}
|
|
45
55
|
}
|