waveframe 0.1.2 → 0.2.0

package/dist/waveframe.umd.js

@@ -1,6 +1,7 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Waveframe={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),l(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);var u=e=>{let n=(0,t.useRef)(null),[r,i]=(0,t.useState)(!1),[a,o]=(0,t.useState)(0),[s,c]=(0,t.useState)(0);(0,t.useEffect)(()=>{n.current&&n.current.readyState>=1&&c(n.current.duration)},[e]);let l=(0,t.useCallback)(e=>{e?.stopPropagation(),n.current&&(r?n.current.pause():n.current.play().catch(console.error))},[r]),u=(0,t.useCallback)(()=>{n.current&&o(n.current.currentTime)},[]),d=(0,t.useCallback)(()=>{n.current&&c(n.current.duration)},[]);return{isPlaying:r,currentTime:a,duration:s,togglePlay:l,seek:(0,t.useCallback)(e=>{n.current&&s&&(n.current.currentTime=e*s)},[s]),audioProps:{ref:n,src:e,onTimeUpdate:u,onLoadedMetadata:d,onPlay:()=>i(!0),onPause:()=>i(!1),onEnded:()=>i(!1)}}},d=async(e,t=512)=>{let n=await(await fetch(e)).arrayBuffer(),r=(await new(window.AudioContext||window.webkitAudioContext)().decodeAudioData(n)).getChannelData(0),i=Math.floor(r.length/t),a=[];for(let e=0;e<t;e++){let t=0,n=e*i,o=n+i;for(let e=n;e<o;e++){let n=Math.abs(r[e]);n>t&&(t=n)}a.push(t)}let o=Math.max(...a);return a.map(e=>e/(o||1))},f=e=>isNaN(e)?`0:00`:`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`,p=(e,t)=>{if(e.length===0)return[];if(e.length===t)return e;let n=Array(t),r=e.length/t;if(r>1)for(let i=0;i<t;i++){let t=0,a=Math.floor(i*r),o=Math.floor((i+1)*r);for(let n=a;n<o;n++)e[n]>t&&(t=e[n]);n[i]=t}else for(let i=0;i<t;i++){let t=i*r,a=Math.floor(t),o=Math.min(a+1,e.length-1),s=t-a;n[i]=e[a]+(e[o]-e[a])*s}return n},m=(e,n)=>(0,t.useMemo)(()=>p(e,n),[e,n]),h=e=>{let[n,r]=(0,t.useState)(0);return(0,t.useEffect)(()=>{if(!e.current)return;let t=new ResizeObserver(e=>{for(let t of e)r(t.contentRect.width)});return t.observe(e.current),()=>t.disconnect()},[e]),n},g=c((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),_=c((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,`key`,{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,`ref`,{enumerable:!1,value:null}):Object.defineProperty(e,`ref`,{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,`validated`,{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,`_debugInfo`,{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,`_debugStack`,{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,`_debugTask`,{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Waveframe={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),l(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);var u=class{audio;listeners=new Set;_state;constructor(){this.audio=new Audio,this._state={isPlaying:!1,currentTime:0,duration:0,volume:1,muted:!1},this.initListeners()}initListeners(){this.audio.addEventListener(`play`,()=>this.updateState({isPlaying:!0})),this.audio.addEventListener(`pause`,()=>this.updateState({isPlaying:!1})),this.audio.addEventListener(`timeupdate`,()=>this.updateState({currentTime:this.audio.currentTime})),this.audio.addEventListener(`durationchange`,()=>this.updateState({duration:this.audio.duration})),this.audio.addEventListener(`volumechange`,()=>this.updateState({volume:this.audio.volume,muted:this.audio.muted})),this.audio.addEventListener(`ended`,()=>this.updateState({isPlaying:!1}))}updateState(e){this._state={...this._state,...e},this.notify()}notify(){this.listeners.forEach(e=>e(this._state))}subscribe(e){return this.listeners.add(e),()=>this.listeners.delete(e)}get state(){return this._state}setSource(e){this.audio.src=e,this.audio.load()}play(){return this.audio.play()}pause(){this.audio.pause()}togglePlay(){this._state.isPlaying?this.pause():this.play()}seek(e){this.audio.currentTime=e}setVolume(e){this.audio.volume=e}setMuted(e){this.audio.muted=e}dispose(){this.pause(),this.audio.src=``,this.listeners.clear()}},d=class{audioCtx=null;constructor(){}getContext(){return this.audioCtx||=new(window.AudioContext||window.webkitAudioContext),this.audioCtx}async generatePeaks(e,t=512){try{let n;if(typeof e==`string`){let t=await fetch(e);if(!t.ok)throw Error(`Failed to fetch audio: ${t.statusText}`);n=await t.arrayBuffer()}else n=await e.arrayBuffer();let r=(await this.getContext().decodeAudioData(n)).getChannelData(0),i=Math.floor(r.length/t),a=[];for(let e=0;e<t;e++){let t=0,n=e*i,o=n+i;for(let e=n;e<o;e++){let n=Math.abs(r[e]);n>t&&(t=n)}a.push(t)}let o=Math.max(...a);return a.map(e=>e/(o||1))}catch(e){throw console.error(`PeakAnalyzer Error:`,e),e}}dispose(){this.audioCtx&&=(this.audioCtx.close(),null)}},f=class{player;analyzer;listeners=new Set;_state;_media=null;_objectUrl=null;constructor(){this.player=new u,this.analyzer=new d,this._state={...this.player.state,peaks:[],isAnalyzing:!1,error:null},this.player.subscribe(e=>{this.updateState({...e})})}updateState(e){this._state={...this._state,...e},this.notify()}notify(){this.listeners.forEach(e=>e(this._state))}subscribe(e){return this.listeners.add(e),()=>this.listeners.delete(e)}getSnapshot(){return this._state}revokeOldSource(){this._objectUrl&&=(URL.revokeObjectURL(this._objectUrl),null)}load(e,t){if(this._media!==e){this.revokeOldSource(),this._media=e;let n;typeof e==`string`?n=e:(this._objectUrl=URL.createObjectURL(e),n=this._objectUrl),this.player.setSource(n);let r=t&&t.length>0;this.updateState({peaks:t||[],isAnalyzing:!1,error:null}),r||this.analyze()}else t&&t!==this._state.peaks&&this.updateState({peaks:t})}async analyze(e=512){if(!this._media){this.updateState({error:`No media loaded to analyze`});return}this.updateState({isAnalyzing:!0,error:null});try{let t=await this.analyzer.generatePeaks(this._media,e);this.updateState({peaks:t,isAnalyzing:!1})}catch(e){this.updateState({isAnalyzing:!1,error:e instanceof Error?e.message:`Analysis failed`})}}togglePlay(){this.player.togglePlay()}play(){this.player.play()}pause(){this.player.pause()}seek(e){let{duration:t}=this._state;t&&this.player.seek(e*t)}setVolume(e){this.player.setVolume(e)}setMuted(e){this.player.setMuted(e)}dispose(){this.revokeOldSource(),this.player.dispose(),this.analyzer.dispose(),this.listeners.clear()}},p=e=>(0,t.useSyncExternalStore)(t=>e.subscribe(t),()=>e.getSnapshot()),m=(e,n={})=>{let{peaks:r,engine:i}=n,a=(0,t.useMemo)(()=>i||new f,[i]),o=i||a,s=p(o);return(0,t.useEffect)(()=>{e&&o.load(e,r)},[o,e,r]),(0,t.useEffect)(()=>()=>{i||a.dispose()},[a,i]),{state:s,engine:o,togglePlay:()=>o.togglePlay(),play:()=>o.play(),pause:()=>o.pause(),seek:e=>o.seek(e),setVolume:e=>o.setVolume(e),setMuted:e=>o.setMuted(e),analyze:e=>o.analyze(e)}},h=async(e,t=512)=>{let n=new d;try{return await n.generatePeaks(e,t)}finally{n.dispose()}},g=async e=>{let t=await(await fetch(e)).blob();return URL.createObjectURL(t)},_=e=>{e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)},v=e=>isNaN(e)?`0:00`:`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`,y=(e,t)=>{if(e.length===0)return[];if(e.length===t)return e;let n=Array(t),r=e.length/t;if(r>1)for(let i=0;i<t;i++){let t=0,a=Math.floor(i*r),o=Math.floor((i+1)*r);for(let n=a;n<o;n++)e[n]>t&&(t=e[n]);n[i]=t}else for(let i=0;i<t;i++){let t=i*r,a=Math.floor(t),o=Math.min(a+1,e.length-1),s=t-a;n[i]=e[a]+(e[o]-e[a])*s}return n},b=e=>e.split(`
+`).map(e=>{let t=e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),n={},r=0,i=(e,t)=>{let i=`__TOKEN_${r++}__`;return n[i]=`<span class="${t}">${e}</span>`,i};return t=t.replace(/("(?:[^"\\]|\\.)*")/g,e=>i(e,`text-[#ce9178]`)),t=t.replace(/\b(\d+(\.\d+)?)\b/g,e=>i(e,`text-[#b5cea8]`)),t=t.replace(/\b(WaveframePlayer)\b/g,e=>i(e,`text-[#4ec9b0]`)),t=t.replace(/\b([a-z][a-zA-Z0-9]+)(?==)/g,e=>i(e,`text-[#9cdcfe]`)),t=t.replace(/(&lt;|&gt;|\{|\}|\/|:|,)/g,`<span class="text-gray-500">$1</span>`),Object.entries(n).forEach(([e,n])=>{t=t.replace(e,n)}),t}),x=(e,n)=>(0,t.useMemo)(()=>y(e,n),[e,n]),S=e=>{let[n,r]=(0,t.useState)(0);return(0,t.useEffect)(()=>{if(!e.current)return;let t=new ResizeObserver(e=>{for(let t of e)r(t.contentRect.width)});return t.observe(e.current),()=>t.disconnect()},[e]),n},C=c((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),w=c((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,`key`,{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,`ref`,{enumerable:!1,value:null}):Object.defineProperty(e,`ref`,{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,`validated`,{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,`_debugInfo`,{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,`_debugStack`,{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,`_debugTask`,{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),v=c(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=g():t.exports=_()}))(),y=(0,t.memo)(({artworkUrl:e,title:t,isPlaying:n,onToggle:r,isLoading:i})=>(0,v.jsxs)(`div`,{className:`relative flex-shrink-0 w-32 h-32 md:w-40 md:h-40 overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork`,children:[(0,v.jsx)(`div`,{className:`w-full h-full transition-all duration-700 ${i?`blur-md scale-110`:``}`,children:e?(0,v.jsx)(`img`,{src:e,alt:t,className:`w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110`}):(0,v.jsx)(`div`,{className:`w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center`,children:(0,v.jsx)(`svg`,{className:`w-16 h-16 text-white opacity-50`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,v.jsx)(`path`,{d:`M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z`})})})}),i?(0,v.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]`,children:(0,v.jsx)(`div`,{className:`w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin`})}):(0,v.jsx)(`button`,{className:`absolute inset-0 bg-[var(--wf-overlay-color,rgba(0,0,0,0.3))] backdrop-blur-[var(--wf-overlay-blur,2px)] opacity-0 group-hover/artwork:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer border-none outline-none`,onClick:r,"aria-label":n?`Pause`:`Play`,children:(0,v.jsx)(`div`,{className:`w-14 h-14 flex items-center justify-center bg-[var(--wf-play-btn-bg,#f97316)] rounded-full text-[var(--wf-play-btn-color,white)] shadow-lg transform scale-90 group-hover/artwork:scale-100 transition-transform duration-300`,children:n?(0,v.jsx)(`svg`,{className:`w-8 h-8`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,v.jsx)(`path`,{d:`M6 19h4V5H6v14zm8-14v14h4V5h-4z`})}):(0,v.jsx)(`svg`,{className:`w-8 h-8 ml-1`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,v.jsx)(`path`,{d:`M8 5v14l11-7z`})})})})]}));y.displayName=`ArtworkOverlay`;var b=(0,t.memo)(({peaks:e,currentTime:n,duration:r,waveColor:i,progressColor:a,height:o,onSeek:s,resolution:c=`auto`,barWidth:l=2,barGap:u=1})=>{let d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=h(p);(0,t.useEffect)(()=>{let t=d.current,n=f.current;if(!t||!n)return;let r=t.getContext(`2d`),o=n.getContext(`2d`);if(!r||!o)return;let s=window.devicePixelRatio||1,p=t.getBoundingClientRect(),m=p.width*s,h=p.height*s;[t,n].forEach(e=>{(e.width!==m||e.height!==h)&&(e.width=m,e.height=h)}),(()=>{if(e.length===0)return;let{width:n,height:d}=t;r.clearRect(0,0,n,d),o.clearRect(0,0,n,d);let f=n/e.length,p=typeof c==`number`?f*.7:l*s,m=typeof c==`number`?f*.3:u*s;r.lineCap=`round`,r.lineWidth=p,o.lineCap=`round`,o.lineWidth=p,e.forEach((e,t)=>{let n=t*(p+m)+p/2,s=e*d*.8,c=(d-s)/2,l=c+s;r.beginPath(),r.strokeStyle=i,r.moveTo(n,c),r.lineTo(n,l),r.stroke(),o.beginPath(),o.strokeStyle=a,o.moveTo(n,c),o.lineTo(n,l),o.stroke()})})()},[e,i,a,c,l,u,o]);let g=e=>{if(p.current&&r){let t=p.current.getBoundingClientRect(),n=e.clientX-t.left;s(Math.max(0,Math.min(1,n/t.width)))}},_=r?n/r*100:0;return(0,v.jsxs)(`div`,{ref:p,className:`relative w-full cursor-pointer overflow-hidden`,style:{height:`${o}px`},onClick:g,children:[(0,v.jsx)(`canvas`,{ref:d,className:`absolute inset-0 w-full h-full`}),(0,v.jsx)(`div`,{className:`absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none`,style:{width:`${_}%`},children:(0,v.jsx)(`canvas`,{ref:f,className:`absolute h-full`,style:{width:`${m}px`}})})]})});b.displayName=`Waveform`;var x=(0,t.memo)(({audioUrl:e,peaks:n,artworkUrl:r,title:i,artist:a,waveColor:o,progressColor:s,height:c=80,className:l=``,style:p,resolution:g=`auto`,barWidth:_=2,barGap:x=1,theme:S,autoAnalyze:C=!0})=>{let{isPlaying:w,currentTime:T,duration:E,togglePlay:D,seek:O,audioProps:k}=u(e),A=t.default.useRef(null),j=h(A),[M,N]=(0,t.useState)(void 0),[P,F]=(0,t.useState)(!1);(0,t.useEffect)(()=>{!n&&C&&e?(async()=>{F(!0);try{N(await d(e,512))}catch(e){console.error(`Auto-analysis failed`,e)}finally{F(!1)}})():N(void 0)},[e,n,C]);let I=n||M||[],L=m(I,(0,t.useMemo)(()=>typeof g==`number`?g:j>0?Math.max(1,Math.floor(j/(_+x))):I.length||1,[g,j,_,x,I.length])),R=(0,t.useMemo)(()=>o||(S?S.bg===`#ffffff`?`#e5e7eb`:`#374151`:`#e5e7eb`),[o,S]),z=s||S?.primary||`#3b82f6`,B=(0,t.useMemo)(()=>({"--wf-bg-color":S?.bg||`white`,"--wf-border-color":S?.border||`#f3f4f6`,"--wf-title-color":S?.text||`#111827`,"--wf-artist-color":S?.text||`#6b7280`,"--wf-time-color":S?.text||`#9ca3af`,"--wf-play-btn-bg":S?.primary||`#3b82f6`,"--wf-placeholder-from":S?.primary||`#fb923c`,"--wf-placeholder-to":S?.bg||`#ec4899`,...p}),[S,p]);return(0,v.jsxs)(`div`,{className:`group relative flex flex-col md:flex-row items-center gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${l}`,style:B,children:[(0,v.jsx)(y,{artworkUrl:r,title:i,isPlaying:w,onToggle:D,isLoading:P}),(0,v.jsxs)(`div`,{className:`flex-1 w-full flex flex-col justify-between py-1`,children:[(0,v.jsxs)(`div`,{className:`mb-4`,children:[(0,v.jsxs)(`div`,{className:`flex items-center justify-between mb-1`,children:[i&&(0,v.jsx)(`h3`,{className:`text-xl md:text-2xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1`,children:i}),(0,v.jsxs)(`div`,{className:`text-xs font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums`,children:[f(T),` / `,f(E)]})]}),a&&(0,v.jsx)(`p`,{className:`text-sm md:text-base font-medium text-[var(--wf-artist-color,#6b7280)] line-clamp-1 tracking-wide`,children:a})]}),(0,v.jsx)(`div`,{ref:A,children:(0,v.jsx)(b,{peaks:L,currentTime:T,duration:E,waveColor:R,progressColor:z,height:c,onSeek:O,resolution:g,barWidth:_,barGap:x})})]}),(0,v.jsx)(`audio`,{...k})]})});x.displayName=`WaveframePlayer`,e.WaveframePlayer=x});
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),T=c(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=C():t.exports=w()}))(),E=(0,t.memo)(({artworkUrl:e,title:t,isLoading:n})=>(0,T.jsxs)(`div`,{className:`relative flex-shrink-0 w-32 h-32 md:w-40 md:h-40 overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork`,children:[(0,T.jsx)(`div`,{className:`w-full h-full transition-all duration-700 ${n?`blur-md scale-110`:``}`,children:e?(0,T.jsx)(`img`,{src:e,alt:t,className:`w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110`}):(0,T.jsx)(`div`,{className:`w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center`,children:(0,T.jsx)(`svg`,{className:`w-16 h-16 text-white opacity-50`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,T.jsx)(`path`,{d:`M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z`})})})}),n&&(0,T.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]`,children:(0,T.jsx)(`div`,{className:`w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin`})})]}));E.displayName=`ArtworkOverlay`;var D=(0,t.memo)(({peaks:e,currentTime:n,duration:r,waveColor:i,progressColor:a,height:o,onSeek:s,resolution:c=`auto`,barWidth:l=2,barGap:u=1})=>{let d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=S(p);(0,t.useEffect)(()=>{let t=d.current,n=f.current;if(!t||!n)return;let r=t.getContext(`2d`),o=n.getContext(`2d`);if(!r||!o)return;let s=window.devicePixelRatio||1,p=t.getBoundingClientRect(),m=p.width*s,h=p.height*s;[t,n].forEach(e=>{(e.width!==m||e.height!==h)&&(e.width=m,e.height=h)}),(()=>{if(e.length===0)return;let{width:n,height:d}=t;r.clearRect(0,0,n,d),o.clearRect(0,0,n,d);let f=n/e.length,p=typeof c==`number`?f*.7:l*s,m=typeof c==`number`?f*.3:u*s;r.lineCap=`round`,r.lineWidth=p,o.lineCap=`round`,o.lineWidth=p,e.forEach((e,t)=>{let n=t*(p+m)+p/2,s=e*d*.8,c=(d-s)/2,l=c+s;r.beginPath(),r.strokeStyle=i,r.moveTo(n,c),r.lineTo(n,l),r.stroke(),o.beginPath(),o.strokeStyle=a,o.moveTo(n,c),o.lineTo(n,l),o.stroke()})})()},[e,i,a,c,l,u,o]);let h=e=>{if(p.current&&r){let t=p.current.getBoundingClientRect(),n=e.clientX-t.left;s(Math.max(0,Math.min(1,n/t.width)))}},g=r?n/r*100:0;return(0,T.jsxs)(`div`,{ref:p,className:`relative w-full cursor-pointer overflow-hidden`,style:{height:`${o}px`},onClick:h,children:[(0,T.jsx)(`canvas`,{ref:d,className:`absolute inset-0 w-full h-full`}),(0,T.jsx)(`div`,{className:`absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none`,style:{width:`${g}%`},children:(0,T.jsx)(`canvas`,{ref:f,className:`absolute h-full`,style:{width:`${m}px`}})})]})});D.displayName=`Waveform`;var O=(0,t.memo)(({media:e,peaks:n,artwork:r,title:i,artist:a,waveColor:o,progressColor:s,height:c=80,className:l=``,style:u,resolution:d=`auto`,barWidth:f=2,barGap:p=1,theme:h,engine:g})=>{let{state:_,togglePlay:y,seek:b}=m(e,{peaks:n,engine:g}),{isPlaying:C,currentTime:w,duration:O,peaks:k,isAnalyzing:A}=_,[j,M]=(0,t.useState)(typeof r==`string`?r:void 0);(0,t.useEffect)(()=>{if(r instanceof Blob){let e=URL.createObjectURL(r);return M(e),()=>URL.revokeObjectURL(e)}else M(r)},[r]);let N=(0,t.useRef)(null),P=S(N),F=x(k,(0,t.useMemo)(()=>typeof d==`number`?d:P>0?Math.max(1,Math.floor(P/(f+p))):k.length||1,[d,P,f,p,k.length])),I=(0,t.useMemo)(()=>o||(h?h.bg===`#ffffff`?`#e5e7eb`:`#374151`:`#e5e7eb`),[o,h]),L=s||h?.primary||`#3b82f6`,R=(0,t.useMemo)(()=>({"--wf-bg-color":h?.bg||`white`,"--wf-border-color":h?.border||`#f3f4f6`,"--wf-title-color":h?.text||`#111827`,"--wf-artist-color":h?.text||`#6b7280`,"--wf-time-color":h?.text||`#9ca3af`,"--wf-play-btn-bg":h?.primary||`#3b82f6`,"--wf-placeholder-from":h?.primary||`#fb923c`,"--wf-placeholder-to":h?.bg||`#ec4899`,...u}),[h,u]);return(0,T.jsxs)(`div`,{className:`group relative flex flex-col md:flex-row items-stretch gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${l}`,style:R,children:[(0,T.jsx)(E,{artworkUrl:j,title:i,isLoading:A}),(0,T.jsxs)(`div`,{className:`flex-1 w-full flex flex-col min-w-0`,children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-4 mb-6`,children:[(0,T.jsx)(`button`,{onClick:y,className:`w-12 h-12 md:w-14 md:h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-[var(--wf-play-btn-bg,#3b82f6)] text-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.2)] transition-all hover:scale-105 active:scale-95 cursor-pointer border-none outline-none group/play`,children:C?(0,T.jsx)(`svg`,{className:`w-6 h-6 md:w-7 md:h-7`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,T.jsx)(`path`,{d:`M6 19h4V5H6v14zm8-14v14h4V5h-4z`})}):(0,T.jsx)(`svg`,{className:`w-6 h-6 md:w-7 md:h-7 ml-1`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,T.jsx)(`path`,{d:`M8 5v14l11-7z`})})}),(0,T.jsxs)(`div`,{className:`flex-1 flex flex-col min-w-0`,children:[(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[a&&(0,T.jsx)(`p`,{className:`text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1`,children:a}),(0,T.jsxs)(`div`,{className:`text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0`,children:[v(w),` / `,v(O)]})]}),i&&(0,T.jsx)(`h3`,{className:`text-lg md:text-xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1 mt-0.5 leading-tight`,children:i})]})]}),(0,T.jsx)(`div`,{className:`mt-auto`,ref:N,children:(0,T.jsx)(D,{peaks:F,currentTime:w,duration:O,waveColor:I,progressColor:L,height:c,onSeek:b,resolution:d,barWidth:f,barGap:p})})]})]})});O.displayName=`WaveframePlayer`,e.PeakAnalyzer=d,e.PlayerCore=u,e.WaveframeEngine=f,e.WaveframePlayer=O,e.formatTime=v,e.generatePeaks=h,e.highlightCode=b,e.loadAudioToMemory=g,e.resamplePeaks=y,e.revokeAudioMemory=_,e.useWaveframeStore=p});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveframe",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A high-performance, customizable React audio player with SoundCloud-style waveforms and built-in audio analysis.",
   "type": "module",
   "main": "./dist/waveframe.umd.js",
@@ -65,6 +65,9 @@
     "react-dom": "^19.2.6",
     "tailwindcss": "^4.3.0",
     "tsc-alias": "^1.8.17",
+    "typedoc": "^0.28.19",
+    "typedoc-material-theme": "^1.4.1",
+    "typedoc-plugin-extras": "^4.0.1",
     "typescript": "^6.0.3",
     "vite": "^8.0.11",
     "vite-plugin-dts": "^5.0.0",
@@ -84,6 +87,7 @@
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"",
     "test": "vitest",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "docs": "typedoc src/index.ts"
   }
 }

package/dist/src/hooks/useAudioPlayer.d.ts

@@ -1,16 +0,0 @@
-export declare const useAudioPlayer: (url: string) => {
-    isPlaying: boolean;
-    currentTime: number;
-    duration: number;
-    togglePlay: (e?: React.MouseEvent) => void;
-    seek: (percentage: number) => void;
-    audioProps: {
-        ref: import('react').RefObject<HTMLAudioElement | null>;
-        src: string;
-        onTimeUpdate: () => void;
-        onLoadedMetadata: () => void;
-        onPlay: () => void;
-        onPause: () => void;
-        onEnded: () => void;
-    };
-};