waveframe 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/src/components/WaveframePlayer.d.ts +2 -2
- package/dist/src/core/WaveframeEngine.d.ts +1 -1
- package/dist/src/hooks/useWaveframe.d.ts +1 -1
- package/dist/src/hooks/useWaveframeStore.d.ts +1 -1
- package/dist/src/index.d.ts +7 -7
- package/dist/src/organisms/SettingsPanel.d.ts +1 -1
- package/dist/src/utils/index.d.ts +1 -1
- package/dist/{waveframe.umd.js → waveframe.cjs} +3 -3
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './src/index'
|
|
1
|
+
export * from './src/index.js'
|
|
2
2
|
export {}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { WaveframeTheme } from '../types';
|
|
3
|
-
import { WaveframeEngine } from '../core/WaveframeEngine';
|
|
2
|
+
import { WaveframeTheme } from '../types.js';
|
|
3
|
+
import { WaveframeEngine } from '../core/WaveframeEngine.js';
|
|
4
4
|
/**
|
|
5
5
|
* Props for the WaveframePlayer component
|
|
6
6
|
*/
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export * from './components/WaveframePlayer';
|
|
2
|
-
export * from './core/WaveframeEngine';
|
|
3
|
-
export * from './core/PlayerCore';
|
|
4
|
-
export * from './core/PeakAnalyzer';
|
|
5
|
-
export * from './hooks/useWaveframeStore';
|
|
6
|
-
export * from './types';
|
|
7
|
-
export * from './utils';
|
|
1
|
+
export * from './components/WaveframePlayer.js';
|
|
2
|
+
export * from './core/WaveframeEngine.js';
|
|
3
|
+
export * from './core/PlayerCore.js';
|
|
4
|
+
export * from './core/PeakAnalyzer.js';
|
|
5
|
+
export * from './hooks/useWaveframeStore.js';
|
|
6
|
+
export * from './types.js';
|
|
7
|
+
export * from './utils.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { WaveframeTheme, TrackInfo, WaveformConfig } from '../types';
|
|
2
|
+
import { WaveframeTheme, TrackInfo, WaveformConfig } from '../types.js';
|
|
3
3
|
interface SettingsPanelProps {
|
|
4
4
|
theme: WaveframeTheme;
|
|
5
5
|
trackInfo: TrackInfo;
|
|
@@ -10,4 +10,4 @@ export declare const resamplePeaks: (peaks: number[], targetCount: number) => nu
|
|
|
10
10
|
* High-performance token-based syntax highlighter for React snippets
|
|
11
11
|
*/
|
|
12
12
|
export declare const highlightCode: (code: string) => string[];
|
|
13
|
-
export * from './audio';
|
|
13
|
+
export * from './audio.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
`).map(e=>{let t=e.replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`),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(/(<|>|\{|\}|\/|:|,)/g,`<span class="text-gray-500">$1</span>`),Object.entries(n).forEach(([e,n])=>{t=t.replace(e,n)}),t}),x=(e,
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require(`react`);l=c(l,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,l.useSyncExternalStore)(t=>e.subscribe(t),()=>e.getSnapshot()),m=(e,t={})=>{let{peaks:n,engine:r}=t,i=(0,l.useMemo)(()=>r||new f,[r]),a=r||i,o=p(a);return(0,l.useEffect)(()=>{e&&a.load(e,n)},[a,e,n]),(0,l.useEffect)(()=>()=>{r||i.dispose()},[i,r]),{state:o,engine:a,togglePlay:()=>a.togglePlay(),play:()=>a.play(),pause:()=>a.pause(),seek:e=>a.seek(e),setVolume:e=>a.setVolume(e),setMuted:e=>a.setMuted(e),analyze:e=>a.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(`
|
|
2
|
+
`).map(e=>{let t=e.replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`),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(/(<|>|\{|\}|\/|:|,)/g,`<span class="text-gray-500">$1</span>`),Object.entries(n).forEach(([e,n])=>{t=t.replace(e,n)}),t}),x=(e,t)=>(0,l.useMemo)(()=>y(e,t),[e,t]),S=e=>{let[t,n]=(0,l.useState)(0);return(0,l.useEffect)(()=>{if(!e.current)return;let t=new ResizeObserver(e=>{for(let t of e)n(t.contentRect.width)});return t.observe(e.current),()=>t.disconnect()},[e]),t},C=o((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=o((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:
|
|
3
3
|
let props = %s;
|
|
4
4
|
<%s {...props} />
|
|
5
5
|
React keys must be passed directly to JSX without using spread:
|
|
6
6
|
let props = %s;
|
|
7
|
-
<%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=
|
|
7
|
+
<%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=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=C():t.exports=w()}))(),E=(0,l.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,l.memo)(({peaks:e,currentTime:t,duration:n,waveColor:r,progressColor:i,height:a,onSeek:o,resolution:s=`auto`,barWidth:c=2,barGap:u=1})=>{let d=(0,l.useRef)(null),f=(0,l.useRef)(null),p=(0,l.useRef)(null),m=S(p);(0,l.useEffect)(()=>{let t=d.current,n=f.current;if(!t||!n)return;let a=t.getContext(`2d`),o=n.getContext(`2d`);if(!a||!o)return;let l=window.devicePixelRatio||1,p=t.getBoundingClientRect(),m=p.width*l,h=p.height*l;[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;a.clearRect(0,0,n,d),o.clearRect(0,0,n,d);let f=n/e.length,p=typeof s==`number`?f*.7:c*l,m=typeof s==`number`?f*.3:u*l;a.lineCap=`round`,a.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;a.beginPath(),a.strokeStyle=r,a.moveTo(n,c),a.lineTo(n,l),a.stroke(),o.beginPath(),o.strokeStyle=i,o.moveTo(n,c),o.lineTo(n,l),o.stroke()})})()},[e,r,i,s,c,u,a]);let h=e=>{if(p.current&&n){let t=p.current.getBoundingClientRect(),n=e.clientX-t.left;o(Math.max(0,Math.min(1,n/t.width)))}},g=n?t/n*100:0;return(0,T.jsxs)(`div`,{ref:p,className:`relative w-full cursor-pointer overflow-hidden`,style:{height:`${a}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,l.memo)(({media:e,peaks:t,artwork:n,title:r,artist:i,waveColor:a,progressColor:o,height:s=80,className:c=``,style:u,resolution:d=`auto`,barWidth:f=2,barGap:p=1,theme:h,engine:g})=>{let{state:_,togglePlay:y,seek:b}=m(e,{peaks:t,engine:g}),{isPlaying:C,currentTime:w,duration:O,peaks:k,isAnalyzing:A}=_,[j,M]=(0,l.useState)(typeof n==`string`?n:void 0);(0,l.useEffect)(()=>{if(n instanceof Blob){let e=URL.createObjectURL(n);return M(e),()=>URL.revokeObjectURL(e)}else M(n)},[n]);let N=(0,l.useRef)(null),P=S(N),F=x(k,(0,l.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,l.useMemo)(()=>a||(h?h.bg===`#ffffff`?`#e5e7eb`:`#374151`:`#e5e7eb`),[a,h]),L=o||h?.primary||`#3b82f6`,R=(0,l.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 ${c}`,style:R,children:[(0,T.jsx)(E,{artworkUrl:j,title:r,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:[i&&(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:i}),(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)]})]}),r&&(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:r})]})]}),(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:s,onSeek:b,resolution:d,barWidth:f,barGap:p})})]})]})});O.displayName=`WaveframePlayer`,exports.PeakAnalyzer=d,exports.PlayerCore=u,exports.WaveframeEngine=f,exports.WaveframePlayer=O,exports.formatTime=v,exports.generatePeaks=h,exports.highlightCode=b,exports.loadAudioToMemory=g,exports.resamplePeaks=y,exports.revokeAudioMemory=_,exports.useWaveframeStore=p;
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "waveframe",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "A high-performance, customizable React audio player with SoundCloud-style waveforms and built-in audio analysis.",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./dist/waveframe.
|
|
6
|
+
"main": "./dist/waveframe.cjs",
|
|
7
7
|
"module": "./dist/waveframe.es.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"homepage": "https://gradippp.github.io/waveframe",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
".": {
|
|
15
15
|
"types": "./dist/index.d.ts",
|
|
16
16
|
"import": "./dist/waveframe.es.js",
|
|
17
|
-
"require": "./dist/waveframe.
|
|
17
|
+
"require": "./dist/waveframe.cjs"
|
|
18
18
|
},
|
|
19
19
|
"./style.css": "./dist/waveframe.css"
|
|
20
20
|
},
|