{"version":3,"file":"AudioPlayerButton.DeVQToRa.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/zbOnnAjXQc14Czg6npfD/a5cw7d6VTPOYmBcaA4QG/AudioPlayerButton.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{startTransition,useCallback,useEffect,useRef,useState}from\"react\";import{motion,addPropertyControls,ControlType}from\"framer\";// --- Icons ---\n// An SVG icon for the Play button (Triangle)\nconst PlayIcon=({color=\"#0a6cff\"})=>/*#__PURE__*/_jsx(\"svg\",{width:\"1em\",height:\"1em\",viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M5 20V4L19 12L5 20Z\",fill:color})});// An SVG icon for the Pause button (Two Bars)\nconst PauseIcon=({color=\"#0a6cff\"})=>/*#__PURE__*/_jsxs(\"svg\",{width:\"1em\",height:\"1em\",viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:[/*#__PURE__*/_jsx(\"rect\",{x:\"6\",y:\"5\",width:\"4\",height:\"14\",fill:color}),/*#__PURE__*/_jsx(\"rect\",{x:\"14\",y:\"5\",width:\"4\",height:\"14\",fill:color})]});const AUDIO_BUTTON_STATE_EVENT=\"audio-player-button-state\";const allAudioButtons=new Set;// --- Component Definition ---\nexport function AudioPlayerButton({audioSrc,buttonText=\"Hear Demo\",width=200,height=50}){// 1. Setup Audio Element Ref\nconst audioRef=useRef(null);const buttonRef=useRef(null);// 2. Setup Playback State\nconst[isPlaying,setIsPlaying]=useState(false);const PRIMARY_COLOR=\"#fff\";const ACTIVE_COLOR=\"#fff\"// Use the same color for the active (playing) state\n;const HOVER_COLOR=\"#fff\";const TEXT_COLOR=\"#0a6cff\";const updatePlayingState=useCallback(next=>{startTransition(()=>setIsPlaying(next));},[]);const dispatchPlaybackState=useCallback(state=>{if(typeof window===\"undefined\")return;const node=buttonRef.current;if(!node)return;node.dispatchEvent(new CustomEvent(AUDIO_BUTTON_STATE_EVENT,{bubbles:true,composed:true,detail:{state,audioSrc}}));},[audioSrc]);// Create and manage the Audio object whenever the audio source changes\nuseEffect(()=>{// Stop and clean up any existing audio object\nif(audioRef.current){audioRef.current.pause();audioRef.current.currentTime=0;// Note: We don't remove the 'ended' listener here, as we're creating a new object.\n// If we were re-using the object, we'd need to clean up listeners explicitly.\n}// Only create a new audio object if we have a valid source string\nif(audioSrc){// Create a new Audio object and assign it to the ref\nconst audio=new Audio(audioSrc);audioRef.current=audio;const stop=()=>{audio.pause();try{audio.currentTime=0;}catch(_error){// no-op for streams that disallow seeking\n}};const registryItem={audio,stop};allAudioButtons.add(registryItem);// Event listener for when the audio ends naturally\nconst handleEnded=()=>{updatePlayingState(false);dispatchPlaybackState(\"ended\");};const handlePause=()=>{updatePlayingState(false);dispatchPlaybackState(\"pause\");};const handlePlay=()=>{updatePlayingState(true);dispatchPlaybackState(\"play\");};// Add the listener\naudio.addEventListener(\"ended\",handleEnded);audio.addEventListener(\"pause\",handlePause);audio.addEventListener(\"play\",handlePlay);// Cleanup function: runs when the component unmounts or before this effect runs again\nreturn()=>{allAudioButtons.delete(registryItem);if(audioRef.current===audio){audioRef.current=null;}audio.removeEventListener(\"ended\",handleEnded);audio.removeEventListener(\"pause\",handlePause);audio.removeEventListener(\"play\",handlePlay);audio.pause();try{audio.currentTime=0;}catch(_error){// no-op\n}if(buttonRef.current){dispatchPlaybackState(\"pause\");}};}else{audioRef.current=null// Ensure ref is null if no source is provided\n;updatePlayingState(false);}},[audioSrc,dispatchPlaybackState,updatePlayingState])// Depend on audioSrc\n;// 3. Playback Toggle Logic\nconst togglePlayback=useCallback(()=>{const currentAudio=audioRef.current;if(!currentAudio){console.log(\"No audio source available.\");return;// Do nothing if no audio object exists\n}if(isPlaying){// Pause the audio\ncurrentAudio.pause();return;}// Ensure global exclusivity among detached audio players.\nallAudioButtons.forEach(item=>{if(item.audio!==currentAudio){item.stop();}});// If the audio has ended, reset it to the start before playing\nif(currentAudio.ended){currentAudio.currentTime=0;}// Play returns a promise that can catch errors (e.g., if the user hasn't interacted with the page yet)\ncurrentAudio.play().catch(error=>{console.error(\"Audio playback failed (usually due to browser autoplay policy):\",error);updatePlayingState(false);dispatchPlaybackState(\"pause\");});},[dispatchPlaybackState,isPlaying,updatePlayingState]);return /*#__PURE__*/_jsxs(motion.button,{ref:buttonRef,// Framer properties for the component's outer container/button\nstyle:{width:width,height:height,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:\"8px\",borderRadius:\"8px\",padding:\"0 20px\",cursor:\"pointer\",// Set background based on play state\nbackground:isPlaying?ACTIVE_COLOR:PRIMARY_COLOR,border:\"none\",color:TEXT_COLOR,fontWeight:\"bold\",fontSize:\"16px\",transition:\"background 0.3s ease\"},// Framer's tap/click event\nonTap:togglePlayback,// Add interaction effects\nwhileHover:{scale:1.02,background:HOVER_COLOR},whileTap:{scale:.98,background:ACTIVE_COLOR},children:[isPlaying?/*#__PURE__*/_jsx(PauseIcon,{color:TEXT_COLOR}):/*#__PURE__*/_jsx(PlayIcon,{color:TEXT_COLOR}),/*#__PURE__*/_jsx(\"span\",{children:isPlaying?\"Hear Demo\":buttonText})]});}// --- Framer Properties Control ---\naddPropertyControls(AudioPlayerButton,{audioSrc:{type:ControlType.String,title:\"Audio URL\",placeholder:\"https://yourdomain.com/audio.mp3\",description:\"Paste the direct URL to the audio file (.mp3, .wav, etc.).\"},buttonText:{type:ControlType.String,title:\"Text (Paused)\",defaultValue:\"Hear Demo\",description:\"The text displayed when the audio is paused.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"AudioPlayerButton\":{\"type\":\"reactComponent\",\"name\":\"AudioPlayerButton\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AudioPlayerButton.map"],"mappings":"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"}