koval-ui/dist/src/lib/Audio/Audio.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as r, jsx as o } from "react/jsx-runtime";
import { forwardRef as z, useState as G, useMemo as H } from "react";
import t from "classnames";
import { useLocalTheme as J } from "css-vars-hook";
/* empty css                */
import { IconPlay as K } from "../../internal/Icons/IconPlay.js";
import { IconPause as Q } from "../../internal/Icons/IconPause.js";
import { IconVolume as U } from "../../internal/Icons/IconVolume.js";
import { IconVolumeOff as X } from "../../internal/Icons/IconVolumeOff.js";
import { IconDownloadVideo as Y } from "../../internal/Icons/IconDownloadVideo.js";
import { IconAudio as Z } from "../../internal/Icons/IconAudio.js";
import { useInternalRef as _ } from "../../internal/hooks/useInternalRef.js";
import { PlayModes as d } from "../../internal/MediaEmbeds/types.js";
import { usePlay as ee } from "../../internal/MediaEmbeds/usePlay.js";
import { getFileName as u } from "../../internal/MediaEmbeds/getFileName.js";
import { useLoadingState as oe } from "../../internal/MediaEmbeds/useLoadingState.js";
import { getFormattedTime as p } from "../../internal/MediaEmbeds/getFormattedTime.js";
import { useTime as ae } from "../../internal/MediaEmbeds/useTime.js";
import { useSound as re } from "../../internal/MediaEmbeds/useSound.js";
import h from "../../internal/MediaEmbeds/RangeInput.module.css.js";
import e from "./Audio.module.css.js";
import { Picture as ne } from "../Picture/Picture.js";
const te = z(
  ({
    children: f,
    className: N,
    onReady: g = () => {
    },
    onPlay: y = () => {
    },
    onPause: v = () => {
    },
    onError: P = () => {
    },
    src: I,
    poster: n,
    title: C,
    sources: S = [],
    ...T
  }, w) => {
    const a = _(w), [s, x] = G(0), { handleLoadedMetaData: M, handleError: L, handleCanPlay: b, readyToPlay: k } = oe({
      embedRef: a,
      onError: P,
      onReady: g,
      setDuration: x
    }), { handlePlay: R, handleTogglePlay: V, handlePause: A, playMode: m } = ee({
      embedRef: a,
      onPlay: y,
      onPause: v
    }), { handleSetTime: D, currentTime: c } = ae({ embedRef: a, playMode: m }), { volume: j, handleSetVolume: E, muted: l, handleToggleMuted: F } = re({
      embedRef: a,
      mutedProp: !1
    }), { LocalRoot: B } = J(), O = H(() => ({ background: `url(${n})` }), [n]), W = m === d.pause || m === d.pristine ? K : Q;
    return /* @__PURE__ */ r(
      B,
      {
        ...T,
        theme: O,
        className: t(e.wrapper, N),
        children: [
          /* @__PURE__ */ r("div", { className: e.title, children: [
            /* @__PURE__ */ o(Z, { className: e.icon }),
            /* @__PURE__ */ o("span", { className: e.text, children: C || u(a.current?.currentSrc) }),
            /* @__PURE__ */ o(
              "a",
              {
                className: e.download,
                href: a.current?.currentSrc,
                download: u(a.current?.currentSrc),
                children: /* @__PURE__ */ o(Y, {})
              }
            )
          ] }),
          /* @__PURE__ */ r("div", { className: t(e.audio, { [e.noPoster]: !n }), children: [
            n && /* @__PURE__ */ o(ne, { className: e.poster, src: n, height: 111, width: 111 }),
            /* @__PURE__ */ o("div", { className: e.playWrapper, children: /* @__PURE__ */ o(
              "button",
              {
                onClick: V,
                className: t(e.playControl, {
                  [e.loading]: !k
                }),
                children: /* @__PURE__ */ o(W, { className: e.icon })
              }
            ) }),
            /* @__PURE__ */ r("div", { className: e.rangeControls, children: [
              /* @__PURE__ */ r("div", { className: e.control, children: [
                /* @__PURE__ */ r("div", { className: e.time, children: [
                  p(c),
                  "/",
                  p(s)
                ] }),
                /* @__PURE__ */ r("div", { className: e.volumeControl, children: [
                  /* @__PURE__ */ o("button", { className: e.mutedButton, onClick: F, children: l ? /* @__PURE__ */ o(X, { className: e.volumeIcon }) : /* @__PURE__ */ o(U, { className: e.volumeIcon }) }),
                  /* @__PURE__ */ o(
                    "input",
                    {
                      min: 0,
                      max: 1,
                      step: 0.01,
                      type: "range",
                      value: l ? 0 : j,
                      onChange: E,
                      className: t(
                        h.range,
                        e.volumeInput
                      )
                    }
                  )
                ] })
              ] }),
              /* @__PURE__ */ o("div", { className: e.control, children: /* @__PURE__ */ o(
                "input",
                {
                  onChange: D,
                  value: c,
                  type: "range",
                  className: t(
                    h.range,
                    e.navigationInput
                  ),
                  name: "seek",
                  min: 0,
                  max: s,
                  step: 1
                }
              ) })
            ] }),
            /* @__PURE__ */ o(
              "audio",
              {
                className: e.nativePlayer,
                ref: a,
                src: I,
                onPlay: R,
                onPause: A,
                onLoadedMetadata: M,
                onCanPlay: b,
                onError: L,
                muted: l,
                children: S.map(({ src: i, type: $, mediaCondition: q }) => /* @__PURE__ */ o("source", { src: i, type: $, media: q }, i))
              }
            ),
            f
          ] })
        ]
      }
    );
  }
);
te.displayName = "Audio";
export {
  te as Audio
};
//# sourceMappingURL=Audio.js.map