react-mirt/dist/index.cjs.js

An iOS inspired audio trimmer component for React

"use strict";var e=require("react"),t=require("classnames");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),a=n(t),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 u(e,t,n,r){return new(n||(n=Promise))((function(a,i){function u(e){try{l(r.next(e))}catch(e){i(e)}}function o(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,o)}l((r=r.apply(e,t||[])).next())}))}function o(e,t){var n,r,a,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},u=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return u.next=o(0),u.throw=o(1),u.return=o(2),"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function o(o){return function(l){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;u&&(u=0,o[0]&&(i=0)),i;)try{if(n=1,r&&(a=2&o[0]?r.return:o[0]?r.throw||((a=r.return)&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;switch(r=0,a&&(o=[2&o[0],a.value]),o[0]){case 0:case 1:a=o;break;case 4:return i.label++,{value:o[1],done:!1};case 5:i.label++,r=o[1],o=[0];continue;case 7:o=i.ops.pop(),i.trys.pop();continue;default:if(!(a=i.trys,(a=a.length>0&&a[a.length-1])||6!==o[0]&&2!==o[0])){i=0;continue}if(3===o[0]&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(6===o[0]&&i.label<a[1]){i.label=a[1],a=o;break}if(a&&i.label<a[2]){i.label=a[2],i.ops.push(o);break}a[2]&&i.ops.pop(),i.trys.pop();continue}o=t.call(e,i)}catch(e){o=[6,e],r=0}finally{n=a=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,l])}}}"function"==typeof SuppressedError&&SuppressedError;var l=function(e){return e/1e3},c=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(t){var n=t.file,a=t.fineTuning,i=t.fineTuningResolution,l=t.duration,c=t.config,f=t.handleWaveformLoaded,s=e.useState(),d=s[0],m=s[1],h=e.useState({width:0,height:0}),v=h[0],g=h[1],p=e.useState(),w=p[0],y=p[1],_=e.useRef(null),E=function(e){if(_.current){var t=_.current,n=t.getContext("2d"),r=t.width,a=t.height,i=r/e.length,u=i*-(c.waveformBarWidth-1);if(n){n.clearRect(0,0,r,a),n.fillStyle=c.waveformColor;for(var o=0;o<e.length;o++){var l=e[o]*a,f=o*i+u,s=a/2-l/2;n.fillRect(f,s,i-u,l)}}}};e.useEffect((function(){!d&&n&&n.type.startsWith("audio")&&function(e){return u(void 0,void 0,void 0,(function(){var t;return o(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()]}}))}))}(n).then((function(e){m(e)}))}),[]),e.useEffect((function(){var e,t,n;_.current&&new ResizeObserver((e=b,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(_.current)}),[_]),e.useEffect((function(){if(_.current&&v.width>0&&d)(function(e,t,n,r,a,i){return u(void 0,void 0,void 0,(function(){var u,l,c,f,s,d,m,h,v,g,p,w,y;return o(this,(function(o){for(u=Math.floor(t.offsetWidth/i.waveformBlockWidth),n>=0?(c=n-r*n/a,f=n+r*(a-n)/a,s=Math.floor(e.length*c/a),d=Math.floor(e.length*f/a),l=e.slice(s,d)):l=e,m=Math.floor(l.length/u),h=[],v=0;v<u;v++){for(g=m*v,p=0,w=0;w<m;w++)p+=Math.abs(l[g+w]);h.push(p/m)}return y=Math.pow(Math.max.apply(Math,h),-1),[2,h.map((function(e){return e*y}))]}))}))})(d,_.current,a,i,l,c).then((function(e){y(e)}));else if(_.current){var e=_.current,t=e.getContext("2d");if(!t)return;t.clearRect(0,0,e.width,e.height)}}),[n,_,v.width,a,i,d]),e.useEffect((function(){if(c.waveformLoading&&!w){var e=Array.from({length:100},(function(e,t){return.3*Math.sin(t/100*Math.PI*6)+.5})),t=setInterval((function(){w?clearInterval(t):(E(e),e.push(e.shift()))}),30);return function(){clearInterval(t)}}_.current&&w&&w.length>0&&(E(w),f())}),[w]);var b=function(){_.current&&g({width:_.current.offsetWidth,height:_.current.offsetHeight})};return r.default.createElement("canvas",{className:"mirt__waveform-canvas",ref:_,width:4*v.width,height:4*v.height})},h={showButton:!0,waveformColor:"rgba(255, 255, 255, 0.5)",waveformBlockWidth:4,waveformBarWidth:.5,waveformLoading:!1,fineTuningDelay:500,fineTuningScale:5};module.exports=function(t){var n=t.className,u=t.style,o=t.file,v=t.onChange,g=t.onAudioLoaded,p=t.onWaveformLoaded,w=t.onError,y=t.start,_=t.end,E=t.options,b=i(i({},h),E),T=e.useRef(null),x=e.useRef(null),S=e.useRef(null),N=e.useState(!1),C=N[0],k=N[1],L=e.useState(null),M=L[0],D=L[1],I=e.useState(0),R=I[0],B=I[1],W=e.useState(0),A=W[0],P=W[1],O=e.useState(0),j=O[0],U=O[1],Z=e.useState(!1),H=Z[0],q=Z[1],z=e.useState(!1),F=z[0],V=z[1],G=e.useState(!1),J=G[0],K=G[1],Q=e.useState(0),X=Q[0],Y=Q[1],$=e.useState(!1),ee=$[0],te=$[1],ne=e.useState(-1),re=ne[0],ae=ne[1],ie=X/b.fineTuningScale;e.useEffect((function(){if(k(!1),o)if(o&&o.type.startsWith("audio")){var e=new Audio;e.preload="metadata",e.src=URL.createObjectURL(o),D(e)}else w&&w(new Error("Invalid file type"));else D(null)}),[o]),e.useEffect((function(){M&&(null==M?void 0:M.src)&&(M.addEventListener("loadedmetadata",ue),M.load())}),[M]),e.useEffect((function(){v&&C&&v({start:R,current:A,end:j})}),[R,A,j]),e.useEffect((function(){var e;if(M)return ee&&(e=setInterval((function(){M.currentTime<l(j)?M.currentTime>=l(A)&&P(1e3*M.currentTime):(le(l(R)),P(R))}),10)),function(){clearInterval(e)}}),[ee]),e.useEffect((function(){if(!(b.fineTuningDelay<=0)){var e=R,t=setTimeout((function(){H&&e===R&&-1===re&&ae(R)}),b.fineTuningDelay);return function(){clearTimeout(t)}}}),[H,R]),e.useEffect((function(){if(!(b.fineTuningDelay<=0)){var e=j,t=setTimeout((function(){J&&e===j&&-1===re&&ae(j)}),b.fineTuningDelay);return function(){clearTimeout(t)}}}),[J,j]),e.useEffect((function(){if(!(b.fineTuningDelay<=0)){var e=A,t=setTimeout((function(){F&&e===A&&-1===re&&ae(A)}),b.fineTuningDelay);return function(){clearTimeout(t)}}}),[F,A]),e.useEffect((function(){void 0!==y&&se(y)}),[y]),e.useEffect((function(){void 0!==_&&de(_)}),[_]);var ue=function(){M&&(g&&g(M),M.removeEventListener("loadedmetadata",ue),oe())},oe=function(){if(M){var e=1e3*M.duration;B(0),P(0),U(e),Y(e),k(!0),v&&v({start:0,current:0,end:e})}},le=function(e){M&&(M.pause(),e&&(M.currentTime=e),te(!1))},ce=function(e,t){if(le(),0==e.button)switch(t){case"start":q(!0);break;case"playhead":V(!0);break;case"end":K(!0)}},fe=function(e){switch(e){case"start":q(!1);break;case"playhead":V(!1);break;case"end":K(!1)}ae(-1)},se=function(e){if(M){if(e>j)return M.currentTime=l(j),B(j),void P(j);M.currentTime=l(e),B(e),P(e)}},de=function(e){if(M){if(e<R)return M.currentTime=l(R),void U(R);if(e>X)return M.currentTime=l(X),void U(X);M.currentTime=l(e),U(e)}};return r.default.createElement("div",{className:a.default("mirt",{"mirt--initialized":C,"mirt--disabled":!C},n),style:u},b.showButton&&r.default.createElement("button",{className:"mirt__play-button",type:"button",onClick:function(){M&&(ee?le():(A>=j?(M.currentTime=l(R),P(R)):M.currentTime=l(A),M.play(),te(!0)))},disabled:!C},ee?r.default.createElement("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",className:"mirt__play-button-icon"},r.default.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"})):r.default.createElement("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",className:"mirt__play-button-icon"},r.default.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"}))),r.default.createElement("div",{className:"mirt__timeline"},r.default.createElement("div",{className:"mirt__range-handles"},r.default.createElement("div",{className:"mirt__range-handle-frame"},r.default.createElement("input",{ref:T,className:"mirt__range-handle mirt__range-handle--start",type:"range",min:c(re,ie,X),max:f(re,ie,X),value:R,onChange:function(e){if(M&&H){var t=parseInt(e.target.value);se(t)}},onPointerDown:function(e){return ce(e,"start")},onPointerUp:function(){return fe("start")},disabled:!C}),r.default.createElement("input",{ref:S,className:"mirt__range-handle mirt__range-handle--end",type:"range",min:c(re,ie,X),max:f(re,ie,X),value:j,onChange:function(e){if(M&&J){var t=parseInt(e.target.value);de(t),P(t<R?R:t>X?X:t)}},onPointerDown:function(e){return ce(e,"end")},onPointerUp:function(){return fe("end")},disabled:!C})),r.default.createElement("div",{className:"mirt__range-handle-playhead-track"},r.default.createElement("input",{ref:x,className:"mirt__range-handle mirt__range-handle--playhead",type:"range",min:c(re,ie,X),max:f(re,ie,X),value:A,onChange:function(e){if(M&&F){var t=parseInt(e.target.value);if(t<R)return M.currentTime=l(R),void P(R);if(t>j)return M.currentTime=l(j),void P(j);M.currentTime=l(t),P(t)}},onPointerDown:function(e){return ce(e,"playhead")},onPointerUp:function(){return fe("playhead")},disabled:!C}))),r.default.createElement("div",{className:"mirt__handles"},r.default.createElement("div",{className:a.default("mirt__handle-frame",{"mirt__handle-frame--start-dragging":H,"mirt__handle-frame--end-dragging":J}),style:{left:"".concat(s(R,re,ie,X),"%"),right:"".concat(d(j,re,ie,X),"%")}},r.default.createElement("svg",{viewBox:"0 0 16 32",xmlns:"http://www.w3.org/2000/svg",className:"mirt__handle-icon mirt__handle-icon--start",fill:"currentColor"},r.default.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"})),r.default.createElement("svg",{viewBox:"0 0 16 32",xmlns:"http://www.w3.org/2000/svg",className:"mirt__handle-icon mirt__handle-icon--end",fill:"currentColor"},r.default.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"}))),r.default.createElement("div",{className:"mirt__playhead-track"},r.default.createElement("div",{className:a.default("mirt__playhead",{"mirt__playhead--dragging":F||H||J||ee}),style:{left:"".concat(s(A,re,ie,X),"%")}}))),C&&r.default.createElement("div",{className:"mirt__waveform"},r.default.createElement(m,{file:o,fineTuning:re,fineTuningResolution:ie,duration:X,config:b,handleWaveformLoaded:function(){p&&p()}}))))};
//# sourceMappingURL=index.cjs.js.map