{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/NHrpXiph9EgqKsXEGJVi/sVq5IRgD16RHeO8sQiLb/ImageCompareSlider.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageCompareSlider(props){const[sliderValue,setSliderValue]=useState(50);const videoRef1=useRef(null);const videoRef2=useRef(null);useEffect(()=>{setTimeout(()=>{if(videoRef1.current&&videoRef2.current){const video1Promise=new Promise(resolve=>{if(videoRef1.current.readyState>=4){resolve();}else{videoRef1.current.addEventListener(\"canplaythrough\",resolve);}});const video2Promise=new Promise(resolve=>{if(videoRef2.current.readyState>=4){resolve();}else{videoRef2.current.addEventListener(\"canplaythrough\",resolve);}});Promise.all([video1Promise,video2Promise]).then(()=>{videoRef1.current.play();videoRef2.current.play();});}},300);},[]);useEffect(()=>{const style=document.createElement(\"style\");style.innerHTML=`\n            .slider::-webkit-slider-runnable-track {\n                height: 100%;\n                background: transparent;\n            }\n            .slider::-webkit-slider-thumb {\n                -webkit-appearance: none;\n                width: 3px;\n                height: 100%;\n                background: white;\n                border: 0;\n                cursor: pointer;\n            }\n            .slider::-moz-range-thumb {\n                width: 3px;\n                height: 100%;\n                background: white;\n                border: 0;\n                cursor: pointer;\n            }\n        `;document.head.appendChild(style);return()=>{document.head.removeChild(style);};},[]);const imgStyle={position:\"absolute\",top:0,left:0,bottom:0,right:0,backgroundRepeat:\"no-repeat\"};const imgFit=props.size===\"cover\"?{backgroundSize:\"cover\",backgroundPosition:\"center\"}:props.size===\"contain\"?{backgroundSize:\"contain\",backgroundPosition:\"center\"}:{};const renderMedia=(url,imageNum)=>{const isVideo=/\\.(mp4|webm)$/i.test(url);if(isVideo){return /*#__PURE__*/_jsx(\"video\",{ref:imageNum===1?videoRef1:videoRef2,style:{...imgStyle,...imgFit,objectFit:props.size,width:\"100%\",height:\"100%\"},preload:\"auto\",loop:true,muted:true,disablePictureInPicture:true,children:/*#__PURE__*/_jsx(\"source\",{src:url,type:\"video/mp4\"})});}else{return /*#__PURE__*/_jsx(\"div\",{style:{...imgStyle,...imgFit,backgroundImage:`url(${url})`}});}};return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[renderMedia(props.video1??props.image1,1),/*#__PURE__*/_jsx(\"div\",{style:{...imgStyle,clipPath:`polygon(0% 0%, ${sliderValue}% 0%, ${sliderValue}% 100%, 0% 100%)`,overflow:\"hidden\"},children:renderMedia(props.video2??props.image2,2)}),/*#__PURE__*/_jsx(\"input\",{type:\"range\",className:\"slider\",min:\"1\",max:\"1000\",defaultValue:sliderValue*10,onChange:e=>setSliderValue(Number(e.target.value)/10),onWheel:e=>e.preventDefault(),onMouseUp:e=>document.activeElement.blur?.(),style:{position:\"absolute\",appearance:\"none\",width:\"100%\",height:\"100%\",background:\"transparent\",outline:\"none\",margin:0,WebkitMaskImage:`radial-gradient(circle at ${sliderValue}% 50%, transparent 30px, black 30.5px)`,maskImage:`radial-gradient(circle at ${sliderValue}% 50%, transparent 30px, black 30.5px)`}}),/*#__PURE__*/_jsxs(\"div\",{className:\"arrows\",style:{display:\"flex\",justifyContent:\"center\",alignItems:\"center\",pointerEvents:\"none\",position:\"absolute\",width:\"60px\",height:\"60px\",borderRadius:\"50%\",border:\"3px solid white\",left:`calc(${sliderValue}% - 30px)`,top:\"calc(50% - 30px)\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{padding:5,display:\"inline-block\",border:\"solid white\",borderWidth:\"0 3px 3px 0\",transform:\"rotate(135deg)\"}}),/*#__PURE__*/_jsx(\"div\",{style:{padding:5,display:\"inline-block\",border:\"solid white\",borderWidth:\"0 3px 3px 0\",transform:\"translateX(-1px) rotate(-45deg)\"}})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"bottomTexts\",style:{position:\"absolute\",left:0,right:0,bottom:0,padding:props.padding,pointerEvents:\"none\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"space-between\",marginBottom:8,fontFamily:props.textStyle1.fontFamily,fontSize:props.textStyle1.fontSize,fontWeight:props.textStyle1.fontWeight,color:props.textStyle1.color},children:[/*#__PURE__*/_jsx(\"div\",{children:props.texts.text1}),/*#__PURE__*/_jsx(\"div\",{children:props.texts.text3})]}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",justifyContent:\"space-between\",fontFamily:props.textStyle2.fontFamily,fontSize:props.textStyle2.fontSize,fontWeight:props.textStyle2.fontWeight,color:props.textStyle2.color},children:[/*#__PURE__*/_jsx(\"div\",{children:props.texts.text2}),/*#__PURE__*/_jsx(\"div\",{children:props.texts.text4})]})]})]});}ImageCompareSlider.defaultProps={image1:\"https://placekitten.com/1720/880\",image2:\"https://placehold.co/1720x880\",//video1: \"https://framerusercontent.com/assets/tiYORs6wgTecyAtJFeQSrO9d1d8.mp4\",\n//video2: \"https://framerusercontent.com/assets/C2xpYuswWfUxeDGZj87O48T64F0.mp4\",\nsize:\"cover\",texts:{text1:\"Before\",text2:\"7.3 MB\",text3:\"After\",text4:\"1.2 MB\"},textStyle1:{fontFamily:\"Proxima Nova, Arial\",fontSize:24,color:\"#F1ECDF\",fontWeight:\"bolder\"},textStyle2:{fontFamily:\"Proxima Nova, Arial\",fontSize:42,color:\"#F1ECDF\",fontWeight:\"bolder\"},padding:35};addPropertyControls(ImageCompareSlider,{image1:{type:ControlType.Image,title:\"Image 1\"},image2:{type:ControlType.Image,title:\"Image 2\"},video1:{type:ControlType.File,title:\"Video 1\",allowedFileTypes:[\"mp4\",\"webm\"]},video2:{type:ControlType.File,title:\"Video 2\",allowedFileTypes:[\"mp4\",\"webm\"]},size:{type:ControlType.Enum,options:[\"none\",\"cover\",\"contain\"],optionTitles:[\"Original\",\"Cover\",\"Contain\"],title:\"Image size\",defaultValue:ImageCompareSlider.defaultProps.size},texts:{type:ControlType.Object,title:\"Texts\",controls:{text1:{type:ControlType.String,title:\"Top 1\"},text2:{type:ControlType.String,title:\"Bottom 1\"},text3:{type:ControlType.String,title:\"Top 2\"},text4:{type:ControlType.String,title:\"Bottom 2\"}}},textStyle1:{type:ControlType.Object,title:\"Style 1\",controls:{fontFamily:{type:ControlType.String,title:\"Font\",defaultValue:ImageCompareSlider.defaultProps.textStyle1.fontFamily},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:ImageCompareSlider.defaultProps.textStyle1.fontSize,min:6,max:300,step:1},color:{type:ControlType.Color,title:\"Color\",defaultValue:ImageCompareSlider.defaultProps.textStyle1.color},fontWeight:{type:ControlType.Enum,title:\"Font Weight\",options:[\"normal\",\"bold\",\"bolder\",\"lighter\"],defaultValue:ImageCompareSlider.defaultProps.textStyle1.fontWeight}}},textStyle2:{type:ControlType.Object,title:\"Style 2\",controls:{fontFamily:{type:ControlType.String,title:\"Font\",defaultValue:ImageCompareSlider.defaultProps.textStyle2.fontFamily},fontSize:{type:ControlType.Number,title:\"Font Size\",defaultValue:ImageCompareSlider.defaultProps.textStyle2.fontSize,min:6,max:300,step:1},color:{type:ControlType.Color,title:\"Color\",defaultValue:ImageCompareSlider.defaultProps.textStyle2.color},fontWeight:{type:ControlType.Enum,title:\"Font Weight\",options:[\"normal\",\"bold\",\"bolder\",\"lighter\"],defaultValue:ImageCompareSlider.defaultProps.textStyle2.fontWeight}}},padding:{type:ControlType.Number,title:\"Padding\",min:0,max:200,unit:\"px\",defaultValue:ImageCompareSlider.defaultProps.padding}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageCompareSlider\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageCompareSlider.map"],
  "mappings": "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",
  "names": ["ImageCompareSlider", "props", "sliderValue", "setSliderValue", "ye", "videoRef1", "pe", "videoRef2", "ue", "video1Promise", "resolve", "video2Promise", "style", "imgStyle", "imgFit", "renderMedia", "url", "imageNum", "p", "u", "e", "addPropertyControls", "ControlType"]
}