chore: rebuild lib

Author: codeacme17

lib/1llest-waveform-vue.mjs

@@ -1,12 +1,12 @@
 var L = Object.defineProperty;
-var M = (i, e, t) => e in i ? L(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var o = (i, e, t) => (M(i, typeof e != "symbol" ? e + "" : e, t), t);
-import { defineComponent as G, ref as h, onMounted as H, watchEffect as w, onUnmounted as O, openBlock as $, createElementBlock as V, normalizeStyle as y, createVNode as P, Transition as U, withCtx as X, withDirectives as C, createElementVNode as g, vShow as A } from "vue";
-class Y {
-  constructor(e, t, a) {
-    o(this, "canvasCtx");
+var M = (a, e, t) => e in a ? L(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var s = (a, e, t) => (M(a, typeof e != "symbol" ? e + "" : e, t), t);
+import { defineComponent as O, ref as h, onMounted as G, watchEffect as g, onUnmounted as $, openBlock as V, createElementBlock as P, normalizeStyle as y, createVNode as U, Transition as X, withCtx as H, withDirectives as w, createElementVNode as m, vShow as A } from "vue";
+class q {
+  constructor(e, t, i) {
+    s(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;
+    this.canvas = e, this.props = t, this.filteredData = i, this.canvas = e, this.canvasCtx = (n = this.canvas) == null ? void 0 : n.getContext("2d"), this.props = t, this.filteredData = i;
   }
   get _canvas() {
     return this.canvas;
@@ -30,39 +30,39 @@ class Y {
     );
   }
   drawCanvasLines() {
-    const { canvas: e, canvasCtx: t, filteredData: a } = this;
-    a.forEach((n, u) => {
-      const c = e.width / a.length, p = c * u - c / 2;
+    const { canvas: e, canvasCtx: t, filteredData: i } = this;
+    i.forEach((n, c) => {
+      const d = e.width / i.length, v = d * c - d / 2;
       t.moveTo(
-        p,
+        v,
         e.height / 2 - Math.abs(n) * e.height * 0.4
       ), t.lineTo(
-        p,
+        v,
         e.height / 2 + Math.abs(n) * e.height * 0.4
       );
     });
   }
   drawMask(e) {
-    const { canvas: t, canvasCtx: a, props: n } = this;
-    a.globalCompositeOperation = "destination-atop", a.fillStyle = n.maskColor, a.fillRect(0, 0, e, t.height);
+    const { canvas: t, canvasCtx: i, props: n } = this;
+    i.globalCompositeOperation = "destination-atop", i.fillStyle = n.maskColor, i.fillRect(0, 0, e, t.height);
   }
   drawWave() {
     const { canvasCtx: e, props: t } = this;
     e.lineWidth = t.lineWidth, e.lineCap = t.lineCap, e.strokeStyle = t.lineColor, e.stroke();
   }
   setWaveStyle(e) {
-    const { canvas: t, canvasCtx: a } = this;
-    a.clearRect(0, 0, t.width, t.height), this.drawMask(e), this.drawWave();
+    const { canvas: t, canvasCtx: i } = this;
+    i.clearRect(0, 0, t.width, t.height), this.drawMask(e), this.drawWave();
   }
 }
-class q {
+class Y {
   constructor(e) {
-    o(this, "props");
-    o(this, "audioCtx");
-    o(this, "audioBuffer");
-    o(this, "gainNode");
-    o(this, "filteredData");
-    o(this, "arrayBuffer");
+    s(this, "props");
+    s(this, "audioCtx");
+    s(this, "audioBuffer");
+    s(this, "gainNode");
+    s(this, "filteredData");
+    s(this, "arrayBuffer");
     this.props = e, this.audioCtx = new AudioContext();
   }
   get _filteredData() {
@@ -91,26 +91,26 @@ class q {
     this.gainNode = this.audioCtx.createGain(), this.gainNode.gain.setValueAtTime(0, this.audioCtx.currentTime);
   }
   createFilterData() {
-    const e = this.props.samplingRate, t = [], a = this.audioBuffer.getChannelData(0);
+    const e = this.props.samplingRate, t = [], i = this.audioBuffer.getChannelData(0);
     for (let n = 0; n < e; n++) {
-      const u = Math.floor(a.length / e), c = a[n * u];
-      t.push(c);
+      const c = Math.floor(i.length / e), d = i[n * c];
+      t.push(d);
     }
     this.filteredData = t;
   }
 }
-function j(i) {
-  return new Promise((e) => setTimeout(e, i));
+function j(a) {
+  return new Promise((e) => setTimeout(e, a));
 }
-class J extends q {
+class J extends Y {
   constructor(t) {
     super(t);
-    o(this, "startAt");
-    o(this, "pauseAt");
-    o(this, "pickAt");
-    o(this, "playing");
-    o(this, "audioBufferSourceNode");
-    o(this, "FADE_DURATION");
+    s(this, "startAt");
+    s(this, "pauseAt");
+    s(this, "pickAt");
+    s(this, "playing");
+    s(this, "audioBufferSourceNode");
+    s(this, "FADE_DURATION");
     this.startAt = 0, this.pauseAt = 0, this.pickAt = 0, this.playing = !1, this.FADE_DURATION = this.props.fade ? 0.08 : 0;
   }
   get _playing() {
@@ -159,30 +159,42 @@ class J extends q {
     );
   }
 }
-function x(i) {
-  const e = Math.floor(i / 60), t = Math.floor(i % 60);
+function x(a) {
+  const e = Math.floor(a / 60), t = Math.floor(a % 60);
   return `${e}:${t < 10 ? "0" : ""}${t}`;
 }
-function K(i, e) {
-  const t = Z(() => D(i, e), 500);
-  document.addEventListener("scroll", () => t());
-}
-function Q(i, e) {
-  document.removeEventListener("scroll", () => D(i, e));
+class K {
+  constructor(e, t) {
+    s(this, "el");
+    s(this, "handler");
+    s(this, "intersectionObserver");
+    s(this, "timer");
+    s(this, "rended");
+    this.el = e, this.handler = t, this.timer = null, this.rended = !1;
+  }
+  observe() {
+    const e = (t) => {
+      if (this.rended)
+        return this.unobserve();
+      const i = t[0], n = 260;
+      i.intersectionRatio > 0 ? this.timer = setTimeout(() => {
+        this.handler(), this.rended = !0;
+      }, n) : this.timer && (clearTimeout(this.timer), this.timer = null);
+    };
+    this.intersectionObserver = new IntersectionObserver(e), this.intersectionObserver.observe(this.el);
+  }
+  unobserve() {
+    this.intersectionObserver.unobserve(this.el);
+  }
 }
-function D(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();
+let D;
+function Q(a, e) {
+  D = new K(a, e), D.observe();
 }
-function Z(i, e) {
-  let t;
-  return () => {
-    t || (t = setTimeout(() => {
-      i(), t = void 0;
-    }, e));
-  };
+function Z() {
+  D.unobserve();
 }
-const tt = /* @__PURE__ */ G({
+const tt = /* @__PURE__ */ O({
   __name: "IllestWaveform",
   props: {
     url: null,
@@ -208,136 +220,130 @@ const tt = /* @__PURE__ */ G({
     "onFinish",
     "onClick"
   ],
-  setup(i, { expose: e, emit: t }) {
-    const a = i, n = h(!1), u = h(null);
-    H(async () => {
-      a.lazy ? (D(u.value, c), K(
-        u.value,
-        c
-      ), w(async () => {
+  setup(a, { expose: e, emit: t }) {
+    const i = a, n = h(!1), c = h(null);
+    G(async () => {
+      i.lazy ? (Q(c.value, d), g(async () => {
         n.value && await k();
       })) : await k();
-    }), O(() => {
-      a.lazy && Q(
-        u.value,
-        c
-      );
+    }), $(() => {
+      i.lazy && Z(), o && o.pause();
     });
-    function c() {
+    function d() {
       n.value = !0;
     }
-    const p = h(null), r = h(!1);
-    let s, f;
+    const v = h(null), r = h(!1);
+    let o, l;
     async function k() {
       r.value || (t("onInit", !0), await B(), await T(), r.value = !0, t("onReady", r.value));
     }
     async function B() {
-      s = new J(a), await s.fetchAudioFile(), t("onFetched", !0), await s.setupAudio(), I();
+      o = new J(i), await o.fetchAudioFile(), t("onFetched", !0), await o.setupAudio(), I();
     }
     async function T() {
-      f = new Y(
-        p.value,
-        a,
-        s._filteredData
-      ), f.setupCanvas(), w(() => {
-        f._props = a, f.setWaveStyle(m.value);
+      l = new q(
+        v.value,
+        i,
+        o._filteredData
+      ), l.setupCanvas(), g(() => {
+        l._props = i, l.setWaveStyle(_.value);
       });
     }
-    const d = h(0), v = h(0), m = h(0);
-    function _() {
-      !s._playing || (requestAnimationFrame(_), v.value = s._currentTime, m.value = v.value / s._audioDuration * f._canvas.width);
+    const f = h(0), p = h(0), _ = h(0);
+    function C() {
+      !o._playing || (requestAnimationFrame(C), p.value = o._currentTime, _.value = p.value / o._audioDuration * l._canvas.width);
     }
-    function N(l) {
-      !r.value || !a.interact || (l.layerX <= 0 ? d.value = 0 : l.layerX >= f._canvas.width ? d.value = f._canvas.width : d.value = l.layerX);
+    function N(u) {
+      !r.value || !i.interact || (u.layerX <= 0 ? f.value = 0 : u.layerX >= l._canvas.width ? f.value = l._canvas.width : f.value = u.layerX);
     }
     function S() {
-      if (!r.value || !a.interact)
+      if (!r.value || !i.interact)
         return;
-      m.value = d.value;
-      const l = d.value / f._canvas.width * s._audioDuration;
-      s.pick(l), v.value = l, t("onClick", u), t("onFinish", !1);
+      _.value = f.value;
+      const u = f.value / l._canvas.width * o._audioDuration;
+      o.pick(u), p.value = u, t("onClick", c), t("onFinish", !1);
+    }
+    function b() {
+      !r.value || (o.play(), t("onPlay", !0), C());
     }
     function W() {
-      !r.value || (s.play(), t("onPlay", !0), _());
+      o.replay(), t("onFinish", !1), t("onPlay", !0), C();
     }
     function R() {
-      s.replay(), t("onFinish", !1), t("onPlay", !0), _();
+      o.pause(), t("onPause", !1);
     }
     function F() {
-      s.pause(), t("onPause", !1);
-    }
-    function b() {
-      s.finish(), t("onPlay", !1), t("onFinish", !0);
+      o.finish(), t("onPlay", !1), t("onFinish", !0);
     }
     function I() {
-      w(() => {
-        v.value <= s._audioDuration || b();
+      g(() => {
+        p.value <= o._audioDuration || F();
       });
     }
-    function E() {
-      return x(v.value);
-    }
     function z() {
-      const l = s._audioDuration;
-      return x(l);
+      return x(p.value);
+    }
+    function E() {
+      const u = o._audioDuration;
+      return x(u);
     }
     return e({
-      play: W,
-      pause: F,
-      replay: R,
-      getCurrentTime: E,
-      getDuration: z
-    }), (l, it) => ($(), V("section", {
+      play: b,
+      pause: R,
+      replay: W,
+      getCurrentTime: z,
+      getDuration: E
+    }), (u, at) => (V(), P("section", {
       id: "illest-waveform",
       ref_key: "__illestWaveformRef__",
-      ref: u,
-      style: y(`${r.value && i.interact ? "cursor: pointer" : ""}`),
+      ref: c,
+      style: y(`${r.value && a.interact ? "cursor: pointer" : ""}`),
       onMousemove: N,
       onClick: S
     }, [
-      P(U, { name: "fade" }, {
-        default: X(() => [
-          C(g("div", {
+      U(X, { name: "fade" }, {
+        default: H(() => [
+          w(m("div", {
             id: "illest-waveform__skeleton",
-            style: y(`background-color: ${i.skeletonColor}`)
+            style: y(`background-color: ${a.skeletonColor}`)
           }, [
-            C(g("div", {
+            w(m("div", {
               id: "illest-waveform__skeleton__load",
-              style: y(`background-color: ${i.skeletonColor}`)
+              style: y(`background-color: ${a.skeletonColor}`)
             }, null, 4), [
               [A, !r.value]
             ])
           ], 4), [
-            [A, a.skeleton && !r.value]
+            [A, i.skeleton && !r.value]
           ])
         ]),
         _: 1
       }),
-      g("canvas", {
+      m("canvas", {
         id: "illest-waveform__view",
         ref_key: "waveRef",
-        ref: p
+        ref: v
       }, null, 512),
-      C(g("div", {
+      w(m("div", {
         id: "illest-waveform__cursor",
-        style: y(`width:${a.cursorWidth}px; transform: translateX(${d.value}px);background-color: ${a.cursorColor}; `)
+        style: y(`width:${i.cursorWidth}px; transform: translateX(${f.value}px);background-color: ${i.cursorColor}; `)
       }, null, 4), [
-        [A, r.value && a.interact]
+        [A, r.value && i.interact]
       ])
     ], 36));
   }
 });
-const et = (i, e) => {
-  const t = i.__vccOpts || i;
-  for (const [a, n] of e)
-    t[a] = n;
+const et = (a, e) => {
+  const t = a.__vccOpts || a;
+  for (const [i, n] of e)
+    t[i] = n;
   return t;
-}, at = /* @__PURE__ */ et(tt, [["__scopeId", "data-v-bff6afca"]]), ot = {
-  install: (i) => {
-    i.component("IllestWaveform", at);
+}, it = /* @__PURE__ */ et(tt, [["__scopeId", "data-v-6d613eae"]]), ot = {
+  install: (a) => {
+    a.component("IllestWaveform", it);
   }
 };
 export {
-  at as IllestWaveform,
+  it as IllestWaveform,
   ot as default
 };