https://motive.co/_nuxt/CnnbEy2J.js

1import{C as be,i as ye,_ as ge}from"./CI6BT9RK.js";import{d as re,a as le,X as ke,m as l,o as Fe,Y as H,Z as Re,O as Ee,e as h,f as y,$ as Me,g as s,k as n,P as Ce,N,i as ae,a0 as Le,Q as Ve,F as Se,r as Ae,h as P,n as v,q as Te,u as He,c as Ne,t as Pe,D as $e}from"./BMVpzGKs.js";import{g as Be}from"./B-Hlxotg.js";import"./BkhBzZ2i.js";const je=["aria-label"],Oe=["aria-label"],ze={key:0,class:"h-5 w-5",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},Ue={key:1,class:"h-5 w-5",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},We={class:"customer-video-showcase__stage relative z-10 flex min-h-0 flex-1 flex-col items-center justify-center px-4 py-4 sm:px-6 md:px-4 lg:px-6"},qe={class:"customer-video-showcase__side-logo hidden min-w-0 items-center justify-center px-3 md:flex lg:px-4 xl:px-6","aria-hidden":"true"},De=["src","poster","aria-label","onLoadedmetadata","onCanplay","onEnded"],Ie={class:"customer-video-showcase__side-feature hidden min-w-0 flex-col items-center justify-center px-3 text-center md:flex lg:px-4 xl:px-6"},Ge={class:"font-sans text-xs font-medium uppercase tracking-[0.22em] text-gray-500 lg:text-sm"},Xe={class:"mt-2 max-w-[12rem] font-sans text-2xl font-bold leading-[1.2] text-brand lg:max-w-[14rem] lg:text-3xl xl:max-w-[16rem] xl:text-4xl"},Ke={class:"customer-video-showcase__mobile-feature flex shrink-0 flex-col items-center text-center md:hidden"},Qe={class:"font-sans text-[10px] font-medium uppercase tracking-[0.22em] text-gray-500"},Ye={class:"mt-1.5 font-sans text-lg font-bold leading-snug text-brand"},ie=9,K=.9,Ze=2200,Je=re({__name:"video-showcase",setup(ce){const{t:u}=le(),c=ke("showcase-fullscreen",()=>!1),d=be.filter(e=>!ye(e)),g=l(0),f=l(0),p=l(!1),_=l(!0),w=l(!1),k=v({get:()=>c.value,set:e=>{c.value=e}}),m=l([null,null]),$=l(null),B=l(null),F=l(null),j=l(9/16),O=l(0),z=l(0),R=l([d[0],d[1]??d[0]]),ue=v(()=>d[g.value]),U=v(()=>u(`customers.featureReels.featureNames.${ue.value.featureId}`)),de=v(()=>u("customerVideos.featureVideoAria",{feature:U.value})),Q=v(()=>O.value>0&&z.value>0),fe=v(()=>Q.value?{width:`${O.value}px`,height:`${z.value}px`}:{width:"0px",height:"0px"});function x(){const e=$.value,t=B.value,o=F.value;if(!e)return;let i=e.clientHeight-ie*2,a=(t?.clientWidth??e.clientWidth)-ie*2;if((a<=0||i<=0)&&o&&(a=Math.max(a,o.clientWidth-48),i=Math.max(i,o.clientHeight-180)),a<=0||i<=0)return;const r=j.value;let G=i*K,A=G*r;A>a*K&&(A=a*K,G=A/r);let X=Math.floor(A),T=Math.round(X/r);T>i&&(T=Math.floor(G),X=Math.round(T*r)),O.value=Math.max(1,X),z.value=Math.max(1,T)}function W(e){e.videoWidth>0&&e.videoHeight>0&&(j.value=e.videoWidth/e.videoHeight),x()}function me(e,t){e===f.value&&W(t.target)}function Y(e){return(e+1)%d.length}function q(e){return e===0?1:0}function ve(e,t){const o=Array.isArray(t)?t[0]:t;m.value[e]=o}async function D(e){const t=m.value[e];if(t&&(t.muted=!0,t.defaultMuted=!0,t.playsInline=!0,!(!t.paused&&!t.ended&&t.currentTime>0))){try{(t.ended||t.currentTime>.05)&&(t.pause(),t.currentTime=0)}catch{}try{await t.play()}catch{}}}function Z(e){const t=m.value[e];t&&t.pause()}function he(e){e===f.value&&D(e)}function pe(e){if(e!==f.value||p.value||d.length<2)return;p.value=!0;const t=Y(g.value),o=q(f.value);g.value=t,f.value=o,H(async()=>{const i=m.value[o];i&&W(i),await D(o),Z(q(o));const a=q(o),r=[R.value[0],R.value[1]];r[a]=d[Y(t)],R.value=r,H(()=>{Z(a)}),window.setTimeout(()=>{p.value=!1},700)})}function J(e){document.documentElement.style.overflow=e?"hidden":"",document.body.style.overflow=e?"hidden":""}function E(){const e=document;return document.fullscreenElement??e.webkitFullscreenElement??null}function I(){const e=E();return e?e===F.value||e===document.documentElement||e===document.body:!1}function _e(){const e=F.value,t=document.documentElement,o=e??t;try{if(typeof o.requestFullscreen=="function")return Promise.resolve(o.requestFullscreen()).then(()=>!0).catch(()=>!1);if(typeof o.webkitRequestFullscreen=="function")return Promise.resolve(o.webkitRequestFullscreen()).then(()=>!0).catch(()=>!1);if(typeof o.webkitRequestFullScreen=="function")return Promise.resolve(o.webkitRequestFullScreen()).then(()=>!0).catch(()=>!1)}catch{return Promise.resolve(!1)}return Promise.resolve(!1)}async function ee(){if(!E())return;const e=document;try{if(typeof document.exitFullscreen=="function"){await document.exitFullscreen();return}

1if(typeof e.webkitExitFullscreen=="function"){await e.webkitExitFullscreen();return}typeof e.webkitCancelFullScreen=="function"&&await e.webkitCancelFullScreen()}catch{}}function b(e,t=!1){c.value=e,w.value=e&&t,J(e&&t),e?(L(),te()):(L(),C()),H(()=>{x()})}let M;function C(){M!==void 0&&(clearTimeout(M),M=void 0)}function L(){_.value=!0,C()}function te(){if(C(),!c.value){_.value=!0;return}M=setTimeout(()=>{_.value=!1},Ze)}function oe(){L(),te()}function we(){_e().then(t=>{if(t||I()){b(!0,!1);return}b(!0,!0)})}async function se(){E()&&await ee(),b(!1)}function xe(){if(c.value||I()){se();return}we()}function V(){if(I()){b(!0,!1);return}!w.value&&c.value&&b(!1)}function ne(e){e.key==="Escape"&&w.value&&se()}let S;return Fe(()=>{const e=$.value,t=B.value;typeof ResizeObserver<"u"&&(S=new ResizeObserver(()=>{x()}),e&&S.observe(e),t&&S.observe(t)),document.addEventListener("fullscreenchange",V),document.addEventListener("webkitfullscreenchange",V),window.addEventListener("keydown",ne),H(()=>{x();const o=m.value[f.value];o&&W(o),D(f.value)})}),Re(()=>{S?.disconnect(),document.removeEventListener("fullscreenchange",V),document.removeEventListener("webkitfullscreenchange",V),window.removeEventListener("keydown",ne),C(),E()&&ee(),c.value=!1,w.value=!1,J(!1),m.value.forEach(e=>e?.pause())}),Ee(j,()=>{x()}),(e,t)=>{const o=ge;return h(),y("section",{ref_key:"playerRootRef",ref:F,class:N(["customer-video-showcase relative flex h-full min-h-0 flex-1 flex-col overflow-hidden",{"customer-video-showcase--cursor-hidden":n(k)&&!n(_),"customer-video-showcase--css-fullscreen":n(w)}]),"aria-label":n(u)("customerVideos.ariaLabel"),onMousemove:oe,onTouchstartPassive:oe},[t[2]||(t[2]=Me('<div class="customer-video-showcase__ambient" aria-hidden="true" data-v-e8afb8a5><span class="customer-video-showcase__blob customer-video-showcase__blob--peach" data-v-e8afb8a5></span><span class="customer-video-showcase__blob customer-video-showcase__blob--blue" data-v-e8afb8a5></span><span class="customer-video-showcase__blob customer-video-showcase__blob--yellow" data-v-e8afb8a5></span><span class="customer-video-showcase__blob customer-video-showcase__blob--pink" data-v-e8afb8a5></span></div>',1)),s("button",{type:"button",class:N(["customer-video-showcase__fullscreen-btn",{"customer-video-showcase__fullscreen-btn--hidden":n(k)&&!n(_)}]),"aria-label":n(k)?n(u)("customerVideos.fullscreen.exitAria"):n(u)("customerVideos.fullscreen.enterAria"),onClick:Ce(xe,["stop"]),onFocus:L},[n(k)?(h(),y("svg",Ue,[...t[1]||(t[1]=[s("path",{d:"M8 3v3a2 2 0 0 1-2 2H3"},null,-1),s("path",{d:"M21 8h-3a2 2 0 0 1-2-2V3"},null,-1),s("path",{d:"M3 16h3a2 2 0 0 1 2 2v3"},null,-1),s("path",{d:"M16 21v-3a2 2 0 0 1 2-2h3"},null,-1)])])):(h(),y("svg",ze,[...t[0]||(t[0]=[s("path",{d:"M8 3H5a2 2 0 0 0-2 2v3"},null,-1),s("path",{d:"M16 3h3a2 2 0 0 1 2 2v3"},null,-1),s("path",{d:"M8 21H5a2 2 0 0 1-2-2v-3"},null,-1),s("path",{d:"M16 21h3a2 2 0 0 0 2-2v-3"},null,-1)])]))],42,Oe),s("div",We,[s("div",{ref_key:"layoutRef",ref:B,class:"customer-video-showcase__layout grid min-h-0 w-full flex-1 grid-cols-1 grid-rows-[minmax(0,1fr)_auto] items-center gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:grid-rows-1 md:gap-0"},[s("div",qe,[ae(n(Le),{class:"h-auto w-28 text-gray-900 lg:w-36 xl:w-44"})]),s("div",{ref_key:"hostRef",ref:$,class:"relative flex h-full min-h-0 w-full items-center justify-center md:w-auto"},[s("div",{class:N(["customer-video-showcase__frame",{"customer-video-showcase__frame--ready":n(Q)}])},[s("div",{class:"customer-video-showcase__media",style:Ve(n(fe))},[(h(!0),y(Se,null,Ae(n(R),(i,a)=>(h(),y("video",{key:`${a}-${i.id}`,ref_for:!0,ref:r=>ve(a,r),class:N(["customer-video-showcase__video absolute bg-white object-cover transition-opacity duration-700 ease-in-out",n(f)===a?"opacity-100":"opacity-0"]),src:i.videoUrl,poster:i.posterUrl,muted:"",playsinline:"",preload:"auto","aria-label":n(de),onLoadedmetadata:r=>me(a,r),onCanplay:r=>he(a),onEnded:r=>pe(a)},null,42,De))),128))],4)],2)],512),s("div",Ie,[s("p",Ge,P(n(u)("customerVideos.featureLabel")),1),s("p",Xe,P(n(U)),1)]),s("div",Ke,[s("p",Qe,P(n(u)("customerVideos.featureLabel")),1),s("p",Ye,P(n(U)),1)])],512)]),ae(o,{class:"customer-video-showcase__logos relative z-10 pb-4 sm:pb-6","duration-seconds":120})],42,je)}}}),et=Object.assign(Te(Je,[["__scopeId","data-v-e8afb8a5"]]),{__name:"CustomerVideoShowcase"}),at=re({__name:"customer-videos",setup(ce){const{public:{baseUrl:u}}=He(),{t:c,locale:d}=le();return Ne({meta:Be(c("customerVideos.meta.title"),c("customerVideos.meta.description"),c("customerVideos.meta.url"),Pe(u,`/og_images/customers_${d.value}.jpg`),c("customerVideos.meta.imageAlt"))}),(g,f)=>{const p=et;return h(),$e(p,{class:"min-h-0 flex-1"})}}});

1export{at as default};