@waveform-playlist/browser 5.0.0-alpha.0 → 5.0.0-alpha.1

package/dist/index.js

@@ -645,10 +645,10 @@ React keys must be passed directly to JSX without using spread:
   top: 0;
   background: ${s=>s.$color};
   height: 100%;
-  z-index: 5;
+  z-index: 60; /* Above clips (z-index: 10) and fades (z-index: 50), below playhead (z-index: 100) */
   pointer-events: none;
   opacity: 0.3;
-`,N0=({startPosition:s,endPosition:e,color:t="#00ff00"})=>{const n=Math.max(0,e-s);return n<=0?null:E.jsx(O0,{$left:s,$width:n,$color:t})};function qn(s,e){const t=Math.floor(s/3600)%24,n=Math.floor(s/60)%60,i=(s%60).toFixed(e);return String(t).padStart(2,"0")+":"+String(n).padStart(2,"0")+":"+i.padStart(e+3,"0")}function nn(s,e){switch(e){case"seconds":return s.toFixed(0);case"thousandths":return s.toFixed(3);case"hh:mm:ss":return qn(s,0);case"hh:mm:ss.u":return qn(s,1);case"hh:mm:ss.uu":return qn(s,2);case"hh:mm:ss.uuu":return qn(s,3);default:return qn(s,3)}}function Du(s,e){if(!s)return 0;switch(e){case"seconds":case"thousandths":return parseFloat(s)||0;case"hh:mm:ss":case"hh:mm:ss.u":case"hh:mm:ss.uu":case"hh:mm:ss.uuu":{const t=s.split(":");if(t.length!==3)return 0;const n=parseInt(t[0],10)||0,i=parseInt(t[1],10)||0,r=parseFloat(t[2])||0;return n*3600+i*60+r}default:return 0}}var Pc=({id:s,label:e,value:t,format:n,className:i,onChange:r,readOnly:o=!1})=>{const[a,c]=S.useState("");S.useEffect(()=>{const p=nn(t,n);c(p)},[t,n,s]);const l=p=>{const d=p.target.value;c(d)},u=()=>{if(r){const p=Du(a,n);r(p)}c(nn(t,n))},h=p=>{p.key==="Enter"&&p.currentTarget.blur()};return E.jsxs(E.Fragment,{children:[E.jsx(a0,{as:"label",htmlFor:s,children:e}),E.jsx(wu,{type:"text",className:i,id:s,value:a,onChange:l,onBlur:u,onKeyDown:h,readOnly:o})]})},F0=({selectionStart:s,selectionEnd:e,onSelectionChange:t,className:n})=>{const[i,r]=S.useState("hh:mm:ss.uuu");S.useEffect(()=>{const c=document.querySelector(".time-format"),l=()=>{c&&r(c.value)};return c&&(r(c.value),c.addEventListener("change",l)),()=>{c?.removeEventListener("change",l)}},[]);const o=c=>{t&&t(c,e)},a=c=>{t&&t(s,c)};return E.jsxs(E.Fragment,{children:[E.jsx(Pc,{id:"audio_start",label:"Start of audio selection",value:s,format:i,className:"audio-start form-control mr-sm-2",onChange:o}),E.jsx(Pc,{id:"audio_end",label:"End of audio selection",value:e,format:i,className:"audio-end form-control mr-sm-2",onChange:a})]})};function $i(){return window.devicePixelRatio}var Ru=S.createContext($i()),V0=({children:s})=>{const[e,t]=S.useState($i());return matchMedia(`(resolution: ${$i()}dppx)`).addEventListener("change",()=>{t($i())},{once:!0}),E.jsx(Ru.Provider,{value:Math.ceil(e),children:s})},Eu=()=>S.useContext(Ru),$a=S.createContext({sampleRate:48e3,samplesPerPixel:1e3,zoomLevels:[1e3,1500,2e3,2500],waveHeight:80,timeScaleHeight:15,controls:{show:!1,width:150},duration:3e4,barWidth:1,barGap:0}),Gr=()=>S.useContext($a),qa=()=>S.useContext(W.ThemeContext),Mu=S.createContext(E.jsx(S.Fragment,{})),P0=()=>S.useContext(Mu),W0=0,B0=!1,$0=0,q0=0,j0={progress:W0,isPlaying:B0,selectionStart:$0,selectionEnd:q0};S.createContext(j0);S.createContext({setIsPlaying:()=>{},setProgress:()=>{},setSelection:()=>{}});var L0=({isSelected:s,transparentBackground:e,...t})=>{const n=qa(),{waveHeight:i,barWidth:r,barGap:o}=Gr(),a=Eu(),c=s&&n?n.selectedWaveOutlineColor:n?.waveOutlineColor,l=s&&n?n.selectedWaveFillColor:n?.waveFillColor,u=n?.waveformDrawMode||"inverted";return E.jsx(f0,{...t,...n,waveOutlineColor:c,waveFillColor:l,waveHeight:i,devicePixelRatio:a,barWidth:r,barGap:o,transparentBackground:e,drawMode:u})};function z0(s,e,t){return Math.ceil(s*t/e)}function Z0(s){const e=Math.floor(s/1e3),t=e%60;return`${(e-t)/60}:${String(t).padStart(2,"0")}`}var G0=W.div.attrs(s=>({style:{width:`${s.$cssWidth}px`,marginLeft:`${s.$controlWidth}px`,height:`${s.$timeScaleHeight}px`}}))`
+`,N0=({startPosition:s,endPosition:e,color:t="#00ff00"})=>{const n=Math.max(0,e-s);return n<=0?null:E.jsx(O0,{$left:s,$width:n,$color:t,"data-selection":!0})};function qn(s,e){const t=Math.floor(s/3600)%24,n=Math.floor(s/60)%60,i=(s%60).toFixed(e);return String(t).padStart(2,"0")+":"+String(n).padStart(2,"0")+":"+i.padStart(e+3,"0")}function nn(s,e){switch(e){case"seconds":return s.toFixed(0);case"thousandths":return s.toFixed(3);case"hh:mm:ss":return qn(s,0);case"hh:mm:ss.u":return qn(s,1);case"hh:mm:ss.uu":return qn(s,2);case"hh:mm:ss.uuu":return qn(s,3);default:return qn(s,3)}}function Du(s,e){if(!s)return 0;switch(e){case"seconds":case"thousandths":return parseFloat(s)||0;case"hh:mm:ss":case"hh:mm:ss.u":case"hh:mm:ss.uu":case"hh:mm:ss.uuu":{const t=s.split(":");if(t.length!==3)return 0;const n=parseInt(t[0],10)||0,i=parseInt(t[1],10)||0,r=parseFloat(t[2])||0;return n*3600+i*60+r}default:return 0}}var Pc=({id:s,label:e,value:t,format:n,className:i,onChange:r,readOnly:o=!1})=>{const[a,c]=S.useState("");S.useEffect(()=>{const p=nn(t,n);c(p)},[t,n,s]);const l=p=>{const d=p.target.value;c(d)},u=()=>{if(r){const p=Du(a,n);r(p)}c(nn(t,n))},h=p=>{p.key==="Enter"&&p.currentTarget.blur()};return E.jsxs(E.Fragment,{children:[E.jsx(a0,{as:"label",htmlFor:s,children:e}),E.jsx(wu,{type:"text",className:i,id:s,value:a,onChange:l,onBlur:u,onKeyDown:h,readOnly:o})]})},F0=({selectionStart:s,selectionEnd:e,onSelectionChange:t,className:n})=>{const[i,r]=S.useState("hh:mm:ss.uuu");S.useEffect(()=>{const c=document.querySelector(".time-format"),l=()=>{c&&r(c.value)};return c&&(r(c.value),c.addEventListener("change",l)),()=>{c?.removeEventListener("change",l)}},[]);const o=c=>{t&&t(c,e)},a=c=>{t&&t(s,c)};return E.jsxs(E.Fragment,{children:[E.jsx(Pc,{id:"audio_start",label:"Start of audio selection",value:s,format:i,className:"audio-start form-control mr-sm-2",onChange:o}),E.jsx(Pc,{id:"audio_end",label:"End of audio selection",value:e,format:i,className:"audio-end form-control mr-sm-2",onChange:a})]})};function $i(){return window.devicePixelRatio}var Ru=S.createContext($i()),V0=({children:s})=>{const[e,t]=S.useState($i());return matchMedia(`(resolution: ${$i()}dppx)`).addEventListener("change",()=>{t($i())},{once:!0}),E.jsx(Ru.Provider,{value:Math.ceil(e),children:s})},Eu=()=>S.useContext(Ru),$a=S.createContext({sampleRate:48e3,samplesPerPixel:1e3,zoomLevels:[1e3,1500,2e3,2500],waveHeight:80,timeScaleHeight:15,controls:{show:!1,width:150},duration:3e4,barWidth:1,barGap:0}),Gr=()=>S.useContext($a),qa=()=>S.useContext(W.ThemeContext),Mu=S.createContext(E.jsx(S.Fragment,{})),P0=()=>S.useContext(Mu),W0=0,B0=!1,$0=0,q0=0,j0={progress:W0,isPlaying:B0,selectionStart:$0,selectionEnd:q0};S.createContext(j0);S.createContext({setIsPlaying:()=>{},setProgress:()=>{},setSelection:()=>{}});var L0=({isSelected:s,transparentBackground:e,...t})=>{const n=qa(),{waveHeight:i,barWidth:r,barGap:o}=Gr(),a=Eu(),c=s&&n?n.selectedWaveOutlineColor:n?.waveOutlineColor,l=s&&n?n.selectedWaveFillColor:n?.waveFillColor,u=n?.waveformDrawMode||"inverted";return E.jsx(f0,{...t,...n,waveOutlineColor:c,waveFillColor:l,waveHeight:i,devicePixelRatio:a,barWidth:r,barGap:o,transparentBackground:e,drawMode:u})};function z0(s,e,t){return Math.ceil(s*t/e)}function Z0(s){const e=Math.floor(s/1e3),t=e%60;return`${(e-t)/60}:${String(t).padStart(2,"0")}`}var G0=W.div.attrs(s=>({style:{width:`${s.$cssWidth}px`,marginLeft:`${s.$controlWidth}px`,height:`${s.$timeScaleHeight}px`}}))`
   position: relative;
   overflow: visible; /* Allow time labels to render above the container */
   border-bottom: 1px solid ${s=>s.theme.timeColor};
@@ -1340,7 +1340,7 @@ React keys must be passed directly to JSX without using spread:
   z-index: 100; /* Below sticky controls (z-index: 101) so playhead is hidden when scrolled behind controls */
   pointer-events: none;
   will-change: transform;
-`,eb=({color:s="#ff0000",controlsOffset:e=0})=>{const t=S.useRef(null),n=S.useRef(null),{isPlaying:i,currentTimeRef:r,playbackStartTimeRef:o,audioStartPositionRef:a}=At(),{samplesPerPixel:c,sampleRate:l,progressBarWidth:u}=wt();return S.useEffect(()=>{const h=()=>{if(t.current){let p;if(i){const f=me().currentTime-(o.current??0);p=(a.current??0)+f}else p=r.current??0;const d=p*l/c+e;t.current.style.transform=`translate3d(${d}px, 0, 0)`}i&&(n.current=requestAnimationFrame(h))};return i?n.current=requestAnimationFrame(h):h(),()=>{n.current&&(cancelAnimationFrame(n.current),n.current=null)}},[i,l,c,e,r,o,a]),S.useEffect(()=>{if(!i&&t.current){const p=(r.current??0)*l/c+e;t.current.style.transform=`translate3d(${p}px, 0, 0)`}}),E.jsx(Jy,{ref:t,$color:s,$width:u})},tb=W.div`
+`,eb=({color:s="#ff0000",controlsOffset:e=0})=>{const t=S.useRef(null),n=S.useRef(null),{isPlaying:i,currentTimeRef:r,playbackStartTimeRef:o,audioStartPositionRef:a}=At(),{samplesPerPixel:c,sampleRate:l,progressBarWidth:u}=wt();return S.useEffect(()=>{const h=()=>{if(t.current){let p;if(i){const f=me().currentTime-(o.current??0);p=(a.current??0)+f}else p=r.current??0;const d=p*l/c+e;t.current.style.transform=`translate3d(${d}px, 0, 0)`}i&&(n.current=requestAnimationFrame(h))};return i?n.current=requestAnimationFrame(h):h(),()=>{n.current&&(cancelAnimationFrame(n.current),n.current=null)}},[i,l,c,e,r,o,a]),S.useEffect(()=>{if(!i&&t.current){const p=(r.current??0)*l/c+e;t.current.style.transform=`translate3d(${p}px, 0, 0)`}}),E.jsx(Jy,{ref:t,$color:s,$width:u,"data-playhead":!0})},tb=W.div`
   position: relative;
 `,sb=W.div`
   position: absolute;