{"version":3,"file":"ImageVideoCarousel.gjdr9set.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/VAhIljOLGYPLkpVtiEWj/QRXpflPMf2u8RzYiMpoY/ImageVideoCarousel.js"],"sourcesContent":["// ImageVideoCarousel.tsx\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useRef,useEffect}from\"react\";import{addPropertyControls,ControlType,motion}from\"framer\";export default function ImageVideoCarousel(props){const{items,gap,showArrows,pauseOnLeave}=props;const[activeIndex,setActiveIndex]=useState(null);const[scrollIndex,setScrollIndex]=useState(0);const videoRefs=useRef([]);// Track mute state per item so the icon updates correctly\nconst[mutedStates,setMutedStates]=useState(()=>props.items.map(()=>true));// Keep mutedStates in sync if items length changes\nuseEffect(()=>{setMutedStates(prev=>items.map((_,i)=>prev[i]!==undefined?prev[i]:true));},[items]);const containerRef=useRef(null);// Play/pause videos when activeIndex or mute states change\nuseEffect(()=>{videoRefs.current.forEach((video,i)=>{if(!video)return;if(activeIndex===i){try{video.muted=mutedStates[i]??true;video.play();}catch{// ignore autoplay issues\n}}else{video.pause();video.currentTime=0;}});},[activeIndex,mutedStates]);const handleActivate=index=>{setActiveIndex(prev=>prev===index?null:index);};const handleMouseLeaveItem=index=>{if(!pauseOnLeave)return;if(activeIndex===index)setActiveIndex(null);};const toggleMuteForIndex=index=>{setMutedStates(prev=>{const next=[...prev];const current=prev[index]??true;next[index]=!current;return next;});const video=videoRefs.current[index];if(video){const newMuted=!(mutedStates[index]??true);video.muted=newMuted;video.play().catch(()=>{});}};// Simple arrow scrolling (by one card width)\nconst scrollByCard=direction=>{if(!containerRef.current)return;const cardWidth=256+gap// width + gap\n;const newIndex=Math.max(0,Math.min(items.length-1,scrollIndex+(direction===\"right\"?1:-1)));setScrollIndex(newIndex);containerRef.current.scrollTo({left:newIndex*cardWidth,behavior:\"smooth\"});};return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",position:\"relative\",overflow:\"hidden\",boxSizing:\"border-box\"},children:[showArrows&&items.length>1&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:()=>scrollByCard(\"left\"),style:{position:\"absolute\",left:8,top:\"50%\",transform:\"translateY(-50%)\",zIndex:10,border:\"none\",borderRadius:999,padding:\"6px 10px\",background:\"rgba(0,0,0,0.5)\",color:\"#fff\",cursor:\"pointer\",fontSize:12},children:\"‹\"}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:()=>scrollByCard(\"right\"),style:{position:\"absolute\",right:8,top:\"50%\",transform:\"translateY(-50%)\",zIndex:10,border:\"none\",borderRadius:999,padding:\"6px 10px\",background:\"rgba(0,0,0,0.5)\",color:\"#fff\",cursor:\"pointer\",fontSize:12},children:\"›\"})]}),/*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"row\",overflowX:\"scroll\",overflowY:\"hidden\",gap,padding:gap,boxSizing:\"border-box\",scrollBehavior:\"smooth\",alignItems:\"flex-start\"},children:items.map((item,index)=>{const isActive=activeIndex===index;const isMuted=mutedStates[index]??true;return /*#__PURE__*/_jsxs(\"div\",{onMouseEnter:()=>handleActivate(index),onMouseLeave:()=>handleMouseLeaveItem(index),onClick:()=>handleActivate(index),style:{flex:\"0 0 auto\",width:256,height:455,borderRadius:16,overflow:\"hidden\",position:\"relative\",cursor:\"pointer\",background:\"#111\"},children:[/*#__PURE__*/_jsx(motion.img,{src:item.image,alt:item.alt||`Slide ${index+1}`,initial:{opacity:1},animate:{opacity:isActive?0:1},transition:{duration:.3},style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}}),/*#__PURE__*/_jsxs(motion.div,{initial:{opacity:0},animate:{opacity:isActive?1:0},transition:{duration:.3},style:{position:\"absolute\",inset:0},children:[/*#__PURE__*/_jsx(\"video\",{ref:el=>{videoRefs.current[index]=el;},src:item.video,muted:isMuted,loop:true,playsInline:true,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"},onClick:e=>{// Click directly on the video toggles audio\ne.stopPropagation();toggleMuteForIndex(index);}}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",onClick:e=>{e.stopPropagation();toggleMuteForIndex(index);},style:{position:\"absolute\",bottom:12,left:12,width:32,height:32,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius:999,border:\"none\",background:\"rgba(0,0,0,0.65)\",cursor:\"pointer\",opacity:isActive?1:0,transition:\"opacity 0.2s\",padding:0},children:isMuted?// Muted icon: speaker with slash\n/*#__PURE__*/_jsxs(\"svg\",{width:\"18\",height:\"18\",viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:[/*#__PURE__*/_jsx(\"path\",{d:\"M4 9V15H8L13 20V13.8M13 10.2V4L8 9H6.8\",stroke:\"white\",strokeWidth:\"1.8\",strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M16 9L20 15\",stroke:\"white\",strokeWidth:\"1.8\",strokeLinecap:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M20 9L16 15\",stroke:\"white\",strokeWidth:\"1.8\",strokeLinecap:\"round\"})]}):// Unmuted icon: speaker with waves\n/*#__PURE__*/_jsxs(\"svg\",{width:\"18\",height:\"18\",viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:[/*#__PURE__*/_jsx(\"path\",{d:\"M4 9V15H8L13 20V4L8 9H4Z\",stroke:\"white\",strokeWidth:\"1.8\",strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M16 9.5C16.6 10.3 16.95 11.13 16.95 12C16.95 12.87 16.6 13.7 16 14.5\",stroke:\"white\",strokeWidth:\"1.8\",strokeLinecap:\"round\",strokeLinejoin:\"round\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M18.5 7.5C19.5 8.8 20 10.33 20 12C20 13.67 19.5 15.2 18.5 16.5\",stroke:\"white\",strokeWidth:\"1.8\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})]})})]}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:8,right:10,padding:\"3px 8px\",borderRadius:999,background:\"rgba(0,0,0,0.55)\",color:\"white\",fontSize:10,letterSpacing:.3,textTransform:\"uppercase\",pointerEvents:\"none\"},children:\"Hover / Tap to play\"})]},index);})})]});}// Default props for preview\nImageVideoCarousel.defaultProps={items:[{image:\"https://images.pexels.com/photos/847402/pexels-photo-847402.jpeg\",video:\"https://www.w3schools.com/html/mov_bbb.mp4\",alt:\"Sample 1\"},{image:\"https://images.pexels.com/photos/1183266/pexels-photo-1183266.jpeg\",video:\"https://www.w3schools.com/html/movie.mp4\",alt:\"Sample 2\"},{image:\"https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg\",video:\"https://www.w3schools.com/html/mov_bbb.mp4\",alt:\"Sample 3\"}],gap:16,showArrows:true,pauseOnLeave:true};// Framer property controls\naddPropertyControls(ImageVideoCarousel,{items:{type:ControlType.Array,title:\"Items\",propertyControl:{type:ControlType.Object,controls:{image:{type:ControlType.Image,title:\"Image\"},video:{type:ControlType.File,title:\"Video\",allowedFileTypes:[\"mp4\",\"mov\",\"webm\"]},alt:{type:ControlType.String,title:\"Alt text\",defaultValue:\"\"}}}},gap:{type:ControlType.Number,title:\"Gap\",min:0,max:64,step:1,defaultValue:16},showArrows:{type:ControlType.Boolean,title:\"Arrows\",defaultValue:true},pauseOnLeave:{type:ControlType.Boolean,title:\"Stop on leave\",defaultValue:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageVideoCarousel\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageVideoCarousel.map"],"mappings":"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"}