react-mirt/dist/index.esm.js

An iOS inspired audio trimmer component for React

import e,{useState as t,useRef as n,useEffect as r}from"react";import a from"classnames";var i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},i.apply(this,arguments)};function o(e,t,n,r){return new(n||(n=Promise))((function(a,i){function o(e){try{u(r.next(e))}catch(e){i(e)}}function c(e){try{u(r.throw(e))}catch(e){i(e)}}function u(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,c)}u((r=r.apply(e,t||[])).next())}))}function c(e,t){var n,r,a,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=c(0),o.throw=c(1),o.return=c(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function c(c){return function(u){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;o&&(o=0,c[0]&&(i=0)),i;)try{if(n=1,r&&(a=2&c[0]?r.return:c[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,c[1])).done)return a;switch(r=0,a&&(c=[2&c[0],a.value]),c[0]){case 0:case 1:a=c;break;case 4:return i.label++,{value:c[1],done:!1};case 5:i.label++,r=c[1],c=[0];continue;case 7:c=i.ops.pop(),i.trys.pop();continue;default:if(!(a=i.trys,(a=a.length>0&&a[a.length-1])||6!==c[0]&&2!==c[0])){i=0;continue}if(3===c[0]&&(!a||c[1]>a[0]&&c[1]<a[3])){i.label=c[1];break}if(6===c[0]&&i.label<a[1]){i.label=a[1],a=c;break}if(a&&i.label<a[2]){i.label=a[2],i.ops.push(c);break}a[2]&&i.ops.pop(),i.trys.pop();continue}c=t.call(e,i)}catch(e){c=[6,e],r=0}finally{n=a=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,u])}}}"function"==typeof SuppressedError&&SuppressedError;var u=function(e){return e/1e3},l=function(e,t,n){return-1===e?0:e-t*e/n},f=function(e,t,n){return-1===e?n:e+t*(n-e)/n},s=function(e,t,n,r){var a=0;t>=0&&n?a=100*(e-(t-n*t/r))/n:a=100*e/r;return a.toFixed(4)},d=function(e,t,n,r){var a=0;t>=0&&n?a=100*(e-(t+n*(r-t)/r))*-1/n:a=100*e*-1/r+100;return a.toFixed(4)},m=function(a){var i=a.file,u=a.fineTuning,l=a.fineTuningResolution,f=a.duration,s=a.config,d=a.handleWaveformLoaded,m=t(),h=m[0],v=m[1],g=t({width:0,height:0}),p=g[0],w=g[1],y=t(),_=y[0],b=y[1],T=n(null),E=function(e){if(T.current){var t=T.current,n=t.getContext("2d"),r=t.width,a=t.height,i=r/e.length,o=i*-(s.waveformBarWidth-1);if(n){n.clearRect(0,0,r,a),n.fillStyle=s.waveformColor;for(var c=0;c<e.length;c++){var u=e[c]*a,l=c*i+o,f=a/2-u/2;n.fillRect(l,f,i-o,u)}}}};r((function(){!h&&i&&i.type.startsWith("audio")&&function(e){return o(void 0,void 0,void 0,(function(){var t;return c(this,(function(n){switch(n.label){case 0:return[4,e.arrayBuffer()];case 1:return t=n.sent(),[4,(new AudioContext).decodeAudioData(t)];case 2:return[4,n.sent().getChannelData(0)];case 3:return[2,n.sent()]}}))}))}(i).then((function(e){v(e)}))}),[]),r((function(){var e,t,n;T.current&&new ResizeObserver((e=x,t=50,void 0===t&&(t=3e3),function(){for(var r=this,a=[],i=0;i<arguments.length;i++)a[i]=arguments[i];clearTimeout(n),n=setTimeout((function(){return e.apply(r,a)}),t)})).observe(T.current)}),[T]),r((function(){if(T.current&&p.width>0&&h)(function(e,t,n,r,a,i){return o(void 0,void 0,void 0,(function(){var o,u,l,f,s,d,m,h,v,g,p,w,y;return c(this,(function(c){for(o=Math.floor(t.offsetWidth/i.waveformBlockWidth),n>=0?(l=n-r*n/a,f=n+r*(a-n)/a,s=Math.floor(e.length*l/a),d=Math.floor(e.length*f/a),u=e.slice(s,d)):u=e,m=Math.floor(u.length/o),h=[],v=0;v<o;v++){for(g=m*v,p=0,w=0;w<m;w++)p+=Math.abs(u[g+w]);h.push(p/m)}return y=Math.pow(Math.max.apply(Math,h),-1),[2,h.map((function(e){return e*y}))]}))}))})(h,T.current,u,l,f,s).then((function(e){b(e)}));else if(T.current){var e=T.current,t=e.getContext("2d");if(!t)return;t.clearRect(0,0,e.width,e.height)}}),[i,T,p.width,u,l,h]),r((function(){if(s.waveformLoading&&!_){var e=Array.from({length:100},(function(e,t){return.3*Math.sin(t/100*Math.PI*6)+.5})),t=setInterval((function(){_?clearInterval(t):(E(e),e.push(e.shift()))}),30);return function(){clearInterval(t)}}T.current&&_&&_.length>0&&(E(_),d())}),[_]);var x=function(){T.current&&w({width:T.current.offsetWidth,height:T.current.offsetHeight})};return e.createElement("canvas",{className:"mirt__waveform-canvas",ref:T,width:4*p.width,height:4*p.height})},h={showButton:!0,waveformColor:"rgba(255, 255, 255, 0.5)",waveformBlockWidth:4,waveformBarWidth:.5,waveformLoading:!1,fineTuningDelay:500,fineTuningScale:5},v=function(o){var c=o.className,v=o.style,g=o.file,p=o.onChange,w=o.onAudioLoaded,y=o.onWaveformLoaded,_=o.onError,b=o.start,T=o.end,E=o.options,x=i(i({},h),E),N=n(null),C=n(null),k=n(null),L=t(!1),M=L[0],D=L[1],I=t(null),B=I[0],W=I[1],A=t(0),P=A[0],R=A[1],O=t(0),S=O[0],j=O[1],U=t(0),Z=U[0],H=U[1],z=t(!1),F=z[0],V=z[1],G=t(!1),q=G[0],J=G[1],K=t(!1),Q=K[0],X=K[1],Y=t(0),$=Y[0],ee=Y[1],te=t(!1),ne=te[0],re=te[1],ae=t(-1),ie=ae[0],oe=ae[1],ce=$/x.fineTuningScale;r((function(){if(D(!1),g)if(g&&g.type.startsWith("audio")){var e=new Audio;e.preload="metadata",e.src=URL.createObjectURL(g),W(e)}else _&&_(new Error("Invalid file type"));else W(null)}),[g]),r((function(){B&&(null==B?void 0:B.src)&&(B.addEventListener("loadedmetadata",ue),B.load())}),[B]),r((function(){p&&M&&p({start:P,current:S,end:Z})}),[P,S,Z]),r((function(){var e;if(B)return ne&&(e=setInterval((function(){B.currentTime<u(Z)?B.currentTime>=u(S)&&j(1e3*B.currentTime):(fe(u(P)),j(P))}),10)),function(){clearInterval(e)}}),[ne]),r((function(){if(!(x.fineTuningDelay<=0)){var e=P,t=setTimeout((function(){F&&e===P&&-1===ie&&oe(P)}),x.fineTuningDelay);return function(){clearTimeout(t)}}}),[F,P]),r((function(){if(!(x.fineTuningDelay<=0)){var e=Z,t=setTimeout((function(){Q&&e===Z&&-1===ie&&oe(Z)}),x.fineTuningDelay);return function(){clearTimeout(t)}}}),[Q,Z]),r((function(){if(!(x.fineTuningDelay<=0)){var e=S,t=setTimeout((function(){q&&e===S&&-1===ie&&oe(S)}),x.fineTuningDelay);return function(){clearTimeout(t)}}}),[q,S]),r((function(){void 0!==b&&me(b)}),[b]),r((function(){void 0!==T&&he(T)}),[T]);var ue=function(){B&&(w&&w(B),B.removeEventListener("loadedmetadata",ue),le())},le=function(){if(B){var e=1e3*B.duration;R(0),j(0),H(e),ee(e),D(!0),p&&p({start:0,current:0,end:e})}},fe=function(e){B&&(B.pause(),e&&(B.currentTime=e),re(!1))},se=function(e,t){if(fe(),0==e.button)switch(t){case"start":V(!0);break;case"playhead":J(!0);break;case"end":X(!0)}},de=function(e){switch(e){case"start":V(!1);break;case"playhead":J(!1);break;case"end":X(!1)}oe(-1)},me=function(e){if(B){if(e>Z)return B.currentTime=u(Z),R(Z),void j(Z);B.currentTime=u(e),R(e),j(e)}},he=function(e){if(B){if(e<P)return B.currentTime=u(P),void H(P);if(e>$)return B.currentTime=u($),void H($);B.currentTime=u(e),H(e)}};return e.createElement("div",{className:a("mirt",{"mirt--initialized":M,"mirt--disabled":!M},c),style:v},x.showButton&&e.createElement("button",{className:"mirt__play-button",type:"button",onClick:function(){B&&(ne?fe():(S>=Z?(B.currentTime=u(P),j(P)):B.currentTime=u(S),B.play(),re(!0)))},disabled:!M},ne?e.createElement("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",className:"mirt__play-button-icon"},e.createElement("path",{d:"M12.404 2.364A2.364 2.364 0 0 0 10.041 0H6.134a2.364 2.364 0 0 0-2.363 2.364v27.273A2.364 2.364 0 0 0 6.134 32h3.907a2.364 2.364 0 0 0 2.363-2.363V2.364Zm15.826 0A2.364 2.364 0 0 0 25.866 0H21.96a2.364 2.364 0 0 0-2.364 2.364v27.273A2.364 2.364 0 0 0 21.96 32h3.906a2.364 2.364 0 0 0 2.364-2.363V2.364Z"})):e.createElement("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",className:"mirt__play-button-icon"},e.createElement("path",{d:"M2.919 29.696a2.304 2.304 0 0 0 3.458 1.995l23.765-13.723a2.277 2.277 0 0 0 1.144-1.976c0-.816-.436-1.57-1.144-1.979C24.266 10.623 12.33 3.731 6.409.313a2.325 2.325 0 0 0-3.49 2.014v27.37Z"}))),e.createElement("div",{className:"mirt__timeline"},e.createElement("div",{className:"mirt__range-handles"},e.createElement("div",{className:"mirt__range-handle-frame"},e.createElement("input",{ref:N,className:"mirt__range-handle mirt__range-handle--start",type:"range",min:l(ie,ce,$),max:f(ie,ce,$),value:P,onChange:function(e){if(B&&F){var t=parseInt(e.target.value);me(t)}},onPointerDown:function(e){return se(e,"start")},onPointerUp:function(){return de("start")},disabled:!M}),e.createElement("input",{ref:k,className:"mirt__range-handle mirt__range-handle--end",type:"range",min:l(ie,ce,$),max:f(ie,ce,$),value:Z,onChange:function(e){if(B&&Q){var t=parseInt(e.target.value);he(t),j(t<P?P:t>$?$:t)}},onPointerDown:function(e){return se(e,"end")},onPointerUp:function(){return de("end")},disabled:!M})),e.createElement("div",{className:"mirt__range-handle-playhead-track"},e.createElement("input",{ref:C,className:"mirt__range-handle mirt__range-handle--playhead",type:"range",min:l(ie,ce,$),max:f(ie,ce,$),value:S,onChange:function(e){if(B&&q){var t=parseInt(e.target.value);if(t<P)return B.currentTime=u(P),void j(P);if(t>Z)return B.currentTime=u(Z),void j(Z);B.currentTime=u(t),j(t)}},onPointerDown:function(e){return se(e,"playhead")},onPointerUp:function(){return de("playhead")},disabled:!M}))),e.createElement("div",{className:"mirt__handles"},e.createElement("div",{className:a("mirt__handle-frame",{"mirt__handle-frame--start-dragging":F,"mirt__handle-frame--end-dragging":Q}),style:{left:"".concat(s(P,ie,ce,$),"%"),right:"".concat(d(Z,ie,ce,$),"%")}},e.createElement("svg",{viewBox:"0 0 16 32",xmlns:"http://www.w3.org/2000/svg",className:"mirt__handle-icon mirt__handle-icon--start",fill:"currentColor"},e.createElement("path",{d:"M8.638 1.342 3.714 15.334a2.013 2.013 0 0 0 0 1.332l4.924 13.992a2.008 2.008 0 0 0 3.789-1.333L7.737 16l4.69-13.325a2.008 2.008 0 0 0-3.789-1.333Z"})),e.createElement("svg",{viewBox:"0 0 16 32",xmlns:"http://www.w3.org/2000/svg",className:"mirt__handle-icon mirt__handle-icon--end",fill:"currentColor"},e.createElement("path",{d:"m7.503 1.342 4.924 13.992c.151.43.151.901 0 1.332L7.503 30.658a2.008 2.008 0 0 1-3.788-1.333L8.404 16 3.714 2.675a2.008 2.008 0 0 1 3.789-1.333Z"}))),e.createElement("div",{className:"mirt__playhead-track"},e.createElement("div",{className:a("mirt__playhead",{"mirt__playhead--dragging":q||F||Q||ne}),style:{left:"".concat(s(S,ie,ce,$),"%")}}))),M&&e.createElement("div",{className:"mirt__waveform"},e.createElement(m,{file:g,fineTuning:ie,fineTuningResolution:ce,duration:$,config:x,handleWaveformLoaded:function(){y&&y()}}))))};export{v as default};
//# sourceMappingURL=index.esm.js.map