react-audio-play - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"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"})))};
+"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.loop,d=void 0!==u&&u,m=p.backgroundColor,v=p.color,f=p.style,g=p.sliderColor,h=p.volume,x=void 0===h?100:h,b=p.onPlay,w=p.onPause,E=p.onEnd,y=p.onError,k=e.useRef(null),N=e.useRef(null),C=e.useRef(null),L=e.useState(!1),M=L[0],S=L[1],z=e.useState(!1),R=z[0],T=z[1],B=e.useState(0),j=B[0],A=B[1],O=e.useState("0:00"),P=O[0],V=O[1],H=e.useState("0:00"),D=H[0],F=H[1],X=e.useState(!1),Y=X[0],q=X[1],W=e.useState(100),Z=W[0],U=W[1],G=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}(x)),I=G[0],J=G[1];e.useEffect((function(){if(!isNaN(x)){var e=x>100?100:x<0?0:x;U(e),k.current&&(k.current.volume=e/100)}}),[x]);var K=function(e){var n,r,t=c(e,N.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 Q(e){var n=c(e,N.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 $=function(e){if(K(e)&&k.current){var n=k.current.duration*Q(e);k.current.currentTime=n}},_=function(e){K(e)&&k.current&&(k.current.volume=Q(e))};return e.createElement("div",{className:"rap-container",style:n(n(n({},m?{backgroundColor:m}:{}),v?{color:v}:{}),f)},!M&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),M&&e.createElement("div",{className:"rap-pp-button",onClick:function(){k.current&&(k.current.paused?(k.current.play(),T(!0),b&&b()):(k.current.pause(),T(!1),w&&w()))}},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!=v?v:"#566574",fillRule:"evenodd",d:R?a:i}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},P),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onClick:$},e.createElement("div",{className:"rap-progress",style:n({width:j+"%"},g?{backgroundColor:g}:{})},e.createElement("div",{className:"rap-pin","data-method":"rewind",onMouseDown:function(e){N.current=e.target,window.addEventListener("mousemove",$,!1),window.addEventListener("mouseup",(function(){N.current=null,window.removeEventListener("mousemove",$,!1)}),{once:!0})},style:g?{backgroundColor:g}:{}}))),e.createElement("span",{className:"rap-total-time"},D)),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=C.current)||void 0===n?void 0:n.getBoundingClientRect();if(r&&C.current&&t){var o=r.top-155;C.current.style.top=(o<0?0:o)+"px",C.current.style.left=r.left-5+"px"}q((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:Y?null!=g?g:"#007FFF":null!=v?v:"#566574",fillRule:"evenodd",d:I}))),e.createElement("div",{className:"rap-volume-control-container ".concat(Y?"":"rap-hidden"),onClick:function(){return q(!1)}},e.createElement("div",{ref:C,className:"rap-volume-controls",onClick:function(e){e.preventDefault(),e.stopPropagation()}},e.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:_},e.createElement("div",{className:"rap-progress",style:n({height:"".concat(Z,"%")},g?{backgroundColor:g}:{})},e.createElement("div",{className:"rap-pin","data-method":"changeVolume",style:g?{backgroundColor:g}:{},onMouseDown:function(e){N.current=e.target,window.addEventListener("mousemove",_,!1),window.addEventListener("mouseup",(function(){N.current=null,window.removeEventListener("mousemove",_,!1)}),!1)}})))))),e.createElement("audio",{ref:k,loop:d,onCanPlay:function(){S(!0)},onEnded:function(){T(!1),k.current&&(k.current.currentTime=0,E&&E())},onError:function(){y&&y()},onLoadedMetadata:function(){var e,n;F(l(null!==(n=null===(e=k.current)||void 0===e?void 0:e.duration)&&void 0!==n?n:0))},onTimeUpdate:function(){if(k.current){var e=k.current.currentTime,n=e/k.current.duration*100;A(n),V(l(e))}},onVolumeChange:function(){k.current&&(U(100*k.current.volume),k.current.volume>=.5?J(r):k.current.volume<.5&&k.current.volume>.05?J(t):k.current.volume<=.05&&J(o))}},e.createElement("source",{src:s,type:"audio/mpeg"})))};
 //# sourceMappingURL=index.js.map

dist/cjs/types/src/components/AudioPlayer.d.ts

@@ -5,2 +5,3 @@ import React from 'react';
     src: string;
+    loop?: boolean;
     backgroundColor?: string;
@@ -7,0 +8,0 @@ color?: string;

dist/esm/index.js

@@ -1,2 +0,2 @@
-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};
+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.loop,f=void 0!==v&&v,g=d.backgroundColor,h=d.color,x=d.style,b=d.sliderColor,w=d.volume,E=void 0===w?100:w,y=d.onPlay,k=d.onPause,N=d.onEnd,C=d.onError,L=e(null),M=e(null),z=e(null),T=r(!1),B=T[0],R=T[1],S=r(!1),j=S[0],O=S[1],V=r(0),A=V[0],P=V[1],H=r("0:00"),D=H[0],F=H[1],X=r("0:00"),Y=X[0],W=X[1],Z=r(!1),q=Z[0],U=Z[1],G=r(100),I=G[0],J=G[1],K=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}(E)),Q=K[0],$=K[1];t((function(){if(!isNaN(E)){var n=E>100?100:E<0?0:E;J(n),L.current&&(L.current.volume=n/100)}}),[E]);var _=function(n){var e,r,t=u(n,M.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 nn(n){var e=u(n,M.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 en=function(n){if(_(n)&&L.current){var e=L.current.duration*nn(n);L.current.currentTime=e}},rn=function(n){_(n)&&L.current&&(L.current.volume=nn(n))};return n.createElement("div",{className:"rap-container",style:o(o(o({},g?{backgroundColor:g}:{}),h?{color:h}:{}),x)},!B&&n.createElement("div",{className:"rap-loading"},n.createElement("div",{className:"rap-spinner"})),B&&n.createElement("div",{className:"rap-pp-button",onClick:function(){L.current&&(L.current.paused?(L.current.play(),O(!0),y&&y()):(L.current.pause(),O(!1),k&&k()))}},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!=h?h:"#566574",fillRule:"evenodd",d:j?c:p}))),n.createElement("div",{className:"rap-controls"},n.createElement("span",{className:"rap-current-time"},D),n.createElement("div",{className:"rap-slider","data-direction":"horizontal",onClick:en},n.createElement("div",{className:"rap-progress",style:o({width:A+"%"},b?{backgroundColor:b}:{})},n.createElement("div",{className:"rap-pin","data-method":"rewind",onMouseDown:function(n){M.current=n.target,window.addEventListener("mousemove",en,!1),window.addEventListener("mouseup",(function(){M.current=null,window.removeEventListener("mousemove",en,!1)}),{once:!0})},style:b?{backgroundColor:b}:{}}))),n.createElement("span",{className:"rap-total-time"},Y)),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=z.current)||void 0===e?void 0:e.getBoundingClientRect();if(r&&z.current&&t){var o=r.top-155;z.current.style.top=(o<0?0:o)+"px",z.current.style.left=r.left-5+"px"}U((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:q?null!=b?b:"#007FFF":null!=h?h:"#566574",fillRule:"evenodd",d:Q}))),n.createElement("div",{className:"rap-volume-control-container ".concat(q?"":"rap-hidden"),onClick:function(){return U(!1)}},n.createElement("div",{ref:z,className:"rap-volume-controls",onClick:function(n){n.preventDefault(),n.stopPropagation()}},n.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:rn},n.createElement("div",{className:"rap-progress",style:o({height:"".concat(I,"%")},b?{backgroundColor:b}:{})},n.createElement("div",{className:"rap-pin","data-method":"changeVolume",style:b?{backgroundColor:b}:{},onMouseDown:function(n){M.current=n.target,window.addEventListener("mousemove",rn,!1),window.addEventListener("mouseup",(function(){M.current=null,window.removeEventListener("mousemove",rn,!1)}),!1)}})))))),n.createElement("audio",{ref:L,loop:f,onCanPlay:function(){R(!0)},onEnded:function(){O(!1),L.current&&(L.current.currentTime=0,N&&N())},onError:function(){C&&C()},onLoadedMetadata:function(){var n,e;W(s(null!==(e=null===(n=L.current)||void 0===n?void 0:n.duration)&&void 0!==e?e:0))},onTimeUpdate:function(){if(L.current){var n=L.current.currentTime,e=n/L.current.duration*100;P(e),F(s(n))}},onVolumeChange:function(){L.current&&(J(100*L.current.volume),L.current.volume>=.5?$(a):L.current.volume<.5&&L.current.volume>.05?$(i):L.current.volume<=.05&&$(l))}},n.createElement("source",{src:m,type:"audio/mpeg"})))};export{v as AudioPlayer};
 //# sourceMappingURL=index.js.map

dist/esm/types/src/components/AudioPlayer.d.ts

@@ -5,2 +5,3 @@ import React from 'react';
     src: string;
+    loop?: boolean;
     backgroundColor?: string;
@@ -7,0 +8,0 @@ color?: string;

dist/types.d.ts

 import React from 'react';
-import injector_475aacaf from '/var/www/html/my packages/react-audio-play/node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';
+import injector_475aacaf from '/home/runner/work/react-audio-play/react-audio-play/node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';
 
@@ -9,2 +9,3 @@ var css = ".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";
     src: string;
+    loop?: boolean;
     backgroundColor?: string;
@@ -11,0 +12,0 @@ color?: string;

package.json

 {
   "name": "react-audio-play",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React audio player component",
+  "homepage": "https://riyaddecoder.github.io/react-audio-play/",
   "main": "dist/cjs/index.js",
@@ -22,4 +23,8 @@ "module": "dist/esm/index.js",
   "keywords": [
+    "best audio player for react",
+    "simple audio player",
+    "audio player for react",
+    "react audio player",
     "react-audio",
-    "react-audio-play",
+    "react-audio-player",
     "audio-player",
@@ -66,2 +71,2 @@ "typescripts"
   }
-}
+}

README.md

@@ -1,2 +0,2 @@
-[![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-audio-play)
+[![NPM](https://img.shields.io/npm/v/react-audio-play.svg)](https://www.npmjs.com/package/react-audio-play)
 <a href="https://github.com/riyaddecoder/react-audio-play/issues">
@@ -17,3 +17,3 @@ <img src="https://img.shields.io/github/issues/riyaddecoder/react-audio-play"/>
 
-![react-audio-play](https://example.com/react-audio-play-demo.gif)
+<!-- ![react-audio-play](https://example.com/react-audio-play-demo.gif) -->
 
@@ -110,4 +110,4 @@ ## Features
 
-![react-audio-play](https://example.com/react-audio-play-demo.gif)
+<!-- ![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

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

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88368

increased by0.38%

Lines of code

157

increased by1.95%

Number of low quality alerts

2

decreased by-33.33%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes