https://cdn.shopify.com/shopifycloud/world/brochure/production-homepage/assets/InlineVideo-CQTYGa_3.js

1import{I as e,N as t}from"./chunk-62JRHF6Z-D3Q3NlnB.js";import{t as n}from"./jsx-runtime-Cvx0fZjB.js";import{_ as r,j as i,r as a}from"./Wrapper-Dc1QKEQT.js";import{a as ee,r as o}from"./HeadingGroup-BbAVhMiB.js";var s=e(t(),1),c=e(r(),1),l=n(),te=({showPlayState:e})=>(0,l.jsxs)(`svg`,{className:(0,c.default)(`play-pause-svg inline max-h-[45px] max-w-[45px] rounded-full`,`bg-black/[.1] hover:bg-white/[.15] backdrop-blur-[2px]`,`transition-custom-[background-color_0.3s,opacity_0.3s,transform_0.3s_cubic-bezier(0.175,0.885,0.32,1.275)]`),viewBox:`0 0 40 40`,fill:`none`,children:[(0,l.jsx)(`circle`,{cx:`20`,cy:`20`,r:`19.05`,fill:`white`,fillOpacity:`0.2`,stroke:`black`,strokeWidth:`1.9`}),(0,l.jsx)(`path`,{className:(0,c.default)({inline:!e,hidden:e}),d:`M29.5527 20.1491L15.4483 28.2923L15.4483 12.0059L29.5527 20.1491Z`,stroke:`black`,strokeWidth:`1.9`,strokeLinejoin:`round`}),(0,l.jsxs)(`g`,{className:(0,c.default)({inline:e,hidden:!e}),children:[(0,l.jsx)(`path`,{d:`M15 28.2923L15 12.0059`,stroke:`black`,strokeWidth:`1.9`,strokeLinecap:`round`,strokeLinejoin:`round`}),(0,l.jsx)(`path`,{d:`M25 28.2864L25 12`,stroke:`black`,strokeWidth:`1.9`,strokeLinecap:`round`,strokeLinejoin:`round`})]})]});function u({video:e,isSafari:t,quality:n}){let r={};return t===null?r:(e.webmSrc&&!t&&(r.src=e.webmSrc,r.codec=`video/webm`),e.mp4Src&&t&&(r.src=e.mp4Src,r.codec=`video/mp4`),e.qualities&&n&&e.qualities[n]&&(e.qualities[n].webmSrc&&!t&&(r.src=e.qualities[n].webmSrc,r.codec=`video/webm`),e.qualities[n].mp4Src&&t&&(r.src=e.qualities[n].mp4Src,r.codec=`video/mp4`)),r)}function d({video:e}){if(!e.qualities)return null;let t=Object.keys(e.qualities).map(e=>parseInt(e.replace(`p`,``),10)).sort((e,t)=>e-t),n=Math.max(...t),r=navigator;if(navigator&&r.connection){let e=r.connection;e.downlink&&(e.downlink<10&&t[1]&&(n=t[1]),e.downlink<5&&t[0]&&(n=t[0]))}return`${n}p`}function f({video:e}){return e.currentTime>0&&!e.paused&&!e.ended&&e.readyState>2}function p({video:e,reduceMotion:t,isInView:n=!0,canLoadSource:r=!0,playButtonClassName:p,autoPlay:m=!0,loop:h=!0,muted:g=!0,showPlayButton:_=!0,usePoster:v=!1,preload:y=`auto`,onEnded:b,onTimeUpdate:x,className:S,videoContainerClassName:ne,videoClassName:C,reducedMotionImage:w,autoResponsiveImageProps:T,shouldPlay:E,gateOpacityOnCanLoadSource:D=!1,...O}){let k=(0,s.useRef)(null),A=(0,s.useRef)(null),[j,M]=(0,s.useState)(null),[N,P]=(0,s.useState)(null),[F,I]=(0,s.useState)(!1),[L,R]=(0,s.useState)(!0),[z,B]=(0,s.use

1State)(!1),[V,H]=(0,s.useState)(!1),[U,W]=(0,s.useState)(!1),G=F;!G&&k.current&&k.current.readyState>k.current.HAVE_CURRENT_DATA&&(G=!0);let K=u({video:e,quality:N,isSafari:j}),q=(0,s.useCallback)(()=>{let e=k.current;!e||A.current===e||(A.current=e,e.play().then(()=>{A.current===e&&(A.current=null,k.current===e&&W(!0))},()=>{A.current===e&&(A.current=null)}))},[]);(0,s.useEffect)(()=>{A.current=null,I(!1),B(!1),W(!1)},[K.src]),(0,s.useEffect)(()=>{n&&r&&E===void 0&&!z&&!U&&L&&q()},[n,r,E,z,L,U,q,K.src]),(0,s.useEffect)(()=>{E&&n&&r&&L&&q()},[E,n,r,L,q,K.src]),(0,s.useEffect)(()=>{!n&&k.current&&(k.current.pause(),W(!1))},[n,z,W]),(0,s.useEffect)(()=>{R(n)},[n]);let J=ee(`(prefers-reduced-motion: reduce)`)||t;(0,s.useEffect)(()=>{if(!k.current)return;let e=k.current,t=()=>{A.current=null,W(!0),B(!0)},n=()=>{B(!1)};return e.addEventListener(`play`,t),e.addEventListener(`pause`,n),()=>{e.removeEventListener(`play`,t),e.removeEventListener(`pause`,n)}},[k,e,K.src]),(0,s.useEffect)(()=>{M(/^((?!chrome|android).)*safari/i.test(a()))},[M]),(0,s.useEffect)(()=>{P(d({video:e}))},[e]);let Y=(0,s.useCallback)(()=>{!k.current||!G||(f({video:k.current})?(R(!1),k.current.pause()):(R(!0),k.current.play()))},[k,G]),X=e.image&&e.image.src?e.image.src:void 0;!X&&e.image&&e.image.srcSet&&(X=e.image.srcSet),(0,s.useEffect)(()=>{if(!x||!k.current)return;let e=0,t=()=>{k.current&&x(k.current),e=window.requestAnimationFrame(t)};return e=window.requestAnimationFrame(t),()=>{window.cancelAnimationFrame(e)}},[k,x]);let Z=i(`video-container h-full`,ne),Q=i(`h-full`,C),$=w||e.image,re=T||{sizes:`100vw`};return(0,l.jsxs)(`div`,{"aria-hidden":!0,className:i(`relative h-full`,S),...O,children:[K.src&&!J&&(0,l.jsxs)(`div`,{onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1),onFocus:()=>H(!0),onBlur:()=>H(!1),className:Z,style:{aspectRatio:e.aspectRatio?e.aspectRatio:void 0},children:[_&&(0,l.jsx)(`button`,{"aria-label":z?`Pause video`:`Play video`,"aria-pressed":z,"data-component-name":`${z?`pause`:`play`}-video`,className:i(`p-0 m-0 appearance overflow-hidden w-16 `,`h-16 absolute scale-100 z-10 transform transition-all`,`left-1 bottom-1`,`${G?``:`hidden`}`,`${z&&!V?`md:opacity-0`:`md:opacity-100`}`,p),onClick:Y,tabIndex:0,children:(0,l.jsx)(te,{showPlayState:z})}),(0,l.jsx)(`video`,{ref:k,className:i((0,c.default)(`opacity-0 transition-opacity ease-out-cubic duration-300`,{"opacity-100":G||v&&(!D||r)},Q)),autoPlay:m&&n,loop:h,muted:g,playsInline:!0,preload:y,poster:r&&v?X:void 0,onCanPlay:()=>I(!0),onCanPlayThrough:()=>I(!0),onLoadedData:()=>I(!0),onEnded:()=>b&&k.current&&b(k.current),onTimeUpdate:()=>x&&k.current&&x(k.current),children:r&&(0,l.jsx)(`source`,{src:K.src,type:K.codec})},K.src)]}),J&&r&&$&&$.src!==void 0&&(0,l.jsx)(`div`,{className:Z,children:(0,l.jsx)(o,{className:i(`object-contain`,Q),...$,...re,src:$.src})})]})}export{p as t};
2//# sourceMappingURL=InlineVideo-CQTYGa_3.js.map