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