diff --git a/lib/1llest-waveform-vue.mjs b/lib/1llest-waveform-vue.mjs index 7446dcc..59d9bb9 100644 --- a/lib/1llest-waveform-vue.mjs +++ b/lib/1llest-waveform-vue.mjs @@ -1,10 +1,10 @@ var $ = Object.defineProperty; var I = (i, e, t) => e in i ? $(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t; -var u = (i, e, t) => (I(i, typeof e != "symbol" ? e + "" : e, t), t); -import { defineComponent as L, ref as d, onMounted as E, watchEffect as m, onUnmounted as O, openBlock as P, createElementBlock as X, normalizeStyle as y, createVNode as Y, Transition as V, withCtx as q, withDirectives as _, createElementVNode as C, vShow as A } from "vue"; +var l = (i, e, t) => (I(i, typeof e != "symbol" ? e + "" : e, t), t); +import { defineComponent as L, ref as d, onMounted as E, watchEffect as m, onUnmounted as P, openBlock as O, createElementBlock as X, normalizeStyle as y, createVNode as Y, Transition as V, withCtx as q, withDirectives as _, createElementVNode as C, vShow as k } from "vue"; class U { constructor(e, t, a) { - u(this, "canvasCtx"); + l(this, "canvasCtx"); var n; this.canvas = e, this.props = t, this.filteredData = a, this.canvas = e, this.canvasCtx = (n = this.canvas) == null ? void 0 : n.getContext("2d"), this.props = t, this.filteredData = a; } @@ -32,12 +32,12 @@ class U { drawCanvasLines() { const { canvas: e, canvasCtx: t, filteredData: a } = this; a.forEach((n, o) => { - const c = e.width / a.length, l = c * o - c / 2; + const c = e.width / a.length, u = c * o - c / 2; t.moveTo( - l, + u, e.height / 2 - Math.abs(n[0]) * e.height * 0.4 ), t.lineTo( - l, + u, e.height / 2 + Math.abs(n[0]) * e.height * 0.4 ); }); @@ -57,12 +57,12 @@ class U { } class j { constructor(e) { - u(this, "props"); - u(this, "audioCtx"); - u(this, "audioBuffer"); - u(this, "audioBufferSourceNode"); - u(this, "filterData"); - u(this, "arrayBuffer"); + l(this, "props"); + l(this, "audioCtx"); + l(this, "audioBuffer"); + l(this, "audioBufferSourceNode"); + l(this, "filterData"); + l(this, "arrayBuffer"); this.props = e, this.audioCtx = new AudioContext(); } get _filterData() { @@ -93,9 +93,9 @@ class j { a.push(this.audioBuffer.getChannelData(o)); for (let o = 0; o < e; o++) { const c = [0, 0]; - for (let l = 0; l < t; l++) { - const r = Math.floor(a[l].length / e); - c[l] = a[l][o * r]; + for (let u = 0; u < t; u++) { + const r = Math.floor(a[u].length / e); + c[u] = a[u][o * r]; } n.push(c); } @@ -114,10 +114,10 @@ class j { class G extends j { constructor(t) { super(t); - u(this, "startAt"); - u(this, "pauseAt"); - u(this, "pickAt"); - u(this, "playing"); + l(this, "startAt"); + l(this, "pauseAt"); + l(this, "pickAt"); + l(this, "playing"); this.startAt = 0, this.pauseAt = 0, this.pickAt = 0, this.playing = !1; } get _playing() { @@ -135,11 +135,14 @@ class G extends j { this.stop(), this.pauseAt = t; } pick(t) { - t <= 0 && (t = 0), t >= this._audioDuration && (t = this._audioDuration), this.pickAt = t, this.playing && (this.stopSource(), this.play()); + this.pickAt = t, this.playing && (this.stopSource(), this.play()); } replay() { this.audioBufferSourceNode && this.stop(), this.play(); } + finish() { + this.pauseAt = 0, this.stop(); + } stop() { this.stopSource(), this.initializeState(); } @@ -150,18 +153,18 @@ class G extends j { this.playing = !1, this.startAt = 0, this.pauseAt = 0, this.pickAt = 0; } } -function D(i) { +function B(i) { const e = Math.floor(i / 60), t = Math.floor(i % 60); return `${e}:${t < 10 ? "0" : ""}${t}`; } function J(i, e) { - const t = Q(() => k(i, e), 500); + const t = Q(() => A(i, e), 500); document.addEventListener("scroll", () => t()); } function K(i, e) { - document.removeEventListener("scroll", () => k(i, e)); + document.removeEventListener("scroll", () => A(i, e)); } -function k(i, e) { +function A(i, e) { const t = window.innerHeight, a = window.scrollY, n = window.pageYOffset + i.getBoundingClientRect().top; n >= a - t / 4 && n - a - t < t / 4 && e(); } @@ -201,86 +204,86 @@ const Z = /* @__PURE__ */ L({ setup(i, { expose: e, emit: t }) { const a = i, n = d(!1), o = d(null); E(async () => { - a.lazy ? (k(o.value, c), J( + a.lazy ? (A(o.value, c), J( o.value, c ), m(async () => { n.value && await x(); })) : await x(); - }), O(() => { + }), P(() => { a.lazy && K(o.value, c); }); function c() { n.value = !0; } - const l = d(null), r = d(!1); - let s, h; + const u = d(null), r = d(!1); + let s, f; async function x() { - r.value || (t("onInit", !0), await S(), await W(), r.value = !0, t("onReady", r.value)); + r.value || (t("onInit", !0), await S(), await D(), r.value = !0, t("onReady", r.value)); } async function S() { s = new G(a), await s.fetchAudioFile(), t("onFetched", !0), await s.setupAudio(), R(); } - async function W() { - h = new U( - l.value, + async function D() { + f = new U( + u.value, a, s._filterData - ), h.setupCanvas(), m(() => { - h._props = a, h.setWaveStyle(w.value); + ), f.setupCanvas(), m(() => { + f._props = a, f.setWaveStyle(w.value); }); } - const v = d(0), p = d(0), w = d(0); + const p = d(0), v = d(0), w = d(0); function g() { - !s._playing || (requestAnimationFrame(g), p.value = s._currentTime, w.value = p.value / s._audioDuration * h._canvas.width); + !s._playing || (requestAnimationFrame(g), v.value = s._currentTime, w.value = v.value / s._audioDuration * f._canvas.width); } - function T(f) { - !r.value || !a.interact || (f.layerX <= 0 ? v.value = 0 : f.layerX >= h._canvas.width ? v.value = h._canvas.width : v.value = f.layerX); + function W(h) { + !r.value || !a.interact || (h.layerX <= 0 ? p.value = 0 : h.layerX >= f._canvas.width ? p.value = f._canvas.width : p.value = h.layerX); } - function N() { + function T() { if (!r.value || !a.interact) return; - w.value = v.value; - const f = v.value / h._canvas.width * s._audioDuration; - s.pick(f), p.value = f, t("onClick", o), t("onFinish", !1); + w.value = p.value; + const h = p.value / f._canvas.width * s._audioDuration; + s.pick(h), v.value = h, t("onClick", o), t("onFinish", !1); } function b() { !r.value || (s.play(), t("onPlay", !0), g()); } - function F() { + function N() { s.replay(), t("onFinish", !1), t("onPlay", !0), g(); } - function B() { + function F() { s.pause(), t("onPause", !1); } function M() { - t("onFinish", !0); + s.finish(), t("onPlay", !1), t("onFinish", !0); } function R() { m(() => { - p.value < s._audioDuration || (B(), M()); + v.value <= s._audioDuration || M(); }); } function z() { - return D(p.value); + return B(v.value); } function H() { - const f = s._audioDuration; - return D(f); + const h = s._audioDuration; + return B(h); } return e({ play: b, - pause: B, - replay: F, + pause: F, + replay: N, getCurrentTime: z, getDuration: H - }), (f, at) => (P(), X("section", { + }), (h, at) => (O(), X("section", { id: "illest-wave-container", ref_key: "waveformContainer", ref: o, style: y(`${r.value && i.interact ? "cursor: pointer" : ""}`), - onMousemove: T, - onClick: N + onMousemove: W, + onClick: T }, [ Y(V, { name: "fade" }, { default: q(() => [ @@ -292,10 +295,10 @@ const Z = /* @__PURE__ */ L({ id: "illest-skeleton__load", style: y(`background-color: ${i.skeletonColor}`) }, null, 4), [ - [A, !r.value] + [k, !r.value] ]) ], 4), [ - [A, a.skeleton && !r.value] + [k, a.skeleton && !r.value] ]) ]), _: 1 @@ -303,13 +306,13 @@ const Z = /* @__PURE__ */ L({ C("canvas", { id: "illest-wave", ref_key: "waveRef", - ref: l + ref: u }, null, 512), _(C("div", { id: "illest-cursor", - style: y(`width:${a.cursorWidth}px; transform: translateX(${v.value}px);background-color: ${a.cursorColor}; `) + style: y(`width:${a.cursorWidth}px; transform: translateX(${p.value}px);background-color: ${a.cursorColor}; `) }, null, 4), [ - [A, r.value && a.interact] + [k, r.value && a.interact] ]) ], 36)); } @@ -319,7 +322,7 @@ const tt = (i, e) => { for (const [a, n] of e) t[a] = n; return t; -}, et = /* @__PURE__ */ tt(Z, [["__scopeId", "data-v-10d3d361"]]), ot = { +}, et = /* @__PURE__ */ tt(Z, [["__scopeId", "data-v-020db612"]]), ot = { install: (i) => { i.component("IllestWaveform", et); } diff --git a/lib/1llest-waveform-vue.umd.js b/lib/1llest-waveform-vue.umd.js index 35ea314..fbf8300 100644 --- a/lib/1llest-waveform-vue.umd.js +++ b/lib/1llest-waveform-vue.umd.js @@ -1 +1 @@ -(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r["1llest-waveform-vue"]={},r.Vue))})(this,function(r,e){"use strict";var P=Object.defineProperty;var V=(r,e,v)=>e in r?P(r,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):r[e]=v;var c=(r,e,v)=>(V(r,typeof e!="symbol"?e+"":e,v),v);class v{constructor(a,t,i){c(this,"canvasCtx");var o;this.canvas=a,this.props=t,this.filteredData=i,this.canvas=a,this.canvasCtx=(o=this.canvas)==null?void 0:o.getContext("2d"),this.props=t,this.filteredData=i}get _canvas(){return this.canvas}set _props(a){this.props=a}get _props(){return this.props}setupCanvas(){this.setCanvasBase(),this.translateCanvasCtx(),this.drawCanvasLines()}setCanvasBase(){this.canvas.width=this.canvas.offsetWidth,this.canvas.height=this.canvas.offsetHeight,this.canvas.style.opacity="1",this.canvasCtx.fillStyle="transparent",this.canvasCtx.fillRect(0,0,this.canvas.width,this.canvas.height)}translateCanvasCtx(){this.canvasCtx.translate(this.canvas.width/this.filteredData.length,this.canvas.height/2-this.canvas.height/2)}drawCanvasLines(){const{canvas:a,canvasCtx:t,filteredData:i}=this;i.forEach((o,s)=>{const h=a.width/i.length,f=h*s-h/2;t.moveTo(f,a.height/2-Math.abs(o[0])*a.height*.4),t.lineTo(f,a.height/2+Math.abs(o[0])*a.height*.4)})}drawMask(a){const{canvas:t,canvasCtx:i,props:o}=this;i.globalCompositeOperation="destination-atop",i.fillStyle=o.maskColor,i.fillRect(0,0,a,t.height)}drawWave(){const{canvasCtx:a,props:t}=this;a.lineWidth=t.lineWidth,a.lineCap=t.lineCap,a.strokeStyle=t.lineColor,a.stroke()}setWaveStyle(a){const{canvas:t,canvasCtx:i}=this;i.clearRect(0,0,t.width,t.height),this.drawMask(a),this.drawWave()}}class k{constructor(a){c(this,"props");c(this,"audioCtx");c(this,"audioBuffer");c(this,"audioBufferSourceNode");c(this,"filterData");c(this,"arrayBuffer");this.props=a,this.audioCtx=new AudioContext}get _filterData(){return this.filterData}get _audioDuration(){if(!this.audioBuffer)throw new Error("can not get duration before audio inited");return this.audioBuffer.duration}async setupAudio(){await this.createAudioBuffer(),this.createFilterData()}async fetchAudioFile(){try{const a=await fetch(this.props.url);this.arrayBuffer=await a.arrayBuffer()}catch(a){console.error(a)}}async createAudioBuffer(){this.audioBuffer=await this.audioCtx.decodeAudioData(this.arrayBuffer)}createFilterData(){const a=this.props.samplingRate,t=this.audioBuffer.numberOfChannels,i=[],o=[];for(let s=0;s=this._audioDuration&&(t=this._audioDuration),this.pickAt=t,this.playing&&(this.stopSource(),this.play())}replay(){this.audioBufferSourceNode&&this.stop(),this.play()}stop(){this.stopSource(),this.initializeState()}stopSource(){this.disconnectDestination(),this.audioBufferSourceNode.stop()}initializeState(){this.playing=!1,this.startAt=0,this.pauseAt=0,this.pickAt=0}}function _(n){const a=Math.floor(n/60),t=Math.floor(n%60);return`${a}:${t<10?"0":""}${t}`}function D(n,a){const t=T(()=>C(n,a),500);document.addEventListener("scroll",()=>t())}function W(n,a){document.removeEventListener("scroll",()=>C(n,a))}function C(n,a){const t=window.innerHeight,i=window.scrollY,o=window.pageYOffset+n.getBoundingClientRect().top;o>=i-t/4&&o-i-t{t||(t=setTimeout(()=>{n(),t=void 0},a))}}const N=e.defineComponent({__name:"IllestWaveform",props:{url:null,lineWidth:{default:.5},lineCap:{default:"round"},lineColor:{default:"#5e5e5e"},samplingRate:{default:22050},cursorWidth:{default:2},cursorColor:{default:"#fff"},maskColor:{default:"#fff"},lazy:{type:[Boolean,null],default:!0},skeleton:{type:[Boolean,null],default:!0},skeletonColor:{default:"#232323"},interact:{type:[Boolean,null],default:!0}},emits:["onInit","onFetched","onReady","onPlay","onPause","onFinish","onClick"],setup(n,{expose:a,emit:t}){const i=n,o=e.ref(!1),s=e.ref(null);e.onMounted(async()=>{i.lazy?(C(s.value,h),D(s.value,h),e.watchEffect(async()=>{o.value&&await S()})):await S()}),e.onUnmounted(()=>{i.lazy&&W(s.value,h)});function h(){o.value=!0}const f=e.ref(null),u=e.ref(!1);let l,p;async function S(){u.value||(t("onInit",!0),await M(),await z(),u.value=!0,t("onReady",u.value))}async function M(){l=new B(i),await l.fetchAudioFile(),t("onFetched",!0),await l.setupAudio(),$()}async function z(){p=new v(f.value,i,l._filterData),p.setupCanvas(),e.watchEffect(()=>{p._props=i,p.setWaveStyle(g.value)})}const y=e.ref(0),w=e.ref(0),g=e.ref(0);function m(){!l._playing||(requestAnimationFrame(m),w.value=l._currentTime,g.value=w.value/l._audioDuration*p._canvas.width)}function E(d){!u.value||!i.interact||(d.layerX<=0?y.value=0:d.layerX>=p._canvas.width?y.value=p._canvas.width:y.value=d.layerX)}function F(){if(!u.value||!i.interact)return;g.value=y.value;const d=y.value/p._canvas.width*l._audioDuration;l.pick(d),w.value=d,t("onClick",s),t("onFinish",!1)}function R(){!u.value||(l.play(),t("onPlay",!0),m())}function H(){l.replay(),t("onFinish",!1),t("onPlay",!0),m()}function x(){l.pause(),t("onPause",!1)}function I(){t("onFinish",!0)}function $(){e.watchEffect(()=>{w.value(e.openBlock(),e.createElementBlock("section",{id:"illest-wave-container",ref_key:"waveformContainer",ref:s,style:e.normalizeStyle(`${u.value&&n.interact?"cursor: pointer":""}`),onMousemove:E,onClick:F},[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{id:"illest-skeleton",style:e.normalizeStyle(`background-color: ${n.skeletonColor}`)},[e.withDirectives(e.createElementVNode("div",{id:"illest-skeleton__load",style:e.normalizeStyle(`background-color: ${n.skeletonColor}`)},null,4),[[e.vShow,!u.value]])],4),[[e.vShow,i.skeleton&&!u.value]])]),_:1}),e.createElementVNode("canvas",{id:"illest-wave",ref_key:"waveRef",ref:f},null,512),e.withDirectives(e.createElementVNode("div",{id:"illest-cursor",style:e.normalizeStyle(`width:${i.cursorWidth}px; transform: translateX(${y.value}px);background-color: ${i.cursorColor}; `)},null,4),[[e.vShow,u.value&&i.interact]])],36))}}),X="",A=((n,a)=>{const t=n.__vccOpts||n;for(const[i,o]of a)t[i]=o;return t})(N,[["__scopeId","data-v-10d3d361"]]),b={install:n=>{n.component("IllestWaveform",A)}};r.IllestWaveform=A,r.default=b,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); +(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l["1llest-waveform-vue"]={},l.Vue))})(this,function(l,e){"use strict";var O=Object.defineProperty;var V=(l,e,v)=>e in l?O(l,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):l[e]=v;var u=(l,e,v)=>(V(l,typeof e!="symbol"?e+"":e,v),v);class v{constructor(a,t,i){u(this,"canvasCtx");var o;this.canvas=a,this.props=t,this.filteredData=i,this.canvas=a,this.canvasCtx=(o=this.canvas)==null?void 0:o.getContext("2d"),this.props=t,this.filteredData=i}get _canvas(){return this.canvas}set _props(a){this.props=a}get _props(){return this.props}setupCanvas(){this.setCanvasBase(),this.translateCanvasCtx(),this.drawCanvasLines()}setCanvasBase(){this.canvas.width=this.canvas.offsetWidth,this.canvas.height=this.canvas.offsetHeight,this.canvas.style.opacity="1",this.canvasCtx.fillStyle="transparent",this.canvasCtx.fillRect(0,0,this.canvas.width,this.canvas.height)}translateCanvasCtx(){this.canvasCtx.translate(this.canvas.width/this.filteredData.length,this.canvas.height/2-this.canvas.height/2)}drawCanvasLines(){const{canvas:a,canvasCtx:t,filteredData:i}=this;i.forEach((o,s)=>{const h=a.width/i.length,f=h*s-h/2;t.moveTo(f,a.height/2-Math.abs(o[0])*a.height*.4),t.lineTo(f,a.height/2+Math.abs(o[0])*a.height*.4)})}drawMask(a){const{canvas:t,canvasCtx:i,props:o}=this;i.globalCompositeOperation="destination-atop",i.fillStyle=o.maskColor,i.fillRect(0,0,a,t.height)}drawWave(){const{canvasCtx:a,props:t}=this;a.lineWidth=t.lineWidth,a.lineCap=t.lineCap,a.strokeStyle=t.lineColor,a.stroke()}setWaveStyle(a){const{canvas:t,canvasCtx:i}=this;i.clearRect(0,0,t.width,t.height),this.drawMask(a),this.drawWave()}}class S{constructor(a){u(this,"props");u(this,"audioCtx");u(this,"audioBuffer");u(this,"audioBufferSourceNode");u(this,"filterData");u(this,"arrayBuffer");this.props=a,this.audioCtx=new AudioContext}get _filterData(){return this.filterData}get _audioDuration(){if(!this.audioBuffer)throw new Error("can not get duration before audio inited");return this.audioBuffer.duration}async setupAudio(){await this.createAudioBuffer(),this.createFilterData()}async fetchAudioFile(){try{const a=await fetch(this.props.url);this.arrayBuffer=await a.arrayBuffer()}catch(a){console.error(a)}}async createAudioBuffer(){this.audioBuffer=await this.audioCtx.decodeAudioData(this.arrayBuffer)}createFilterData(){const a=this.props.samplingRate,t=this.audioBuffer.numberOfChannels,i=[],o=[];for(let s=0;sC(n,a),500);document.addEventListener("scroll",()=>t())}function D(n,a){document.removeEventListener("scroll",()=>C(n,a))}function C(n,a){const t=window.innerHeight,i=window.scrollY,o=window.pageYOffset+n.getBoundingClientRect().top;o>=i-t/4&&o-i-t{t||(t=setTimeout(()=>{n(),t=void 0},a))}}const T=e.defineComponent({__name:"IllestWaveform",props:{url:null,lineWidth:{default:.5},lineCap:{default:"round"},lineColor:{default:"#5e5e5e"},samplingRate:{default:22050},cursorWidth:{default:2},cursorColor:{default:"#fff"},maskColor:{default:"#fff"},lazy:{type:[Boolean,null],default:!0},skeleton:{type:[Boolean,null],default:!0},skeletonColor:{default:"#232323"},interact:{type:[Boolean,null],default:!0}},emits:["onInit","onFetched","onReady","onPlay","onPause","onFinish","onClick"],setup(n,{expose:a,emit:t}){const i=n,o=e.ref(!1),s=e.ref(null);e.onMounted(async()=>{i.lazy?(C(s.value,h),B(s.value,h),e.watchEffect(async()=>{o.value&&await A()})):await A()}),e.onUnmounted(()=>{i.lazy&&D(s.value,h)});function h(){o.value=!0}const f=e.ref(null),c=e.ref(!1);let r,p;async function A(){c.value||(t("onInit",!0),await N(),await M(),c.value=!0,t("onReady",c.value))}async function N(){r=new x(i),await r.fetchAudioFile(),t("onFetched",!0),await r.setupAudio(),$()}async function M(){p=new v(f.value,i,r._filterData),p.setupCanvas(),e.watchEffect(()=>{p._props=i,p.setWaveStyle(m.value)})}const y=e.ref(0),w=e.ref(0),m=e.ref(0);function g(){!r._playing||(requestAnimationFrame(g),w.value=r._currentTime,m.value=w.value/r._audioDuration*p._canvas.width)}function z(d){!c.value||!i.interact||(d.layerX<=0?y.value=0:d.layerX>=p._canvas.width?y.value=p._canvas.width:y.value=d.layerX)}function E(){if(!c.value||!i.interact)return;m.value=y.value;const d=y.value/p._canvas.width*r._audioDuration;r.pick(d),w.value=d,t("onClick",s),t("onFinish",!1)}function F(){!c.value||(r.play(),t("onPlay",!0),g())}function R(){r.replay(),t("onFinish",!1),t("onPlay",!0),g()}function H(){r.pause(),t("onPause",!1)}function I(){r.finish(),t("onPlay",!1),t("onFinish",!0)}function $(){e.watchEffect(()=>{w.value<=r._audioDuration||I()})}function L(){return _(w.value)}function P(){const d=r._audioDuration;return _(d)}return a({play:F,pause:H,replay:R,getCurrentTime:L,getDuration:P}),(d,j)=>(e.openBlock(),e.createElementBlock("section",{id:"illest-wave-container",ref_key:"waveformContainer",ref:s,style:e.normalizeStyle(`${c.value&&n.interact?"cursor: pointer":""}`),onMousemove:z,onClick:E},[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{id:"illest-skeleton",style:e.normalizeStyle(`background-color: ${n.skeletonColor}`)},[e.withDirectives(e.createElementVNode("div",{id:"illest-skeleton__load",style:e.normalizeStyle(`background-color: ${n.skeletonColor}`)},null,4),[[e.vShow,!c.value]])],4),[[e.vShow,i.skeleton&&!c.value]])]),_:1}),e.createElementVNode("canvas",{id:"illest-wave",ref_key:"waveRef",ref:f},null,512),e.withDirectives(e.createElementVNode("div",{id:"illest-cursor",style:e.normalizeStyle(`width:${i.cursorWidth}px; transform: translateX(${y.value}px);background-color: ${i.cursorColor}; `)},null,4),[[e.vShow,c.value&&i.interact]])],36))}}),X="",k=((n,a)=>{const t=n.__vccOpts||n;for(const[i,o]of a)t[i]=o;return t})(T,[["__scopeId","data-v-020db612"]]),b={install:n=>{n.component("IllestWaveform",k)}};l.IllestWaveform=k,l.default=b,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/lib/style.css b/lib/style.css index a8a2499..45cdb3f 100644 --- a/lib/style.css +++ b/lib/style.css @@ -1 +1 @@ -#illest-wave-container[data-v-10d3d361]{position:relative;width:100%;height:100%;overflow:hidden}#illest-wave-container>#illest-skeleton[data-v-10d3d361]{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:7px;overflow:hidden;z-index:0}#illest-wave-container>#illest-skeleton>#illest-skeleton__load[data-v-10d3d361]{background-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 100%);height:100%;width:30%;animation:skeleton-load-10d3d361 2.5s ease 0s infinite}#illest-wave-container>#illest-wave[data-v-10d3d361]{width:inherit;height:inherit;opacity:0}#illest-wave-container>#illest-cursor[data-v-10d3d361]{position:absolute;height:inherit;left:0px;top:0px;opacity:0;transition:opacity .2s ease-in-out}#illest-wave-container:hover #illest-cursor[data-v-10d3d361]{opacity:1}@keyframes skeleton-load-10d3d361{0%{transform:translate(-80%)}to{transform:translate(330%)}}.fade-enter-active[data-v-10d3d361],.fade-leave-active[data-v-10d3d361]{transition:all ease-in-out .4s}.fade-enter[data-v-10d3d361],.fade-leave-to[data-v-10d3d361]{opacity:0} +#illest-wave-container[data-v-020db612]{position:relative;width:100%;height:100%;overflow:hidden}#illest-wave-container>#illest-skeleton[data-v-020db612]{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:7px;overflow:hidden;z-index:0}#illest-wave-container>#illest-skeleton>#illest-skeleton__load[data-v-020db612]{background-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 100%);height:100%;width:30%;animation:skeleton-load-020db612 2.5s ease 0s infinite}#illest-wave-container>#illest-wave[data-v-020db612]{width:inherit;height:inherit;opacity:0}#illest-wave-container>#illest-cursor[data-v-020db612]{position:absolute;height:inherit;left:0px;top:0px;opacity:0;transition:opacity .2s ease-in-out}#illest-wave-container:hover #illest-cursor[data-v-020db612]{opacity:1}@keyframes skeleton-load-020db612{0%{transform:translate(-80%)}to{transform:translate(330%)}}.fade-enter-active[data-v-020db612],.fade-leave-active[data-v-020db612]{transition:all ease-in-out .4s}.fade-enter[data-v-020db612],.fade-leave-to[data-v-020db612]{opacity:0}