react-audio-play - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

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

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

@@ -11,2 +11,3 @@ import React from 'react';
     volume?: number;
+    volumePlacement?: 'top' | 'bottom';
     onPlay?: () => void;
@@ -13,0 +14,0 @@ onPause?: () => void;

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.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};
+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",p="M0 0h6v24H0zM12 0h6v24h-6z",c="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  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\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.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0\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.volumePlacement,k=void 0===y?"top":y,N=d.onPlay,C=d.onPause,L=d.onEnd,M=d.onError,z=e(null),T=e(null),S=e(null),j=e(null),O=r(!1),P=O[0],V=O[1],A=r(!1),B=A[0],D=A[1],R=r(0),H=R[0],F=R[1],X=r("0:00"),Y=X[0],W=X[1],Z=r("0:00"),q=Z[0],U=Z[1],G=r(!1),I=G[0],J=G[1],K=r(100),Q=K[0],$=K[1],_=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)),nn=_[0],en=_[1];t((function(){if(!isNaN(E)){var n=E>100?100:E<0?0:E;$(n),z.current&&(z.current.volume=n/100)}}),[E]);var rn=function(n){var e,r,t=u(n,T.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 tn(n){var e=u(n,T.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 on=function(n){if(rn(n)&&z.current){var e=z.current.duration*tn(n);z.current.currentTime=e}},an=function(n){rn(n)&&z.current&&(z.current.volume=tn(n))},ln=function(){T.current=S.current,window.addEventListener("mousemove",on,!1),window.addEventListener("mouseup",(function(){T.current=null,window.removeEventListener("mousemove",on,!1)}),{once:!0})},pn=function(){T.current=j.current,window.addEventListener("mousemove",an,!1),window.addEventListener("mouseup",(function(){T.current=null,window.removeEventListener("mousemove",an,!1)}),!1)};return n.createElement("div",{className:"rap-container",style:o(o(o({},g?{backgroundColor:g}:{}),h?{color:h}:{}),x)},!P&&n.createElement("div",{className:"rap-loading"},n.createElement("div",{className:"rap-spinner"})),P&&n.createElement("div",{className:"rap-pp-button",onClick:function(){z.current&&(z.current.paused?(z.current.play(),D(!0),N&&N()):(z.current.pause(),D(!1),C&&C()))}},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:B?p:c}))),n.createElement("div",{className:"rap-controls"},n.createElement("span",{className:"rap-current-time"},Y),n.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:ln,onClick:on},n.createElement("div",{className:"rap-progress",style:o({width:H+"%"},b?{backgroundColor:b}:{})},n.createElement("div",{ref:S,className:"rap-pin","data-method":"rewind",onMouseDown:ln,style:b?{backgroundColor:b}:{}}))),n.createElement("span",{className:"rap-total-time"},q)),n.createElement("div",{className:"rap-volume"},n.createElement("div",{className:"rap-volume-btn ".concat(I?"rap-volume-open":""),onClick:function(){return J((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:I?null!=b?b:"#007FFF":null!=h?h:"#566574",fillRule:"evenodd",d:nn}))),n.createElement("div",{className:"".concat("bottom"===k?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(I?"":"rap-hidden")},n.createElement("div",{className:"rap-volume-controls",onClick:function(n){n.preventDefault(),n.stopPropagation()}},n.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:an,onMouseDown:pn},n.createElement("div",{className:"rap-progress",style:o({height:"".concat(Q,"%")},b?{backgroundColor:b}:{})},n.createElement("div",{ref:j,className:"rap-pin","data-method":"changeVolume",style:b?{backgroundColor:b}:{},onMouseDown:pn})))),n.createElement("div",{className:"rap-backdrop",onClick:function(){return J(!1)}}))),n.createElement("audio",{ref:z,loop:f,onCanPlay:function(){V(!0)},onEnded:function(){D(!1),z.current&&(z.current.currentTime=0,L&&L())},onError:function(){M&&M()},onLoadedMetadata:function(){var n,e;U(s(null!==(e=null===(n=z.current)||void 0===n?void 0:n.duration)&&void 0!==e?e:0))},onTimeUpdate:function(){if(z.current){var n=z.current.currentTime,e=n/z.current.duration*100;F(e),W(s(n))}},onVolumeChange:function(){z.current&&($(100*z.current.volume),z.current.volume>=.5?en(a):z.current.volume<.5&&z.current.volume>.05?en(i):z.current.volume<=.05&&en(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

@@ -11,2 +11,3 @@ import React from 'react';
     volume?: number;
+    volumePlacement?: 'top' | 'bottom';
     onPlay?: () => void;
@@ -13,0 +14,0 @@ onPause?: () => void;

dist/types.d.ts

 import React from 'react';
 import injector_475aacaf from '/home/runner/work/react-audio-play/react-audio-play/node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';
 
-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";
+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  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\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.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n";
 injector_475aacaf(css,{});
@@ -15,2 +15,3 @@
     volume?: number;
+    volumePlacement?: 'top' | 'bottom';
     onPlay?: () => void;
@@ -17,0 +18,0 @@ onPause?: () => void;

package.json

 {
   "name": "react-audio-play",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React audio player component",
@@ -5,0 +5,0 @@ "homepage": "https://riyaddecoder.github.io/react-audio-play/",

README.md

@@ -74,2 +74,3 @@ [![NPM](https://img.shields.io/npm/v/react-audio-play.svg)](https://www.npmjs.com/package/react-audio-play)
 - `sliderColor` (string, optional): The color of the progress slider. (default: `#007FFF`)
+- `volumePlacement` (string, optional): Control where the volume controls are located.(default: `top | bottom`)
 
@@ -76,0 +77,0 @@ ## Example with Custom Event Handling

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

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

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

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

Improved metrics

Total package byte prevSize

89255

increased by0.8%

Lines of code

162

increased by3.18%

Number of lines in readme file

116

increased by0.87%

No dependency changes