react-audio-play - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/cjs/index.js

@@ -1,18 +0,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
-//# sourceMappingURL=index.js.map
+"use strict";var e=require("react"),n=function(){return n=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z",t="M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z",o="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",a="M0 0h6v24H0zM12 0h6v24h-6z",i="M18 12L0 24V0",l=function(e){var n=Math.floor(e/60),r=Math.floor(e%60);return n+":"+(r<10?"0"+r:r)};var c=function(e,n){var r,t,o,a=e.target;return"click"===e.type&&(o=a,-1!==Array.from(o.classList).indexOf("rap-pin"))&&(null===(r=null==a?void 0:a.parentElement)||void 0===r?void 0:r.parentElement)&&(a=a.parentElement.parentElement),"mousemove"===e.type&&(null===(t=null==n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)&&(a=n.parentElement.parentElement),a},p=[],s=[];!function(e,n){if(e&&"undefined"!=typeof document){var r,t=!0===n.prepend?"prepend":"append",o=!0===n.singleTag,a="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(o){var i=p.indexOf(a);-1===i&&(i=p.push(a)-1,s[i]={}),r=s[i]&&s[i][t]?s[i][t]:s[i][t]=l()}else r=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function l(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var r=Object.keys(n.attributes),o=0;o<r.length;o++)e.setAttribute(r[o],n.attributes[r[o]]);var i="prepend"===t?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}}(".rap-container {\n  width: 400px;\n  min-width: 300px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 16px;\n  margin-right: 16px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-volume-control-container {\n  height: 100vw;\n  width: 100vw;\n  position: fixed;\n  left: 0;\n  top: 0;\n  z-index: 99999;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n",{});exports.AudioPlayer=function(p){var s=p.src,u=p.backgroundColor,d=p.color,m=p.style,v=p.sliderColor,f=p.volume,g=void 0===f?100:f,h=p.onPlay,x=p.onPause,b=p.onEnd,w=p.onError,E=e.useRef(null),y=e.useRef(null),k=e.useRef(null),N=e.useState(!1),C=N[0],L=N[1],M=e.useState(!1),S=M[0],z=M[1],R=e.useState(0),T=R[0],B=R[1],j=e.useState("0:00"),A=j[0],O=j[1],P=e.useState("0:00"),V=P[0],H=P[1],D=e.useState(!1),F=D[0],X=D[1],Y=e.useState(100),q=Y[0],W=Y[1],Z=e.useState(function(e){if((e=isNaN(e)?100:Math.max(0,Math.min(e,100)))>=50)return r;if(e>5)return t;return o}(g)),U=Z[0],G=Z[1];e.useEffect((function(){if(!isNaN(g)){var e=g>100?100:g<0?0:g;W(e),E.current&&(E.current.volume=e/100)}}),[g]);var I=function(e){var n,r,t=c(e,y.current),o=t.getBoundingClientRect();if("horizontal"===t.dataset.direction){if(n=(r=t.offsetLeft)+t.offsetWidth,e.clientX<r||e.clientX>n)return!1}else if(n=(r=o.top)+t.offsetHeight,e.clientY<r||e.clientY>n)return!1;return!0};function J(e){var n=c(e,y.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(e.clientX-n.offsetLeft)/n.clientWidth;else if("vertical"===n.dataset.direction){var o=n.clientHeight;t=1-(e.clientY-r.top)/o}return t}var K=function(e){if(I(e)&&E.current){var n=E.current.duration*J(e);E.current.currentTime=n}},Q=function(e){I(e)&&E.current&&(E.current.volume=J(e))};return e.createElement("div",{className:"rap-container",style:n(n(n({},u?{backgroundColor:u}:{}),d?{color:d}:{}),m)},!C&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),C&&e.createElement("div",{className:"rap-pp-button",onClick:function(){E.current&&(E.current.paused?(E.current.play(),z(!0),h&&h()):(E.current.pause(),z(!1),x&&x()))}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"24",viewBox:"0 0 18 24",className:"rap-pp-icon"},e.createElement("path",{fill:null!=d?d:"#566574",fillRule:"evenodd",d:S?a:i}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},A),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onClick:K},e.createElement("div",{className:"rap-progress",style:n({width:T+"%"},v?{backgroundColor:v}:{})},e.createElement("div",{className:"rap-pin","data-method":"rewind",onMouseDown:function(e){y.current=e.target,window.addEventListener("mousemove",K,!1),window.addEventListener("mouseup",(function(){y.current=null,window.removeEventListener("mousemove",K,!1)}),{once:!0})},style:v?{backgroundColor:v}:{}}))),e.createElement("span",{className:"rap-total-time"},V)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn",onClick:function(e){var n,r=e.target.getBoundingClientRect(),t=null===(n=k.current)||void 0===n?void 0:n.getBoundingClientRect();if(r&&k.current&&t){var o=r.top-155;k.current.style.top=(o<0?0:o)+"px",k.current.style.left=r.left-5+"px"}X((function(e){return!e}))}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("path",{fill:F?null!=v?v:"#007FFF":null!=d?d:"#566574",fillRule:"evenodd",d:U}))),e.createElement("div",{className:"rap-volume-control-container ".concat(F?"":"rap-hidden"),onClick:function(){return X(!1)}},e.createElement("div",{ref:k,className:"rap-volume-controls",onClick:function(e){e.preventDefault(),e.stopPropagation()}},e.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:Q},e.createElement("div",{className:"rap-progress",style:n({height:"".concat(q,"%")},v?{backgroundColor:v}:{})},e.createElement("div",{className:"rap-pin","data-method":"changeVolume",style:v?{backgroundColor:v}:{},onMouseDown:function(e){y.current=e.target,window.addEventListener("mousemove",Q,!1),window.addEventListener("mouseup",(function(){y.current=null,window.removeEventListener("mousemove",Q,!1)}),!1)}})))))),e.createElement("audio",{ref:E,onCanPlay:function(){L(!0)},onEnded:function(){z(!1),E.current&&(E.current.currentTime=0,b&&b())},onError:function(){w&&w()},onLoadedMetadata:function(){var e,n;H(l(null!==(n=null===(e=E.current)||void 0===e?void 0:e.duration)&&void 0!==n?n:0))},onTimeUpdate:function(){if(E.current){var e=E.current.currentTime,n=e/E.current.duration*100;B(n),O(l(e))}},onVolumeChange:function(){E.current&&(W(100*E.current.volume),E.current.volume>=.5?G(r):E.current.volume<.5&&E.current.volume>.05?G(t):E.current.volume<=.05&&G(o))}},e.createElement("source",{src:s,type:"audio/mpeg"})))};
+//# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-export * from './components';
-//# sourceMappingURL=index.js.map
+import n,{useRef as e,useState as r,useEffect as t}from"react";var o=function(){return o=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var a="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z",i="M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z",l="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",c="M0 0h6v24H0zM12 0h6v24h-6z",p="M18 12L0 24V0",s=function(n){var e=Math.floor(n/60),r=Math.floor(n%60);return e+":"+(r<10?"0"+r:r)};var u=function(n,e){var r,t,o,a=n.target;return"click"===n.type&&(o=a,-1!==Array.from(o.classList).indexOf("rap-pin"))&&(null===(r=null==a?void 0:a.parentElement)||void 0===r?void 0:r.parentElement)&&(a=a.parentElement.parentElement),"mousemove"===n.type&&(null===(t=null==e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement)&&(a=e.parentElement.parentElement),a},d=[],m=[];!function(n,e){if(n&&"undefined"!=typeof document){var r,t=!0===e.prepend?"prepend":"append",o=!0===e.singleTag,a="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(o){var i=d.indexOf(a);-1===i&&(i=d.push(a)-1,m[i]={}),r=m[i]&&m[i][t]?m[i][t]:m[i][t]=l()}else r=l();65279===n.charCodeAt(0)&&(n=n.substring(1)),r.styleSheet?r.styleSheet.cssText+=n:r.appendChild(document.createTextNode(n))}function l(){var n=document.createElement("style");if(n.setAttribute("type","text/css"),e.attributes)for(var r=Object.keys(e.attributes),o=0;o<r.length;o++)n.setAttribute(r[o],e.attributes[r[o]]);var i="prepend"===t?"afterbegin":"beforeend";return a.insertAdjacentElement(i,n),n}}(".rap-container {\n  width: 400px;\n  min-width: 300px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 16px;\n  margin-right: 16px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-volume-control-container {\n  height: 100vw;\n  width: 100vw;\n  position: fixed;\n  left: 0;\n  top: 0;\n  z-index: 99999;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n",{});var v=function(d){var m=d.src,v=d.backgroundColor,f=d.color,g=d.style,h=d.sliderColor,x=d.volume,b=void 0===x?100:x,w=d.onPlay,E=d.onPause,y=d.onEnd,k=d.onError,N=e(null),C=e(null),L=e(null),M=r(!1),z=M[0],T=M[1],B=r(!1),R=B[0],S=B[1],j=r(0),O=j[0],V=j[1],A=r("0:00"),P=A[0],H=A[1],D=r("0:00"),F=D[0],X=D[1],Y=r(!1),W=Y[0],Z=Y[1],q=r(100),U=q[0],G=q[1],I=r(function(n){if((n=isNaN(n)?100:Math.max(0,Math.min(n,100)))>=50)return a;if(n>5)return i;return l}(b)),J=I[0],K=I[1];t((function(){if(!isNaN(b)){var n=b>100?100:b<0?0:b;G(n),N.current&&(N.current.volume=n/100)}}),[b]);var Q=function(n){var e,r,t=u(n,C.current),o=t.getBoundingClientRect();if("horizontal"===t.dataset.direction){if(e=(r=t.offsetLeft)+t.offsetWidth,n.clientX<r||n.clientX>e)return!1}else if(e=(r=o.top)+t.offsetHeight,n.clientY<r||n.clientY>e)return!1;return!0};function $(n){var e=u(n,C.current),r=e.getBoundingClientRect(),t=0;if("horizontal"===e.dataset.direction)t=(n.clientX-e.offsetLeft)/e.clientWidth;else if("vertical"===e.dataset.direction){var o=e.clientHeight;t=1-(n.clientY-r.top)/o}return t}var _=function(n){if(Q(n)&&N.current){var e=N.current.duration*$(n);N.current.currentTime=e}},nn=function(n){Q(n)&&N.current&&(N.current.volume=$(n))};return n.createElement("div",{className:"rap-container",style:o(o(o({},v?{backgroundColor:v}:{}),f?{color:f}:{}),g)},!z&&n.createElement("div",{className:"rap-loading"},n.createElement("div",{className:"rap-spinner"})),z&&n.createElement("div",{className:"rap-pp-button",onClick:function(){N.current&&(N.current.paused?(N.current.play(),S(!0),w&&w()):(N.current.pause(),S(!1),E&&E()))}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"24",viewBox:"0 0 18 24",className:"rap-pp-icon"},n.createElement("path",{fill:null!=f?f:"#566574",fillRule:"evenodd",d:R?c:p}))),n.createElement("div",{className:"rap-controls"},n.createElement("span",{className:"rap-current-time"},P),n.createElement("div",{className:"rap-slider","data-direction":"horizontal",onClick:_},n.createElement("div",{className:"rap-progress",style:o({width:O+"%"},h?{backgroundColor:h}:{})},n.createElement("div",{className:"rap-pin","data-method":"rewind",onMouseDown:function(n){C.current=n.target,window.addEventListener("mousemove",_,!1),window.addEventListener("mouseup",(function(){C.current=null,window.removeEventListener("mousemove",_,!1)}),{once:!0})},style:h?{backgroundColor:h}:{}}))),n.createElement("span",{className:"rap-total-time"},F)),n.createElement("div",{className:"rap-volume"},n.createElement("div",{className:"rap-volume-btn",onClick:function(n){var e,r=n.target.getBoundingClientRect(),t=null===(e=L.current)||void 0===e?void 0:e.getBoundingClientRect();if(r&&L.current&&t){var o=r.top-155;L.current.style.top=(o<0?0:o)+"px",L.current.style.left=r.left-5+"px"}Z((function(n){return!n}))}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},n.createElement("path",{fill:W?null!=h?h:"#007FFF":null!=f?f:"#566574",fillRule:"evenodd",d:J}))),n.createElement("div",{className:"rap-volume-control-container ".concat(W?"":"rap-hidden"),onClick:function(){return Z(!1)}},n.createElement("div",{ref:L,className:"rap-volume-controls",onClick:function(n){n.preventDefault(),n.stopPropagation()}},n.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:nn},n.createElement("div",{className:"rap-progress",style:o({height:"".concat(U,"%")},h?{backgroundColor:h}:{})},n.createElement("div",{className:"rap-pin","data-method":"changeVolume",style:h?{backgroundColor:h}:{},onMouseDown:function(n){C.current=n.target,window.addEventListener("mousemove",nn,!1),window.addEventListener("mouseup",(function(){C.current=null,window.removeEventListener("mousemove",nn,!1)}),!1)}})))))),n.createElement("audio",{ref:N,onCanPlay:function(){T(!0)},onEnded:function(){S(!1),N.current&&(N.current.currentTime=0,y&&y())},onError:function(){k&&k()},onLoadedMetadata:function(){var n,e;X(s(null!==(e=null===(n=N.current)||void 0===n?void 0:n.duration)&&void 0!==e?e:0))},onTimeUpdate:function(){if(N.current){var n=N.current.currentTime,e=n/N.current.duration*100;V(e),H(s(n))}},onVolumeChange:function(){N.current&&(G(100*N.current.volume),N.current.volume>=.5?K(a):N.current.volume<.5&&N.current.volume>.05?K(i):N.current.volume<=.05&&K(l))}},n.createElement("source",{src:m,type:"audio/mpeg"})))};export{v as AudioPlayer};
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-audio-play",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React audio player component",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "types": "dist/types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "LICENSE",
+    "README.md"
   ],
   "scripts": {
-    "build": "rm -rf dist/ && npm run build:esm && npm run build:cjs",
-    "build:esm": "tsc",
-    "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run prettier && npm run lint",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
+    "test": "jest --config jestconfig.json"
   },
-  "author": "Shahidul Alam Riyad",
+  "keywords": [
+    "react-audio",
+    "react-audio-play",
+    "audio-player",
+    "typescripts"
+  ],
+  "author": "Shahidul Alam Riyad (riyaddecoder)",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^18.0.0",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.3",
     "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.6.1",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.6.1",
+    "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.7.4"
+    "rollup": "^3.27.2",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-styles": "^4.0.0",
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/riyaddecoder/react-audio-play"
+  },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">=17"
   }
-}
+}

README.md

 [![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-audio-play)
+<a href="https://github.com/riyaddecoder/react-audio-play/issues">
+  <img src="https://img.shields.io/github/issues/riyaddecoder/react-audio-play"/>
+</a>
+<a href="https://github.com/riyaddecoder/react-audio-play/blob/master/LICENSE">
+  <img src="https://img.shields.io/github/license/riyaddecoder/react-audio-play"/>
+</a>
+<a href="https://www.buymeacoffee.com/riyaddecoder">
+  <img src="https://img.shields.io/badge/sponsor-buy%20me%20a%20coffee-yellow?logo=buymeacoffee"/>
+</a>
 
-# React-Audio-Play
+
+## react-audio-play
+
+`react-audio-play` is a simple, lightweight and customizable audio player npm package for React applications. It provides an easy-to-use interface to play audio files in your React components with minimal setup.
+
+![react-audio-play](https://example.com/react-audio-play-demo.gif)
+
+## Features
+
+- Play audio files in your React application with a single component.
+- Control playback with play, pause, stop, and volume adjustment functionality.
+- Display track progress with a customizable progress bar.
+- Trigger custom actions on audio events like onPlay, onPause, onStop, onEnd, etc.
+- Fully customizable appearance to match your application's design.
+
+## Installation
+
+You can install `react-audio-play` using npm or yarn:
+
+```bash
+npm install react-audio-play
+```
+or
+```bash
+yarn add react-audio-play
+```
+
+## Usage
+
+To use `react-audio-play`, import the `AudioPlayer` component and provide the necessary props:
+
+```js
+import React from 'react';
+import AudioPlayer from 'react-audio-play';
+
+const App = () => {
+  return (
+    <div>
+      <h1>My Audio Player</h1>
+      <AudioPlayer src="path/to/audio.mp3" />
+    </div>
+  );
+};
+
+export default App;
+```
+## Props
+`react-audio-play` accepts the following props:
+
+- `src` (string, required): The URL or file path of the audio file to be played.
+- `loop` (boolean, optional): Set to true to loop the audio playback (default: false).
+- `volume` (number, optional): The initial volume level (0 to 100) of the audio (default: `100`).
+- `onPlay` (function, optional): Callback function to execute when the audio starts playing.
+- `onPause` (function, optional): Callback function to execute when the audio is paused.
+- `onEnd` (function, optional): Callback function to execute when the audio playback ends.
+- `onError` (function, optional): Callback function to execute if there's an error loading or playing the audio.
+- `backgroundColor` (string, optional): Set the background color of the audio player (default: `#fff`).
+- `color` (string, optional): The text and icon color of the audio player. (default: `#566574`).
+- `sliderColor` (string, optional): The color of the progress slider. (default: `#007FFF`)
+
+## Example with Custom Event Handling
+```js
+import React from 'react';
+import AudioPlayer from 'react-audio-play';
+
+const App = () => {
+  const handlePlay = () => {
+    console.log('Audio started playing');
+  };
+
+  const handlePause = () => {
+    console.log('Audio paused');
+  };
+
+  return (
+    <div>
+      <h1>My Audio Player</h1>
+      <AudioPlayer
+        src="path/to/audio.mp3"
+        onPlay={handlePlay}
+        onPause={handlePause}
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+## Custom Styling
+You can easily customize the appearance of the audio player by applying your CSS styles to the AudioPlayer component or by overriding the default styles in your project's CSS.
+
+## License
+This package is open-source and distributed under the MIT License. See the [LICENSE](https://github.com/riyaddecoder/react-audio-play/blob/master/LICENSE) file for details.
+
+## Contribution
+Contributions are welcome! If you find any issues or have suggestions, feel free to create an issue or submit a pull request on the [GitHub repository](https://github.com/riyaddecoder/react-audio-play/). Let's build this package together!
+
+![react-audio-play](https://example.com/react-audio-play-demo.gif)
+
+Enjoy using react-audio-play in your React applications, and we hope it enhances your audio experience with ease and flexibility. If you have any questions or need further assistance, don't hesitate to reach out to us! Happy coding! 🎶

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88031

increased by850.45%

Dependency count

1

decreased by-50%

Lines of code

154

increased by13.24%

Number of lines in readme file

112

increased by2700%

Worsened metrics

Dev dependency count

27

increased by350%

Number of package files

20

decreased by-37.5%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes