{"version":3,"file":"Project_Tile_Flexible.BXofh-Rz.mjs","names":["useState","useRef","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/wE9QsrCSw9zTTyr2EirJ/dSMtI4nNdYqPj3jon9Jz/Project_Tile_Flexible.js"],"sourcesContent":["// ProjectTileGrid.tsx\n// User request: keep desktop hover-video behavior unchanged, and add mobile/touch scroll-band autoplay\n// with matchMedia detection, single-active-tile coordination, and autoplay safety guards.\n// Code component for work grid and homepage featured grid.\n// Image sets the tile height naturally. Video covers on hover.\n// Optional hover image as alternate hover state.\n// Text bar sits flush below image with black background.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{startTransition,useCallback,useEffect,useMemo,useRef,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";let activeMobileTileId=null;let deactivateActiveMobileTile=null;function activateMobileTile(tileId,deactivateCurrentTile){if(activeMobileTileId!==tileId&&deactivateActiveMobileTile){deactivateActiveMobileTile();}activeMobileTileId=tileId;deactivateActiveMobileTile=deactivateCurrentTile;}function releaseMobileTile(tileId){if(activeMobileTileId===tileId){activeMobileTileId=null;deactivateActiveMobileTile=null;}}/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ProjectTileGrid({coverImage=\"\",hoverVideoUrl=\"\",hoverImage=\"\",title=\"Project Title\",client=\"Client\",projectType=\"Info\",categoryDisplay=\"Category\",slug=\"\",pathPrefix=\"/projects/\",radius=10,mobileScrollAutoplay=true}){const[hovered,setHovered]=useState(false);const[mobileAutoActive,setMobileAutoActive]=useState(false);const tileRef=useRef(null);const videoRef=useRef(null);const tileIdRef=useRef(Symbol(\"project-tile\"));const mobileAutoEligibleRef=useRef(false);const hoverActive=useMemo(()=>hovered||mobileAutoActive,[hovered,mobileAutoActive]);const handleClick=()=>{if(slug&&typeof window!==\"undefined\"){window.location.href=`${pathPrefix}${slug}`;}};const stopMobilePlayback=useCallback(()=>{startTransition(()=>setMobileAutoActive(false));releaseMobileTile(tileIdRef.current);const video=videoRef.current;if(video){video.pause();video.currentTime=0;video.removeAttribute(\"src\");video.load();}},[]);const startMobilePlayback=useCallback(()=>{if(!mobileAutoEligibleRef.current||!hoverVideoUrl)return;activateMobileTile(tileIdRef.current,stopMobilePlayback);startTransition(()=>setMobileAutoActive(true));},[hoverVideoUrl,stopMobilePlayback]);useEffect(()=>{if(typeof window===\"undefined\")return;const coarseQuery=window.matchMedia(\"(hover: none) and (pointer: coarse)\");const mobileWidthQuery=window.matchMedia(\"(max-width: 767.98px)\");const reducedMotionQuery=window.matchMedia(\"(prefers-reduced-motion: reduce)\");const updateEligibility=()=>{const isCoarseNoHover=coarseQuery.matches;const isMobileWidth=mobileWidthQuery.matches;const prefersReducedMotion=reducedMotionQuery.matches;const saveData=typeof navigator!==\"undefined\"&&\"connection\"in navigator&&Boolean(navigator.connection?.saveData);const mobileMode=isCoarseNoHover&&isMobileWidth;mobileAutoEligibleRef.current=mobileScrollAutoplay&&mobileMode&&!prefersReducedMotion&&!saveData;if(!mobileAutoEligibleRef.current){stopMobilePlayback();}};updateEligibility();coarseQuery.addEventListener(\"change\",updateEligibility);mobileWidthQuery.addEventListener(\"change\",updateEligibility);reducedMotionQuery.addEventListener(\"change\",updateEligibility);return()=>{coarseQuery.removeEventListener(\"change\",updateEligibility);mobileWidthQuery.removeEventListener(\"change\",updateEligibility);reducedMotionQuery.removeEventListener(\"change\",updateEligibility);};},[mobileScrollAutoplay,stopMobilePlayback]);useEffect(()=>{if(typeof window===\"undefined\")return;if(!tileRef.current)return;if(!hoverVideoUrl)return;const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(!mobileAutoEligibleRef.current)return;if(entry.isIntersecting&&entry.intersectionRatio>=.5){startMobilePlayback();}else{stopMobilePlayback();}});},{root:null,rootMargin:\"-30% 0px -30% 0px\",threshold:[.5]});observer.observe(tileRef.current);return()=>{observer.disconnect();stopMobilePlayback();};},[hoverVideoUrl,startMobilePlayback,stopMobilePlayback]);return /*#__PURE__*/_jsxs(\"div\",{ref:tileRef,onClick:handleClick,onMouseEnter:()=>{startTransition(()=>setHovered(true));},onMouseLeave:()=>{startTransition(()=>setHovered(false));},style:{width:\"100%\",position:\"relative\",borderRadius:`${radius}px`,overflow:\"hidden\",cursor:slug?\"pointer\":\"default\",display:\"flex\",flexDirection:\"column\",border:\"1px solid #EDEAE4\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\"},children:[coverImage&&/*#__PURE__*/_jsx(\"img\",{src:coverImage,style:{width:\"100%\",height:\"auto\",display:\"block\"}}),hoverVideoUrl&&hoverActive&&/*#__PURE__*/_jsx(\"video\",{ref:videoRef,src:hoverVideoUrl,autoPlay:true,loop:true,muted:true,playsInline:true,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}}),hoverImage&&!hoverVideoUrl&&hoverActive&&/*#__PURE__*/_jsx(\"img\",{src:hoverImage,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}})]}),/*#__PURE__*/_jsxs(\"div\",{style:{background:\"#000000\",padding:\"10px\",display:\"grid\",gridTemplateColumns:\"1fr 1fr\",rowGap:\"2px\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{fontFamily:\"'Public Sans', sans-serif\",fontWeight:500,fontSize:\"15px\",fontFeatureSettings:\"'salt' on\",color:\"#EDEAE4\",letterSpacing:\"-0.03em\",lineHeight:\"1.2em\",whiteSpace:\"nowrap\",overflow:\"hidden\",textOverflow:\"ellipsis\"},children:title}),/*#__PURE__*/_jsx(\"span\",{style:{fontFamily:\"'Public Sans', sans-serif\",fontWeight:500,fontSize:\"15px\",fontFeatureSettings:\"'salt' on\",color:\"#EDEAE4\",letterSpacing:\"-0.03em\",lineHeight:\"1.2em\",textAlign:\"right\",whiteSpace:\"nowrap\",overflow:\"hidden\",textOverflow:\"ellipsis\"},children:client}),/*#__PURE__*/_jsx(\"span\",{style:{fontFamily:\"'Public Sans', sans-serif\",fontWeight:500,fontSize:\"15px\",fontFeatureSettings:\"'salt' on\",color:\"#8A8A8A\",letterSpacing:\"-0.02em\",lineHeight:\"1.2em\",whiteSpace:\"nowrap\",overflow:\"hidden\",textOverflow:\"ellipsis\"},children:projectType}),/*#__PURE__*/_jsx(\"span\",{style:{fontFamily:\"'Public Sans', sans-serif\",fontWeight:500,fontSize:\"15px\",fontFeatureSettings:\"'salt' on\",color:\"#8A8A8A\",letterSpacing:\"-0.02em\",lineHeight:\"1.2em\",textAlign:\"right\",whiteSpace:\"nowrap\",overflow:\"hidden\",textOverflow:\"ellipsis\"},children:categoryDisplay})]})]});}addPropertyControls(ProjectTileGrid,{coverImage:{type:ControlType.Image,title:\"Cover Image\"},hoverVideoUrl:{type:ControlType.String,title:\"Hover Video URL\",placeholder:\"Framer CDN URL\",description:\"Uploaded MP4 from Framer assets page\"},hoverImage:{type:ControlType.Image,title:\"Hover Image\",description:\"Optional — only used if no Hover Video URL is set\"},title:{type:ControlType.String,title:\"Title\",defaultValue:\"Project Title\"},client:{type:ControlType.String,title:\"Client\",defaultValue:\"Client\"},projectType:{type:ControlType.String,title:\"Info\",defaultValue:\"Info\"},categoryDisplay:{type:ControlType.String,title:\"Categories\",defaultValue:\"Category\"},slug:{type:ControlType.String,title:\"Slug\",placeholder:\"project-slug\",description:\"CMS slug field — binds to Projects collection\"},pathPrefix:{type:ControlType.String,title:\"Path Prefix\",defaultValue:\"/projects/\",description:\"Prepended to slug to form the full URL\"},radius:{type:ControlType.Number,title:\"Corner Radius\",defaultValue:10},mobileScrollAutoplay:{type:ControlType.Boolean,title:\"Mobile Scroll Autoplay\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProjectTileGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Project_Tile_Flexible.map"],"mappings":"oOAO8P,SAAS,EAAmB,EAAO,EAAsB,CAAI,IAAqB,GAAQ,GAA4B,EAA2B,EAAG,EAAmB,EAAO,EAA2B,CAAsB,CAAC,SAAS,EAAkB,EAAO,CAAI,IAAqB,IAAQ,EAAmB,KAAK,EAA2B,KAAM,CAGvlB,SAAwB,EAAgB,CAAC,aAAW,GAAG,gBAAc,GAAG,aAAW,GAAG,QAAM,gBAAgB,SAAO,SAAS,cAAY,OAAO,kBAAgB,WAAW,OAAK,GAAG,aAAW,aAAa,SAAO,GAAG,uBAAqB,IAAM,CAAC,GAAK,CAAC,EAAQ,GAAYA,EAAS,EAAK,EAAO,CAAC,EAAiB,GAAqBA,EAAS,EAAK,EAAQ,EAAQC,EAAO,IAAI,EAAQ,EAASA,EAAO,IAAI,EAAQ,EAAUA,EAAO,OAAO,cAAc,CAAC,EAAQ,EAAsBA,EAAO,EAAK,EAAQ,EAAYC,MAAY,GAAS,EAAiB,CAAC,EAAQ,CAAgB,CAAC,EAAQ,MAAgB,CAAI,GAAa,IAAS,SAAa,EAAO,SAAS,KAAK,GAAG,IAAa,IAAQ,EAAQ,EAAmBC,MAAgB,CAAC,MAAoB,EAAoB,EAAK,CAAC,EAAE,EAAkB,EAAU,OAAO,EAAE,IAAM,EAAM,EAAS,QAAW,IAAO,EAAM,MAAM,EAAE,EAAM,YAAY,EAAE,EAAM,gBAAgB,KAAK,EAAE,EAAM,KAAK,EAAG,EAAE,CAAC,CAAC,EAAQ,EAAoBA,MAAgB,CAAI,CAAC,EAAsB,SAAS,CAAC,IAAqB,EAAmB,EAAU,QAAQ,CAAkB,EAAE,MAAoB,EAAoB,EAAI,CAAC,EAAE,EAAE,CAAC,EAAc,CAAkB,CAAC,EAAutD,OAArtD,MAAc,CAAC,GAAU,IAAS,OAAY,OAAO,IAAM,EAAY,EAAO,WAAW,qCAAqC,EAAQ,EAAiB,EAAO,WAAW,uBAAuB,EAAQ,EAAmB,EAAO,WAAW,kCAAkC,EAAQ,MAAsB,CAAC,IAAM,EAAgB,EAAY,QAAc,EAAc,EAAiB,QAAc,EAAqB,EAAmB,QAAc,EAAgB,IAAY,QAAa,eAAe,GAAW,EAAQ,EAAU,YAAY,SAA0D,EAAsB,QAAQ,GAA7D,GAAiB,GAA8E,CAAC,GAAsB,CAAC,EAAa,EAAsB,SAAS,EAAmB,CAAG,EAA6M,OAA3M,EAAkB,EAAE,EAAY,iBAAiB,SAAS,CAAiB,EAAE,EAAiB,iBAAiB,SAAS,CAAiB,EAAE,EAAmB,iBAAiB,SAAS,CAAiB,MAAY,CAAC,EAAY,oBAAoB,SAAS,CAAiB,EAAE,EAAiB,oBAAoB,SAAS,CAAiB,EAAE,EAAmB,oBAAoB,SAAS,CAAiB,CAAE,CAAE,EAAE,CAAC,EAAqB,CAAkB,CAAC,EAAE,MAAc,CAAkE,GAAvD,IAAS,QAAsB,CAAC,EAAQ,SAAkB,CAAC,EAAc,OAAO,IAAM,EAAS,IAAI,qBAAqB,GAAS,CAAC,EAAQ,QAAQ,GAAO,CAAK,EAAsB,UAAkB,EAAM,gBAAgB,EAAM,mBAAmB,GAAI,EAAoB,EAAQ,EAAmB,EAAG,CAAC,CAAE,EAAE,CAAC,KAAK,KAAK,WAAW,oBAAoB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAoC,OAAlC,EAAS,QAAQ,EAAQ,OAAO,MAAY,CAAC,EAAS,WAAW,EAAE,EAAmB,CAAE,CAAE,EAAE,CAAC,EAAc,EAAoB,CAAkB,CAAC,EAAsB,EAAM,MAAM,CAAC,IAAI,EAAQ,QAAQ,EAAY,iBAAiB,CAAC,MAAoB,EAAW,EAAI,CAAC,CAAE,EAAE,iBAAiB,CAAC,MAAoB,EAAW,EAAK,CAAC,CAAE,EAAE,MAAM,CAAC,MAAM,OAAO,SAAS,WAAW,aAAa,GAAG,EAAO,IAAI,SAAS,SAAS,OAAO,EAAK,UAAU,UAAU,QAAQ,OAAO,cAAc,SAAS,OAAO,mBAAmB,EAAE,SAAS,CAAc,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,MAAM,EAAE,SAAS,CAAC,GAAyB,EAAK,MAAM,CAAC,IAAI,EAAW,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,CAAC,CAAC,EAAE,GAAe,GAA0B,EAAK,QAAQ,CAAC,IAAI,EAAS,IAAI,EAAc,SAAS,GAAK,KAAK,GAAK,MAAM,GAAK,YAAY,GAAK,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,QAAQ,OAAO,CAAC,CAAC,EAAE,GAAY,CAAC,GAAe,GAA0B,EAAK,MAAM,CAAC,IAAI,EAAW,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,UAAU,QAAQ,QAAQ,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAe,EAAM,MAAM,CAAC,MAAM,CAAC,WAAW,UAAU,QAAQ,OAAO,QAAQ,OAAO,oBAAoB,UAAU,OAAO,KAAK,EAAE,SAAS,CAAc,EAAK,OAAO,CAAC,MAAM,CAAC,WAAW,4BAA4B,WAAW,IAAI,SAAS,OAAO,oBAAoB,YAAY,MAAM,UAAU,cAAc,UAAU,WAAW,QAAQ,WAAW,SAAS,SAAS,SAAS,aAAa,UAAU,EAAE,SAAS,CAAK,CAAC,EAAe,EAAK,OAAO,CAAC,MAAM,CAAC,WAAW,4BAA4B,WAAW,IAAI,SAAS,OAAO,oBAAoB,YAAY,MAAM,UAAU,cAAc,UAAU,WAAW,QAAQ,UAAU,QAAQ,WAAW,SAAS,SAAS,SAAS,aAAa,UAAU,EAAE,SAAS,CAAM,CAAC,EAAe,EAAK,OAAO,CAAC,MAAM,CAAC,WAAW,4BAA4B,WAAW,IAAI,SAAS,OAAO,oBAAoB,YAAY,MAAM,UAAU,cAAc,UAAU,WAAW,QAAQ,WAAW,SAAS,SAAS,SAAS,aAAa,UAAU,EAAE,SAAS,CAAW,CAAC,EAAe,EAAK,OAAO,CAAC,MAAM,CAAC,WAAW,4BAA4B,WAAW,IAAI,SAAS,OAAO,oBAAoB,YAAY,MAAM,UAAU,cAAc,UAAU,WAAW,QAAQ,UAAU,QAAQ,WAAW,SAAS,SAAS,SAAS,aAAa,UAAU,EAAE,SAAS,CAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,yBAH/gK,IAAiF,IAAoD,EAAK,EAAmB,KAAS,EAA2B,KAG+0J,EAAoB,EAAgB,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,EAAE,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,YAAY,iBAAiB,YAAY,sCAAsC,EAAE,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,YAAY,mDAAmD,EAAE,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,eAAe,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,QAAQ,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,aAAa,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,UAAU,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,OAAO,YAAY,eAAe,YAAY,+CAA+C,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,aAAa,YAAY,wCAAwC,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,EAAE,qBAAqB,CAAC,KAAK,EAAY,QAAQ,MAAM,yBAAyB,aAAa,GAAK,aAAa,KAAK,cAAc,KAAK,CAAC,CAAC"}