import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { a as useRef, b as useState, c as useMemo } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import { L as Left, R as Right } from './chunks/a02c5734.js';

var getDurationTime = function getDurationTime(time) {
  var duration = time;
  var minute = (duration / 60).toFixed(0);
  var sec = (duration % 60).toFixed(0);
  var isM0 = ':';

  if (Number(minute) === 0) {
    minute = '00';
  } else if (Number(minute) < 10) {
    minute = '0' + minute;
  }

  if (Number(sec) < 10) {
    sec = "0" + sec;
  }

  return "" + minute + isM0 + sec;
};

var style = ":host {\n}\n\n.icon-play {\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg class='icon' width='200px' height='200.00px' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23cfc'%3E%3Cpath fill='%23333333' d='M511.3887 65.8504c-246.359 0-446.7958 200.4357-446.7958 446.7958 0 246.357 200.4357 446.7958 446.7958 446.7958 246.359 0 446.7978-200.4378 446.7978-446.7958C958.1865 266.2871 757.7477 65.8504 511.3887 65.8504zM511.3887 903.593c-215.5715 0-390.9458-175.3764-390.9458-390.9468 0-215.5725 175.3743-390.9468 390.9458-390.9468 215.5715 0 390.9468 175.3743 390.9468 390.9468C902.3355 728.2176 726.9591 903.593 511.3887 903.593zM427.6142 317.1727c-15.4337 0-27.9255 12.5174-27.9255 27.9255V680.195072c0 15.4061 12.4908 27.9255 27.9255 27.9255 15.4081 0 27.9245-12.5204 27.9245-27.9255V345.09824C455.5387 329.6901 443.0223 317.1727 427.6142 317.1727zM595.1621 317.1727c-15.4348 0-27.9245 12.5174-27.9245 27.9255V680.195072c0 15.4061 12.4887 27.9255 27.9245 27.9255 15.4081 0 27.9255-12.5204 27.9255-27.9255V345.09824C623.0876 329.6901 610.5702 317.1727 595.1621 317.1727z'/%3E%3C/svg%3E\");\n  width: 42px;\n  height: 42px;\n}\n\n.icon-pause {\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' standalone='no'?%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg class='icon' width='200px' height='200.00px' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23cfc'%3E%3Cpath fill='%23333333' d='M512 0A512 512 0 1 0 1024 512 512.589353 512.589353 0 0 0 512 0z m0 965.064748A453.064748 453.064748 0 1 1 965.064748 512 453.580432 453.580432 0 0 1 512 965.064748z'/%3E%3Cpath fill='%23333333' d='M735.953957 488.425899l-294.676259-221.007194a29.467626 29.467626 0 0 0-47.148202 23.574101v442.014388a29.467626 29.467626 0 0 0 47.148202 23.574101l294.676259-221.007194a29.467626 29.467626 0 0 0 0-47.148202zM453.064748 674.071942v-324.143884l216.071367 162.071942z'/%3E%3C/svg%3E\");\n  width: 42px;\n  height: 42px;\n}\n\n.line {\n  height: 1px;\n  background-color: #eee;\n  position: relative;\n}\n\n.line2 {\n  background-color: #000;\n  height: 1px;\n  left: 0;\n  top: 0;\n  transition: .5s linear;\n}\n\n\n";

function tryParseInt(str) {
  const i = parseInt(str, 10); // eslint-disable-next-line no-restricted-globals

  return isNaN(i) ? Left(str) : Right(i);
}

const KunAudioPlayer = ({
  url
}) => {
  const audioRef = useRef();
  const [isPlaying, setPlaying] = useState(false);
  const [duration, setDuration] = useState(0);
  const [percent, setPercentage] = useState(0);
  const [currentTime, setCurrent] = useState("00:00");
  const timeAmount = useMemo(() => getDurationTime(duration), [duration]);

  const playHead = async () => {
    var _audioRef$current$pla, _audioRef$current;

    await audioRef.current.pause();
    audioRef.current.currentTime = 0;
    await ((_audioRef$current$pla = (_audioRef$current = audioRef.current).play) === null || _audioRef$current$pla === void 0 ? void 0 : _audioRef$current$pla.call(_audioRef$current));
  };

  const play = async () => {
    var _audioRef$current$pla2, _audioRef$current2;

    await ((_audioRef$current$pla2 = (_audioRef$current2 = audioRef.current).play) === null || _audioRef$current$pla2 === void 0 ? void 0 : _audioRef$current$pla2.call(_audioRef$current2));
  };

  const loadMeta = () => {
    const du = audioRef.current.duration;
    setDuration(du);
  };

  const stop = async () => {
    var _audioRef$current3, _audioRef$current3$pa;

    await ((_audioRef$current3 = audioRef.current) === null || _audioRef$current3 === void 0 ? void 0 : (_audioRef$current3$pa = _audioRef$current3.pause) === null || _audioRef$current3$pa === void 0 ? void 0 : _audioRef$current3$pa.call(_audioRef$current3));
  };

  const timeUpdate = () => {
    if ((audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) != null) {
      const du = audioRef.current.currentTime;
      const r = tryParseInt((du / duration * 100).toFixed(2));
      setPercentage(r.getOrElse(0));
      setCurrent(getDurationTime(du));
    }
  };

  return h("host", null, h("style", null, style), h("div", null, h("button", {
    type: "button",
    onclick: async () => playHead()
  }, "\u4ECE\u5934\u64AD\u653E"), h("div", {
    class: "container flex-initial flex"
  }, isPlaying && h("div", {
    className: "icon-play cursor-pointer",
    onclick: stop,
    role: "presentation"
  }), !isPlaying && h("div", {
    className: "icon-pause cursor-pointer",
    onclick: play,
    role: "presentation"
  }), h("div", {
    className: "flex-col flex w-full ml-3"
  }, h("div", {
    className: "w-full"
  }, "\u82F1\u8BED"), h("div", {
    className: "flex-row flex w-full items-center"
  }, h("div", {
    className: "flex-none mr-1"
  }, currentTime), h("div", {
    className: "line flex-1 flex-auto"
  }, h("div", {
    className: "line2",
    style: {
      width: `${percent}%`
    }
  })), h("div", {
    className: "flex-none ml-1"
  }, timeAmount)))), h("div", {
    className: "main-slider"
  }), h("audio", {
    ref: audioRef,
    src: url,
    onloadedmetadata: loadMeta,
    ontimeupdate: timeUpdate,
    onplay: () => setPlaying(true),
    onpause: () => setPlaying(false)
  })));
};

KunAudioPlayer.props = {
  url: {
    type: String,
    value: "http://audio-pm.woshipm.com/cache/vava-3793577.mp3",
    reflect: true,
    event: {
      type: "changeMessage"
    }
  }
};
var kunAudioPlayer = getComponentOrDefine("kun-audio-player", KunAudioPlayer);

export default kunAudioPlayer;
//# sourceMappingURL=kun-audio-player.js.map
