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