shwave
Version:
wave audio and timeline
1 lines • 20.2 kB
JavaScript
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=21)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@emotion/core")},function(e,t){e.exports=require("@babel/runtime/helpers/assertThisInitialized")},function(e,t){e.exports=require("@babel/runtime/helpers/defineProperty")},function(e,t){e.exports=require("@babel/runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("@babel/runtime/regenerator")},function(e,t){e.exports=require("@babel/runtime/helpers/slicedToArray")},function(e,t){e.exports=require("@babel/runtime/helpers/asyncToGenerator")},function(e,t){e.exports=require("@babel/runtime/helpers/getPrototypeOf")},function(e,t){e.exports=require("loadsh")},function(e,t){e.exports=require("@babel/runtime/helpers/classCallCheck")},function(e,t){e.exports=require("@babel/runtime/helpers/createClass")},function(e,t){e.exports=require("@babel/runtime/helpers/inherits")},function(e,t){e.exports=require("@babel/runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("duration-time-conversion")},function(e,t){e.exports=require("@babel/runtime/helpers/toConsumableArray")},function(e,t,n){var r=n(17),o=n(18);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var a={insert:"head",singleton:!1},i=(r(o,a),o.locals?o.locals:{});e.exports=i},function(e,t,n){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),i=[];function u(e){for(var t=-1,n=0;n<i.length;n++)if(i[n].identifier===e){t=n;break}return t}function c(e,t){for(var n={},r=[],o=0;o<e.length;o++){var a=e[o],c=t.base?a[0]+t.base:a[0],s=n[c]||0,l="".concat(c," ").concat(s);n[c]=s+1;var f=u(l),d={css:a[1],media:a[2],sourceMap:a[3]};-1!==f?(i[f].references++,i[f].updater(d)):i.push({identifier:l,updater:h(d,t),references:1}),r.push(l)}return r}function s(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var i=a(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(t)}return t}var l,f=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function d(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=f(t,o);else{var a=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function v(e,t,n){var r=n.css,o=n.media,a=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),a&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var b=null,p=0;function h(e,t){var n,r,o;if(t.singleton){var a=p++;n=b||(b=s(t)),r=d.bind(null,n,a,!1),o=d.bind(null,n,a,!0)}else n=s(t),r=v.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=o());var n=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=u(n[r]);i[o].references--}for(var a=c(e,t),s=0;s<n.length;s++){var l=u(n[s]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}n=a}}}},function(e,t,n){(t=n(19)(!1)).push([e.i,".subBlock {\r\n height: 50%;\r\n position: absolute;\r\n top: 25%;\r\n border-radius: 5px;\r\n pointer-events: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n.subBlock p {\r\n line-height: 1.5;\r\n margin: 0;\r\n}\r\n\r\n.subBlockDrag {\r\n display: none !important;\r\n z-index: 2;\r\n cursor: ew-resize;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n user-select: none;\r\n background-color: rgba(15, 238, 219);\r\n}\r\n\r\n.subBlockDragIcon {\r\n color: #ffffffb0;\r\n}\r\n\r\n.subBlockContent {\r\n cursor: move;\r\n user-select: none;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #ffffffd9;\r\n border-radius: 5px;\r\n border-top: 1px solid #fff;\r\n border-bottom: 1px solid #fff;\r\n border-left: 1px solid rgba(15, 238, 219);\r\n border-right: 1px solid rgba(15, 238, 219);\r\n transition: background-color 0.2s ease;\r\n}\r\n\r\n.subBlock:hover .subBlockContent {\r\n z-index: 2;\r\n background-color: #fff;\r\n border-radius: 0px;\r\n border-top-color: rgba(15, 238, 219, 0.76);\r\n border-bottom-color: rgba(15, 238, 219, 0.76);\r\n}\r\n\r\n.subBlock:hover .subBlockDrag {\r\n display: flex !important;\r\n}\r\n",""]),e.exports=t},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(i=r,u=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(u),"/*# ".concat(c," */")),a=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[n].concat(a).concat([o]).join("\n")}var i,u,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(o[i]=!0)}for(var u=0;u<e.length;u++){var c=[].concat(e[u]);r&&o[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}},function(e,t){e.exports=require("font-awesome/css/font-awesome.css")},function(e,t,n){"use strict";n.r(t),n.d(t,"ShWave",(function(){return oe}));n(16),n(20);var r=n(4),o=n.n(r),a=n(10),i=n.n(a),u=n(11),c=n.n(u),s=n(2),l=n.n(s),f=n(12),d=n.n(f),v=n(13),b=n.n(v),p=n(8),h=n.n(p),g=n(3),m=n.n(g),x=n(0),w=n.n(x),y=n(1),C=n(5),j=n.n(C),k=n(7),O=n.n(k),S=n(6),R=n.n(S),E=n(14),A=n.n(E),D=n(9),M=n.n(D);function L(){return(L=O()(j.a.mark((function e(t){var n,r;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t){e.next=2;break}return e.abrupt("return");case 2:return n=window.AudioContext||window.webkitAudioContext,r=new n,e.abrupt("return",r.decodeAudioData(t.buffer).then((function(e){return e})));case 5:case"end":return e.stop()}}),e)})))).apply(this,arguments)}var T={durationToTime:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return A.a.d2t(e.toFixed(3))},throttle:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return M.a.throttle(e,t,n)},debounce:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return M.a.debounce(e,t,n)},merge:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=t[0].constructor;return t.reduce((function(e,t){var n=new r((0|e.byteLength)+(0|t.byteLength));return n.set(e,0),n.set(t,0|e.byteLength),n}),new r)},decodeMediaData:function(e){return L.apply(this,arguments)}},B=w.a.memo((function(e){var t=e.url,n=(e.drawWave,e.updateAudioData),r=Object(x.useState)(0),o=R()(r,2),a=(o[0],o[1]),i=Object(x.useState)(null),u=R()(i,2),c=u[0],s=u[1],l=Object(x.useCallback)((function(){if(t){var e=new AbortController,n=null;fetch(t,{signal:e.signal}).then((function(t){if(t.body&&"function"==typeof t.body.getReader){var r=t.headers.get("content-length");a(r),n=t.body.getReader();var o=new Uint8Array;n.read().then((function t(r){var a=r.done,i=r.value;return a?(e.abort(),n.cancel(),e=null,n=null,void s(o)):(o=T.merge(o,i),n.read().then(t))}))}}))}}),[t,a,s]),f=Object(x.useCallback)(O()(j.a.mark((function e(){var t;return j.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,T.decodeMediaData(c);case 3:t=e.sent,n(t),e.next=10;break;case 7:e.prev=7,e.t0=e.catch(0),n(null);case 10:case"end":return e.stop()}}),e,null,[[0,7]])}))),[c]);return Object(x.useEffect)((function(){l()}),[t]),Object(x.useEffect)((function(){null!==c&&f()}),[c]),null}));function W(){var e=o()(["\n height: 100%;\n width: 100%;\n z-index: 0;\n pointer-events: auto;\n "]);return W=function(){return e},e}var q=w.a.memo((function(e){var t=e.$canvas,n=e.waveCanvas,r=e.draw,o=e.currentTime,a=e.duration,i=e.url,u=e.audioData,c=e.updateAudioData;return Object(x.useEffect)((function(){null!==n&&r()}),[n,a,o,u]),Object(y.jsx)(w.a.Fragment,null,Object(y.jsx)("canvas",{ref:t,id:"shcanvas",css:Object(y.css)(W())}),Object(y.jsx)(B,{url:i,updateAudioData:c}))}));function N(e){return 10*e}function z(e,t){return Number(e/t).toFixed(3)}function P(e,t){return Math.floor(e/t)*t}function I(e,t,n){return Math.max(Math.min(e,Math.max(t,n)),Math.min(t,n))}var F={getLength:N,getGap:z,getBegin:P,getGapPx:function(e,t){var n=window.devicePixelRatio;return e?z(e/n,N(t)):0},clamp:I,drawBackground:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"#529393";if(e&&t){var r=e.width,o=e.height;t.clearRect(0,0,r,o),t.fillStyle=n,t.fillRect(0,0,r,o)}},drawRuler:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:15,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0;if(e&&t){var a=e.width,i=(e.height,11),u=15,c=30;t.font="".concat(i*n,"px Arial"),t.fillStyle="#fff";for(var s=N(r),l=z(a,s),f=P(o,r),d=-1,v=0;v<s;v+=1)v%10==0?(d+=1,t.fillRect(v*l,0,n,u*n),t.fillText(T.durationToTime(f+d).split(".")[0],l*v-i*n*2+n,c*n)):v%5==0?t.fillRect(v*l,0,n,u*n/1.5):t.fillRect(v*l,0,n,u*n/3)}},drawPointer:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:15,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,a=arguments.length>5?arguments[5]:void 0,i=arguments.length>6&&void 0!==arguments[6]?arguments[6]:2;if(e&&t){var u=e.width,c=e.height;t.fillStyle=a;var s=N(r),l=z(u,s),f=P(o,r);t.fillRect(Number(10*(o-f)*l).toFixed(3),0,i*n,c)}},drawWave:function(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:15,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,o=arguments.length>4?arguments[4]:void 0,a=arguments.length>5?arguments[5]:void 0,i=arguments.length>6&&void 0!==arguments[6]?arguments[6]:.8,u=!(arguments.length>7&&void 0!==arguments[7])||arguments[7],c=arguments.length>8&&void 0!==arguments[8]?arguments[8]:"#57e3e3",s=arguments.length>9&&void 0!==arguments[9]?arguments[9]:"#fbf8f86b",l=e.width,f=e.height,d=P(r,n),v=N(n),b=z(l,v),p=f/2,h=l,g=I(d*o,0,1/0),m=I((d+n)*o,g,1/0),x=Math.floor((m-g)/h),w=(r-d)*b*10,y=0,C=0,j=1,k=-1,O=g;O<m;O+=1){y+=1;var S=a[O]||0;if(S<j?j=S:S>k&&(k=S),y>=x&&C<h){var R=C+=1;t.fillStyle=u&&w>=R?c:s,t.fillRect(R,(1+j*i)*p,1,Math.max(1,(k-j)*p*i)),y=0,j=1,k=-1}}}},_=n(15),U=n.n(_);function $(){var e=o()(["\n position: relative;\n pointer-events: none;\n width: 100%;\n height: 100%;\n overflow: hidden;\n display: flex;\n align-items: center;\n "]);return $=function(){return e},e}function G(){var e=o()(["\n position: absolute;\n z-index: 1;\n pointer-events: none;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n "]);return G=function(){return e},e}var H=null,X=["dragLeft","dragRight"],J=null,K=0,Q=null,V=0,Y=0,Z=!1,ee=-1,te=w.a.memo((function(e){var t=e.duration,n=e.begin,r=e.subArray,o=e.canvasWidth,a=e.onSubClick,i=e.onSubMove,u=e.onSubMoveError,c=e.ErrorWait,s=e.ErrorColor,l=e.onSubResize,f=e.subBlockClass,d=T.debounce((function(){u&&u()}),c||500,{leading:!0,trailing:!1}),v=Object(x.useCallback)((function(){return U()(r).filter((function(e){return e.start>=n&&e.start<n+t||e.end>n&&e.end<=n+t}))}),[t,n,r]),b=Object(x.useCallback)((function(e,t,n){var r=e.currentTarget.parentElement;if(r){H=r,K=0,Q=t,J=n;r.getAttribute("submovable");r.setAttribute("submovable","true"),r.setAttribute("pagex",e.pageX),r.style.zIndex=3;var o=(H.previousElementSibling&&H.previousElementSibling.offsetLeft||0)+(H.previousElementSibling&&H.previousElementSibling.offsetWidth||0),a=H.nextElementSibling&&H.nextElementSibling.offsetLeft||1/0;V=o,Y=a}}),[]),p=Object(x.useCallback)((function(e,t){null!==H&&"content"===J&&(H.style.transform="translate(".concat(t,"px)"))}),[]),h=Object(x.useCallback)((function(e,t){if(null!==H&&X.includes(J)){var n=parseFloat(H.getAttribute("subwidth"));"dragRight"===J?H.style.width="".concat(n+t,"px"):"dragLeft"===J&&(H.style.width="".concat(n-t,"px"),H.style.transform="translate(".concat(t,"px)"))}}),[]),g=Object(x.useCallback)((function(e){if(null!==H&&null!==J){var t=H.offsetLeft+e,n=H.offsetLeft+H.offsetWidth;return"content"===J?t>V+1&&t+H.offsetWidth+1<Y:"dragLeft"===J?t>V+1&&H.offsetWidth>5:"dragRight"===J?n<Y-1&&H.offsetWidth>5:void 0}}),[]),m=Object(x.useCallback)((function(e){if(null!==H&&null!==J){var t=H.getAttribute("submovable"),n=H.getAttribute("pagex");if("false"!==t&&n){var r=e.pageX-n;p(e,r),h(e,r),g(r)?(K=r,Z=!0,H.children[1].style.backgroundColor=""):(H.children[1].style.backgroundColor=s||"#f09b50d9",d())}}}),[]),w=Object(x.useCallback)((function(e){null!==H&&null!==J&&(H.children[1].style.backgroundColor="",H.setAttribute("pagex",""),H.setAttribute("submovable","false"),H.style.transform="",H.style.zIndex="",Z&&"content"===J?i&&i(Q,K/j/10):Z&&X.includes(J)&&l&&l(Q,K/j/10,"dragLeft"===J?"start":"end"),H=null,Q=null,K=0,V=0,Y=0,Z=!1)}));Object(x.useEffect)((function(){return document.addEventListener("mouseup",w),document.addEventListener("mousemove",m),function(){document.removeEventListener("mouseup",w),document.removeEventListener("mousemove",m)}}),[w,m]);var C=v(),j=F.getGapPx(o,t);return Object(y.jsx)("div",{id:"subBlocksContainer",css:Object(y.css)(G())},Object(y.jsx)("div",{id:"subBlocksInner",css:Object(y.css)($())},C.map((function(e){return Object(y.jsx)("div",{className:"subBlock ".concat(f||""),key:e.start+""+e.end+e.content,submovable:"false",pagex:"",subwidth:"".concat(e.length*j*10),style:{left:(e.start-n)*j*10,width:e.length*j*10}},Object(y.jsx)("div",{className:"subBlockDrag",style:{left:"-".concat(1.5*j,"px"),width:1.5*j,borderRadius:"".concat(.7*j,"px 0 0 ").concat(.7*j,"px")},onMouseDown:function(t){b(t,e,"dragLeft")}},Object(y.jsx)("i",{className:"fa fa-bars fa-rotate-90 subBlockDragIcon"})),Object(y.jsx)("div",{className:"subBlockContent",onMouseDown:function(t){b(t,e,"content")},onClick:function(t){a&&a(e)}},e.content.split(/\r?\n/).map((function(e,t){return Object(y.jsx)("p",{key:t},e)}))),Object(y.jsx)("div",{className:"subBlockDrag",style:{right:"-".concat(1.5*j,"px"),width:1.5*j,borderRadius:"0 ".concat(.7*j,"px ").concat(.7*j,"px 0")},onMouseDown:function(t){b(t,e,"dragRight")}},Object(y.jsx)("i",{className:"fa fa-bars fa-rotate-90 subBlockDragIcon"})))}))))}),(function(e,t){return e.duration===t.duration&&(e.subArray===t.subArray&&e.canvasWidth===t.canvasWidth&&(0===t.begin&&ee<=5?(ee++,!1):e.begin===t.begin))}));function ne(){var e=o()(["\n position: relative;\n display: flex;\n height: 100%;\n width: 100%;\n "]);return ne=function(){return e},e}function re(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}var oe=function(e){d()(r,e);var t,n=(t=r,function(){var e,n=h()(t);if(re()){var r=h()(this).constructor;e=Reflect.construct(n,arguments,r)}else e=n.apply(this,arguments);return b()(this,e)});function r(){var e;i()(this,r);for(var t=arguments.length,o=new Array(t),a=0;a<t;a++)o[a]=arguments[a];return e=n.call.apply(n,[this].concat(o)),m()(l()(e),"state",{shwave:null,waveCanvas:null,audioData:null,canvasWidth:0}),m()(l()(e),"$shwave",(function(t){null!==t&&e.setState({shwave:t})})),m()(l()(e),"$canvas",(function(t){null!==t?(e.setState({waveCanvas:t},(function(){e.updateCanvas()})),window.addEventListener("resize",e.onResize),t.addEventListener("click",e.onCanavsClick),t.oncontextmenu=function(){return!1},t.addEventListener("contextmenu",e.onCanvasContextmenu)):window.removeEventListener("resize",e.onResize)})),m()(l()(e),"updateCanvas",(function(){var t=e.state,n=t.shwave,r=t.waveCanvas;if(r&&n){var o=n.clientHeight,a=n.clientWidth,i=window.devicePixelRatio;r.width=a*i,r.height=o*i;var u=r.width;e.setState({canvasWidth:u})}})),m()(l()(e),"updateAudioData",(function(t){e.setState({audioData:t})})),m()(l()(e),"draw",(function(){var t=e.state.waveCanvas,n=e.props,r=n.duration,o=n.backgroundColor,a=n.currentTime,i=n.pointerColor,u=n.pointerWidth,c=n.waveColor,s=n.alterWaveColor,l=n.waveScale,f=Number(r),d=window.devicePixelRatio,v=t&&t.getContext("2d");if(t&&v&&(F.drawBackground(t,v,o),F.drawRuler(t,v,d,f,a),F.drawPointer(t,v,d,f,a,i,u),e.state.audioData)){var b=e.state.audioData.sampleRate,p=e.state.audioData.getChannelData(0);F.drawWave(t,v,f,a,b,p,l,!0,s,c,0)}})),m()(l()(e),"onResize",T.throttle((function(){e.updateCanvas(),e.draw()}),e.props.throttleWait||300)),m()(l()(e),"onCanavsClick",(function(t){var n=e.computeTimeFromEvent(t),r=e.props,o=r.currentTime,a=r.url,i=r.click;a&&o!==n&&(i(n,t),e.draw())})),m()(l()(e),"onCanvasContextmenu",(function(t){var n=e.computeTimeFromEvent(t),r=e.props,o=r.url,a=r.currentTime,i=r.contextmenu;o&&a!==n&&(i(n,t),e.draw())})),e}return c()(r,[{key:"computeTimeFromEvent",value:function(e){var t=this.props,n=t.currentTime,r=t.duration,o=this.state,a=o.shwave,i=o.waveCanvas,u=i.width,c=(i.height,window.devicePixelRatio),s=F.getLength(r),l=F.getGap(u,s),f=F.clamp(e.pageX-a.offsetLeft/c,0,1/0),d=F.getBegin(n,r);return F.clamp(f/l*c/10+d,d,d+r)}},{key:"render",value:function(){var e=this.props,t=e.currentTime,n=e.url,r=e.duration,o=e.subArray,a=e.onSubClick,i=e.onSubMove,u=e.onSubMoveError,c=e.ErrorWait,s=e.ErrorColor,l=e.onSubResize,f=e.subBlockClass,d=F.getBegin(t,r);return Object(y.jsx)("div",{ref:this.$shwave,className:"shwave",css:Object(y.css)(ne())},o&&Object(y.jsx)(te,{duration:r,begin:d,subArray:o,canvasWidth:this.state.canvasWidth,onSubClick:a,onSubMove:i,onSubMoveError:u,ErrorWait:c,ErrorColor:s,onSubResize:l,subBlockClass:f}),Object(y.jsx)(q,{$canvas:this.$canvas,waveCanvas:this.state.waveCanvas,draw:this.draw,currentTime:t,duration:r,url:n,audioData:this.state.audioData,updateAudioData:this.updateAudioData}))}}]),r}(x.Component)}]);