vue-peaks/dist/vue-peaks.js

A lightweight Vue wrapper around the bbc/peaks.js audio waveform UI component

import { getCurrentScope as K, onScopeDispose as Q, unref as X, computed as C, watch as $, ref as R, getCurrentInstance as ee, onMounted as N, defineComponent as oe, useCssVars as te, shallowRef as b, onBeforeUnmount as ne, openBlock as M, createElementBlock as T, normalizeClass as re, createElementVNode as m, renderSlot as S, createCommentVNode as W, createTextVNode as O, toDisplayString as ie } from "vue";
import se from "peaks.js";
function L(t) {
  return K() ? (Q(t), !0) : !1;
}
function x(t) {
  return typeof t == "function" ? t() : X(t);
}
const ue = typeof window < "u" && typeof document < "u", le = (t) => t != null, A = () => {
};
function ae(t, u) {
  function i(...e) {
    return new Promise((s, l) => {
      Promise.resolve(t(() => u.apply(this, e), { fn: u, thisArg: this, args: e })).then(s).catch(l);
    });
  }
  return i;
}
function ce(t, u = {}) {
  let i, e, s = A;
  const l = (v) => {
    clearTimeout(v), s(), s = A;
  };
  return (v) => {
    const f = x(t), d = x(u.maxWait);
    return i && l(i), f <= 0 || d !== void 0 && d <= 0 ? (e && (l(e), e = null), Promise.resolve(v())) : new Promise((a, c) => {
      s = u.rejectOnCancel ? c : a, d && !e && (e = setTimeout(() => {
        i && l(i), e = null, a(v());
      }, d)), i = setTimeout(() => {
        e && l(e), e = null, a(v());
      }, f);
    });
  };
}
function ve(t, u = 200, i = {}) {
  return ae(
    ce(u, i),
    t
  );
}
function P(t) {
  var u;
  const i = x(t);
  return (u = i == null ? void 0 : i.$el) != null ? u : i;
}
const D = ue ? window : void 0;
function de() {
  const t = R(!1);
  return ee() && N(() => {
    t.value = !0;
  }), t;
}
function j(t) {
  const u = de();
  return C(() => (u.value, Boolean(t())));
}
function me(t, u, i = {}) {
  const { window: e = D, ...s } = i;
  let l;
  const p = j(() => e && "ResizeObserver" in e), v = () => {
    l && (l.disconnect(), l = void 0);
  }, f = C(
    () => Array.isArray(t) ? t.map((c) => P(c)) : [P(t)]
  ), d = $(
    f,
    (c) => {
      if (v(), p.value && e) {
        l = new ResizeObserver(u);
        for (const w of c)
          w && l.observe(w, s);
      }
    },
    { immediate: !0, flush: "post", deep: !0 }
  ), a = () => {
    v(), d();
  };
  return L(a), {
    isSupported: p,
    stop: a
  };
}
function fe(t, u, i = {}) {
  const {
    root: e,
    rootMargin: s = "0px",
    threshold: l = 0.1,
    window: p = D,
    immediate: v = !0
  } = i, f = j(() => p && "IntersectionObserver" in p), d = C(() => {
    const y = x(t);
    return (Array.isArray(y) ? y : [y]).map(P).filter(le);
  });
  let a = A;
  const c = R(v), w = f.value ? $(
    () => [d.value, P(e), c.value],
    ([y, V]) => {
      if (a(), !c.value || !y.length)
        return;
      const z = new IntersectionObserver(
        u,
        {
          root: P(V),
          rootMargin: s,
          threshold: l
        }
      );
      y.forEach((_) => _ && z.observe(_)), a = () => {
        z.disconnect(), a = A;
      };
    },
    { immediate: v, flush: "post" }
  ) : A, h = () => {
    a(), w(), c.value = !1;
  };
  return L(h), {
    isSupported: f,
    isActive: c,
    pause() {
      a(), c.value = !1;
    },
    resume() {
      c.value = !0;
    },
    stop: h
  };
}
function pe(t, { window: u = D, scrollTarget: i } = {}) {
  const e = R(!1);
  return fe(
    t,
    ([{ isIntersecting: s }]) => {
      e.value = s;
    },
    {
      root: i,
      window: u,
      threshold: 0
    }
  ), e;
}
const we = ["title"], ye = ["src"], ze = ["src"], be = { class: "peaks-controls" }, ke = 300, he = /* @__PURE__ */ oe({
  __name: "AudioPeaks",
  props: {
    src: {},
    video: { type: Boolean },
    eager: { type: Boolean },
    zoomviewElementId: {},
    zoomviewElement: {},
    overviewElementId: {},
    overviewElement: {},
    mediaElementId: {},
    mediaElement: {},
    options: {}
  },
  emits: ["error"],
  setup(t, { expose: u, emit: i }) {
    const e = t;
    te((o) => ({
      "652dc135": J.value,
      "6c5d31d4": G.value
    }));
    const s = b(void 0), l = b(null), p = b(null), v = b(null), f = b(null), d = b(null), a = b(null), c = b(null), w = b(void 0);
    u({
      peaksInstance: s
    }), N(() => {
      e.eager && _();
    }), ne(() => {
      U();
    });
    const h = pe(l);
    $(
      h,
      async () => {
        !e.eager && h.value == !0 && s.value == null && _();
      },
      {
        immediate: !0
      }
    );
    function y(o) {
      console.error(o), z.value = o, i("error", z.value);
    }
    function V(o) {
      console.error(o), z.value = new Error(o.message), i("error", z.value);
    }
    const z = R(null);
    function _() {
      var I;
      console.debug("AudioPeaks::createPeaksInstance:options:", e.options);
      const o = B(
        e.overviewElement,
        e.overviewElementId,
        p,
        v,
        "div"
      );
      Z(o);
      const n = B(
        e.zoomviewElement,
        e.zoomviewElementId,
        f,
        d,
        "div"
      );
      Z(n);
      const r = B(
        e.mediaElement,
        e.mediaElementId,
        a,
        c,
        "audio,video"
      );
      r != null && r.error && V(r.error), r && (r == null || r.addEventListener("error", (g) => {
        y(g.error);
      })), e.options && (e.options.zoomview ? e.options.zoomview.container = n : e.options.zoomview = {
        container: n
      }, e.options.overview ? e.options.overview.container = o : e.options.overview = {
        container: o
      }, ((I = e.options.webAudio) == null ? void 0 : I.audioContext) || e.options.dataUri || e.options.waveformData || (e.options.webAudio = {
        audioContext: new AudioContext()
      }), e.options.mediaElement = r);
      const k = e.options ? e.options : {
        overview: { container: o },
        zoomview: { container: n },
        mediaElement: r,
        webAudio: {
          audioContext: new AudioContext()
        },
        zoomLevels: [256, 512, 1024, 2048, 4096]
      };
      se.init(
        k,
        function(g, E) {
          g && y(g), s.value = E, w.value = E == null ? void 0 : E.zoom.getZoom();
        }
      );
    }
    function U() {
      var o;
      (o = s.value) == null || o.destroy();
    }
    function Z(o) {
      o && (o.style.minHeight = 40 + "px", o.style.minWidth = 100 + "%");
    }
    me(l, () => {
      Y();
    });
    const Y = ve(() => {
      var r, k;
      console.debug("AudioPeaks::debouncedOverviewResize");
      const o = (r = s.value) == null ? void 0 : r.views.getView("overview");
      o == null || o.fitToContainer();
      const n = (k = s.value) == null ? void 0 : k.views.getView("zoomview");
      n == null || n.fitToContainer();
    }, ke);
    function B(o, n, r, k, I) {
      if (o)
        return console.debug("AudioPeaks::Found elm: ", o), o;
      if (n)
        return console.debug("AudioPeaks::Found element by id: ", n), document.getElementById("" + n);
      const g = r.value;
      if (g)
        return console.debug("AudioPeaks::Found element by Ref: ", g), g;
      const E = k.value;
      if (E) {
        const F = E.querySelector(
          I
        );
        if (F)
          return console.debug(
            "AudioPeaks::Found element by first in slot: ",
            F
          ), F;
      }
    }
    function q() {
      var o, n;
      (o = s.value) == null || o.zoom.zoomIn(), w.value = (n = s.value) == null ? void 0 : n.zoom.getZoom();
    }
    function H() {
      var o, n;
      (o = s.value) == null || o.zoom.zoomOut(), w.value = (n = s.value) == null ? void 0 : n.zoom.getZoom();
    }
    const G = C(
      () => {
        var o, n, r;
        return (r = (n = (o = e.options) == null ? void 0 : o.zoomview) == null ? void 0 : n.waveformColor) != null ? r : "rgba(0, 225, 128, 1)";
      }
    ), J = C(
      () => {
        var o, n, r;
        return (r = (n = (o = e.options) == null ? void 0 : o.overview) == null ? void 0 : n.waveformColor) != null ? r : "rgba(0, 0, 0, 0.2)";
      }
    );
    return (o, n) => {
      var r;
      return M(), T("div", {
        ref_key: "audioPeaks",
        ref: l,
        class: re(["peaks", {
          hasError: z.value !== null
        }]),
        title: (r = z.value) == null ? void 0 : r.message
      }, [
        m("div", {
          ref_key: "overviewSlot",
          ref: v
        }, [
          !e.overviewElementId && !e.overviewElement ? S(o.$slots, "overview", { key: 0 }, () => [
            m("div", {
              class: "peaks-overview",
              ref_key: "overview",
              ref: p
            }, null, 512)
          ]) : W("", !0)
        ], 512),
        m("div", {
          ref_key: "zoomviewSlot",
          ref: d
        }, [
          !e.zoomviewElementId && !e.zoomviewElement ? S(o.$slots, "zoomview", { key: 0 }, () => [
            m("div", {
              class: "peaks-zoomview",
              ref_key: "zoomview",
              ref: f
            }, null, 512)
          ]) : W("", !0)
        ], 512),
        m("div", {
          ref_key: "mediaSlot",
          ref: c
        }, [
          !e.mediaElementId && !e.mediaElement ? S(o.$slots, "default", { key: 0 }, () => [
            o.video ? (M(), T("video", {
              key: 0,
              class: "peaks",
              ref_key: "media",
              ref: a,
              controls: ""
            }, [
              m("source", { src: o.src }, null, 8, ye),
              O(" Your browser does not support the video element. ")
            ], 512)) : (M(), T("audio", {
              key: 1,
              class: "peaks peaks-audio",
              ref_key: "media",
              ref: a,
              controls: ""
            }, [
              m("source", { src: o.src }, null, 8, ze),
              O(" Your browser does not support the audio element. ")
            ], 512))
          ]) : W("", !0)
        ], 512),
        S(o.$slots, "controls", {}, () => [
          m("div", be, [
            m("button", {
              onClick: n[0] || (n[0] = (k) => q())
            }, "Zoom in"),
            O("\xA0 "),
            m("button", {
              onClick: n[1] || (n[1] = (k) => H())
            }, "Zoom out"),
            O("\xA0 "),
            m("span", null, "Zoom level: " + ie(w.value), 1)
          ])
        ])
      ], 10, we);
    };
  }
});
export {
  he as AudioPeaks
};
//# sourceMappingURL=vue-peaks.js.map