react-animated-waves/dist/index.min.js

A React component for creating beautiful audio visualizations or UI loading states using animated waves

"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r=function(e,t){void 0===t&&(t=1),"#"===e[0]&&(e=e.slice(1));var r=parseInt(e,16),n=r>>8&255,a=255&r;return"rgba(".concat(r>>16&255,", ").concat(n,", ").concat(a,", ").concat(t,")")},n=e.memo((function(n){var a=n.amplitude,o=void 0===a?20:a,c=n.colors,i=void 0===c?["#436EDB"]:c,u=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}(n,["amplitude","colors"]),l=e.useRef(o),f=e.useRef(null),p=e.useRef(o);e.useEffect((function(){p.current=o}),[o]);var h=e.useCallback((function(e,t,r,n,a){void 0===a&&(a=0),e.strokeStyle=n,e.beginPath();for(var o=0;o<e.canvas.width;o++){var c=Math.sin(Math.PI*(o/e.canvas.width)),i=Math.pow(c,6),u=t*Math.sin(r*o+a)*i;e.lineTo(o,e.canvas.height/2+u)}e.stroke()}),[]);return e.useEffect((function(){var e,t=f.current,n=t.getContext("2d"),a=t.parentElement;a&&(t.width=a.clientWidth);var o=function(){var a,c,u=.0015*Date.now();l.current=(a=l.current,c=p.current,a+.1*(c-a));var f=l.current*(1+.05*Math.sin(u));n.clearRect(0,0,t.width,t.height);for(var s=function(e){var a=n.createLinearGradient(0,0,t.width,t.height),o=i.length>1?1/(i.length-1):0;i.forEach((function(t,n){a.addColorStop(o*n,r(t,e.alpha))})),h(n,e.amplitude,e.frequency,a,Date.now()*e.speed);for(var c=function(a){var o=e.amplitude-.1*a,c=e.frequency+25e-5*a,u=.6*e.alpha-.01*a,l=n.createLinearGradient(0,0,t.width,t.height),f=i.length>1?1/(i.length-1):0;i.forEach((function(e,t){l.addColorStop(f*t,r(e,u))})),h(n,o,c,l,Date.now()*e.speed+.015*a)},u=0;u<30;u++)c(u)},d=0,v=[{amplitude:f,frequency:.02,alpha:.6,speed:.001},{amplitude:.6*f,frequency:.03,alpha:.4,speed:.004},{amplitude:.3*f,frequency:.04,alpha:.2,speed:.007}];d<v.length;d++){s(v[d])}e=requestAnimationFrame(o)};return o(),function(){cancelAnimationFrame(e)}}),[i,h]),e.createElement("canvas",t({ref:f,width:"100%",height:"auto"},u))}));module.exports=n;
//# sourceMappingURL=index.min.js.map