{"version":3,"file":"Examples_3.COIs1i6z.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/pNufTrXI1sT4GhwTcory/ATvRCRbhOS0HIi296klP/Examples_3.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";export function AudioPlayer(props){const{audioFile,accentColor,gain}=props;const audioRef=React.useRef(new Audio);const[isPlaying,setIsPlaying]=React.useState(false);const[progress,setProgress]=React.useState(0);const[duration,setDuration]=React.useState(0);const[currentTime,setCurrentTime]=React.useState(0);React.useEffect(()=>{if(!audioFile)return;audioRef.current.src=audioFile;audioRef.current.volume=gain;const onEnd=()=>setIsPlaying(false);const onLoaded=()=>setDuration(audioRef.current.duration);const onTimeUpdate=()=>{const{currentTime,duration}=audioRef.current;setCurrentTime(currentTime);setProgress(duration?currentTime/duration:0);};audioRef.current.addEventListener(\"ended\",onEnd);audioRef.current.addEventListener(\"loadedmetadata\",onLoaded);audioRef.current.addEventListener(\"timeupdate\",onTimeUpdate);return()=>{audioRef.current.pause();audioRef.current.currentTime=0;audioRef.current.removeEventListener(\"ended\",onEnd);audioRef.current.removeEventListener(\"loadedmetadata\",onLoaded);audioRef.current.removeEventListener(\"timeupdate\",onTimeUpdate);};},[audioFile]);React.useEffect(()=>{audioRef.current.volume=gain;},[gain]);const togglePlay=()=>{isPlaying?audioRef.current.pause():audioRef.current.play();setIsPlaying(!isPlaying);};const handleSeek=e=>{const rect=e.currentTarget.getBoundingClientRect();const ratio=Math.max(0,Math.min(1,(e.clientX-rect.left)/rect.width));audioRef.current.currentTime=ratio*audioRef.current.duration;setProgress(ratio);};const formatTime=secs=>{if(!secs||isNaN(secs))return\"0:00\";const m=Math.floor(secs/60);const s=Math.floor(secs%60).toString().padStart(2,\"0\");return`${m}:${s}`;};return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",background:\"#1a1a1a\",borderRadius:10,padding:\"6px 14px\",boxSizing:\"border-box\",fontFamily:\"inherit\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:10},children:[/*#__PURE__*/_jsx(\"button\",{onClick:togglePlay,style:{width:24,height:24,borderRadius:\"50%\",border:`1.5px solid ${accentColor}`,background:\"transparent\",cursor:\"pointer\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",flexShrink:0,padding:0},children:isPlaying?/*#__PURE__*/_jsxs(\"svg\",{width:\"8\",height:\"10\",viewBox:\"0 0 10 12\",fill:accentColor,children:[/*#__PURE__*/_jsx(\"rect\",{x:\"0\",y:\"0\",width:\"3\",height:\"12\"}),/*#__PURE__*/_jsx(\"rect\",{x:\"7\",y:\"0\",width:\"3\",height:\"12\"})]}):/*#__PURE__*/_jsx(\"svg\",{width:\"8\",height:\"10\",viewBox:\"0 0 10 12\",fill:accentColor,style:{marginLeft:1},children:/*#__PURE__*/_jsx(\"polygon\",{points:\"0,0 10,6 0,12\"})})}),/*#__PURE__*/_jsx(\"div\",{onClick:handleSeek,style:{flex:1,height:14,display:\"flex\",alignItems:\"center\",cursor:\"pointer\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:1.5,background:\"rgba(255,255,255,0.15)\",borderRadius:1},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:`${progress*100}%`,height:\"100%\",background:accentColor,borderRadius:1}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:`${progress*100}%`,transform:\"translate(-50%, -50%)\",width:7,height:7,borderRadius:\"50%\",background:\"#fff\",boxShadow:\"0 0 3px rgba(0,0,0,0.4)\"}})]})}),/*#__PURE__*/_jsxs(\"span\",{style:{color:\"#fff\",fontSize:10,opacity:.5,fontVariantNumeric:\"tabular-nums\",fontFamily:\"inherit\",flexShrink:0,letterSpacing:\"0.02em\"},children:[formatTime(currentTime),\" / \",formatTime(duration)]})]})});}AudioPlayer.defaultProps={accentColor:\"#888888\",audioFile:\"\",gain:.4};addPropertyControls(AudioPlayer,{audioFile:{type:ControlType.File,title:\"Audio File\",allowedFileTypes:[\"mp3\",\"wav\",\"ogg\"]},gain:{type:ControlType.Number,title:\"Gain\",defaultValue:.4,min:0,max:1,step:.05,displayStepper:true},accentColor:{type:ControlType.Color,title:\"Accent Color\",defaultValue:\"#888888\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"AudioPlayer\":{\"type\":\"reactComponent\",\"name\":\"AudioPlayer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Examples_3.map"],"mappings":"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"}