koval-ui/dist/src/lib/Video/Video.cjs

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

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),i=require("classnames"),oe=require("css-vars-hook"),g=require("../../internal/Icons/IconPlay.cjs"),re=require("../../internal/Icons/IconPause.cjs"),ce=require("../../internal/Icons/IconVolume.cjs"),ue=require("../../internal/Icons/IconVolumeOff.cjs"),ie=require("../../internal/Icons/IconFullscreen.cjs"),de=require("../../internal/Icons/IconPictureInPicture.cjs"),me=require("../../internal/Icons/IconDownloadVideo.cjs"),fe=require("../../internal/Icons/IconVideo.cjs"),he=require("../../internal/hooks/useInternalRef.cjs"),r=require("../../internal/MediaEmbeds/types.cjs"),Ne=require("../../internal/MediaEmbeds/usePlay.cjs"),j=require("../../internal/MediaEmbeds/getFileName.cjs"),xe=require("../../internal/MediaEmbeds/useLoadingState.cjs"),ge=require("../../internal/MediaEmbeds/useTime.cjs"),je=require("../../internal/MediaEmbeds/useSound.cjs"),y=require("../../internal/MediaEmbeds/RangeInput.module.css.cjs"),s=require("./Video.module.css.cjs"),ye=require("./useFullscreen.cjs"),I=(a=0)=>{const o=new Intl.NumberFormat(void 0,{minimumIntegerDigits:2}).format(Math.floor(a/60)),c=new Intl.NumberFormat(void 0,{minimumIntegerDigits:2}).format(Math.floor(a%60));return`${o}:${c}`},P=a=>typeof a=="string"?a:`${a}px`,p=l.forwardRef(({className:a,width:o="100%",height:c,poster:q,src:v,sources:b=[],loop:M=!1,muted:V=!1,preload:S="auto",autoPlay:C=!1,enablePictureInPicture:d=!0,showDownload:T=!0,enableFullscreen:F=!0,showControls:k=!0,showTitle:R=!0,title:m,onReady:D=()=>{},onError:L=()=>{},onPlay:w=()=>{},onPause:O=()=>{},...$},B)=>{const n=he.useInternalRef(B),{playMode:t,handleTogglePlay:f,handlePlay:E,handlePause:_}=Ne.usePlay({embedRef:n,onPlay:w,onPause:O}),[h,H]=l.useState(0),{handleLoadedMetaData:z,handleError:A,handleCanPlay:G,readyToPlay:J}=xe.useLoadingState({embedRef:n,onError:L,onReady:D,setDuration:H}),{isFullScreen:K,handleFullscreen:Q}=ye.useFullscreen(n),{volume:U,handleSetVolume:W,muted:u,handleToggleMuted:X}=je.useSound({embedRef:n,mutedProp:V}),{handleSetTime:Y,currentTime:N}=ge.useTime({embedRef:n,playMode:t}),Z=l.useMemo(()=>t===r.PlayModes.pause||t===r.PlayModes.pristine?g.IconPlay:re.IconPause,[t]),ee=l.useMemo(()=>u?ue.IconVolumeOff:ce.IconVolume,[u]),se=l.useCallback(()=>{n.current?.requestPictureInPicture?.()},[n]),{LocalRoot:ne}=oe.useLocalTheme(),ae=l.useMemo(()=>({width:P(o),height:P(c)}),[c,o]);return e.jsxs(ne,{theme:ae,className:s.default.container,children:[e.jsx("video",{...$,title:m,src:v,poster:q,className:i(s.default.video,a),controls:K,width:o,loop:M,muted:u,preload:S,autoPlay:C,disablePictureInPicture:!d,onCanPlay:G,onError:A,onLoadedMetadata:z,onPause:_,onPlay:E,ref:n,children:b.map(({src:x,type:te,mediaCondition:le})=>e.jsx("source",{src:x,type:te,media:le},x))}),t===r.PlayModes.pristine&&e.jsx("div",{className:s.default.overlayButton,children:e.jsx("button",{onClick:f,className:i({[s.default.loading]:!J}),children:e.jsx(g.IconPlay,{className:s.default.icon})})}),t!==r.PlayModes.pristine&&R&&e.jsxs("div",{className:s.default.overlayTitle,children:[e.jsx(fe.IconVideo,{className:s.default.icon}),e.jsx("span",{className:s.default.title,children:m||j.getFileName(n.current?.currentSrc)}),T&&e.jsx("a",{href:n.current?.currentSrc,download:j.getFileName(n.current?.currentSrc),className:s.default.button,children:e.jsx(me.IconDownloadVideo,{className:s.default.icon})})]}),t!==r.PlayModes.pristine&&k&&e.jsxs("div",{className:s.default.overlayControls,children:[e.jsx("div",{className:s.default.timelineContainer,children:e.jsx("input",{className:i(y.default.range,s.default.range),type:"range",onChange:Y,value:N,name:"seek",min:0,max:h,step:1})}),e.jsxs("div",{className:s.default.buttonsContainer,children:[e.jsxs("div",{className:s.default.left,children:[e.jsx("button",{className:s.default.buttonBig,onClick:f,children:e.jsx(Z,{className:s.default.icon})}),e.jsxs("div",{className:s.default.timeStamp,children:[e.jsx("span",{className:s.default.time,children:I(N)}),e.jsx("span",{className:s.default.spacer,children:"/"}),e.jsx("span",{className:s.default.time,children:I(h)})]})]}),e.jsxs("div",{className:s.default.right,children:[e.jsxs("fieldset",{className:s.default.volume,children:[e.jsx("button",{className:s.default.button,onClick:X,children:e.jsx(ee,{className:s.default.icon})}),e.jsx("input",{type:"range",name:"volume",min:0,max:1,step:.01,value:u?0:U,onChange:W,className:i(y.default.range,s.default.range)})]}),d&&e.jsx("button",{className:s.default.button,onClick:se,children:e.jsx(de.IconPictureInPicture,{className:s.default.icon})}),F&&e.jsx("button",{className:s.default.button,onClick:Q,children:e.jsx(ie.IconFullscreen,{className:s.default.icon})})]})]})]})]})});p.displayName="Video";exports.Video=p;
//# sourceMappingURL=Video.cjs.map