@waveform-playlist/browser 5.0.0-alpha.15 → 5.0.0-alpha.16

package/dist/index.d.ts

@@ -59,6 +59,19 @@ export declare interface AnnotationData {
     language?: string;
 }
 
+/**
+ * Shared annotation types used across Waveform components
+ */
+/**
+ * Base annotation data structure
+ */
+declare interface AnnotationData_2 {
+    id: string;
+    start: number;
+    end: number;
+    lines: string[];
+}
+
 /**
  * Represents a single audio clip on the timeline
  *
@@ -411,6 +424,21 @@ export declare const FastForwardButton: default_2.FC<{
     className?: string;
 }>;
 
+/**
+ * Custom function to generate the label shown on annotation boxes in the waveform.
+ * Receives the annotation data and its index in the list, returns a string label.
+ * Default behavior: displays annotation.id
+ *
+ * @example
+ * // Show sequence numbers
+ * getAnnotationBoxLabel={(annotation, index) => String(index + 1)}
+ *
+ * @example
+ * // Show formatted time
+ * getAnnotationBoxLabel={(annotation) => formatTime(annotation.start)}
+ */
+export declare type GetAnnotationBoxLabelFn = (annotation: AnnotationData_2, index: number) => string;
+
 export declare const getEffectDefinition: (id: string) => EffectDefinition | undefined;
 
 export declare const getEffectsByCategory: (category: EffectDefinition["category"]) => EffectDefinition[];
@@ -651,12 +679,7 @@ export declare interface MediaElementWaveformProps {
     /** Height in pixels for the annotation text list */
     annotationTextHeight?: number;
     /** Custom function to generate the label shown on annotation boxes */
-    getAnnotationBoxLabel?: (annotation: {
-        id: string;
-        start: number;
-        end: number;
-        lines: string[];
-    }) => string;
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
     /**
      * Custom render function for annotation items in the text list.
      * When provided, completely replaces the default annotation item rendering.
@@ -669,12 +692,7 @@ export declare interface MediaElementWaveformProps {
      * Callback when annotations are updated (e.g., boundaries dragged).
      * Called with the full updated annotations array.
      */
-    onAnnotationUpdate?: (annotations: {
-        id: string;
-        start: number;
-        end: number;
-        lines: string[];
-    }[]) => void;
+    onAnnotationUpdate?: OnAnnotationUpdateFn;
     className?: string;
 }
 
@@ -684,6 +702,12 @@ declare interface MicrophoneDevice {
     groupId: string;
 }
 
+/**
+ * Callback when annotations are updated (e.g., boundaries dragged).
+ * Called with the full updated annotations array.
+ */
+export declare type OnAnnotationUpdateFn = (annotations: AnnotationData_2[]) => void;
+
 /**
  * Effect definitions for all available Tone.js effects
  * Each effect has parameters with min/max/default values for UI controls
@@ -1827,15 +1851,10 @@ export declare interface WaveformProps {
     renderAnnotationItem?: (props: RenderAnnotationItemProps) => ReactNode;
     /**
      * Custom function to generate the label shown on annotation boxes in the waveform.
-     * Receives the annotation data and should return a string label.
+     * Receives the annotation data and its index, returns a string label.
      * Default: annotation.id
      */
-    getAnnotationBoxLabel?: (annotation: {
-        id: string;
-        start: number;
-        end: number;
-        lines: string[];
-    }) => string;
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
     className?: string;
     showClipHeaders?: boolean;
     interactiveClips?: boolean;

package/dist/index.js

@@ -1232,7 +1232,7 @@
 `,Ks=A.div`
   position: relative;
   z-index: 2;
-`,fn=({clipStartSample:e,clipDurationSamples:t,...n})=>{const a=i.useRef(null),r=i.useRef(null),s=rt(),{waveHeight:o}=at(),{isPlaying:l,currentTimeRef:c,playbackStartTimeRef:u,audioStartPositionRef:f}=Ie(),{samplesPerPixel:w,sampleRate:g}=we(),d=s?.waveProgressColor||"rgba(0, 0, 0, 0.1)";i.useEffect(()=>{const b=()=>{if(a.current){let p;if(l){const y=W.getContext().currentTime-(u.current??0);p=(f.current??0)+y}else p=c.current??0;const C=p*g,h=e+t;let k=0;if(C<=e)k=0;else if(C>=h)k=n.length;else{const y=C-e;k=Math.floor(y/w)}a.current.style.width=`${k}px`}l&&(r.current=requestAnimationFrame(b))};return l?r.current=requestAnimationFrame(b):b(),()=>{r.current&&(cancelAnimationFrame(r.current),r.current=null)}},[l,g,w,e,t,n.length,c,u,f]),i.useEffect(()=>{if(!l&&a.current){const p=(c.current??0)*g,C=e+t;let h=0;if(p<=e)h=0;else if(p>=C)h=n.length;else{const k=p-e;h=Math.floor(k/w)}a.current.style.width=`${h}px`}});const x=s?.waveformDrawMode||"inverted";let I;x==="inverted"?I=n.isSelected&&s?s.selectedWaveFillColor:s?.waveFillColor||"white":I=n.isSelected&&s?s.selectedWaveOutlineColor:s?.waveOutlineColor||"grey";const m=Ye(I);return v.jsxs(Ls,{children:[v.jsx(Ys,{$color:m,$height:o,$top:n.index*o,$width:n.length}),v.jsx(Os,{ref:a,$color:d,$height:o,$top:n.index*o}),v.jsx(Ks,{children:v.jsx(Dn,{...n,transparentBackground:!0})})]})},Us=60,Js=({renderTrackControls:e,renderTimestamp:t,renderPlayhead:n,annotationControls:a,annotationListConfig:r,annotationTextHeight:s,renderAnnotationItem:o,getAnnotationBoxLabel:l,className:c,showClipHeaders:u=!1,interactiveClips:f=!1,showFades:w=!1,touchOptimized:g=!1,recordingState:d})=>{const x=rt(),{isPlaying:I,currentTimeRef:m,playbackStartTimeRef:b,audioStartPositionRef:p}=Ie(),{selectionStart:C,selectionEnd:h,annotations:k,activeAnnotationId:y,annotationsEditable:S,linkEndpoints:R,continuousPlay:E,selectedTrackId:$,loopStart:M,loopEnd:D,isLoopEnabled:_}=Te(),{setAnnotations:Z,setActiveAnnotationId:T,setTrackMute:P,setTrackSolo:j,setTrackVolume:U,setTrackPan:V,setSelection:L,play:re,setScrollContainer:te,setSelectedTrackId:Q,setCurrentTime:q,setLoopRegion:be}=he(),{audioBuffers:Ee,peaksDataArray:Y,trackStates:le,tracks:pe,duration:ce,samplesPerPixel:K,sampleRate:ee,waveHeight:We,timeScaleHeight:je,controls:ne,playoutRef:J,barWidth:ae,barGap:F}=we(),[ue,de]=i.useState(!1),Ce=i.useRef(null),st=i.useCallback(X=>{Ce.current=X,te(X)},[te]);let Ae=Ee.length>0?ce:Us;if(d?.isRecording){const O=(d.startSample+d.durationSamples)/ee;Ae=Math.max(Ae,O+10)}const ye=Math.floor(Ae*ee/K),He=async X=>{console.log("Annotation clicked:",X.id),T(X.id);const O=E?void 0:X.end-X.start;await re(X.start,O)},Ve=i.useCallback(X=>{if(X>=0&&X<pe.length){const O=pe[X];Q(O.id)}},[pe,Q]),it=X=>{const O=X.currentTarget.getBoundingClientRect(),ie=ne.show?ne.width:0,ve=(X.clientX-O.left-ie)*K/ee,oe=X.clientY-O.top;let Pe=0,Se=-1;for(let ke=0;ke<Y.length;ke++){const Xe=Y[ke],qe=(Xe.length>0?Math.max(...Xe.map(Ge=>Ge.peaks.data.length)):1)*We+(u?22:0);if(oe>=Pe&&oe<Pe+qe){Se=ke;break}Pe+=qe}Se!==-1&&Ve(Se),de(!0),q(ve),L(ve,ve)},lt=X=>{if(!ue)return;const O=X.currentTarget.getBoundingClientRect(),ie=ne.show?ne.width:0,ve=(X.clientX-O.left-ie)*K/ee,_e=Math.min(C,ve),oe=Math.max(C,ve);L(_e,oe)},Ne=X=>{if(!ue)return;de(!1);const O=X.currentTarget.getBoundingClientRect(),ie=ne.show?ne.width:0,ve=(X.clientX-O.left-ie)*K/ee,_e=Math.min(C,ve),oe=Math.max(C,ve);Math.abs(oe-_e)<.1?(q(_e),I&&J.current?(J.current.stop(),re(_e)):J.current&&J.current.stop()):L(_e,oe)};return pe.some(X=>X.clips.length>0)&&(Ee.length===0||Y.length===0)?v.jsx("div",{className:c,children:"Loading waveform..."}):v.jsx(Rn,{children:v.jsxs(yt.Provider,{value:{samplesPerPixel:K,sampleRate:ee,zoomLevels:[K],waveHeight:We,timeScaleHeight:je,duration:Ae,controls:ne,barWidth:ae,barGap:F},children:[v.jsx(Vt,{theme:x,backgroundColor:Ye(x.waveOutlineColor),timescaleBackgroundColor:x.timescaleBackgroundColor,scrollContainerWidth:ye+(ne.show?ne.width:0),timescaleWidth:ye,tracksWidth:ye,controlsWidth:ne.show?ne.width:0,onTracksMouseDown:it,onTracksMouseMove:lt,onTracksMouseUp:Ne,scrollContainerRef:st,isSelecting:ue,timescale:je>0?v.jsxs(v.Fragment,{children:[v.jsx(Bn,{duration:Ae*1e3,marker:1e4,bigStep:5e3,secondStep:1e3,renderTimestamp:t}),_&&v.jsx(br,{startPosition:Math.min(M,D)*ee/K,endPosition:Math.max(M,D)*ee/K,markerColor:x.loopMarkerColor,regionColor:x.loopRegionColor,minPosition:0,maxPosition:ye,controlsOffset:ne.show?ne.width:0,onLoopRegionChange:(X,O)=>{const ie=X*K/ee,fe=O*K/ee;be(ie,fe)}})]}):void 0,children:v.jsxs(v.Fragment,{children:[Y.map((X,O)=>{const ie=pe[O];if(!ie)return null;const fe=le[O]||{name:`Track ${O+1}`,muted:!1,soloed:!1,volume:1,pan:0},ve=e?e(O):v.jsxs(Vr,{onClick:()=>Ve(O),children:[v.jsx(Pr,{style:{justifyContent:"center"},children:fe.name||`Track ${O+1}`}),v.jsxs(Zr,{children:[v.jsx(tn,{$variant:fe.muted?"danger":"outline",onClick:()=>P(O,!fe.muted),children:"Mute"}),v.jsx(tn,{$variant:fe.soloed?"info":"outline",onClick:()=>j(O,!fe.soloed),children:"Solo"})]}),v.jsxs(an,{children:[v.jsx(zr,{}),v.jsx(nn,{min:"0",max:"1",step:"0.01",value:fe.volume,onChange:oe=>U(O,parseFloat(oe.target.value))}),v.jsx(jr,{})]}),v.jsxs(an,{children:[v.jsx("span",{children:"L"}),v.jsx(nn,{min:"-1",max:"1",step:"0.01",value:fe.pan,onChange:oe=>V(O,parseFloat(oe.target.value))}),v.jsx("span",{children:"R"})]})]}),_e=X.length>0?Math.max(...X.map(oe=>oe.peaks.data.length)):1;return v.jsx(Pt.Provider,{value:ve,children:v.jsxs(Tn,{numChannels:_e,backgroundColor:Ye(x.waveOutlineColor),offset:0,width:ye,hasClipHeaders:u,trackId:ie.id,isSelected:ie.id===$,children:[X.map((oe,Pe)=>{const Se=oe.peaks,ke=Se.length;return v.jsx(Tt,{clipId:oe.clipId,trackIndex:O,clipIndex:Pe,trackName:oe.trackName,startSample:oe.startSample,durationSamples:oe.durationSamples,samplesPerPixel:K,showHeader:u,disableHeaderDrag:!f,isSelected:ie.id===$,trackId:ie.id,fadeIn:oe.fadeIn,fadeOut:oe.fadeOut,sampleRate:ee,showFades:w,touchOptimized:g,onMouseDown:Xe=>{Xe.target.closest('[role="button"][aria-roledescription="draggable"]')||Ve(O)},children:Se.data.map((Xe,Ke)=>v.jsx(fn,{index:Ke,data:Xe,bits:Se.bits,length:ke,isSelected:ie.id===$,clipStartSample:oe.startSample,clipDurationSamples:oe.durationSamples},`${O}-${Pe}-${Ke}`))},`${O}-${Pe}`)}),d?.isRecording&&d.trackId===ie.id&&d.peaks.length>0&&v.jsx(Tt,{clipId:"recording-preview",trackIndex:O,clipIndex:X.length,trackName:"Recording...",startSample:d.startSample,durationSamples:d.durationSamples,samplesPerPixel:K,showHeader:u,disableHeaderDrag:!0,isSelected:ie.id===$,trackId:ie.id,children:v.jsx(fn,{index:0,data:d.peaks,bits:16,length:Math.floor(d.peaks.length/2),isSelected:ie.id===$,clipStartSample:d.startSample,clipDurationSamples:d.durationSamples},`${O}-recording-0`)},`${O}-recording`)]})},ie.id)}),k.length>0&&v.jsx(zn,{height:30,width:ye,children:k.map((X,O)=>{const ie=X.start*ee/K,fe=X.end*ee/K,ve=l?l(X):X.id;return v.jsx(Pn,{annotationId:X.id,annotationIndex:O,startPosition:ie,endPosition:fe,label:ve,color:"#ff9800",isActive:X.id===y,onClick:()=>He(X),editable:S},X.id)})}),C!==h&&v.jsx(Sn,{startPosition:Math.min(C,h)*ee/K+(ne.show?ne.width:0),endPosition:Math.max(C,h)*ee/K+(ne.show?ne.width:0),color:x.selectionColor}),(I||C===h)&&(n?n({position:(m.current??0)*ee/K+(ne.show?ne.width:0),color:x.playheadColor,isPlaying:I,currentTimeRef:m,playbackStartTimeRef:b,audioStartPositionRef:p,samplesPerPixel:K,sampleRate:ee,controlsOffset:ne.show?ne.width:0,getAudioContextTime:()=>W.getContext().currentTime}):v.jsx(Ns,{color:x.playheadColor,controlsOffset:ne.show?ne.width:0}))]})}),k.length>0&&v.jsx(jn,{annotations:k,activeAnnotationId:y??void 0,shouldScrollToActive:!0,editable:S,controls:S?a:void 0,annotationListConfig:{linkEndpoints:R,continuousPlay:E},height:s,renderAnnotationItem:o,onAnnotationUpdate:X=>{Z(X)}})]})})},qs=A.div`
+`,fn=({clipStartSample:e,clipDurationSamples:t,...n})=>{const a=i.useRef(null),r=i.useRef(null),s=rt(),{waveHeight:o}=at(),{isPlaying:l,currentTimeRef:c,playbackStartTimeRef:u,audioStartPositionRef:f}=Ie(),{samplesPerPixel:w,sampleRate:g}=we(),d=s?.waveProgressColor||"rgba(0, 0, 0, 0.1)";i.useEffect(()=>{const b=()=>{if(a.current){let p;if(l){const y=W.getContext().currentTime-(u.current??0);p=(f.current??0)+y}else p=c.current??0;const C=p*g,h=e+t;let k=0;if(C<=e)k=0;else if(C>=h)k=n.length;else{const y=C-e;k=Math.floor(y/w)}a.current.style.width=`${k}px`}l&&(r.current=requestAnimationFrame(b))};return l?r.current=requestAnimationFrame(b):b(),()=>{r.current&&(cancelAnimationFrame(r.current),r.current=null)}},[l,g,w,e,t,n.length,c,u,f]),i.useEffect(()=>{if(!l&&a.current){const p=(c.current??0)*g,C=e+t;let h=0;if(p<=e)h=0;else if(p>=C)h=n.length;else{const k=p-e;h=Math.floor(k/w)}a.current.style.width=`${h}px`}});const x=s?.waveformDrawMode||"inverted";let I;x==="inverted"?I=n.isSelected&&s?s.selectedWaveFillColor:s?.waveFillColor||"white":I=n.isSelected&&s?s.selectedWaveOutlineColor:s?.waveOutlineColor||"grey";const m=Ye(I);return v.jsxs(Ls,{children:[v.jsx(Ys,{$color:m,$height:o,$top:n.index*o,$width:n.length}),v.jsx(Os,{ref:a,$color:d,$height:o,$top:n.index*o}),v.jsx(Ks,{children:v.jsx(Dn,{...n,transparentBackground:!0})})]})},Us=60,Js=({renderTrackControls:e,renderTimestamp:t,renderPlayhead:n,annotationControls:a,annotationListConfig:r,annotationTextHeight:s,renderAnnotationItem:o,getAnnotationBoxLabel:l,className:c,showClipHeaders:u=!1,interactiveClips:f=!1,showFades:w=!1,touchOptimized:g=!1,recordingState:d})=>{const x=rt(),{isPlaying:I,currentTimeRef:m,playbackStartTimeRef:b,audioStartPositionRef:p}=Ie(),{selectionStart:C,selectionEnd:h,annotations:k,activeAnnotationId:y,annotationsEditable:S,linkEndpoints:R,continuousPlay:E,selectedTrackId:$,loopStart:M,loopEnd:D,isLoopEnabled:_}=Te(),{setAnnotations:Z,setActiveAnnotationId:T,setTrackMute:P,setTrackSolo:j,setTrackVolume:U,setTrackPan:V,setSelection:L,play:re,setScrollContainer:te,setSelectedTrackId:Q,setCurrentTime:q,setLoopRegion:be}=he(),{audioBuffers:Ee,peaksDataArray:Y,trackStates:le,tracks:pe,duration:ce,samplesPerPixel:K,sampleRate:ee,waveHeight:We,timeScaleHeight:je,controls:ne,playoutRef:J,barWidth:ae,barGap:F}=we(),[ue,de]=i.useState(!1),Ce=i.useRef(null),st=i.useCallback(X=>{Ce.current=X,te(X)},[te]);let Ae=Ee.length>0?ce:Us;if(d?.isRecording){const O=(d.startSample+d.durationSamples)/ee;Ae=Math.max(Ae,O+10)}const ye=Math.floor(Ae*ee/K),He=async X=>{console.log("Annotation clicked:",X.id),T(X.id);const O=E?void 0:X.end-X.start;await re(X.start,O)},Ve=i.useCallback(X=>{if(X>=0&&X<pe.length){const O=pe[X];Q(O.id)}},[pe,Q]),it=X=>{const O=X.currentTarget.getBoundingClientRect(),ie=ne.show?ne.width:0,ve=(X.clientX-O.left-ie)*K/ee,oe=X.clientY-O.top;let Pe=0,Se=-1;for(let ke=0;ke<Y.length;ke++){const Xe=Y[ke],qe=(Xe.length>0?Math.max(...Xe.map(Ge=>Ge.peaks.data.length)):1)*We+(u?22:0);if(oe>=Pe&&oe<Pe+qe){Se=ke;break}Pe+=qe}Se!==-1&&Ve(Se),de(!0),q(ve),L(ve,ve)},lt=X=>{if(!ue)return;const O=X.currentTarget.getBoundingClientRect(),ie=ne.show?ne.width:0,ve=(X.clientX-O.left-ie)*K/ee,_e=Math.min(C,ve),oe=Math.max(C,ve);L(_e,oe)},Ne=X=>{if(!ue)return;de(!1);const O=X.currentTarget.getBoundingClientRect(),ie=ne.show?ne.width:0,ve=(X.clientX-O.left-ie)*K/ee,_e=Math.min(C,ve),oe=Math.max(C,ve);Math.abs(oe-_e)<.1?(q(_e),I&&J.current?(J.current.stop(),re(_e)):J.current&&J.current.stop()):L(_e,oe)};return pe.some(X=>X.clips.length>0)&&(Ee.length===0||Y.length===0)?v.jsx("div",{className:c,children:"Loading waveform..."}):v.jsx(Rn,{children:v.jsxs(yt.Provider,{value:{samplesPerPixel:K,sampleRate:ee,zoomLevels:[K],waveHeight:We,timeScaleHeight:je,duration:Ae,controls:ne,barWidth:ae,barGap:F},children:[v.jsx(Vt,{theme:x,backgroundColor:Ye(x.waveOutlineColor),timescaleBackgroundColor:x.timescaleBackgroundColor,scrollContainerWidth:ye+(ne.show?ne.width:0),timescaleWidth:ye,tracksWidth:ye,controlsWidth:ne.show?ne.width:0,onTracksMouseDown:it,onTracksMouseMove:lt,onTracksMouseUp:Ne,scrollContainerRef:st,isSelecting:ue,timescale:je>0?v.jsxs(v.Fragment,{children:[v.jsx(Bn,{duration:Ae*1e3,marker:1e4,bigStep:5e3,secondStep:1e3,renderTimestamp:t}),_&&v.jsx(br,{startPosition:Math.min(M,D)*ee/K,endPosition:Math.max(M,D)*ee/K,markerColor:x.loopMarkerColor,regionColor:x.loopRegionColor,minPosition:0,maxPosition:ye,controlsOffset:ne.show?ne.width:0,onLoopRegionChange:(X,O)=>{const ie=X*K/ee,fe=O*K/ee;be(ie,fe)}})]}):void 0,children:v.jsxs(v.Fragment,{children:[Y.map((X,O)=>{const ie=pe[O];if(!ie)return null;const fe=le[O]||{name:`Track ${O+1}`,muted:!1,soloed:!1,volume:1,pan:0},ve=e?e(O):v.jsxs(Vr,{onClick:()=>Ve(O),children:[v.jsx(Pr,{style:{justifyContent:"center"},children:fe.name||`Track ${O+1}`}),v.jsxs(Zr,{children:[v.jsx(tn,{$variant:fe.muted?"danger":"outline",onClick:()=>P(O,!fe.muted),children:"Mute"}),v.jsx(tn,{$variant:fe.soloed?"info":"outline",onClick:()=>j(O,!fe.soloed),children:"Solo"})]}),v.jsxs(an,{children:[v.jsx(zr,{}),v.jsx(nn,{min:"0",max:"1",step:"0.01",value:fe.volume,onChange:oe=>U(O,parseFloat(oe.target.value))}),v.jsx(jr,{})]}),v.jsxs(an,{children:[v.jsx("span",{children:"L"}),v.jsx(nn,{min:"-1",max:"1",step:"0.01",value:fe.pan,onChange:oe=>V(O,parseFloat(oe.target.value))}),v.jsx("span",{children:"R"})]})]}),_e=X.length>0?Math.max(...X.map(oe=>oe.peaks.data.length)):1;return v.jsx(Pt.Provider,{value:ve,children:v.jsxs(Tn,{numChannels:_e,backgroundColor:Ye(x.waveOutlineColor),offset:0,width:ye,hasClipHeaders:u,trackId:ie.id,isSelected:ie.id===$,children:[X.map((oe,Pe)=>{const Se=oe.peaks,ke=Se.length;return v.jsx(Tt,{clipId:oe.clipId,trackIndex:O,clipIndex:Pe,trackName:oe.trackName,startSample:oe.startSample,durationSamples:oe.durationSamples,samplesPerPixel:K,showHeader:u,disableHeaderDrag:!f,isSelected:ie.id===$,trackId:ie.id,fadeIn:oe.fadeIn,fadeOut:oe.fadeOut,sampleRate:ee,showFades:w,touchOptimized:g,onMouseDown:Xe=>{Xe.target.closest('[role="button"][aria-roledescription="draggable"]')||Ve(O)},children:Se.data.map((Xe,Ke)=>v.jsx(fn,{index:Ke,data:Xe,bits:Se.bits,length:ke,isSelected:ie.id===$,clipStartSample:oe.startSample,clipDurationSamples:oe.durationSamples},`${O}-${Pe}-${Ke}`))},`${O}-${Pe}`)}),d?.isRecording&&d.trackId===ie.id&&d.peaks.length>0&&v.jsx(Tt,{clipId:"recording-preview",trackIndex:O,clipIndex:X.length,trackName:"Recording...",startSample:d.startSample,durationSamples:d.durationSamples,samplesPerPixel:K,showHeader:u,disableHeaderDrag:!0,isSelected:ie.id===$,trackId:ie.id,children:v.jsx(fn,{index:0,data:d.peaks,bits:16,length:Math.floor(d.peaks.length/2),isSelected:ie.id===$,clipStartSample:d.startSample,clipDurationSamples:d.durationSamples},`${O}-recording-0`)},`${O}-recording`)]})},ie.id)}),k.length>0&&v.jsx(zn,{height:30,width:ye,children:k.map((X,O)=>{const ie=X.start*ee/K,fe=X.end*ee/K,ve=l?l(X,O):X.id;return v.jsx(Pn,{annotationId:X.id,annotationIndex:O,startPosition:ie,endPosition:fe,label:ve,color:"#ff9800",isActive:X.id===y,onClick:()=>He(X),editable:S},X.id)})}),C!==h&&v.jsx(Sn,{startPosition:Math.min(C,h)*ee/K+(ne.show?ne.width:0),endPosition:Math.max(C,h)*ee/K+(ne.show?ne.width:0),color:x.selectionColor}),(I||C===h)&&(n?n({position:(m.current??0)*ee/K+(ne.show?ne.width:0),color:x.playheadColor,isPlaying:I,currentTimeRef:m,playbackStartTimeRef:b,audioStartPositionRef:p,samplesPerPixel:K,sampleRate:ee,controlsOffset:ne.show?ne.width:0,getAudioContextTime:()=>W.getContext().currentTime}):v.jsx(Ns,{color:x.playheadColor,controlsOffset:ne.show?ne.width:0}))]})}),k.length>0&&v.jsx(jn,{annotations:k,activeAnnotationId:y??void 0,shouldScrollToActive:!0,editable:S,controls:S?a:void 0,annotationListConfig:{linkEndpoints:R,continuousPlay:E},height:s,renderAnnotationItem:o,onAnnotationUpdate:X=>{Z(X)}})]})})},qs=A.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1267,5 +1267,5 @@
 `,ai=A.div`
   position: relative;
   z-index: 2;
-`,ri=({clipStartSample:e,clipDurationSamples:t,...n})=>{const a=i.useRef(null),r=i.useRef(null),s=rt(),{waveHeight:o}=at(),{isPlaying:l,currentTimeRef:c}=It(),{samplesPerPixel:u,sampleRate:f}=At(),w=s?.waveProgressColor||"rgba(0, 0, 0, 0.1)";i.useEffect(()=>{const I=()=>{if(a.current){const b=(c.current??0)*f,p=e+t;let C=0;if(b<=e)C=0;else if(b>=p)C=n.length;else{const h=b-e;C=Math.floor(h/u)}a.current.style.width=`${C}px`}l&&(r.current=requestAnimationFrame(I))};return l?r.current=requestAnimationFrame(I):I(),()=>{r.current&&(cancelAnimationFrame(r.current),r.current=null)}},[l,f,u,e,t,n.length,c]),i.useEffect(()=>{if(!l&&a.current){const m=(c.current??0)*f,b=e+t;let p=0;if(m<=e)p=0;else if(m>=b)p=n.length;else{const C=m-e;p=Math.floor(C/u)}a.current.style.width=`${p}px`}});const g=s?.waveformDrawMode||"inverted";let d;g==="inverted"?d=s?.selectedWaveFillColor||s?.waveFillColor||"white":d=s?.selectedWaveOutlineColor||s?.waveOutlineColor||"grey";const x=Ye(d);return v.jsxs(ei,{children:[v.jsx(ti,{$color:x,$height:o,$top:n.index*o,$width:n.length}),v.jsx(ni,{ref:a,$color:w,$height:o,$top:n.index*o}),v.jsx(ai,{children:v.jsx(Dn,{...n,isSelected:!0,transparentBackground:!0})})]})},oi=({annotationTextHeight:e,getAnnotationBoxLabel:t,renderAnnotationItem:n,editable:a=!1,onAnnotationUpdate:r,className:s})=>{const o=rt(),{isPlaying:l,currentTimeRef:c}=It(),{annotations:u,activeAnnotationId:f,continuousPlay:w}=aa(),{play:g,seekTo:d,setActiveAnnotationId:x,setAnnotations:I}=ra(),{duration:m,peaksDataArray:b,sampleRate:p,waveHeight:C,timeScaleHeight:h,samplesPerPixel:k,controls:y,playoutRef:S,barWidth:R,barGap:E}=At(),[$,M]=i.useState(0),[D,_]=i.useState(0),[Z,T]=i.useState(!1),P=i.useRef(null),j=Math.floor(m*p/k),U=i.useCallback(async Y=>{x(Y.id),g(Y.start)},[x,g]),V=i.useCallback(Y=>{I(Y),r?.(Y)},[I,r]),{onDragStart:L,onDragMove:re,onDragEnd:te}=Ln({annotations:u,onAnnotationsChange:V,samplesPerPixel:k,sampleRate:p,duration:m,linkEndpoints:!0}),Q=i.useCallback(Y=>{const le=Y.currentTarget.getBoundingClientRect(),pe=y.show?y.width:0,K=(Y.clientX-le.left-pe)*k/p;T(!0),M(K),_(K)},[y,k,p]),q=i.useCallback(Y=>{if(!Z)return;const le=Y.currentTarget.getBoundingClientRect(),pe=y.show?y.width:0,K=(Y.clientX-le.left-pe)*k/p;_(K)},[Z,y,k,p]),be=i.useCallback(Y=>{if(!Z)return;T(!1);const le=Y.currentTarget.getBoundingClientRect(),pe=y.show?y.width:0,K=(Y.clientX-le.left-pe)*k/p,ee=Math.min($,K),We=Math.max($,K);Math.abs(We-ee)<.1?(d(ee),M(ee),_(ee),l&&S.current&&(S.current.stop(),g(ee))):(M(ee),_(We))},[Z,$,k,p,y,d,l,S,g]);if(b.length===0)return v.jsx("div",{className:s,children:"Loading waveform..."});const Ee=null;return v.jsx(Rn,{children:v.jsxs(yt.Provider,{value:{samplesPerPixel:k,sampleRate:p,zoomLevels:[k],waveHeight:C,timeScaleHeight:h,duration:m,controls:y,barWidth:R,barGap:E},children:[v.jsx(Vt,{theme:o,backgroundColor:Ye(o.waveOutlineColor),timescaleBackgroundColor:o.timescaleBackgroundColor,scrollContainerWidth:j+(y.show?y.width:0),timescaleWidth:j,tracksWidth:j,controlsWidth:y.show?y.width:0,onTracksMouseDown:Q,onTracksMouseMove:q,onTracksMouseUp:be,scrollContainerRef:Y=>{P.current=Y},isSelecting:Z,timescale:h>0?v.jsx(Bn,{duration:m*1e3,marker:1e4,bigStep:5e3,secondStep:1e3}):void 0,children:v.jsxs(v.Fragment,{children:[b.map((Y,le)=>{const pe=Y.length>0?Math.max(...Y.map(ce=>ce.peaks.data.length)):1;return v.jsx(Pt.Provider,{value:Ee,children:v.jsx(Tn,{numChannels:pe,backgroundColor:Ye(o.waveOutlineColor),offset:0,width:j,hasClipHeaders:!1,trackId:`media-element-track-${le}`,isSelected:!0,children:Y.map((ce,K)=>{const ee=ce.peaks,We=ee.length;return v.jsx(Tt,{clipId:ce.clipId,trackIndex:le,clipIndex:K,trackName:ce.trackName,startSample:ce.startSample,durationSamples:ce.durationSamples,samplesPerPixel:k,showHeader:!1,disableHeaderDrag:!0,isSelected:!0,trackId:`media-element-track-${le}`,children:ee.data.map((je,ne)=>v.jsx(ri,{index:ne,data:je,bits:ee.bits,length:We,clipStartSample:ce.startSample,clipDurationSamples:ce.durationSamples},`${le}-${K}-${ne}`))},`${le}-${K}`)})})},le)}),u.length>0&&v.jsx(Re.DndContext,{onDragStart:L,onDragMove:re,onDragEnd:te,modifiers:a?[Da.restrictToHorizontalAxis]:[],children:v.jsx(zn,{height:30,width:j,children:u.map((Y,le)=>{const pe=Y.start*p/k,ce=Y.end*p/k,K=t?t(Y):Y.id;return v.jsx(Pn,{annotationId:Y.id,annotationIndex:le,startPosition:pe,endPosition:ce,label:K,color:"#ff9800",isActive:Y.id===f,onClick:()=>U(Y),editable:a},Y.id)})})}),$!==D&&v.jsx(Sn,{startPosition:Math.min($,D)*p/k+(y.show?y.width:0),endPosition:Math.max($,D)*p/k+(y.show?y.width:0),color:o.selectionColor}),v.jsx(Qs,{color:o.playheadColor,controlsOffset:y.show?y.width:0})]})}),u.length>0&&v.jsx(jn,{annotations:u,activeAnnotationId:f??void 0,shouldScrollToActive:!0,editable:a,annotationListConfig:{linkEndpoints:!0,continuousPlay:w},height:e,onAnnotationUpdate:V,renderAnnotationItem:n})]})})};exports.Tone=hn;exports.AudioPosition=Fs;exports.AutomaticScrollCheckbox=Vs;exports.ContinuousPlayCheckbox=Ps;exports.DownloadAnnotationsButton=Hs;exports.EditableCheckbox=js;exports.ExportWavButton=Xs;exports.FastForwardButton=Ss;exports.LinkEndpointsCheckbox=zs;exports.LoopButton=Rs;exports.MasterVolumeControl=Ts;exports.MediaElementPlaylistProvider=ws;exports.MediaElementWaveform=oi;exports.PauseButton=ks;exports.PlayButton=ys;exports.RewindButton=As;exports.SelectionTimeInputs=Zs;exports.SetLoopRegionButton=Es;exports.SkipBackwardButton=$s;exports.SkipForwardButton=Ms;exports.StopButton=Is;exports.TimeFormatSelect=Ws;exports.Waveform=Js;exports.WaveformPlaylistProvider=bs;exports.ZoomInButton=Ds;exports.ZoomOutButton=Bs;exports.createEffectChain=cs;exports.createEffectInstance=nt;exports.effectCategories=os;exports.effectDefinitions=ot;exports.getEffectDefinition=jt;exports.getEffectsByCategory=rs;exports.getShortcutLabel=Ho;exports.getWaveformDataMetadata=co;exports.loadPeaksFromWaveformData=lo;exports.loadWaveformData=zt;exports.useAnnotationDragHandlers=Ln;exports.useAnnotationKeyboardControls=Go;exports.useAudioTracks=Zo;exports.useClipDragHandlers=Vo;exports.useClipSplitting=jo;exports.useDragSensors=zo;exports.useDynamicEffects=us;exports.useExportWav=Yn;exports.useIntegratedRecording=as;exports.useKeyboardShortcuts=vt;exports.useMasterAnalyser=Wo;exports.useMasterVolume=Gn;exports.useMediaElementAnimation=It;exports.useMediaElementControls=ra;exports.useMediaElementData=At;exports.useMediaElementState=aa;exports.usePlaybackAnimation=Ie;exports.usePlaybackShortcuts=Xo;exports.usePlaylistControls=he;exports.usePlaylistData=we;exports.usePlaylistState=Te;exports.useTimeFormat=Hn;exports.useTrackDynamicEffects=ds;exports.useWaveformPlaylist=vs;exports.useZoomControls=Xn;exports.waveformDataToPeaks=Fn;
+`,ri=({clipStartSample:e,clipDurationSamples:t,...n})=>{const a=i.useRef(null),r=i.useRef(null),s=rt(),{waveHeight:o}=at(),{isPlaying:l,currentTimeRef:c}=It(),{samplesPerPixel:u,sampleRate:f}=At(),w=s?.waveProgressColor||"rgba(0, 0, 0, 0.1)";i.useEffect(()=>{const I=()=>{if(a.current){const b=(c.current??0)*f,p=e+t;let C=0;if(b<=e)C=0;else if(b>=p)C=n.length;else{const h=b-e;C=Math.floor(h/u)}a.current.style.width=`${C}px`}l&&(r.current=requestAnimationFrame(I))};return l?r.current=requestAnimationFrame(I):I(),()=>{r.current&&(cancelAnimationFrame(r.current),r.current=null)}},[l,f,u,e,t,n.length,c]),i.useEffect(()=>{if(!l&&a.current){const m=(c.current??0)*f,b=e+t;let p=0;if(m<=e)p=0;else if(m>=b)p=n.length;else{const C=m-e;p=Math.floor(C/u)}a.current.style.width=`${p}px`}});const g=s?.waveformDrawMode||"inverted";let d;g==="inverted"?d=s?.selectedWaveFillColor||s?.waveFillColor||"white":d=s?.selectedWaveOutlineColor||s?.waveOutlineColor||"grey";const x=Ye(d);return v.jsxs(ei,{children:[v.jsx(ti,{$color:x,$height:o,$top:n.index*o,$width:n.length}),v.jsx(ni,{ref:a,$color:w,$height:o,$top:n.index*o}),v.jsx(ai,{children:v.jsx(Dn,{...n,isSelected:!0,transparentBackground:!0})})]})},oi=({annotationTextHeight:e,getAnnotationBoxLabel:t,renderAnnotationItem:n,editable:a=!1,onAnnotationUpdate:r,className:s})=>{const o=rt(),{isPlaying:l,currentTimeRef:c}=It(),{annotations:u,activeAnnotationId:f,continuousPlay:w}=aa(),{play:g,seekTo:d,setActiveAnnotationId:x,setAnnotations:I}=ra(),{duration:m,peaksDataArray:b,sampleRate:p,waveHeight:C,timeScaleHeight:h,samplesPerPixel:k,controls:y,playoutRef:S,barWidth:R,barGap:E}=At(),[$,M]=i.useState(0),[D,_]=i.useState(0),[Z,T]=i.useState(!1),P=i.useRef(null),j=Math.floor(m*p/k),U=i.useCallback(async Y=>{x(Y.id),g(Y.start)},[x,g]),V=i.useCallback(Y=>{I(Y),r?.(Y)},[I,r]),{onDragStart:L,onDragMove:re,onDragEnd:te}=Ln({annotations:u,onAnnotationsChange:V,samplesPerPixel:k,sampleRate:p,duration:m,linkEndpoints:!0}),Q=i.useCallback(Y=>{const le=Y.currentTarget.getBoundingClientRect(),pe=y.show?y.width:0,K=(Y.clientX-le.left-pe)*k/p;T(!0),M(K),_(K)},[y,k,p]),q=i.useCallback(Y=>{if(!Z)return;const le=Y.currentTarget.getBoundingClientRect(),pe=y.show?y.width:0,K=(Y.clientX-le.left-pe)*k/p;_(K)},[Z,y,k,p]),be=i.useCallback(Y=>{if(!Z)return;T(!1);const le=Y.currentTarget.getBoundingClientRect(),pe=y.show?y.width:0,K=(Y.clientX-le.left-pe)*k/p,ee=Math.min($,K),We=Math.max($,K);Math.abs(We-ee)<.1?(d(ee),M(ee),_(ee),l&&S.current&&(S.current.stop(),g(ee))):(M(ee),_(We))},[Z,$,k,p,y,d,l,S,g]);if(b.length===0)return v.jsx("div",{className:s,children:"Loading waveform..."});const Ee=null;return v.jsx(Rn,{children:v.jsxs(yt.Provider,{value:{samplesPerPixel:k,sampleRate:p,zoomLevels:[k],waveHeight:C,timeScaleHeight:h,duration:m,controls:y,barWidth:R,barGap:E},children:[v.jsx(Vt,{theme:o,backgroundColor:Ye(o.waveOutlineColor),timescaleBackgroundColor:o.timescaleBackgroundColor,scrollContainerWidth:j+(y.show?y.width:0),timescaleWidth:j,tracksWidth:j,controlsWidth:y.show?y.width:0,onTracksMouseDown:Q,onTracksMouseMove:q,onTracksMouseUp:be,scrollContainerRef:Y=>{P.current=Y},isSelecting:Z,timescale:h>0?v.jsx(Bn,{duration:m*1e3,marker:1e4,bigStep:5e3,secondStep:1e3}):void 0,children:v.jsxs(v.Fragment,{children:[b.map((Y,le)=>{const pe=Y.length>0?Math.max(...Y.map(ce=>ce.peaks.data.length)):1;return v.jsx(Pt.Provider,{value:Ee,children:v.jsx(Tn,{numChannels:pe,backgroundColor:Ye(o.waveOutlineColor),offset:0,width:j,hasClipHeaders:!1,trackId:`media-element-track-${le}`,isSelected:!0,children:Y.map((ce,K)=>{const ee=ce.peaks,We=ee.length;return v.jsx(Tt,{clipId:ce.clipId,trackIndex:le,clipIndex:K,trackName:ce.trackName,startSample:ce.startSample,durationSamples:ce.durationSamples,samplesPerPixel:k,showHeader:!1,disableHeaderDrag:!0,isSelected:!0,trackId:`media-element-track-${le}`,children:ee.data.map((je,ne)=>v.jsx(ri,{index:ne,data:je,bits:ee.bits,length:We,clipStartSample:ce.startSample,clipDurationSamples:ce.durationSamples},`${le}-${K}-${ne}`))},`${le}-${K}`)})})},le)}),u.length>0&&v.jsx(Re.DndContext,{onDragStart:L,onDragMove:re,onDragEnd:te,modifiers:a?[Da.restrictToHorizontalAxis]:[],children:v.jsx(zn,{height:30,width:j,children:u.map((Y,le)=>{const pe=Y.start*p/k,ce=Y.end*p/k,K=t?t(Y,le):Y.id;return v.jsx(Pn,{annotationId:Y.id,annotationIndex:le,startPosition:pe,endPosition:ce,label:K,color:"#ff9800",isActive:Y.id===f,onClick:()=>U(Y),editable:a},Y.id)})})}),$!==D&&v.jsx(Sn,{startPosition:Math.min($,D)*p/k+(y.show?y.width:0),endPosition:Math.max($,D)*p/k+(y.show?y.width:0),color:o.selectionColor}),v.jsx(Qs,{color:o.playheadColor,controlsOffset:y.show?y.width:0})]})}),u.length>0&&v.jsx(jn,{annotations:u,activeAnnotationId:f??void 0,shouldScrollToActive:!0,editable:a,annotationListConfig:{linkEndpoints:!0,continuousPlay:w},height:e,onAnnotationUpdate:V,renderAnnotationItem:n})]})})};exports.Tone=hn;exports.AudioPosition=Fs;exports.AutomaticScrollCheckbox=Vs;exports.ContinuousPlayCheckbox=Ps;exports.DownloadAnnotationsButton=Hs;exports.EditableCheckbox=js;exports.ExportWavButton=Xs;exports.FastForwardButton=Ss;exports.LinkEndpointsCheckbox=zs;exports.LoopButton=Rs;exports.MasterVolumeControl=Ts;exports.MediaElementPlaylistProvider=ws;exports.MediaElementWaveform=oi;exports.PauseButton=ks;exports.PlayButton=ys;exports.RewindButton=As;exports.SelectionTimeInputs=Zs;exports.SetLoopRegionButton=Es;exports.SkipBackwardButton=$s;exports.SkipForwardButton=Ms;exports.StopButton=Is;exports.TimeFormatSelect=Ws;exports.Waveform=Js;exports.WaveformPlaylistProvider=bs;exports.ZoomInButton=Ds;exports.ZoomOutButton=Bs;exports.createEffectChain=cs;exports.createEffectInstance=nt;exports.effectCategories=os;exports.effectDefinitions=ot;exports.getEffectDefinition=jt;exports.getEffectsByCategory=rs;exports.getShortcutLabel=Ho;exports.getWaveformDataMetadata=co;exports.loadPeaksFromWaveformData=lo;exports.loadWaveformData=zt;exports.useAnnotationDragHandlers=Ln;exports.useAnnotationKeyboardControls=Go;exports.useAudioTracks=Zo;exports.useClipDragHandlers=Vo;exports.useClipSplitting=jo;exports.useDragSensors=zo;exports.useDynamicEffects=us;exports.useExportWav=Yn;exports.useIntegratedRecording=as;exports.useKeyboardShortcuts=vt;exports.useMasterAnalyser=Wo;exports.useMasterVolume=Gn;exports.useMediaElementAnimation=It;exports.useMediaElementControls=ra;exports.useMediaElementData=At;exports.useMediaElementState=aa;exports.usePlaybackAnimation=Ie;exports.usePlaybackShortcuts=Xo;exports.usePlaylistControls=he;exports.usePlaylistData=we;exports.usePlaylistState=Te;exports.useTimeFormat=Hn;exports.useTrackDynamicEffects=ds;exports.useWaveformPlaylist=vs;exports.useZoomControls=Xn;exports.waveformDataToPeaks=Fn;
 //# sourceMappingURL=index.js.map