import { defineComponent as l, computed as _, ref as r, onMounted as h, nextTick as R, onBeforeUnmount as k, createElementBlock as w, openBlock as y, createElementVNode as u } from "vue";
import x from "wavesurfer.js";
import { upgradeWavesurfer as g } from "./version.mjs";
import { useWatch as S } from "./hooks/useWatch.mjs";
const W = { class: "wavesurfer-wrap" }, B = l({ name: "ShjWavesurfer" }), V = /* @__PURE__ */ l({
  ...B,
  props: {
    option: {},
    sources: {},
    useEvents: {}
  },
  setup(c, { expose: m }) {
    const n = _(() => g(c.option)), f = r(), s = r(), a = r(), v = r(!1);
    let e;
    const o = () => {
      e && e.destroy(), e = x.create({
        container: f.value,
        ...n.value.config,
        url: n.value.config.url
      }), e.on("ready", () => {
        v.value = !0;
      }), e.on("click", () => {
        e.play();
      }), a.value && s.value && e && (e.on(
        "decode",
        (t) => a.value.textContent = i(t)
      ), e.on(
        "timeupdate",
        (t) => s.value.textContent = i(t)
      ));
    }, i = (t) => {
      const d = Math.floor(t / 60), p = `0${Math.round(t) % 60}`.slice(-2);
      return `${d}:${p}`;
    };
    return h(() => {
      R(() => {
        o();
      });
    }), k(() => {
      e && e.destroy();
    }), S({ option: n.value, sources: c.sources }, o), m({
      refresh: () => o(),
      refreshView: () => o(),
      refreshData: () => o()
    }), (t, d) => (y(), w("div", W, [
      u("div", {
        ref_key: "wavesurRef",
        ref: f,
        class: "wavesurfer"
      }, [
        u("div", {
          ref_key: "timeRef",
          ref: s,
          class: "time"
        }, "0:00", 512),
        u("div", {
          ref_key: "durationRef",
          ref: a,
          class: "duration"
        }, "0:00", 512)
      ], 512)
    ]));
  }
});
export {
  V as default
};
