react-howler-player
Version:
React package to display minimalist audio player UI adding wrapper on howler.js
2 lines (1 loc) • 35.5 kB
JavaScript
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("react"),n=e(t),r=require("howler"),a=e(require("prop-types"));function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _(){return(_=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function d(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function h(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(e):t}function y(e){var t=function(){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}}();return function(){var n,r=c(e);if(t){var a=c(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return h(this,n)}}function m(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var g={"r-howler":"styles_r-howler__3PySh","dark-themed":"styles_dark-themed__1Mmdx",player:"styles_player__3QVPP","player-controls":"styles_player-controls__n3mnQ","player-rate-btn":"styles_player-rate-btn__2MhmA","player-speed":"styles_player-speed__3d5xa","selected-option":"styles_selected-option__23g7c","rate-btn-hidden":"styles_rate-btn-hidden__1HxSh","progress-bar":"styles_progress-bar__2-CEJ","player-progress":"styles_player-progress__2d2KA","volume-control":"styles_volume-control__229nl","audio-bar":"styles_audio-bar__2iFkl","audio-duration":"styles_audio-duration__1BIuq",duration:"styles_duration__166uF",prepare:"styles_prepare__M9RoR",icon:"styles_icon__3K4sp","light-themed":"styles_light-themed__Pji_D"};m('.styles_r-howler__3PySh.styles_dark-themed__1Mmdx.styles_player__3QVPP {\n position: relative;\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n min-height: 45px;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background-color: rgba(26, 26, 26, 0.8); }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-controls__n3mnQ {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 7px;\n flex: 1; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx button {\n height: 100%;\n padding: 6px;\n border: none;\n margin: 0;\n fill: white;\n background: transparent;\n border-radius: 5px;\n cursor: pointer;\n margin-right: 5px;\n box-sizing: border-box;\n transition: background 0.1s ease-in, fill 0.1s ease-in;\n display: flex;\n justify-content: center;\n align-items: center; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx button:hover {\n background: #37adbf;\n fill: rgba(26, 26, 26, 0.8); }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-rate-btn__2MhmA {\n color: white;\n border-radius: 5px;\n margin-right: 0;\n width: 100%; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-speed__3d5xa {\n position: relative;\n min-width: 40px;\n display: flex;\n justify-content: center; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx ol {\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: rgba(26, 26, 26, 0.8);\n z-index: 999;\n position: fixed;\n border-radius: 4px;\n left: 0;\n text-align: center;\n width: 47px; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx ol li {\n font-size: 13px;\n margin: 0 2.5px;\n padding: 5px 2.5px;\n color: white;\n cursor: pointer; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx ol li.styles_selected-option__23g7c {\n background-color: #37adbf;\n border-radius: 4px; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_rate-btn-hidden__1HxSh {\n opacity: 0; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_progress-bar__2-CEJ {\n flex: 1;\n display: flex;\n align-items: center;\n position: relative; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA {\n width: 100%;\n border: 0;\n padding: 0;\n -webkit-appearance: none;\n height: 4px;\n border-radius: 4px;\n min-width: 50px;\n margin: 0;\n z-index: 2; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-moz-range-thumb {\n -webkit-appearance: none;\n background: #37adbf; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-ms-thumb {\n -webkit-appearance: none;\n background: #37adbf; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-webkit-slider-thumb {\n -webkit-appearance: none;\n background: #37adbf; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-webkit-slider-runnable-track {\n width: 100%;\n height: 5px;\n border-radius: var(--progressbar-radius, 4px);\n cursor: pointer;\n background: linear-gradient(to right, white, white var(--progress-value, 0), black var(--progress-value, 0));\n content: ""; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-moz-range-track {\n width: 100%;\n height: 5px;\n border-radius: var(--progressbar-radius, 4px);\n cursor: pointer;\n background: black; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-ms-track {\n width: 100%;\n height: 5px;\n border-radius: var(--progressbar-radius, 4px);\n cursor: pointer;\n background: black; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_player-progress__2d2KA::-moz-range-progress {\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: white; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl {\n padding-right: 5px;\n display: flex;\n align-items: center; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl {\n width: 100%;\n border: 0;\n padding: 0;\n -webkit-appearance: none;\n height: 4px;\n border-radius: 4px;\n min-width: 50px;\n max-width: 75px;\n background: transparent; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-moz-range-thumb {\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n margin: -5px 0 0;\n border-radius: 50%;\n cursor: pointer;\n border: 0 !important;\n z-index: 4;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background: #37adbf; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-ms-thumb {\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n margin: -5px 0 0;\n border-radius: 50%;\n cursor: pointer;\n border: 0 !important;\n z-index: 4;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background: #37adbf; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n margin: -5px 0 0;\n border-radius: 50%;\n cursor: pointer;\n border: 0 !important;\n z-index: 4;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background: #37adbf; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-webkit-slider-runnable-track {\n width: 100%;\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: linear-gradient(to right, white, white var(--progress-value, 0), black var(--progress-value, 0));\n content: ""; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-moz-range-track {\n width: 100%;\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: black; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-ms-track {\n width: 100%;\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: black; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_volume-control__229nl .styles_audio-bar__2iFkl::-moz-range-progress {\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: white; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_audio-duration__1BIuq {\n text-align: center;\n padding-inline-start: 9px;\n padding-inline-end: 9px;\n white-space: nowrap;\n pointer-events: none;\n cursor: default;\n color: white;\n font-size: 14px;\n font-variant-numeric: normal;\n text-shadow: none; }\n .styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_audio-duration__1BIuq .styles_duration__166uF {\n display: inline-block;\n white-space: pre;\n color: #929292; }\n\n.styles_r-howler__3PySh.styles_dark-themed__1Mmdx .styles_prepare__M9RoR {\n color: grey;\n font-weight: bold;\n font-family: monospace;\n font-size: 17px; }\n\nsvg {\n pointer-events: none;\n display: block; }\n svg.styles_icon__3K4sp {\n width: 19px;\n height: 19px; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D.styles_player__3QVPP {\n position: relative;\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n min-height: 45px;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background-color: white; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-controls__n3mnQ {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 7px;\n flex: 1; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D button {\n height: 100%;\n padding: 6px;\n border: none;\n margin: 0;\n fill: rgba(26, 26, 26, 0.8);\n background: transparent;\n border-radius: 5px;\n cursor: pointer;\n margin-right: 5px;\n box-sizing: border-box;\n transition: background 0.1s ease-in, fill 0.1s ease-in;\n display: flex;\n justify-content: center;\n align-items: center; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D button:hover {\n background: #37adbf;\n fill: white; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-rate-btn__2MhmA {\n color: rgba(26, 26, 26, 0.8);\n border-radius: 5px;\n margin-right: 0;\n width: 100%; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-speed__3d5xa {\n position: relative;\n min-width: 40px;\n display: flex;\n justify-content: center; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D ol {\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: lightgrey;\n z-index: 999;\n position: fixed;\n border-radius: 4px;\n left: 0;\n text-align: center;\n width: 47px; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D ol li {\n font-size: 13px;\n margin: 0 2.5px;\n padding: 5px 2.5px;\n color: rgba(26, 26, 26, 0.8);\n cursor: pointer; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D ol li.styles_selected-option__23g7c {\n background-color: #37adbf;\n border-radius: 4px; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_rate-btn-hidden__1HxSh {\n opacity: 0; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_progress-bar__2-CEJ {\n flex: 1;\n display: flex;\n align-items: center;\n position: relative; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA {\n width: 100%;\n border: 0;\n padding: 0;\n -webkit-appearance: none;\n height: 4px;\n border-radius: 4px;\n min-width: 50px;\n margin: 0;\n z-index: 2; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-moz-range-thumb {\n -webkit-appearance: none;\n background: white; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-ms-thumb {\n -webkit-appearance: none;\n background: white; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-webkit-slider-thumb {\n -webkit-appearance: none;\n background: white; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-webkit-slider-runnable-track {\n width: 100%;\n height: 5px;\n border-radius: var(--progressbar-radius, 4px);\n cursor: pointer;\n background: linear-gradient(to right, #37adbf, #37adbf var(--progress-value, 0), #ccc var(--progress-value, 0));\n content: ""; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-moz-range-track {\n width: 100%;\n height: 5px;\n border-radius: var(--progressbar-radius, 4px);\n cursor: pointer;\n background: #ccc; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-ms-track {\n width: 100%;\n height: 5px;\n border-radius: var(--progressbar-radius, 4px);\n cursor: pointer;\n background: #ccc; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_player-progress__2d2KA::-moz-range-progress {\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: #37adbf; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl {\n padding-right: 5px;\n display: flex;\n align-items: center; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl {\n width: 100%;\n border: 0;\n padding: 0;\n -webkit-appearance: none;\n height: 4px;\n border-radius: 4px;\n min-width: 50px;\n max-width: 75px;\n background: transparent; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-moz-range-thumb {\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n margin: -5px 0 0;\n border-radius: 50%;\n cursor: pointer;\n border: 0 !important;\n z-index: 4;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background: white; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-ms-thumb {\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n margin: -5px 0 0;\n border-radius: 50%;\n cursor: pointer;\n border: 0 !important;\n z-index: 4;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background: white; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n margin: -5px 0 0;\n border-radius: 50%;\n cursor: pointer;\n border: 0 !important;\n z-index: 4;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);\n background: white; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-webkit-slider-runnable-track {\n width: 100%;\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: linear-gradient(to right, #37adbf, #37adbf var(--progress-value, 0), #ccc var(--progress-value, 0));\n content: ""; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-moz-range-track {\n width: 100%;\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: #ccc; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-ms-track {\n width: 100%;\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: #ccc; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_volume-control__229nl .styles_audio-bar__2iFkl::-moz-range-progress {\n height: 5px;\n border-radius: 4px;\n cursor: pointer;\n background: #37adbf; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_audio-duration__1BIuq {\n text-align: center;\n padding-inline-start: 9px;\n padding-inline-end: 9px;\n white-space: nowrap;\n pointer-events: none;\n cursor: default;\n color: rgba(26, 26, 26, 0.8);\n font-size: 14px;\n font-variant-numeric: normal;\n text-shadow: none; }\n .styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_audio-duration__1BIuq .styles_duration__166uF {\n display: inline-block;\n white-space: pre;\n color: #929292; }\n\n.styles_r-howler__3PySh.styles_light-themed__Pji_D .styles_prepare__M9RoR {\n color: grey;\n font-weight: bold;\n font-family: monospace;\n font-size: 17px; }\n\nsvg {\n pointer-events: none;\n display: block; }\n svg.styles_icon__3K4sp {\n width: 19px;\n height: 19px; }\n');var b=function(e){d(a,t.Component);var r=y(a);function a(){return s(this,a),r.apply(this,arguments)}return l(a,[{key:"render",value:function(){var e=this.props,t=e.loadingText,r=void 0===t?"Preparing":t,a=e.isDark,s=e.preparingComp,o=[g.player,g["r-howler"],g[a?"dark-themed":"light-themed"]].join(" "),l=s||n.createElement("div",{className:[g.prepare,g.notready].join(" ")},r);return n.createElement("div",{className:o},l)}}]),a}();i(b,"propTypes",{loadingText:a.string,isDark:a.bool,preparingComp:a.any});var f={backSpace:8,tab:9,clear:12,return:13,shift:16,ctrl:17,alt:18,esc:27,arrowLeft:37,arrowUp:38,arrowRight:39,arrowDown:40,delete:46,home:36,end:35,pageUp:33,pageDown:34,insert:45,capsLock:20,leftCommand:91,rightCommand:93,mozillaCommand:224,rightWindowsStart:92,pause:19,space:32,help:47,leftWindow:91,select:93,numPad0:96,numPad1:97,numPad2:98,numPad3:99,numPad4:100,numPad5:101,numPad6:102,numPad7:103,numPad8:104,numPad9:105,numPadMultiply:106,numPadPlus:107,numPadEnter:108,numPadMinus:109,numPadPeriod:110,numPadDivide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,f13:124,f14:125,f15:126,numLock:144,scrollLock:145,m:77};f.keyCodes=Object.keys(f).reduce((function(e,t){return e[f[t]]=t,e}),{});var w={profile_top_progress:"profile_profile_top_progress__3_Y69",profile_minimal:"profile_profile_minimal__1Qo5T",profile_generic:"profile_profile_generic__XgF7F","player-controls":"profile_player-controls__1sYy9"};m(".profile_profile_top_progress__3_Y69,\n.profile_profile_minimal__1Qo5T,\n.profile_profile_generic__XgF7F {\n display: flex;\n width: 100%;\n flex-direction: column;\n position: relative; }\n .profile_profile_top_progress__3_Y69 .profile_player-controls__1sYy9,\n .profile_profile_minimal__1Qo5T .profile_player-controls__1sYy9,\n .profile_profile_generic__XgF7F .profile_player-controls__1sYy9 {\n flex: 1; }\n");var v="PREPARE",x="READY",k="ENDED",P="PAUSE",S="PLAYING",M=[.5,.75,1,1.25,1.5,2,3,4],E=function(e){d(o,t.Component);var a=y(o);function o(e){var t;return s(this,o),i(u(t=a.call(this,e)),"stepInterval",null),i(u(t),"ref",n.createRef()),i(u(t),"toggleMute",(function(){t.setState((function(e){var t=e.volume,n=e.sound;return 0!=t&&e.isMute?(n.mute(!1),{isMute:!e.isMute}):(n.mute(!0),{isMute:!0})}))})),i(u(t),"readyToPlay",(function(){var e=t.state,n=e.playerState,r=e.sound,a=t.props.onLoad;if(n!==S){var s={duration:Math.round(r.duration()),volume:r.volume(),audio:r};t.setState({playerState:x,duration:t.formatTime(Math.round(r.duration()))},a&&"function"==typeof a?function(){return a(s)}:void 0)}})),i(u(t),"setupPlayer",(function(){t.destroySound();var e=t.props,n=e.src,a=e.format,s=void 0===a?["wav","mp3","flac","aac"]:a,o=e.onPlay,l=e.onPause,i=e.onEnd;if(n){var _=new r.Howl({src:n,format:s,html5:!0});_.once("load",t.readyToPlay),_.on("end",(function(){t.playbackEnded(),i&&i()})),_.on("play",(function(){t.stepInterval=setInterval(t.step,15),o&&o()})),_.on("pause",(function(){t.playbackPause(),l&&l()})),_.on("stop",(function(){t.setState({playerState:k,progressValue:0,currentPos:"0:00"})})),t.setState({sound:_,playerState:v,progressValue:0,currentPos:"0:00",src:n})}})),i(u(t),"playbackEnded",(function(){var e=t.props.onTimeUpdate,n=t.state.duration;e&&e({currentTime:t.state.sound.duration(),progressPercent:100});clearInterval(t.stepInterval),t.setState({playerState:k,progressValue:100,currentPos:n})})),i(u(t),"playbackPlay",(function(){t.state.sound.play(),t.setState({playerState:S})})),i(u(t),"playbackPause",(function(){var e=t.state.sound;e.playing()&&e.pause(),clearInterval(t.stepInterval),t.setState({playerState:P})})),i(u(t),"formatTime",(function(e){var t=Math.floor(e/60)||0,n=e-60*t||0;return t+":"+(n<10?"0":"")+n})),i(u(t),"seek",(function(e){var n=t.state.sound,r=e.target.value/100;n.seek(n.duration()*r);var a=n.seek()||0;t.setState({progressValue:e.target.value,currentPos:t.formatTime(Math.round(a))})})),i(u(t),"step",(function(){var e=t.state.sound,n=t.props.onTimeUpdate,r=e.seek()||0,a=r/e.duration()*100||0;e.playing()&&(t.setState({progressValue:a.toFixed(3),currentPos:t.formatTime(Math.round(r)),playerState:S}),n&&n({currentTime:r,progressPercent:Number(a.toFixed(3))}))})),i(u(t),"changeVolume",(function(e){t.state.sound.volume(Math.round(e)/100),t.setState({volume:e,isMute:0===Number(e)})})),i(u(t),"volumeUp",(function(){t.setState((function(e){var n=e.volume;return(n+=5)>100&&(n=100),t.state.sound.volume(Math.round(n)/100),{volume:n,isMute:!1}}))})),i(u(t),"volumeDown",(function(){t.setState((function(e){var n=e.volume,r=e.isMute;return(n-=5)<0&&(n=0,r=!0),t.state.sound.volume(Math.round(n)/100),{volume:n,isMute:r}}))})),i(u(t),"seekForward",(function(){var e=t.state.sound,n=e.seek(),r=e.duration(),a=r/20<10?10:r/20;if(!(n+a>r)){r-n<a&&a>50&&(a=10),e.seek(n+a);var s=(n+a)/e.duration()*100||0;t.setState({progressValue:Math.round(s),currentPos:t.formatTime(Math.round(n+a))})}})),i(u(t),"seekBackward",(function(){var e=t.state.sound,n=e.seek(),r=e.duration(),a=r/20<10?10:r/20;if(!(n-a<0)){n<a&&a>50&&(a=10),e.seek(n-a);var s=(n-a)/e.duration()*100||0;t.setState({progressValue:Math.round(s),currentPos:t.formatTime(Math.round(n-a))})}})),i(u(t),"keyPress",(function(e){var n=t.state,r=n.sound,a=n.playerState,s=n.isMute,o=e.keyCode?e.keyCode:e.which;if("tab"!==f.keyCodes[o]){e.preventDefault(),e.stopPropagation();var l=document.activeElement;switch(f.keyCodes[o]){case"space":case"return":if("volume"===l.name){s?r.mute(!1):r.mute(!0),t.setState({isMute:!t.state.isMute});break}a===S?(r.pause(),t.setState({playerState:P})):a!==x&&a!==P&&a!==k||(r.play(),t.setState({playerState:S}));break;case"m":s?r.mute(!1):r.mute(!0),t.setState({isMute:!t.state.isMute});break;case"arrowUp":t.volumeUp();break;case"arrowDown":t.volumeDown();break;case"arrowRight":t.seekForward();break;case"arrowLeft":t.seekBackward()}}})),i(u(t),"setVolumePosition",(function(){var e=t.state,n=e.rate;if(e.ratePanel){var r=t.props.speedPanel,a=void 0===r?"relative":r,s=t.rateRef.current,o=t.rateDivRef.current.getBoundingClientRect(),l=s.getBoundingClientRect(),i=(o.left,o.top),_=o.right,d=l.height,c=d/M.length;if("relative"===a){var p=M.indexOf(n);s.style.left="".concat(_-40,"px"),s.style.top="".concat(i-c*p+2.5,"px")}else"top"===a?(s.style.left="".concat(_-40,"px"),s.style.top="".concat(i-d+c+11,"px")):"bottom"===a&&(s.style.left="".concat(_-40,"px"),s.style.top="".concat(i-9,"px"))}})),i(u(t),"addResizeListener",(function(){window.addEventListener("resize",(function(){t.setVolumePosition()}))})),i(u(t),"removeResizeListener",(function(){window.addEventListener("resize",(function(){this.setVolumePosition()}))})),i(u(t),"destroySound",(function(){var e=t.state.sound;clearInterval(t.stepInterval),e&&(e.off(),e.stop())})),i(u(t),"toggleSettingsPanel",(function(e){t.setState({isSettingsOpen:e})})),i(u(t),"setRate",(function(e,n){var r=t.state.sound;t.setState({rate:e},(function(){n&&n(),r.rate(e)}))})),i(u(t),"toogleRatePanel",(function(e){t.setState({ratePanel:e},t.setVolumePosition)})),t.state={sound:null,playerState:v,src:[],progressValue:0,currentPos:"0:00",volume:70,isMute:!1,isSettingsOpen:!1,rate:1,ratePanel:!1},t.rateRef=n.createRef(),t.rateDivRef=n.createRef(),t}return l(o,[{key:"componentDidMount",value:function(){this.setupPlayer(),this.addResizeListener()}},{key:"componentWillUnmount",value:function(){this.destroySound(),this.removeResizeListener()}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){var t,n,r=this.state.src;t=r,n=e.src,JSON.stringify(t)!==JSON.stringify(n)&&this.setupPlayer()}},{key:"render",value:function(){var e=this,r=this.state,a=r.playerState,s=r.progressValue,o=r.duration,l=r.currentPos,i=r.volume,d=r.isMute,c=r.ratePanel,p=this.props,u=p.isDark,h=void 0!==u&&u,y=p.profile,m=void 0===y?"generic":y;if(a===v)return n.createElement(b,this.props);var f=[g.player,g["r-howler"],g[h?"dark-themed":"light-themed"]].join(" "),E=void 0,z={};a===x||a===P||a===k?(E=this.playbackPlay,z={"aria-label":"Play",id:"rh-player-play"}):a===S&&(E=this.playbackPause,z={"aria-label":"Pause",id:"rh-player-pause"});var j=Math.round(s),D=n.createElement("button",_({type:"button"},z,{onClick:E}),n.createElement("svg",{role:"presentation",className:g.icon},n.createElement("use",{xlinkHref:a===S?"#r-howl-pause":"#r-howl-play"}))),C=n.createElement("div",{className:g["progress-bar"]},n.createElement("input",{type:"range",id:"rh-player-media-progress",className:g["player-progress"],step:"0.01",min:"0",max:"100",value:s,"aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":j,"aria-valuetext":"".concat(l," of ").concat(o,", ").concat(j," percentage complete"),role:"slider",style:{"--progress-value":"".concat(s,"%")},autoComplete:"off",onChange:this.seek})),R=n.createElement("div",{className:g["audio-duration"]},l," ",n.createElement("span",{className:g.duration},"/ ",o||"...")),V=n.createElement("div",{className:g["volume-control"]},n.createElement("button",{type:"button",onClick:this.toggleMute,id:"rh-player-volume",name:"volume","aria-label":d?"Unmute":"Mute"},n.createElement("svg",{role:"presentation",className:g.icon},n.createElement("use",{xlinkHref:d?"#r-howl-muted":"#r-howl-volume"}))),n.createElement("input",{type:"range",id:"rh-player-volume-slider",className:g["audio-bar"],style:{"--progress-value":"".concat(d?0:i,"%")},min:"0",max:"100",step:"0.01",value:d?0:i,"aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":d?0:i,role:"slider","aria-label":"volume","aria-valuetext":d?"Muted":"".concat(i,"%"),onChange:function(t){e.changeVolume(t.target.value)}})),F=n.createElement("div",{className:g["player-speed"],ref:this.rateDivRef},n.createElement("button",{className:[g["player-rate-btn"],c?g["rate-btn-hidden"]:""].filter(Boolean).join(" "),hidden:c,onClick:function(){return e.toogleRatePanel(!0)},type:"button"},this.state.rate," x"),n.createElement("ol",{hidden:!c,ref:this.rateRef},M.map((function(t,r){var a={};return t==e.state.rate&&(a.className=g["selected-option"]),n.createElement("li",_({},a,{key:r,onClick:function(){return e.setRate(t,(function(){return e.toogleRatePanel(!1)}))}}),t,n.createElement("span",{"aria-hidden":"true"},"x"))})))),N="";return"top_progress"===m?N=n.createElement(t.Fragment,null,n.createElement("div",{className:w["profile_".concat(m)],style:{"--progressbar-radius":0}},C,n.createElement("div",{className:g["player-controls"]},n.createElement("div",{className:g["left-controls"]},D),R,V))):"generic"===m?N=n.createElement(t.Fragment,null,n.createElement("div",{className:w["profile_".concat(m)]},n.createElement("div",{className:g["player-controls"]},n.createElement("div",{className:g["left-controls"]},D),C,R,V,F))):"minimal"===m&&(N=n.createElement("div",{className:w["profile_".concat(m)]},n.createElement("div",{className:g["player-controls"]},n.createElement("div",{className:g["left-controls"]},D),R))),n.createElement("div",{className:f,onKeyPress:function(t){return e.keyPress(t)},onKeyDown:function(t){return e.keyPress(t)},id:"rh-player-main",ref:this.ref},n.createElement("div",{hidden:!0},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},n.createElement("symbol",{id:"r-howl-airplay"},n.createElement("path",{d:"M16 1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v-2H3V3h12v8h-2v2h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"}),n.createElement("path",{d:"M4 17h10l-5-6z"})),n.createElement("symbol",{id:"r-howl-captions-off"},n.createElement("path",{d:"M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z",fillRule:"evenodd",fillOpacity:".5"})),n.createElement("symbol",{id:"r-howl-captions-on"},n.createElement("path",{d:"M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z",fillRule:"evenodd"})),n.createElement("symbol",{id:"r-howl-download"},n.createElement("path",{d:"M9 13c.3 0 .5-.1.7-.3L15.4 7 14 5.6l-4 4V1H8v8.6l-4-4L2.6 7l5.7 5.7c.2.2.4.3.7.3zm-7 2h14v2H2z"})),n.createElement("symbol",{id:"r-howl-enter-fullscreen"},n.createElement("path",{d:"M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"})),n.createElement("symbol",{id:"r-howl-exit-fullscreen"},n.createElement("path",{d:"M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"})),n.createElement("symbol",{id:"r-howl-fast-forward"},n.createElement("path",{d:"M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"})),n.createElement("symbol",{id:"r-howl-logo-vimeo"},n.createElement("path",{d:"M17 5.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C5 10.9 4.4 6 3 6c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z"})),n.createElement("symbol",{id:"r-howl-logo-youtube"},n.createElement("path",{d:"M16.8 5.8c-.2-1.3-.8-2.2-2.2-2.4C12.4 3 9 3 9 3s-3.4 0-5.6.4C2 3.6 1.3 4.5 1.2 5.8 1 7.1 1 9 1 9s0 1.9.2 3.2c.2 1.3.8 2.2 2.2 2.4C5.6 15 9 15 9 15s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4.2-1.3.2-3.2.2-3.2s0-1.9-.2-3.2zM7 12V6l5 3-5 3z"})),n.createElement("symbol",{id:"r-howl-muted"},n.createElement("path",{d:"M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"})),n.createElement("symbol",{id:"r-howl-pause"},n.createElement("path",{d:"M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zm6 0c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"})),n.createElement("symbol",{id:"r-howl-pip"},n.createElement("path",{d:"M13.293 3.293L7.022 9.564l1.414 1.414 6.271-6.271L17 7V1h-6z"}),n.createElement("path",{d:"M13 15H3V5h5V3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6h-2v5z"})),n.createElement("symbol",{id:"r-howl-play"},n.createElement("path",{d:"M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"})),n.createElement("symbol",{id:"r-howl-restart"},n.createElement("path",{d:"M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"})),n.createElement("symbol",{id:"r-howl-rewind"},n.createElement("path",{d:"M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"})),n.createElement("symbol",{id:"r-howl-settings"},n.createElement("path",{d:"M16.135 7.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094a2 2 0 0 1-2.969-1.23C10.065 1.258 9.669 1 9.219 1h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C1.26 7.935 1 8.33 1 8.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997zM9 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"})),n.createElement("symbol",{id:"r-howl-volume"},n.createElement("path",{d:"M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"}),n.createElement("path",{d:"M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zm-7.496.726H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"})))),N)}}]),o}();E.propTypes={src:a.array.isRequired,format:a.array,loadingText:a.string,isDark:a.bool,onTimeUpdate:a.func,onEnd:a.func,onPlay:a.func,onPause:a.func,speedPanel:a.string,onLoad:a.func,profile:a.oneOf(["generic","minimal","top_progress"])},module.exports=E;