react-h5-audio-player/lib/react-h5-audio-player.min.js

A customizable React audio player. Written in TypeScript. Mobile compatible. Keyboard friendly

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define("ReactH5AudioPlayer",["React"],t):"object"==typeof exports?exports.ReactH5AudioPlayer=t(require("React")):e.ReactH5AudioPlayer=t(e.React)}(window,(function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=17)}([function(t,o){t.exports=e},function(e,t){e.exports=function(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.InlineIcon=t.Icon=void 0;var n,r=(n=o(0))&&n.__esModule?n:{default:n};function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var u=0,s=/(-?[0-9.]*[0-9]+[0-9.]*)/g,l=/^-?[0-9.]*[0-9]+[0-9.]*$/g,d=["width","height","inline","hFlip","vFlip","flip","rotate","align","color","box"],c={left:0,top:0,width:16,height:16,rotate:0,hFlip:!1,vFlip:!1};var p=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this._item=t}var t,o,n;return t=e,n=[{key:"splitAttributes",value:function(e){var t={icon:Object.create(null),node:Object.create(null)};return Object.keys(e).forEach((function(o){t[-1===d.indexOf(o)?"node":"icon"][o]=e[o]})),t}},{key:"calculateDimension",value:function(e,t,o){if(1===t)return e;if(o=void 0===o?100:o,"number"==typeof e)return Math.ceil(e*t*o)/o;var n=e.split(s);if(null===n||!n.length)return null;for(var r,a=[],i=n.shift(),u=l.test(i);;){if(u?(r=parseFloat(i),isNaN(r)?a.push(i):a.push(Math.ceil(r*t*o)/o)):a.push(i),void 0===(i=n.shift()))return a.join("");u=!u}}},{key:"replaceIDs",value:function(e){var t,o,n=/\sid="(\S+)"/g,r=[];function a(e,t,o){for(var n=0;-1!==(n=o.indexOf(e,n));)o=o.slice(0,n)+t+o.slice(n+e.length),n+=t.length;return o}for(;t=n.exec(e);)r.push(t[1]);return r.length?(o="IconifyId-"+Date.now().toString(16)+"-"+(16777216*Math.random()|0).toString(16)+"-",r.forEach((function(t){var n=o+u;u++,e=a('="'+t+'"','="'+n+'"',e),e=a('="#'+t+'"','="#'+n+'"',e),e=a("(#"+t+")","(#"+n+")",e)})),e):e}}],(o=[{key:"getAttributes",value:function(t){var o=this._item;"object"!==a(t)&&(t=Object.create(null));var n={horizontal:"center",vertical:"middle",slice:!1},r={rotate:o.rotate,hFlip:o.hFlip,vFlip:o.vFlip},i=Object.create(null),u=Object.create(null),s=!0===t.inline||"true"===t.inline||"1"===t.inline,l={left:o.left,top:s?o.inlineTop:o.top,width:o.width,height:s?o.inlineHeight:o.height};if(["hFlip","vFlip"].forEach((function(e){void 0===t[e]||!0!==t[e]&&"true"!==t[e]&&"1"!==t[e]||(r[e]=!r[e])})),void 0!==t.flip&&t.flip.toLowerCase().split(/[\s,]+/).forEach((function(e){switch(e){case"horizontal":r.hFlip=!r.hFlip;break;case"vertical":r.vFlip=!r.vFlip}})),void 0!==t.rotate){var d=t.rotate;if("number"==typeof d)r.rotate+=d;else if("string"==typeof d){var c=d.replace(/^-?[0-9.]*/,"");if(""===c)d=parseInt(d),isNaN(d)||(r.rotate+=d);else if(c!==d){var p=!1;switch(c){case"%":p=25;break;case"deg":p=90}p&&(d=parseInt(d.slice(0,d.length-c.length)),isNaN(d)||(r.rotate+=Math.round(d/p)))}}}var h,m=[];switch(r.hFlip?r.vFlip?r.rotate+=2:(m.push("translate("+(l.width+l.left)+" "+(0-l.top)+")"),m.push("scale(-1 1)"),l.top=l.left=0):r.vFlip&&(m.push("translate("+(0-l.left)+" "+(l.height+l.top)+")"),m.push("scale(1 -1)"),l.top=l.left=0),r.rotate%4){case 1:h=l.height/2+l.top,m.unshift("rotate(90 "+h+" "+h+")"),0===l.left&&0===l.top||(h=l.left,l.left=l.top,l.top=h),l.width!==l.height&&(h=l.width,l.width=l.height,l.height=h);break;case 2:m.unshift("rotate(180 "+(l.width/2+l.left)+" "+(l.height/2+l.top)+")");break;case 3:h=l.width/2+l.left,m.unshift("rotate(-90 "+h+" "+h+")"),0===l.left&&0===l.top||(h=l.left,l.left=l.top,l.top=h),l.width!==l.height&&(h=l.width,l.width=l.height,l.height=h)}var v,f,g=t.width?t.width:null,w=t.height?t.height:null;null===g&&null===w&&(w="1em"),null!==g&&null!==w?(v=g,f=w):null!==g?(v=g,f=e.calculateDimension(v,l.height/l.width)):(f=w,v=e.calculateDimension(f,l.width/l.height)),!1!==v&&(u.width="auto"===v?l.width:v),!1!==f&&(u.height="auto"===f?l.height:f),s&&0!==o.verticalAlign&&(i["vertical-align"]=o.verticalAlign+"em"),void 0!==t.align&&t.align.toLowerCase().split(/[\s,]+/).forEach((function(e){switch(e){case"left":case"right":case"center":n.horizontal=e;break;case"top":case"bottom":case"middle":n.vertical=e;break;case"crop":n.slice=!0;break;case"meet":n.slice=!1}})),u.preserveAspectRatio=function(e){var t;switch(e.horizontal){case"left":t="xMin";break;case"right":t="xMax";break;default:t="xMid"}switch(e.vertical){case"top":t+="YMin";break;case"bottom":t+="YMax";break;default:t+="YMid"}return t+=e.slice?" slice":" meet"}(n),u.viewBox=l.left+" "+l.top+" "+l.width+" "+l.height;var b=e.replaceIDs(o.body);return void 0!==t.color&&(b=b.replace(/currentColor/g,t.color)),m.length&&(b='<g transform="'+m.join(" ")+'">'+b+"</g>"),!0!==t.box&&"true"!==t.box&&"1"!==t.box||(b+='<rect x="'+l.left+'" y="'+l.top+'" width="'+l.width+'" height="'+l.height+'" fill="rgba(0, 0, 0, 0)" />'),{attributes:u,body:b,style:i}}},{key:"getSVG",value:function(t,o){var n=e.splitAttributes(t),r=this.getAttributes(n.icon),a='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';return o&&Object.keys(n.node).forEach((function(e){a+=" "+e+'="'+n.node[e]+'"'})),Object.keys(r.attributes).forEach((function(e){a+=" "+e+'="'+r.attributes[e]+'"'})),a+=' style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);',Object.keys(r.style).forEach((function(e){a+=" "+e+": "+r.style[e]+";"})),t&&void 0!==t.style&&(a+=t.style),a+='">',a+=r.body+"</svg>"}}])&&i(t.prototype,o),n&&i(t,n),e}();function h(e,t){if("object"!==a(e.icon))return null;var o=p.splitAttributes(e),n=o.icon,i=o.node;delete i.icon,void 0===n.inline&&(n.inline=t);var u=new p(function(e){var t,o=Object.create(null);for(t in c)o[t]=c[t];for(t in e)o[t]=e[t];return void 0===o.inlineTop&&(o.inlineTop=o.top),void 0===o.inlineHeight&&(o.inlineHeight=o.height),void 0===o.verticalAlign&&(o.verticalAlign=o.height%7==0&&o.height%8!=0?-.143:-.125),o}(e.icon)).getAttributes(n),s={transform:"rotate(360deg)"};if(void 0!==u.style["vertical-align"]&&(s.verticalAlign=u.style["vertical-align"]),void 0!==e.style)for(var l in e.style)s[l]=e.style[l];var d,h={xmlns:"http://www.w3.org/2000/svg",focusable:!1,style:s};for(d in i)h[d]=i[d];for(d in u.attributes)h[d]=u.attributes[d];return h.dangerouslySetInnerHTML={__html:u.body},r.default.createElement("svg",h,null)}var m=function(e){return h(e,!1)};t.Icon=m;t.InlineIcon=function(e){return h(e,!0)};var v=m;t.default=v},function(e,t,o){var n=o(16);e.exports=function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,n(e,t)}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M10 16.5v-9l6 4.5M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M15 16h-2V8h2m-4 8H9V8h2m1-6A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M6 18V6h2v12H6m3.5-6L18 6v12l-8.5-6z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M16 18h2V6h-2M6 18l8.5-6L6 6v12z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M13 6v12l8.5-6M4 18l8.5-6L4 6v12z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M11.5 12l8.5 6V6m-9 12V6l-8.5 6l8.5 6z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.84-5 6.7v2.07c4-.91 7-4.49 7-8.77c0-4.28-3-7.86-7-8.77M16.5 12c0-1.77-1-3.29-2.5-4.03V16c1.5-.71 2.5-2.24 2.5-4M3 9v6h4l5 5V4L7 9H3z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M3 9h4l5-5v16l-5-5H3V9m13.59 3L14 9.41L15.41 8L18 10.59L20.59 8L22 9.41L19.41 12L22 14.59L20.59 16L18 13.41L15.41 16L14 14.59L16.59 12z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M17 17H7v-3l-4 4l4 4v-3h12v-6h-2M7 7h10v3l4-4l-4-4v3H5v6h2V7z" fill="currentColor"/>',width:24,height:24}},function(e,t){t.__esModule=!0,t.default={body:'<path d="M2 5.27L3.28 4L20 20.72L18.73 22l-3-3H7v3l-4-4l4-4v3h6.73L7 10.27V11H5V8.27l-3-3M17 13h2v4.18l-2-2V13m0-8V2l4 4l-4 4V7H8.82l-2-2H17z" fill="currentColor"/>',width:24,height:24}},function(e,t){function o(){return e.exports=o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},o.apply(this,arguments)}e.exports=o},function(e,t){function o(t,n){return e.exports=o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},o(t,n)}e.exports=o},function(e,t,o){"use strict";o.r(t),o.d(t,"RHAP_UI",(function(){return x}));var n=o(2),r=o.n(n),a=o(4),i=o.n(a),u=o(1),s=o.n(u),l=o(0),d=o.n(l),c=o(3),p=o(5),h=o.n(p),m=o(6),v=o.n(m),f=o(7),g=o.n(f),w=o(8),b=o.n(w),E=o(9),y=o.n(E),L=o(10),M=o.n(L),T=o(11),A=o.n(T),C=o(12),P=o.n(C),O=o(13),_=o.n(O),k=o(14),D=o.n(k),S=o(15),V=o.n(S),N=function(e){switch(e){case"stacked":return"rhap_stacked";case"stacked-reverse":return"rhap_stacked-reverse";case"horizontal":return"rhap_horizontal";case"horizontal-reverse":return"rhap_horizontal-reverse";default:return"rhap_stacked"}},I=function(e){return e instanceof MouseEvent?e.clientX:e.touches[0].clientX},R=function(e){return e>9?e.toString():"0"+e},U=function(e,t,o){if(!isFinite(e))return null;var n=Math.floor(e/60),r=R(n),a=R(Math.floor(e%60)),i=R(Math.floor(n%60)),u=r+":"+a,s=Math.floor(n/60)+":"+i+":"+a;return"auto"===o?t>=3600?s:u:"mm:ss"===o?u:"hh:mm:ss"===o?s:void 0};function F(e,t){var o=!1;return function(n){o||(e(n),o=!0,setTimeout((function(){return o=!1}),t))}}var x,j=function(e){function t(){for(var t,o=arguments.length,n=new Array(o),a=0;a<o;a++)n[a]=arguments[a];return t=e.call.apply(e,[this].concat(n))||this,s()(r()(t),"audio",void 0),s()(r()(t),"timeOnMouseMove",0),s()(r()(t),"hasAddedAudioEventListener",!1),s()(r()(t),"downloadProgressAnimationTimer",void 0),s()(r()(t),"state",{isDraggingProgress:!1,currentTimePos:"0%",hasDownloadProgressAnimation:!1,downloadProgressArr:[],waitingForSeekCallback:!1}),s()(r()(t),"getCurrentProgress",(function(e){var o=t.props,n=o.audio,r=o.progressBar;if(0!==n.src.indexOf("blob:")&&void 0===t.props.srcDuration&&(!n.src||!isFinite(n.currentTime)||!r.current))return{currentTime:0,currentTimePos:"0%"};var a=r.current.getBoundingClientRect(),i=a.width,u=I(e)-a.left;return u<0?u=0:u>i&&(u=i),{currentTime:t.getDuration()*u/i,currentTimePos:(u/i*100).toFixed(2)+"%"}})),s()(r()(t),"handleContextMenu",(function(e){e.preventDefault()})),s()(r()(t),"handleMouseDownOrTouchStartProgressBar",(function(e){e.stopPropagation();var o=t.getCurrentProgress(e.nativeEvent),n=o.currentTime,r=o.currentTimePos;isFinite(n)&&(t.timeOnMouseMove=n,t.setState({isDraggingProgress:!0,currentTimePos:r}),e.nativeEvent instanceof MouseEvent?(window.addEventListener("mousemove",t.handleWindowMouseOrTouchMove),window.addEventListener("mouseup",t.handleWindowMouseOrTouchUp)):(window.addEventListener("touchmove",t.handleWindowMouseOrTouchMove),window.addEventListener("touchend",t.handleWindowMouseOrTouchUp)))})),s()(r()(t),"handleWindowMouseOrTouchMove",(function(e){e.preventDefault(),e.stopPropagation();var o=window.getSelection();if(o&&"Range"===o.type&&o.empty(),t.state.isDraggingProgress){var n=t.getCurrentProgress(e),r=n.currentTime,a=n.currentTimePos;t.timeOnMouseMove=r,t.setState({currentTimePos:a})}})),s()(r()(t),"handleWindowMouseOrTouchUp",(function(e){e.stopPropagation();var o=t.timeOnMouseMove,n=t.props.onSeek;n?t.setState({isDraggingProgress:!1,waitingForSeekCallback:!0},(function(){n(t.props.audio,o).then((function(){return t.setState({waitingForSeekCallback:!1})}))})):(isFinite(o)&&(t.props.audio.currentTime=o),t.setState({isDraggingProgress:!1})),e instanceof MouseEvent?(window.removeEventListener("mousemove",t.handleWindowMouseOrTouchMove),window.removeEventListener("mouseup",t.handleWindowMouseOrTouchUp)):(window.removeEventListener("touchmove",t.handleWindowMouseOrTouchMove),window.removeEventListener("touchend",t.handleWindowMouseOrTouchUp))})),s()(r()(t),"handleAudioTimeUpdate",F((function(e){var o=t.state.isDraggingProgress,n=e.target;if(!o&&!0!==t.state.waitingForSeekCallback){var r=n.currentTime,a=t.getDuration();t.setState({currentTimePos:(r/a*100||0).toFixed(2)+"%"})}}),t.props.progressUpdateInterval)),s()(r()(t),"handleAudioDownloadProgressUpdate",(function(e){for(var o=e.target,n=t.getDuration(),r=[],a=0;a<o.buffered.length;a++){var i=o.buffered.start(a),u=o.buffered.end(a);r.push({left:(Math.round(100/n*i)||0)+"%",width:(Math.round(100/n*(u-i))||0)+"%"})}clearTimeout(t.downloadProgressAnimationTimer),t.setState({downloadProgressArr:r,hasDownloadProgressAnimation:!0}),t.downloadProgressAnimationTimer=setTimeout((function(){t.setState({hasDownloadProgressAnimation:!1})}),200)})),t}i()(t,e);var o=t.prototype;return o.getDuration=function(){var e=this.props,t=e.audio,o=e.srcDuration;return void 0===o?t.duration:o},o.componentDidUpdate=function(){var e=this.props.audio;e&&!this.hasAddedAudioEventListener&&(this.audio=e,this.hasAddedAudioEventListener=!0,e.addEventListener("timeupdate",this.handleAudioTimeUpdate),e.addEventListener("progress",this.handleAudioDownloadProgressUpdate))},o.componentWillUnmount=function(){this.audio&&this.hasAddedAudioEventListener&&(this.audio.removeEventListener("timeupdate",this.handleAudioTimeUpdate),this.audio.removeEventListener("progress",this.handleAudioDownloadProgressUpdate)),clearTimeout(this.downloadProgressAnimationTimer)},o.render=function(){var e=this.props,t=e.showDownloadProgress,o=e.showFilledProgress,n=e.progressBar,r=this.state,a=r.currentTimePos,i=r.downloadProgressArr,u=r.hasDownloadProgressAnimation;return d.a.createElement("div",{className:"rhap_progress-container",ref:n,"aria-label":"Audio Progress Control",role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Number(a.split("%")[0]),tabIndex:0,onMouseDown:this.handleMouseDownOrTouchStartProgressBar,onTouchStart:this.handleMouseDownOrTouchStartProgressBar,onContextMenu:this.handleContextMenu},d.a.createElement("div",{className:"rhap_progress-bar "+(t?"rhap_progress-bar-show-download":"")},d.a.createElement("div",{className:"rhap_progress-indicator",style:{left:a}}),o&&d.a.createElement("div",{className:"rhap_progress-filled",style:{width:a}}),t&&i.map((function(e,t){var o=e.left,n=e.width;return d.a.createElement("div",{key:t,className:"rhap_download-progress",style:{left:o,width:n,transitionDuration:u?".2s":"0s"}})}))))},t}(l.Component),B=Object(l.forwardRef)((function(e,t){return d.a.createElement(j,V()({},e,{progressBar:t}))})),W=function(e){function t(t){var o;o=e.call(this,t)||this,s()(r()(o),"audio",void 0),s()(r()(o),"hasAddedAudioEventListener",!1),s()(r()(o),"state",{currentTime:o.props.defaultCurrentTime}),s()(r()(o),"handleAudioCurrentTimeChange",(function(e){var t=e.target,n=o.props,r=n.isLeftTime,a=n.timeFormat,i=n.defaultCurrentTime;o.setState({currentTime:U(r?t.duration-t.currentTime:t.currentTime,t.duration,a)||i})})),s()(r()(o),"addAudioEventListeners",(function(){var e=o.props.audio;e&&!o.hasAddedAudioEventListener&&(o.audio=e,o.hasAddedAudioEventListener=!0,e.addEventListener("timeupdate",o.handleAudioCurrentTimeChange),e.addEventListener("loadedmetadata",o.handleAudioCurrentTimeChange))}));var n=t.audio,a=t.defaultCurrentTime,i=t.isLeftTime,u=t.timeFormat,l=a;return n&&(l=U(i?n.duration-n.currentTime:n.currentTime,n.duration,u)),o.state={currentTime:l},o}i()(t,e);var o=t.prototype;return o.componentDidMount=function(){this.addAudioEventListeners()},o.componentDidUpdate=function(){this.addAudioEventListeners()},o.componentWillUnmount=function(){this.audio&&this.hasAddedAudioEventListener&&(this.audio.removeEventListener("timeupdate",this.handleAudioCurrentTimeChange),this.audio.removeEventListener("loadedmetadata",this.handleAudioCurrentTimeChange))},o.render=function(){return this.state.currentTime},t}(l.PureComponent),z=function(e){function t(t){var o;o=e.call(this,t)||this,s()(r()(o),"audio",void 0),s()(r()(o),"hasAddedAudioEventListener",!1),s()(r()(o),"state",{duration:o.props.audio?U(o.props.audio.duration,o.props.audio.duration,o.props.timeFormat):o.props.defaultDuration}),s()(r()(o),"handleAudioDurationChange",(function(e){var t=e.target,n=o.props,r=n.timeFormat,a=n.defaultDuration;o.setState({duration:U(t.duration,t.duration,r)||a})})),s()(r()(o),"addAudioEventListeners",(function(){var e=o.props.audio;e&&!o.hasAddedAudioEventListener&&(o.audio=e,o.hasAddedAudioEventListener=!0,e.addEventListener("durationchange",o.handleAudioDurationChange),e.addEventListener("abort",o.handleAudioDurationChange))}));var n=t.audio,a=t.timeFormat,i=t.defaultDuration;return o.state={duration:n?U(n.duration,n.duration,a):i},o}i()(t,e);var o=t.prototype;return o.componentDidMount=function(){this.addAudioEventListeners()},o.componentDidUpdate=function(){this.addAudioEventListeners()},o.componentWillUnmount=function(){this.audio&&this.hasAddedAudioEventListener&&(this.audio.removeEventListener("durationchange",this.handleAudioDurationChange),this.audio.removeEventListener("abort",this.handleAudioDurationChange))},o.render=function(){return this.state.duration},t}(l.PureComponent),H=function(e){function t(){for(var t,o=arguments.length,n=new Array(o),a=0;a<o;a++)n[a]=arguments[a];return t=e.call.apply(e,[this].concat(n))||this,s()(r()(t),"audio",void 0),s()(r()(t),"hasAddedAudioEventListener",!1),s()(r()(t),"volumeBar",Object(l.createRef)()),s()(r()(t),"volumeAnimationTimer",0),s()(r()(t),"lastVolume",t.props.volume),s()(r()(t),"state",{currentVolumePos:(t.lastVolume/1*100||0).toFixed(2)+"%",hasVolumeAnimation:!1,isDraggingVolume:!1}),s()(r()(t),"getCurrentVolume",(function(e){var o=t.props.audio;if(!t.volumeBar.current)return{currentVolume:o.volume,currentVolumePos:t.state.currentVolumePos};var n,r,a=t.volumeBar.current.getBoundingClientRect(),i=a.width,u=I(e)-a.left;return u<0?(n=0,r="0%"):u>a.width?(n=1,r="100%"):(n=u/i,r=u/i*100+"%"),{currentVolume:n,currentVolumePos:r}})),s()(r()(t),"handleContextMenu",(function(e){e.preventDefault()})),s()(r()(t),"handleClickVolumeButton",(function(){var e=t.props.audio;e.volume>0?(t.lastVolume=e.volume,e.volume=0):e.volume=t.lastVolume})),s()(r()(t),"handleVolumnControlMouseOrTouchDown",(function(e){e.stopPropagation();var o=t.props.audio,n=t.getCurrentVolume(e.nativeEvent),r=n.currentVolume,a=n.currentVolumePos;o.volume=r,t.setState({isDraggingVolume:!0,currentVolumePos:a}),e.nativeEvent instanceof MouseEvent?(window.addEventListener("mousemove",t.handleWindowMouseOrTouchMove),window.addEventListener("mouseup",t.handleWindowMouseOrTouchUp)):(window.addEventListener("touchmove",t.handleWindowMouseOrTouchMove),window.addEventListener("touchend",t.handleWindowMouseOrTouchUp))})),s()(r()(t),"handleWindowMouseOrTouchMove",(function(e){e.preventDefault(),e.stopPropagation();var o=t.props.audio,n=window.getSelection();if(n&&"Range"===n.type&&n.empty(),t.state.isDraggingVolume){var r=t.getCurrentVolume(e),a=r.currentVolume,i=r.currentVolumePos;o.volume=a,t.setState({currentVolumePos:i})}})),s()(r()(t),"handleWindowMouseOrTouchUp",(function(e){e.stopPropagation(),t.setState({isDraggingVolume:!1}),e instanceof MouseEvent?(window.removeEventListener("mousemove",t.handleWindowMouseOrTouchMove),window.removeEventListener("mouseup",t.handleWindowMouseOrTouchUp)):(window.removeEventListener("touchmove",t.handleWindowMouseOrTouchMove),window.removeEventListener("touchend",t.handleWindowMouseOrTouchUp))})),s()(r()(t),"handleAudioVolumeChange",(function(e){var o=t.state.isDraggingVolume,n=e.target.volume;(t.lastVolume>0&&0===n||0===t.lastVolume&&n>0)&&t.props.onMuteChange(),t.lastVolume=n,o||(t.setState({hasVolumeAnimation:!0,currentVolumePos:(n/1*100||0).toFixed(2)+"%"}),clearTimeout(t.volumeAnimationTimer),t.volumeAnimationTimer=setTimeout((function(){t.setState({hasVolumeAnimation:!1})}),100))})),t}i()(t,e);var o=t.prototype;return o.componentDidUpdate=function(){var e=this.props.audio;e&&!this.hasAddedAudioEventListener&&(this.audio=e,this.hasAddedAudioEventListener=!0,e.addEventListener("volumechange",this.handleAudioVolumeChange))},o.componentWillUnmount=function(){this.audio&&this.hasAddedAudioEventListener&&this.audio.removeEventListener("volumechange",this.handleAudioVolumeChange),clearTimeout(this.volumeAnimationTimer)},o.render=function(){var e=this.props,t=e.audio,o=e.showFilledVolume,n=this.state,r=n.currentVolumePos,a=n.hasVolumeAnimation,i=(t||{}).volume;return d.a.createElement("div",{ref:this.volumeBar,onMouseDown:this.handleVolumnControlMouseOrTouchDown,onTouchStart:this.handleVolumnControlMouseOrTouchDown,onContextMenu:this.handleContextMenu,role:"progressbar","aria-label":"volume Control","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Number((100*i).toFixed(0)),tabIndex:0,className:"rhap_volume-bar-area"},d.a.createElement("div",{className:"rhap_volume-bar"},d.a.createElement("div",{className:"rhap_volume-indicator",style:{left:r,transitionDuration:a?".1s":"0s"}}),o&&d.a.createElement("div",{className:"rhap_volume-filled",style:{width:r}})))},t}(l.Component);!function(e){e.CURRENT_TIME="CURRENT_TIME",e.CURRENT_LEFT_TIME="CURRENT_LEFT_TIME",e.PROGRESS_BAR="PROGRESS_BAR",e.DURATION="DURATION",e.ADDITIONAL_CONTROLS="ADDITIONAL_CONTROLS",e.MAIN_CONTROLS="MAIN_CONTROLS",e.VOLUME_CONTROLS="VOLUME_CONTROLS",e.LOOP="LOOP",e.VOLUME="VOLUME"}(x||(x={}));var J=function(e){function t(){for(var t,o=arguments.length,n=new Array(o),a=0;a<o;a++)n[a]=arguments[a];return t=e.call.apply(e,[this].concat(n))||this,s()(r()(t),"audio",Object(l.createRef)()),s()(r()(t),"progressBar",Object(l.createRef)()),s()(r()(t),"container",Object(l.createRef)()),s()(r()(t),"lastVolume",t.props.volume),s()(r()(t),"listenTracker",void 0),s()(r()(t),"volumeAnimationTimer",void 0),s()(r()(t),"downloadProgressAnimationTimer",void 0),s()(r()(t),"togglePlay",(function(e){e.stopPropagation();var o=t.audio.current;o.paused&&o.src?t.playAudioPromise():o.paused||o.pause()})),s()(r()(t),"playAudioPromise",(function(){t.audio.current.play().then(null).catch((function(e){var o=t.props.onPlayError;o&&o(new Error(e))}))})),s()(r()(t),"isPlaying",(function(){var e=t.audio.current;return!!e&&(!e.paused&&!e.ended)})),s()(r()(t),"handlePlay",(function(e){t.forceUpdate(),t.props.onPlay&&t.props.onPlay(e)})),s()(r()(t),"handlePause",(function(e){t.audio&&(t.forceUpdate(),t.props.onPause&&t.props.onPause(e))})),s()(r()(t),"handleAbort",(function(e){t.props.onAbort&&t.props.onAbort(e)})),s()(r()(t),"handleClickVolumeButton",(function(){var e=t.audio.current;e.volume>0?(t.lastVolume=e.volume,e.volume=0):e.volume=t.lastVolume})),s()(r()(t),"handleMuteChange",(function(){t.forceUpdate()})),s()(r()(t),"handleClickLoopButton",(function(){t.audio.current.loop=!t.audio.current.loop,t.forceUpdate()})),s()(r()(t),"handleClickRewind",(function(){var e=t.props,o=e.progressJumpSteps,n=e.progressJumpStep,r=o.backward||n;t.setJumpTime(-r)})),s()(r()(t),"handleClickForward",(function(){var e=t.props,o=e.progressJumpSteps,n=e.progressJumpStep,r=o.forward||n;t.setJumpTime(r)})),s()(r()(t),"setJumpTime",(function(e){var o=t.audio.current,n=o.duration,r=o.currentTime;if(isFinite(n)&&isFinite(r)){var a=r+e/1e3;a<0?(o.currentTime=0,a=0):a>n?(o.currentTime=n,a=n):o.currentTime=a}})),s()(r()(t),"setJumpVolume",(function(e){var o=t.audio.current.volume+e;o<0?o=0:o>1&&(o=1),t.audio.current.volume=o})),s()(r()(t),"handleKeyDown",(function(e){switch(e.keyCode){case 32:e.target!==t.container.current&&e.target!==t.progressBar.current||(e.preventDefault(),t.togglePlay(e));break;case 37:t.handleClickRewind();break;case 39:t.handleClickForward();break;case 38:e.preventDefault(),t.setJumpVolume(t.props.volumeJumpStep);break;case 40:e.preventDefault(),t.setJumpVolume(-t.props.volumeJumpStep);break;case 76:t.handleClickLoopButton();break;case 77:t.handleClickVolumeButton()}})),s()(r()(t),"renderUIModules",(function(e){return e.map((function(e,o){return t.renderUIModule(e,o)}))})),s()(r()(t),"renderUIModule",(function(e,o){var n=t.props,r=n.defaultCurrentTime,a=n.progressUpdateInterval,i=n.showDownloadProgress,u=n.showFilledProgress,s=n.showFilledVolume,p=n.defaultDuration,m=n.customIcons,f=n.showSkipControls,w=n.onClickPrevious,E=n.onClickNext,L=n.showJumpControls,T=n.customAdditionalControls,C=n.customVolumeControls,O=n.muted,k=n.timeFormat,S=n.volume,V=n.loop,N=n.mse;switch(e){case x.CURRENT_TIME:return d.a.createElement("div",{key:o,id:"rhap_current-time",className:"rhap_time rhap_current-time"},d.a.createElement(W,{audio:t.audio.current,isLeftTime:!1,defaultCurrentTime:r,timeFormat:k}));case x.CURRENT_LEFT_TIME:return d.a.createElement("div",{key:o,id:"rhap_current-left-time",className:"rhap_time rhap_current-left-time"},d.a.createElement(W,{audio:t.audio.current,isLeftTime:!0,defaultCurrentTime:r,timeFormat:k}));case x.PROGRESS_BAR:return d.a.createElement(B,{key:o,ref:t.progressBar,audio:t.audio.current,progressUpdateInterval:a,showDownloadProgress:i,showFilledProgress:u,onSeek:N&&N.onSeek,srcDuration:N&&N.srcDuration});case x.DURATION:return d.a.createElement("div",{key:o,className:"rhap_time rhap_total-time"},N&&N.srcDuration?U(N.srcDuration,N.srcDuration,t.props.timeFormat):d.a.createElement(z,{audio:t.audio.current,defaultDuration:p,timeFormat:k}));case x.ADDITIONAL_CONTROLS:return d.a.createElement("div",{key:o,className:"rhap_additional-controls"},t.renderUIModules(T));case x.MAIN_CONTROLS:var I,R=t.isPlaying();return I=R?m.pause?m.pause:d.a.createElement(c.Icon,{icon:v.a}):m.play?m.play:d.a.createElement(c.Icon,{icon:h.a}),d.a.createElement("div",{key:o,className:"rhap_main-controls"},f&&d.a.createElement("button",{"aria-label":"Previous",className:"rhap_button-clear rhap_main-controls-button rhap_skip-button",type:"button",onClick:w},m.previous?m.previous:d.a.createElement(c.Icon,{icon:g.a})),L&&d.a.createElement("button",{"aria-label":"Rewind",className:"rhap_button-clear rhap_main-controls-button rhap_rewind-button",type:"button",onClick:t.handleClickRewind},m.rewind?m.rewind:d.a.createElement(c.Icon,{icon:M.a})),d.a.createElement("button",{"aria-label":R?"Pause":"Play",className:"rhap_button-clear rhap_main-controls-button rhap_play-pause-button",type:"button",onClick:t.togglePlay},I),L&&d.a.createElement("button",{"aria-label":"Forward",className:"rhap_button-clear rhap_main-controls-button rhap_forward-button",type:"button",onClick:t.handleClickForward},m.forward?m.forward:d.a.createElement(c.Icon,{icon:y.a})),f&&d.a.createElement("button",{"aria-label":"Skip",className:"rhap_button-clear rhap_main-controls-button rhap_skip-button",type:"button",onClick:E},m.next?m.next:d.a.createElement(c.Icon,{icon:b.a})));case x.VOLUME_CONTROLS:return d.a.createElement("div",{key:o,className:"rhap_volume-controls"},t.renderUIModules(C));case x.LOOP:var F,j=t.audio.current?t.audio.current.loop:V;return F=j?m.loop?m.loop:d.a.createElement(c.Icon,{icon:_.a}):m.loopOff?m.loopOff:d.a.createElement(c.Icon,{icon:D.a}),d.a.createElement("button",{key:o,"aria-label":j?"Enable Loop":"Disable Loop",className:"rhap_button-clear rhap_repeat-button",type:"button",onClick:t.handleClickLoopButton},F);case x.VOLUME:var J,G=(t.audio.current||{}).volume,K=void 0===G?O?0:S:G;return J=K?m.volume?m.volume:d.a.createElement(c.Icon,{icon:A.a}):m.volume?m.volumeMute:d.a.createElement(c.Icon,{icon:P.a}),d.a.createElement("div",{key:o,className:"rhap_volume-container"},d.a.createElement("button",{"aria-label":K?"Mute":"Unmute",onClick:t.handleClickVolumeButton,type:"button",className:"rhap_button-clear rhap_volume-button"},J),d.a.createElement(H,{audio:t.audio.current,volume:K,onMuteChange:t.handleMuteChange,showFilledVolume:s}));default:return Object(l.isValidElement)(e)?e.key?e:Object(l.cloneElement)(e,{key:o}):null}})),t}i()(t,e);var o=t.prototype;return o.componentDidMount=function(){var e=this;this.forceUpdate();var t=this.audio.current;this.props.muted?t.volume=0:t.volume=this.lastVolume,t.addEventListener("error",(function(t){e.props.onError&&e.props.onError(t)})),t.addEventListener("canplay",(function(t){e.props.onCanPlay&&e.props.onCanPlay(t)})),t.addEventListener("canplaythrough",(function(t){e.props.onCanPlayThrough&&e.props.onCanPlayThrough(t)})),t.addEventListener("play",this.handlePlay),t.addEventListener("abort",this.handleAbort),t.addEventListener("ended",(function(t){e.props.onEnded&&e.props.onEnded(t)})),t.addEventListener("playing",(function(t){e.props.onPlaying&&e.props.onPlaying(t)})),t.addEventListener("seeking",(function(t){e.props.onSeeking&&e.props.onSeeking(t)})),t.addEventListener("seeked",(function(t){e.props.onSeeked&&e.props.onSeeked(t)})),t.addEventListener("waiting",(function(t){e.props.onWaiting&&e.props.onWaiting(t)})),t.addEventListener("emptied",(function(t){e.props.onEmptied&&e.props.onEmptied(t)})),t.addEventListener("stalled",(function(t){e.props.onStalled&&e.props.onStalled(t)})),t.addEventListener("suspend",(function(t){e.props.onSuspend&&e.props.onSuspend(t)})),t.addEventListener("loadstart",(function(t){e.props.onLoadStart&&e.props.onLoadStart(t)})),t.addEventListener("loadedmetadata",(function(t){e.props.onLoadedMetaData&&e.props.onLoadedMetaData(t)})),t.addEventListener("loadeddata",(function(t){e.props.onLoadedData&&e.props.onLoadedData(t)})),t.addEventListener("pause",this.handlePause),t.addEventListener("timeupdate",F((function(t){e.props.onListen&&e.props.onListen(t)}),this.props.listenInterval)),t.addEventListener("volumechange",(function(t){e.props.onVolumeChange&&e.props.onVolumeChange(t)})),t.addEventListener("encrypted",(function(t){var o=e.props.mse;o&&o.onEcrypted&&o.onEcrypted(t)}))},o.componentDidUpdate=function(e){var t=this.props,o=t.src,n=t.autoPlayAfterSrcChange;e.src!==o&&(n?this.playAudioPromise():this.forceUpdate())},o.componentWillUnmount=function(){var e=this.audio.current;e&&(e.removeEventListener("play",this.handlePlay),e.removeEventListener("pause",this.handlePause),e.removeEventListener("abort",this.handleAbort),e.removeAttribute("src"),e.load())},o.render=function(){var e=this.props,t=e.className,o=e.src,n=e.loop,r=e.preload,a=e.autoPlay,i=e.crossOrigin,u=e.mediaGroup,s=e.header,l=e.footer,c=e.layout,p=e.customProgressBarSection,h=e.customControlsSection,m=e.children,v=e.style,f=this.audio.current?this.audio.current.loop:n;return d.a.createElement("div",{role:"group",tabIndex:0,"aria-label":"Audio Player",className:"rhap_container "+t,onKeyDown:this.handleKeyDown,ref:this.container,style:v},d.a.createElement("audio",{src:o,controls:!1,loop:f,autoPlay:a,preload:r,crossOrigin:i,mediaGroup:u,ref:this.audio},m),s&&d.a.createElement("div",{className:"rhap_header"},s),d.a.createElement("div",{className:"rhap_main "+N(c)},d.a.createElement("div",{className:"rhap_progress-section"},this.renderUIModules(p)),d.a.createElement("div",{className:"rhap_controls-section"},this.renderUIModules(h))),l&&d.a.createElement("div",{className:"rhap_footer"},l))},t}(l.Component);s()(J,"defaultProps",{autoPlay:!1,autoPlayAfterSrcChange:!0,listenInterval:1e3,progressJumpStep:5e3,progressJumpSteps:{},volumeJumpStep:.1,loop:!1,muted:!1,preload:"auto",progressUpdateInterval:20,defaultCurrentTime:"--:--",defaultDuration:"--:--",timeFormat:"auto",volume:1,className:"",showJumpControls:!0,showSkipControls:!1,showDownloadProgress:!0,showFilledProgress:!0,showFilledVolume:!1,customIcons:{},customProgressBarSection:[x.CURRENT_TIME,x.PROGRESS_BAR,x.DURATION],customControlsSection:[x.ADDITIONAL_CONTROLS,x.MAIN_CONTROLS,x.VOLUME_CONTROLS],customAdditionalControls:[x.LOOP],customVolumeControls:[x.VOLUME],layout:"stacked"});t.default=J}])}));