@wethegit/react-autoplay-video/dist/react-autoplay-video.cjs

Viewport-aware auto-playing video component for use in React projects.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("react");function x(t=0,n=!1,o=!1){const[v,l]=e.useState(!1),[u,p]=e.useState(),c=e.useMemo(()=>typeof t=="number"?{threshold:t}:t,[t]),f=e.useCallback(([a],_)=>{const s=a.isIntersecting||o&&a.boundingClientRect.top<0;l(s),n&&s&&_.unobserve(a.target)},[n,o]),i=e.useMemo(()=>{if(typeof IntersectionObserver=="function")return new IntersectionObserver(f,c)},[c,f]);return e.useEffect(()=>{if(!(!u||!i))return i.observe(u),()=>{i&&i.unobserve(u)}},[i,u]),[p,v,u]}e.createContext({});function I(t=[]){if(!t||!Array.isArray(t)||!t.length)return;const n=[];return t.forEach(o=>{typeof o=="string"&&n.push(o)}),n.flat().join(" ")}const y={"autoplay-video-util-visually-hidden":"autoplay-video-module__autoplay-video-util-visually-hidden__8V1fsw","autoplay-video":"autoplay-video-module__autoplay-video__MGv7xR","autoplay-video__media":"autoplay-video-module__autoplay-video__media__yVnB8-"};function V({className:t,description:n="",paused:o=!1,posterImg:v,prefersReducedMotion:l=!1,renderReducedMotionFallback:u,src:p,loop:c=!0,...f}){const[i,a]=e.useState(!1),[_,s]=x(0),h=e.useId(),m=e.useRef(null),b=()=>{const d=m?.current;d&&d.pause()},j=()=>{const d=m?.current;!d||o||d.play()};return e.useEffect(()=>{s&&a(!0)},[s]),e.useEffect(()=>{i&&(o?b():s&&!o?j():b())},[s,i,o,l]),r.jsx("div",{className:I([y["autoplay-video"],t]),...f,ref:_,children:l&&typeof u=="function"?r.jsx("div",{className:y["autoplay-video__media"],children:u()}):r.jsxs(r.Fragment,{children:[n&&r.jsx("p",{id:h,className:y["visually-hidden"],children:n}),r.jsx("video",{"aria-describedby":h,autoPlay:!0,className:y["autoplay-video__media"],loop:c,muted:!0,playsInline:!0,poster:v,ref:m,src:i?p:void 0})]})})}exports.AutoplayVideo=V;