{"version":3,"file":"VoiceMemoPlayer.CpfaCI2Z.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/9OygavC4uadj7sToPj8a/l58hLK41hoxKF2SW4M5B/VoiceMemoPlayer.js"],"sourcesContent":["// Voice Memo component with mp3 upload, waveform, play/pause, and progress indicator\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useState,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";/**\n * Voice Memo\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 100\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight fixed\n */export default function VoiceMemoPlayer(props){const{audioFile=\"https://framerusercontent.com/assets/8w3IUatLX9a5JVJ6XPCVuHi94.mp3\",backgroundColor,waveformColor,progressColor,buttonColor,style}=props;const[audioUrl,setAudioUrl]=useState(audioFile);const[isPlaying,setIsPlaying]=useState(false);const[progress,setProgress]=useState(0);const[duration,setDuration]=useState(0);// const [waveform, setWaveform] = useState([])\nconst audioRef=useRef(null);const fileInputRef=useRef(null);const isStatic=useIsStaticRenderer();// Handle file upload\nfunction handleFileChange(e){const file=e.target.files[0];if(file&&(file.type.startsWith(\"audio/\")||file.type===\"video/mp4\")){const url=URL.createObjectURL(file);setAudioUrl(url);startTransition(()=>setProgress(0));setIsPlaying(false);}}// Play/pause logic\nfunction handlePlayPause(){if(!audioRef.current)return;if(isPlaying){audioRef.current.pause();}else{audioRef.current.play();}setIsPlaying(!isPlaying);}// Update progress\nuseEffect(()=>{const audio=audioRef.current;if(!audio)return;function update(){setProgress(audio.currentTime);}function onEnded(){setIsPlaying(false);setProgress(0);}audio.addEventListener(\"timeupdate\",update);audio.addEventListener(\"ended\",onEnded);return()=>{audio.removeEventListener(\"timeupdate\",update);audio.removeEventListener(\"ended\",onEnded);};},[audioUrl]);// Get duration\nuseEffect(()=>{const audio=audioRef.current;if(!audio)return;function loaded(){setDuration(audio.duration);}audio.addEventListener(\"loadedmetadata\",loaded);return()=>audio.removeEventListener(\"loadedmetadata\",loaded);},[audioUrl]);// Remove waveform generation logic\n// Use a visually appealing static placeholder waveform\nconst placeholderWaveform=[.4,.7,.5,.8,.6,.9,.5,.7,.4,.6,.8,.5,.7,.9,.6,.8,.5,.7,.4,.6,.8,.5,.7,.9,.6,.8,.5,.7,.4,.6,.8,.5,.7,.9,.6,.8,.5,.7,.4,.6,.8,.5,.7,.9,.6,.8,.5,.7,.4,.6,.8,.5,.7,.9,.6,.8,.5,.7,.4,.6,.8,.5,.7,.9];// Progress percent\nconst percent=duration?Math.min(progress/duration,1):0;// Render waveform bars\nfunction renderWaveform(){const bars=placeholderWaveform;return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",alignItems:\"flex-end\",height:56,width:\"100%\",gap:2},children:bars.map((v,i)=>{const barHeight=16+v*40;const isActive=percent>i/bars.length;return /*#__PURE__*/_jsx(\"div\",{style:{width:4,height:barHeight,borderRadius:2,background:isActive?\"#FAB038\":waveformColor,transition:\"background 0.2s\"}},i);})});}return /*#__PURE__*/_jsxs(\"div\",{style:{...style,overflow:\"visible\",background:backgroundColor,borderRadius:12,padding:16,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:16,width:\"100%\",height:\"100%\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"button\",{\"aria-label\":isPlaying?\"Pause\":\"Play\",onClick:handlePlayPause,style:{width:40,height:40,borderRadius:\"50%\",border:\"none\",background:buttonColor,color:\"#fff\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",fontSize:20,cursor:\"pointer\"},children:isPlaying?/*#__PURE__*/_jsxs(\"svg\",{width:\"20\",height:\"20\",viewBox:\"0 0 20 20\",fill:\"none\",children:[/*#__PURE__*/_jsx(\"rect\",{x:\"4\",y:\"4\",width:\"4\",height:\"12\",rx:\"1.5\",fill:\"#fff\"}),/*#__PURE__*/_jsx(\"rect\",{x:\"12\",y:\"4\",width:\"4\",height:\"12\",rx:\"1.5\",fill:\"#fff\"})]}):/*#__PURE__*/_jsx(\"svg\",{width:\"20\",height:\"20\",viewBox:\"0 0 20 20\",fill:\"none\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M6 4L16 10L6 16V4Z\",fill:\"#fff\"})})}),/*#__PURE__*/_jsx(\"div\",{style:{flex:1,minWidth:0,display:\"flex\",alignItems:\"center\",height:\"100%\"},children:renderWaveform()}),/*#__PURE__*/_jsx(\"link\",{href:\"https://fonts.googleapis.com/css2?family=Satoshi:wght@400;700&display=swap\",rel:\"stylesheet\"}),/*#__PURE__*/_jsxs(\"div\",{style:{minWidth:48,textAlign:\"right\",fontFamily:\"Satoshi, sans-serif\",fontSize:13,display:\"flex\",flexDirection:\"row\",alignItems:\"center\",gap:2},children:[/*#__PURE__*/_jsx(\"span\",{style:{color:\"#FAB038\",fontWeight:700},children:Math.floor(progress)}),/*#__PURE__*/_jsxs(\"span\",{style:{color:\"#fff\"},children:[\"/ \",Math.floor(duration)||0,\"s\"]})]}),/*#__PURE__*/_jsx(\"audio\",{ref:audioRef,src:audioUrl,preload:\"auto\",style:{display:\"none\"}}),/*#__PURE__*/_jsx(\"input\",{ref:fileInputRef,type:\"file\",accept:\"audio/mp3,audio/mpeg\",style:{display:\"none\"},onChange:handleFileChange})]});}addPropertyControls(VoiceMemoPlayer,{audioFile:{type:ControlType.File,allowedFileTypes:[\"mp3\",\"mp4\"]},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#FFFFFF\"},waveformColor:{type:ControlType.Color,title:\"Waveform\",defaultValue:\"#EEEEEE\"},progressColor:{type:ControlType.Color,title:\"Progress\",defaultValue:\"#0099FF\"},buttonColor:{type:ControlType.Color,title:\"Button\",defaultValue:\"#0099FF\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VoiceMemoPlayer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicHeight\":\"100\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VoiceMemoPlayer.map"],"mappings":"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"}