react-audio-visualize - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/AudioVisualizer/AudioVisualizer.d.ts

@@ -1,2 +0,2 @@
-import { type ReactElement } from "react";
+import { type ForwardRefExoticComponent, type RefAttributes } from "react";
 interface Props {
@@ -44,4 +44,8 @@ /**
     style?: React.CSSProperties;
+    /**
+     * A `ForwardedRef` for the `HTMLCanvasElement`
+     */
+    ref?: React.ForwardedRef<HTMLCanvasElement>;
 }
-declare const AudioVisualizer: (props: Props) => ReactElement;
+declare const AudioVisualizer: ForwardRefExoticComponent<Props & RefAttributes<HTMLCanvasElement>>;
 export { AudioVisualizer };

dist/react-audio-visualize.es.js

@@ -1,3 +0,3 @@
-import De, { useState as J, useRef as Ae, useEffect as G, useCallback as fr } from "react";
-var ae = { exports: {} }, N = {};
+import Ae, { useState as J, useRef as De, useEffect as G, useCallback as fr, forwardRef as dr, useImperativeHandle as vr } from "react";
+var ae = { exports: {} }, V = {};
 /**
@@ -13,20 +13,20 @@ * @license React
 var Pe;
-function dr() {
+function pr() {
   if (Pe)
-    return N;
+    return V;
   Pe = 1;
-  var d = De, v = Symbol.for("react.element"), w = Symbol.for("react.fragment"), E = Object.prototype.hasOwnProperty, g = d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, R = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function b(u, s, h) {
-    var a, p = {}, c = null, T = null;
-    h !== void 0 && (c = "" + h), s.key !== void 0 && (c = "" + s.key), s.ref !== void 0 && (T = s.ref);
-    for (a in s)
-      E.call(s, a) && !R.hasOwnProperty(a) && (p[a] = s[a]);
-    if (u && u.defaultProps)
-      for (a in s = u.defaultProps, s)
-        p[a] === void 0 && (p[a] = s[a]);
-    return { $$typeof: v, type: u, key: c, ref: T, props: p, _owner: g.current };
+  var d = Ae, v = Symbol.for("react.element"), w = Symbol.for("react.fragment"), E = Object.prototype.hasOwnProperty, g = d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, R = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function b(s, c, p) {
+    var o, a = {}, l = null, S = null;
+    p !== void 0 && (l = "" + p), c.key !== void 0 && (l = "" + c.key), c.ref !== void 0 && (S = c.ref);
+    for (o in c)
+      E.call(c, o) && !R.hasOwnProperty(o) && (a[o] = c[o]);
+    if (s && s.defaultProps)
+      for (o in c = s.defaultProps, c)
+        a[o] === void 0 && (a[o] = c[o]);
+    return { $$typeof: v, type: s, key: l, ref: S, props: a, _owner: g.current };
   }
-  return N.Fragment = w, N.jsx = b, N.jsxs = b, N;
+  return V.Fragment = w, V.jsx = b, V.jsxs = b, V;
 }
-var V = {};
+var L = {};
 /**
@@ -42,39 +42,39 @@ * @license React
 var je;
-function vr() {
+function mr() {
   return je || (je = 1, process.env.NODE_ENV !== "production" && function() {
-    var d = De, v = Symbol.for("react.element"), w = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), g = Symbol.for("react.strict_mode"), R = Symbol.for("react.profiler"), b = Symbol.for("react.provider"), u = Symbol.for("react.context"), s = Symbol.for("react.forward_ref"), h = Symbol.for("react.suspense"), a = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), c = Symbol.for("react.lazy"), T = Symbol.for("react.offscreen"), O = Symbol.iterator, j = "@@iterator";
+    var d = Ae, v = Symbol.for("react.element"), w = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), g = Symbol.for("react.strict_mode"), R = Symbol.for("react.profiler"), b = Symbol.for("react.provider"), s = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), o = Symbol.for("react.suspense_list"), a = Symbol.for("react.memo"), l = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), C = Symbol.iterator, A = "@@iterator";
     function D(e) {
       if (e === null || typeof e != "object")
         return null;
-      var r = O && e[O] || e[j];
+      var r = C && e[C] || e[A];
       return typeof r == "function" ? r : null;
     }
     var y = d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function l(e) {
+    function m(e) {
       {
         for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
           t[n - 1] = arguments[n];
-        S("error", e, t);
+        T("error", e, t);
       }
     }
-    function S(e, r, t) {
+    function T(e, r, t) {
       {
         var n = y.ReactDebugCurrentFrame, f = n.getStackAddendum();
         f !== "" && (r += "%s", t = t.concat([f]));
-        var m = t.map(function(i) {
-          return String(i);
+        var h = t.map(function(u) {
+          return String(u);
         });
-        m.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, m);
+        h.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, h);
       }
     }
-    var A = !1, Fe = !1, Ie = !1, $e = !1, Ye = !1, oe;
-    oe = Symbol.for("react.module.reference");
+    var P = !1, Fe = !1, Ie = !1, $e = !1, Ye = !1, ie;
+    ie = Symbol.for("react.module.reference");
     function Me(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === E || e === R || Ye || e === g || e === h || e === a || $e || e === T || A || Fe || Ie || typeof e == "object" && e !== null && (e.$$typeof === c || e.$$typeof === p || e.$$typeof === b || e.$$typeof === u || e.$$typeof === s || // This needs to include all possible module reference object
+      return !!(typeof e == "string" || typeof e == "function" || e === E || e === R || Ye || e === g || e === p || e === o || $e || e === S || P || Fe || Ie || typeof e == "object" && e !== null && (e.$$typeof === l || e.$$typeof === a || e.$$typeof === b || e.$$typeof === s || e.$$typeof === c || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      e.$$typeof === oe || e.getModuleId !== void 0));
+      e.$$typeof === ie || e.getModuleId !== void 0));
     }
-    function Le(e, r, t) {
+    function Ne(e, r, t) {
       var n = e.displayName;
@@ -86,3 +86,3 @@ if (n)
     }
-    function ie(e) {
+    function oe(e) {
       return e.displayName || "Context";
@@ -93,3 +93,3 @@ }
         return null;
-      if (typeof e.tag == "number" && l("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+      if (typeof e.tag == "number" && m("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
         return e.displayName || e.name || null;
@@ -107,5 +107,5 @@ if (typeof e == "string")
           return "StrictMode";
-        case h:
+        case p:
           return "Suspense";
-        case a:
+        case o:
           return "SuspenseList";
@@ -115,17 +115,17 @@ }
         switch (e.$$typeof) {
-          case u:
+          case s:
             var r = e;
-            return ie(r) + ".Consumer";
+            return oe(r) + ".Consumer";
           case b:
             var t = e;
-            return ie(t._context) + ".Provider";
-          case s:
-            return Le(e, e.render, "ForwardRef");
-          case p:
+            return oe(t._context) + ".Provider";
+          case c:
+            return Ne(e, e.render, "ForwardRef");
+          case a:
             var n = e.displayName || null;
             return n !== null ? n : k(e.type) || "Memo";
-          case c: {
-            var f = e, m = f._payload, i = f._init;
+          case l: {
+            var f = e, h = f._payload, u = f._init;
             try {
-              return k(i(m));
+              return k(u(h));
             } catch {
@@ -142,3 +142,3 @@ return null;
     pe.__reactDisabledLog = !0;
-    function Ne() {
+    function Ve() {
       {
@@ -166,3 +166,3 @@ if (M === 0) {
     }
-    function Ve() {
+    function Le() {
       {
@@ -199,9 +199,9 @@ if (M--, M === 0) {
         }
-        M < 0 && l("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        M < 0 && m("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var K = y.ReactCurrentDispatcher, H;
+    var H = y.ReactCurrentDispatcher, K;
     function W(e, r, t) {
       {
-        if (H === void 0)
+        if (K === void 0)
           try {
@@ -211,6 +211,6 @@ throw Error();
             var n = f.stack.trim().match(/\n( *(at )?)/);
-            H = n && n[1] || "";
+            K = n && n[1] || "";
           }
         return `
-` + H + e;
+` + K + e;
       }
@@ -223,3 +223,3 @@ }
     }
-    function he(e, r) {
+    function me(e, r) {
       if (!e || X)
@@ -236,10 +236,10 @@ return "";
       Error.prepareStackTrace = void 0;
-      var m;
-      m = K.current, K.current = null, Ne();
+      var h;
+      h = H.current, H.current = null, Ve();
       try {
         if (r) {
-          var i = function() {
+          var u = function() {
             throw Error();
           };
-          if (Object.defineProperty(i.prototype, "props", {
+          if (Object.defineProperty(u.prototype, "props", {
             set: function() {
@@ -250,14 +250,14 @@ throw Error();
             try {
-              Reflect.construct(i, []);
+              Reflect.construct(u, []);
             } catch (F) {
               n = F;
             }
-            Reflect.construct(e, [], i);
+            Reflect.construct(e, [], u);
           } else {
             try {
-              i.call();
+              u.call();
             } catch (F) {
               n = F;
             }
-            e.call(i.prototype);
+            e.call(u.prototype);
           }
@@ -274,14 +274,14 @@ } else {
         if (F && n && typeof F.stack == "string") {
-          for (var o = F.stack.split(`
-`), C = n.stack.split(`
-`), _ = o.length - 1, x = C.length - 1; _ >= 1 && x >= 0 && o[_] !== C[x]; )
+          for (var i = F.stack.split(`
+`), O = n.stack.split(`
+`), _ = i.length - 1, x = O.length - 1; _ >= 1 && x >= 0 && i[_] !== O[x]; )
             x--;
           for (; _ >= 1 && x >= 0; _--, x--)
-            if (o[_] !== C[x]) {
+            if (i[_] !== O[x]) {
               if (_ !== 1 || x !== 1)
                 do
-                  if (_--, x--, x < 0 || o[_] !== C[x]) {
-                    var P = `
-` + o[_].replace(" at new ", " at ");
-                    return e.displayName && P.includes("<anonymous>") && (P = P.replace("<anonymous>", e.displayName)), typeof e == "function" && B.set(e, P), P;
+                  if (_--, x--, x < 0 || i[_] !== O[x]) {
+                    var j = `
+` + i[_].replace(" at new ", " at ");
+                    return e.displayName && j.includes("<anonymous>") && (j = j.replace("<anonymous>", e.displayName)), typeof e == "function" && B.set(e, j), j;
                   }
@@ -293,3 +293,3 @@ while (_ >= 1 && x >= 0);
       } finally {
-        X = !1, K.current = m, Ve(), Error.prepareStackTrace = f;
+        X = !1, H.current = h, Le(), Error.prepareStackTrace = f;
       }
@@ -300,3 +300,3 @@ var Y = e ? e.displayName || e.name : "", Oe = Y ? W(Y) : "";
     function Be(e, r, t) {
-      return he(e, !1);
+      return me(e, !1);
     }
@@ -311,9 +311,9 @@ function Ue(e) {
       if (typeof e == "function")
-        return he(e, Ue(e));
+        return me(e, Ue(e));
       if (typeof e == "string")
         return W(e);
       switch (e) {
-        case h:
+        case p:
           return W("Suspense");
-        case a:
+        case o:
           return W("SuspenseList");
@@ -323,10 +323,10 @@ }
         switch (e.$$typeof) {
-          case s:
+          case c:
             return Be(e.render);
-          case p:
+          case a:
             return U(e.type, r, t);
-          case c: {
-            var n = e, f = n._payload, m = n._init;
+          case l: {
+            var n = e, f = n._payload, h = n._init;
             try {
-              return U(m(f), r, t);
+              return U(h(f), r, t);
             } catch {
@@ -338,4 +338,4 @@ }
     }
-    var q = Object.prototype.hasOwnProperty, me = {}, ge = y.ReactDebugCurrentFrame;
-    function z(e) {
+    var z = Object.prototype.hasOwnProperty, he = {}, ge = y.ReactDebugCurrentFrame;
+    function q(e) {
       if (e) {
@@ -347,24 +347,24 @@ var r = e._owner, t = U(e.type, e._source, r ? r.type : null);
     }
-    function qe(e, r, t, n, f) {
+    function ze(e, r, t, n, f) {
       {
-        var m = Function.call.bind(q);
-        for (var i in e)
-          if (m(e, i)) {
-            var o = void 0;
+        var h = Function.call.bind(z);
+        for (var u in e)
+          if (h(e, u)) {
+            var i = void 0;
             try {
-              if (typeof e[i] != "function") {
-                var C = Error((n || "React class") + ": " + t + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw C.name = "Invariant Violation", C;
+              if (typeof e[u] != "function") {
+                var O = Error((n || "React class") + ": " + t + " type `" + u + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[u] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw O.name = "Invariant Violation", O;
               }
-              o = e[i](r, i, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              i = e[u](r, u, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (_) {
-              o = _;
+              i = _;
             }
-            o && !(o instanceof Error) && (z(f), l("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, i, typeof o), z(null)), o instanceof Error && !(o.message in me) && (me[o.message] = !0, z(f), l("Failed %s type: %s", t, o.message), z(null));
+            i && !(i instanceof Error) && (q(f), m("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, u, typeof i), q(null)), i instanceof Error && !(i.message in he) && (he[i.message] = !0, q(f), m("Failed %s type: %s", t, i.message), q(null));
           }
       }
     }
-    var ze = Array.isArray;
+    var qe = Array.isArray;
     function Z(e) {
-      return ze(e);
+      return qe(e);
     }
@@ -389,5 +389,5 @@ function Je(e) {
       if (Ge(e))
-        return l("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), ye(e);
+        return m("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), ye(e);
     }
-    var L = y.ReactCurrentOwner, Ke = {
+    var N = y.ReactCurrentOwner, He = {
       key: !0,
@@ -399,4 +399,4 @@ ref: !0,
     Q = {};
-    function He(e) {
-      if (q.call(e, "ref")) {
+    function Ke(e) {
+      if (z.call(e, "ref")) {
         var r = Object.getOwnPropertyDescriptor(e, "ref").get;
@@ -409,3 +409,3 @@ if (r && r.isReactWarning)
     function Xe(e) {
-      if (q.call(e, "key")) {
+      if (z.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
@@ -418,5 +418,5 @@ if (r && r.isReactWarning)
     function Ze(e, r) {
-      if (typeof e.ref == "string" && L.current && r && L.current.stateNode !== r) {
-        var t = k(L.current.type);
-        Q[t] || (l('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', k(L.current.type), e.ref), Q[t] = !0);
+      if (typeof e.ref == "string" && N.current && r && N.current.stateNode !== r) {
+        var t = k(N.current.type);
+        Q[t] || (m('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', k(N.current.type), e.ref), Q[t] = !0);
       }
@@ -427,3 +427,3 @@ }
         var t = function() {
-          Re || (Re = !0, l("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          Re || (Re = !0, m("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -439,3 +439,3 @@ t.isReactWarning = !0, Object.defineProperty(e, "key", {
         var t = function() {
-          _e || (_e = !0, l("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+          _e || (_e = !0, m("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
         };
@@ -448,4 +448,4 @@ t.isReactWarning = !0, Object.defineProperty(e, "ref", {
     }
-    var rr = function(e, r, t, n, f, m, i) {
-      var o = {
+    var rr = function(e, r, t, n, f, h, u) {
+      var i = {
         // This tag allows us to uniquely identify this as a React Element
@@ -457,7 +457,7 @@ $$typeof: v,
         ref: t,
-        props: i,
+        props: u,
         // Record the component responsible for creating this element.
-        _owner: m
+        _owner: h
       };
-      return o._store = {}, Object.defineProperty(o._store, "validated", {
+      return i._store = {}, Object.defineProperty(i._store, "validated", {
         configurable: !1,
@@ -467,3 +467,3 @@ enumerable: !1,
         value: !1
-      }), Object.defineProperty(o, "_self", {
+      }), Object.defineProperty(i, "_self", {
         configurable: !1,
@@ -473,3 +473,3 @@ enumerable: !1,
         value: n
-      }), Object.defineProperty(o, "_source", {
+      }), Object.defineProperty(i, "_source", {
         configurable: !1,
@@ -479,20 +479,20 @@ enumerable: !1,
         value: f
-      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+      }), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
     };
     function tr(e, r, t, n, f) {
       {
-        var m, i = {}, o = null, C = null;
-        t !== void 0 && (Ee(t), o = "" + t), Xe(r) && (Ee(r.key), o = "" + r.key), He(r) && (C = r.ref, Ze(r, f));
-        for (m in r)
-          q.call(r, m) && !Ke.hasOwnProperty(m) && (i[m] = r[m]);
+        var h, u = {}, i = null, O = null;
+        t !== void 0 && (Ee(t), i = "" + t), Xe(r) && (Ee(r.key), i = "" + r.key), Ke(r) && (O = r.ref, Ze(r, f));
+        for (h in r)
+          z.call(r, h) && !He.hasOwnProperty(h) && (u[h] = r[h]);
         if (e && e.defaultProps) {
           var _ = e.defaultProps;
-          for (m in _)
-            i[m] === void 0 && (i[m] = _[m]);
+          for (h in _)
+            u[h] === void 0 && (u[h] = _[h]);
         }
-        if (o || C) {
+        if (i || O) {
           var x = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          o && Qe(i, x), C && er(i, x);
+          i && Qe(u, x), O && er(u, x);
         }
-        return rr(e, o, C, f, n, L.current, i);
+        return rr(e, i, O, f, n, N.current, u);
       }
@@ -559,3 +559,3 @@ }
         var n = "";
-        e && e._owner && e._owner !== ee.current && (n = " It was passed a child from " + k(e._owner.type) + "."), $(e), l('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), $(null);
+        e && e._owner && e._owner !== ee.current && (n = " It was passed a child from " + k(e._owner.type) + "."), $(e), m('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), $(null);
       }
@@ -577,8 +577,8 @@ }
           if (typeof f == "function" && f !== e.entries)
-            for (var m = f.call(e), i; !(i = m.next()).done; )
-              te(i.value) && Te(i.value, r);
+            for (var h = f.call(e), u; !(u = h.next()).done; )
+              te(u.value) && Te(u.value, r);
         }
       }
     }
-    function or(e) {
+    function ir(e) {
       {
@@ -591,5 +591,5 @@ var r = e.type;
           t = r.propTypes;
-        else if (typeof r == "object" && (r.$$typeof === s || // Note: Memo only checks outer props here.
+        else if (typeof r == "object" && (r.$$typeof === c || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        r.$$typeof === p))
+        r.$$typeof === a))
           t = r.propTypes;
@@ -600,12 +600,12 @@ else
           var n = k(r);
-          qe(t, e.props, "prop", n, e);
+          ze(t, e.props, "prop", n, e);
         } else if (r.PropTypes !== void 0 && !re) {
           re = !0;
           var f = k(r);
-          l("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", f || "Unknown");
+          m("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", f || "Unknown");
         }
-        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && l("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && m("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function ir(e) {
+    function or(e) {
       {
@@ -615,37 +615,37 @@ for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
           if (n !== "children" && n !== "key") {
-            $(e), l("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), $(null);
+            $(e), m("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), $(null);
             break;
           }
         }
-        e.ref !== null && ($(e), l("Invalid attribute `ref` supplied to `React.Fragment`."), $(null));
+        e.ref !== null && ($(e), m("Invalid attribute `ref` supplied to `React.Fragment`."), $(null));
       }
     }
-    function Ce(e, r, t, n, f, m) {
+    function Ce(e, r, t, n, f, h) {
       {
-        var i = Me(e);
-        if (!i) {
-          var o = "";
-          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (o += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var C = nr(f);
-          C ? o += C : o += xe();
+        var u = Me(e);
+        if (!u) {
+          var i = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (i += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var O = nr(f);
+          O ? i += O : i += xe();
           var _;
-          e === null ? _ = "null" : Z(e) ? _ = "array" : e !== void 0 && e.$$typeof === v ? (_ = "<" + (k(e.type) || "Unknown") + " />", o = " Did you accidentally export a JSX literal instead of a component?") : _ = typeof e, l("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", _, o);
+          e === null ? _ = "null" : Z(e) ? _ = "array" : e !== void 0 && e.$$typeof === v ? (_ = "<" + (k(e.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : _ = typeof e, m("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", _, i);
         }
-        var x = tr(e, r, t, f, m);
+        var x = tr(e, r, t, f, h);
         if (x == null)
           return x;
-        if (i) {
-          var P = r.children;
-          if (P !== void 0)
+        if (u) {
+          var j = r.children;
+          if (j !== void 0)
             if (n)
-              if (Z(P)) {
-                for (var Y = 0; Y < P.length; Y++)
-                  Se(P[Y], e);
-                Object.freeze && Object.freeze(P);
+              if (Z(j)) {
+                for (var Y = 0; Y < j.length; Y++)
+                  Se(j[Y], e);
+                Object.freeze && Object.freeze(j);
               } else
-                l("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                m("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              Se(P, e);
+              Se(j, e);
         }
-        return e === E ? ir(x) : or(x), x;
+        return e === E ? or(x) : ir(x), x;
       }
@@ -660,26 +660,26 @@ }
     var cr = sr, lr = ur;
-    V.Fragment = E, V.jsx = cr, V.jsxs = lr;
-  }()), V;
+    L.Fragment = E, L.jsx = cr, L.jsxs = lr;
+  }()), L;
 }
-process.env.NODE_ENV === "production" ? ae.exports = dr() : ae.exports = vr();
+process.env.NODE_ENV === "production" ? ae.exports = pr() : ae.exports = mr();
 var ke = ae.exports;
-const pr = (d, v, w, E) => {
+const hr = (d, v, w, E) => {
   let g = v / (w + E), R = Math.floor(d.length / g);
   g > d.length && (g = d.length, R = 1);
   const b = [];
-  for (let u = 0; u < g; u++) {
-    let s = 0;
-    for (let h = 0; h < R && u * R + h < d.length; h++)
-      s += d[u * R + h];
-    b.push(s / R);
+  for (let s = 0; s < g; s++) {
+    let c = 0;
+    for (let p = 0; p < R && s * R + p < d.length; p++)
+      c += d[s * R + p];
+    b.push(c / R);
   }
   return b;
-}, hr = (d, v, w, E, g, R) => {
-  const b = v.height / 2, u = v.getContext("2d");
-  u && (u.clearRect(0, 0, v.width, v.height), g !== "transparent" && (u.fillStyle = g, u.fillRect(0, 0, v.width, v.height)), d.forEach((s, h) => {
-    u.fillStyle = R;
-    const a = h * (w + E), p = b - s / 2, c = w, T = s || 1;
-    u.beginPath(), u.roundRect(a, p, c, T, 50), u.fill();
+}, gr = (d, v, w, E, g, R) => {
+  const b = v.height / 2, s = v.getContext("2d");
+  s && (s.clearRect(0, 0, v.width, v.height), g !== "transparent" && (s.fillStyle = g, s.fillRect(0, 0, v.width, v.height)), d.forEach((c, p) => {
+    s.fillStyle = R;
+    const o = p * (w + E), a = b - c / 2, l = w, S = c || 1;
+    s.beginPath(), s.roundRect(o, a, l, S, 50), s.fill();
   }));
-}, yr = ({
+}, _r = ({
   mediaRecorder: d,
@@ -692,33 +692,33 @@ width: v = "100%",
   barColor: b = "rgb(160, 198, 255)",
-  fftSize: u = 1024,
-  maxDecibels: s = -10,
-  minDecibels: h = -90,
-  smoothingTimeConstant: a = 0.4
+  fftSize: s = 1024,
+  maxDecibels: c = -10,
+  minDecibels: p = -90,
+  smoothingTimeConstant: o = 0.4
 }) => {
-  const [p] = J(() => new AudioContext()), [c, T] = J(), O = Ae(null);
+  const [a] = J(() => new AudioContext()), [l, S] = J(), C = De(null);
   G(() => {
     if (!d.stream)
       return;
-    const y = p.createAnalyser();
-    T(y), y.fftSize = u, y.minDecibels = h, y.maxDecibels = s, y.smoothingTimeConstant = a, p.createMediaStreamSource(d.stream).connect(y);
+    const y = a.createAnalyser();
+    S(y), y.fftSize = s, y.minDecibels = p, y.maxDecibels = c, y.smoothingTimeConstant = o, a.createMediaStreamSource(d.stream).connect(y);
   }, [d.stream]), G(() => {
-    (c ?? d.state === "recording") && j();
-  }, [c, d.state]);
-  const j = fr(() => {
-    if (!c)
+    (l ?? d.state === "recording") && A();
+  }, [l, d.state]);
+  const A = fr(() => {
+    if (!l)
       return;
-    const y = new Uint8Array(c == null ? void 0 : c.frequencyBinCount);
-    d.state === "recording" ? (c == null || c.getByteFrequencyData(y), D(y), requestAnimationFrame(j)) : d.state === "paused" ? D(y) : d.state === "inactive" && p.state !== "closed" && p.close();
-  }, [c]), D = (y) => {
-    if (!O.current)
+    const y = new Uint8Array(l == null ? void 0 : l.frequencyBinCount);
+    d.state === "recording" ? (l == null || l.getByteFrequencyData(y), D(y), requestAnimationFrame(A)) : d.state === "paused" ? D(y) : d.state === "inactive" && a.state !== "closed" && a.close();
+  }, [l]), D = (y) => {
+    if (!C.current)
       return;
-    const l = pr(
+    const m = hr(
       y,
-      O.current.width,
+      C.current.width,
       E,
       g
     );
-    hr(
-      l,
-      O.current,
+    gr(
+      m,
+      C.current,
       E,
@@ -733,3 +733,3 @@ g,
     {
-      ref: O,
+      ref: C,
       width: v,
@@ -742,114 +742,127 @@ height: w,
   );
-}, mr = (d, v, w, E, g) => {
-  const R = d.getChannelData(0), b = w / (E + g), u = Math.floor(R.length / b), s = v / 2;
-  let h = [], a = 0;
-  for (let p = 0; p < b; p++) {
-    const c = [];
-    let T = 0;
-    const O = [];
-    let j = 0;
-    for (let S = 0; S < u && p * u + S < d.length; S++) {
-      const A = R[p * u + S];
-      A <= 0 && (c.push(A), T++), A > 0 && (O.push(A), j++);
+}, yr = (d, v, w, E, g) => {
+  const R = d.getChannelData(0), b = w / (E + g), s = Math.floor(R.length / b), c = v / 2;
+  let p = [], o = 0;
+  for (let a = 0; a < b; a++) {
+    const l = [];
+    let S = 0;
+    const C = [];
+    let A = 0;
+    for (let T = 0; T < s && a * s + T < d.length; T++) {
+      const P = R[a * s + T];
+      P <= 0 && (l.push(P), S++), P > 0 && (C.push(P), A++);
     }
-    const D = c.reduce((S, A) => S + A, 0) / T, l = { max: O.reduce((S, A) => S + A, 0) / j, min: D };
-    l.max > a && (a = l.max), Math.abs(l.min) > a && (a = Math.abs(l.min)), h.push(l);
+    const D = l.reduce((T, P) => T + P, 0) / S, m = { max: C.reduce((T, P) => T + P, 0) / A, min: D };
+    m.max > o && (o = m.max), Math.abs(m.min) > o && (o = Math.abs(m.min)), p.push(m);
   }
-  if (s * 0.8 > a * s) {
-    const p = s * 0.8 / a;
-    h = h.map((c) => ({
-      max: c.max * p,
-      min: c.min * p
+  if (c * 0.8 > o * c) {
+    const a = c * 0.8 / o;
+    p = p.map((l) => ({
+      max: l.max * a,
+      min: l.min * a
     }));
   }
-  return h;
-}, ne = (d, v, w, E, g, R, b, u = 0, s = 1) => {
-  const h = v.height / 2, a = v.getContext("2d");
-  if (!a)
+  return p;
+}, ne = (d, v, w, E, g, R, b, s = 0, c = 1) => {
+  const p = v.height / 2, o = v.getContext("2d");
+  if (!o)
     return;
-  a.clearRect(0, 0, v.width, v.height), g !== "transparent" && (a.fillStyle = g, a.fillRect(0, 0, v.width, v.height));
-  const p = (u || 0) / s;
-  d.forEach((c, T) => {
-    const O = T / d.length, j = p > O;
-    a.fillStyle = j && b ? b : R;
-    const D = T * (w + E), y = h + c.min, l = w, S = h + c.max - y;
-    a.beginPath(), a.roundRect(D, y, l, S, 50), a.fill();
+  o.clearRect(0, 0, v.width, v.height), g !== "transparent" && (o.fillStyle = g, o.fillRect(0, 0, v.width, v.height));
+  const a = (s || 0) / c;
+  d.forEach((l, S) => {
+    const C = S / d.length, A = a > C;
+    o.fillStyle = A && b ? b : R;
+    const D = S * (w + E), y = p + l.min, m = w, T = p + l.max - y;
+    o.beginPath(), o.roundRect(D, y, m, T, 50), o.fill();
   });
-}, Er = ({
-  blob: d,
-  width: v,
-  height: w,
-  barWidth: E = 2,
-  gap: g = 1,
-  currentTime: R,
-  style: b,
-  backgroundColor: u = "transparent",
-  barColor: s = "rgb(184, 184, 184)",
-  barPlayedColor: h = "rgb(160, 198, 255)"
-}) => {
-  const a = Ae(null), [p, c] = J([]), [T, O] = J(0);
-  return G(() => {
-    (async () => {
-      if (!a.current)
-        return;
-      if (!d) {
-        const l = Array.from({ length: 100 }, () => ({
-          max: 0,
-          min: 0
-        }));
-        ne(
-          l,
-          a.current,
-          E,
-          g,
-          u,
-          s,
-          h
-        );
-        return;
-      }
-      const D = await d.arrayBuffer();
-      await new AudioContext().decodeAudioData(D, (l) => {
+}, Er = dr(
+  ({
+    blob: d,
+    width: v,
+    height: w,
+    barWidth: E = 2,
+    gap: g = 1,
+    currentTime: R,
+    style: b,
+    backgroundColor: s = "transparent",
+    barColor: c = "rgb(184, 184, 184)",
+    barPlayedColor: p = "rgb(160, 198, 255)"
+  }, o) => {
+    const a = De(null), [l, S] = J([]), [C, A] = J(0);
+    return vr(
+      o,
+      () => a.current,
+      []
+    ), G(() => {
+      (async () => {
         if (!a.current)
           return;
-        O(l.duration);
-        const S = mr(l, w, v, E, g);
-        c(S), ne(
-          S,
-          a.current,
-          E,
-          g,
-          u,
-          s,
-          h
-        );
-      });
-    })();
-  }, [d, a.current]), G(() => {
-    a.current && ne(
-      p,
-      a.current,
-      E,
-      g,
-      u,
-      s,
-      h,
-      R,
-      T
+        if (!d) {
+          const T = Array.from({ length: 100 }, () => ({
+            max: 0,
+            min: 0
+          }));
+          ne(
+            T,
+            a.current,
+            E,
+            g,
+            s,
+            c,
+            p
+          );
+          return;
+        }
+        const y = await d.arrayBuffer();
+        await new AudioContext().decodeAudioData(y, (T) => {
+          if (!a.current)
+            return;
+          A(T.duration);
+          const P = yr(
+            T,
+            w,
+            v,
+            E,
+            g
+          );
+          S(P), ne(
+            P,
+            a.current,
+            E,
+            g,
+            s,
+            c,
+            p
+          );
+        });
+      })();
+    }, [d, a.current]), G(() => {
+      a.current && ne(
+        l,
+        a.current,
+        E,
+        g,
+        s,
+        c,
+        p,
+        R,
+        C
+      );
+    }, [R, C]), /* @__PURE__ */ ke.jsx(
+      "canvas",
+      {
+        ref: a,
+        width: v,
+        height: w,
+        style: {
+          ...b
+        }
+      }
     );
-  }, [R, T]), /* @__PURE__ */ ke.jsx(
-    "canvas",
-    {
-      ref: a,
-      width: v,
-      height: w,
-      style: {
-        ...b
-      }
-    }
-  );
-};
+  }
+);
+Er.displayName = "AudioVisualizer";
 export {
   Er as AudioVisualizer,
-  yr as LiveAudioVisualizer
+  _r as LiveAudioVisualizer
 };

dist/react-audio-visualize.umd.js

@@ -1,2 +0,2 @@
-(function(Y,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],S):(Y=typeof globalThis<"u"?globalThis:Y||self,S(Y.AudioVisualize={},Y.React))})(this,function(Y,S){"use strict";var X={exports:{}},N={};/**
+(function(V,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],T):(V=typeof globalThis<"u"?globalThis:V||self,T(V.AudioVisualize={},V.React))})(this,function(V,T){"use strict";var X={exports:{}},N={};/**
  * @license React
@@ -9,3 +9,3 @@ * react-jsx-runtime.production.min.js
  * LICENSE file in the root directory of this source tree.
- */var oe;function De(){if(oe)return N;oe=1;var d=S,v=Symbol.for("react.element"),T=Symbol.for("react.fragment"),E=Object.prototype.hasOwnProperty,g=d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,R={key:!0,ref:!0,__self:!0,__source:!0};function b(s,u,h){var a,p={},c=null,w=null;h!==void 0&&(c=""+h),u.key!==void 0&&(c=""+u.key),u.ref!==void 0&&(w=u.ref);for(a in u)E.call(u,a)&&!R.hasOwnProperty(a)&&(p[a]=u[a]);if(s&&s.defaultProps)for(a in u=s.defaultProps,u)p[a]===void 0&&(p[a]=u[a]);return{$$typeof:v,type:s,key:c,ref:w,props:p,_owner:g.current}}return N.Fragment=T,N.jsx=b,N.jsxs=b,N}var W={};/**
+ */var oe;function ke(){if(oe)return N;oe=1;var d=T,v=Symbol.for("react.element"),w=Symbol.for("react.fragment"),E=Object.prototype.hasOwnProperty,g=d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,R={key:!0,ref:!0,__self:!0,__source:!0};function b(u,c,p){var i,a={},f=null,O=null;p!==void 0&&(f=""+p),c.key!==void 0&&(f=""+c.key),c.ref!==void 0&&(O=c.ref);for(i in c)E.call(c,i)&&!R.hasOwnProperty(i)&&(a[i]=c[i]);if(u&&u.defaultProps)for(i in c=u.defaultProps,c)a[i]===void 0&&(a[i]=c[i]);return{$$typeof:v,type:u,key:f,ref:O,props:a,_owner:g.current}}return N.Fragment=w,N.jsx=b,N.jsxs=b,N}var W={};/**
  * @license React
@@ -18,12 +18,12 @@ * react-jsx-runtime.development.js
  * LICENSE file in the root directory of this source tree.
- */var ie;function ke(){return ie||(ie=1,process.env.NODE_ENV!=="production"&&function(){var d=S,v=Symbol.for("react.element"),T=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),b=Symbol.for("react.provider"),s=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),a=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),w=Symbol.for("react.offscreen"),C=Symbol.iterator,A="@@iterator";function D(e){if(e===null||typeof e!="object")return null;var r=C&&e[C]||e[A];return typeof r=="function"?r:null}var y=d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function f(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];O("error",e,t)}}function O(e,r,t){{var n=y.ReactDebugCurrentFrame,l=n.getStackAddendum();l!==""&&(r+="%s",t=t.concat([l]));var m=t.map(function(i){return String(i)});m.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,m)}}var k=!1,Le=!1,Ne=!1,We=!1,Be=!1,ue;ue=Symbol.for("react.module.reference");function Ue(e){return!!(typeof e=="string"||typeof e=="function"||e===E||e===R||Be||e===g||e===h||e===a||We||e===w||k||Le||Ne||typeof e=="object"&&e!==null&&(e.$$typeof===c||e.$$typeof===p||e.$$typeof===b||e.$$typeof===s||e.$$typeof===u||e.$$typeof===ue||e.getModuleId!==void 0))}function ze(e,r,t){var n=e.displayName;if(n)return n;var l=r.displayName||r.name||"";return l!==""?t+"("+l+")":t}function ce(e){return e.displayName||"Context"}function F(e){if(e==null)return null;if(typeof e.tag=="number"&&f("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case T:return"Portal";case R:return"Profiler";case g:return"StrictMode";case h:return"Suspense";case a:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case s:var r=e;return ce(r)+".Consumer";case b:var t=e;return ce(t._context)+".Provider";case u:return ze(e,e.render,"ForwardRef");case p:var n=e.displayName||null;return n!==null?n:F(e.type)||"Memo";case c:{var l=e,m=l._payload,i=l._init;try{return F(i(m))}catch{return null}}}return null}var M=Object.assign,B=0,fe,le,de,ve,pe,he,me;function ge(){}ge.__reactDisabledLog=!0;function Je(){{if(B===0){fe=console.log,le=console.info,de=console.warn,ve=console.error,pe=console.group,he=console.groupCollapsed,me=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ge,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}B++}}function Ge(){{if(B--,B===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:M({},e,{value:fe}),info:M({},e,{value:le}),warn:M({},e,{value:de}),error:M({},e,{value:ve}),group:M({},e,{value:pe}),groupCollapsed:M({},e,{value:he}),groupEnd:M({},e,{value:me})})}B<0&&f("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var $=y.ReactCurrentDispatcher,Q;function z(e,r,t){{if(Q===void 0)try{throw Error()}catch(l){var n=l.stack.trim().match(/\n( *(at )?)/);Q=n&&n[1]||""}return`
-`+Q+e}}var q=!1,J;{var Ke=typeof WeakMap=="function"?WeakMap:Map;J=new Ke}function ye(e,r){if(!e||q)return"";{var t=J.get(e);if(t!==void 0)return t}var n;q=!0;var l=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var m;m=$.current,$.current=null,Je();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(I){n=I}Reflect.construct(e,[],i)}else{try{i.call()}catch(I){n=I}e.call(i.prototype)}}else{try{throw Error()}catch(I){n=I}e()}}catch(I){if(I&&n&&typeof I.stack=="string"){for(var o=I.stack.split(`
-`),P=n.stack.split(`
-`),_=o.length-1,x=P.length-1;_>=1&&x>=0&&o[_]!==P[x];)x--;for(;_>=1&&x>=0;_--,x--)if(o[_]!==P[x]){if(_!==1||x!==1)do if(_--,x--,x<0||o[_]!==P[x]){var j=`
-`+o[_].replace(" at new "," at ");return e.displayName&&j.includes("<anonymous>")&&(j=j.replace("<anonymous>",e.displayName)),typeof e=="function"&&J.set(e,j),j}while(_>=1&&x>=0);break}}}finally{q=!1,$.current=m,Ge(),Error.prepareStackTrace=l}var L=e?e.displayName||e.name:"",Ae=L?z(L):"";return typeof e=="function"&&J.set(e,Ae),Ae}function He(e,r,t){return ye(e,!1)}function Xe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function G(e,r,t){if(e==null)return"";if(typeof e=="function")return ye(e,Xe(e));if(typeof e=="string")return z(e);switch(e){case h:return z("Suspense");case a:return z("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case u:return He(e.render);case p:return G(e.type,r,t);case c:{var n=e,l=n._payload,m=n._init;try{return G(m(l),r,t)}catch{}}}return""}var K=Object.prototype.hasOwnProperty,Ee={},Re=y.ReactDebugCurrentFrame;function H(e){if(e){var r=e._owner,t=G(e.type,e._source,r?r.type:null);Re.setExtraStackFrame(t)}else Re.setExtraStackFrame(null)}function Ze(e,r,t,n,l){{var m=Function.call.bind(K);for(var i in e)if(m(e,i)){var o=void 0;try{if(typeof e[i]!="function"){var P=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw P.name="Invariant Violation",P}o=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(_){o=_}o&&!(o instanceof Error)&&(H(l),f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof o),H(null)),o instanceof Error&&!(o.message in Ee)&&(Ee[o.message]=!0,H(l),f("Failed %s type: %s",t,o.message),H(null))}}}var $e=Array.isArray;function ee(e){return $e(e)}function Qe(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function qe(e){try{return _e(e),!1}catch{return!0}}function _e(e){return""+e}function be(e){if(qe(e))return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Qe(e)),_e(e)}var U=y.ReactCurrentOwner,er={key:!0,ref:!0,__self:!0,__source:!0},xe,Te,re;re={};function rr(e){if(K.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function tr(e){if(K.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function nr(e,r){if(typeof e.ref=="string"&&U.current&&r&&U.current.stateNode!==r){var t=F(U.current.type);re[t]||(f('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',F(U.current.type),e.ref),re[t]=!0)}}function ar(e,r){{var t=function(){xe||(xe=!0,f("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function or(e,r){{var t=function(){Te||(Te=!0,f("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var ir=function(e,r,t,n,l,m,i){var o={$$typeof:v,type:e,key:r,ref:t,props:i,_owner:m};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:l}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function sr(e,r,t,n,l){{var m,i={},o=null,P=null;t!==void 0&&(be(t),o=""+t),tr(r)&&(be(r.key),o=""+r.key),rr(r)&&(P=r.ref,nr(r,l));for(m in r)K.call(r,m)&&!er.hasOwnProperty(m)&&(i[m]=r[m]);if(e&&e.defaultProps){var _=e.defaultProps;for(m in _)i[m]===void 0&&(i[m]=_[m])}if(o||P){var x=typeof e=="function"?e.displayName||e.name||"Unknown":e;o&&ar(i,x),P&&or(i,x)}return ir(e,o,P,l,n,U.current,i)}}var te=y.ReactCurrentOwner,Se=y.ReactDebugCurrentFrame;function V(e){if(e){var r=e._owner,t=G(e.type,e._source,r?r.type:null);Se.setExtraStackFrame(t)}else Se.setExtraStackFrame(null)}var ne;ne=!1;function ae(e){return typeof e=="object"&&e!==null&&e.$$typeof===v}function we(){{if(te.current){var e=F(te.current.type);if(e)return`
+ */var ie;function Fe(){return ie||(ie=1,process.env.NODE_ENV!=="production"&&function(){var d=T,v=Symbol.for("react.element"),w=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),b=Symbol.for("react.provider"),u=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),i=Symbol.for("react.suspense_list"),a=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),O=Symbol.for("react.offscreen"),P=Symbol.iterator,D="@@iterator";function k(e){if(e===null||typeof e!="object")return null;var r=P&&e[P]||e[D];return typeof r=="function"?r:null}var y=d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function h(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];S("error",e,t)}}function S(e,r,t){{var n=y.ReactDebugCurrentFrame,l=n.getStackAddendum();l!==""&&(r+="%s",t=t.concat([l]));var m=t.map(function(s){return String(s)});m.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,m)}}var j=!1,Le=!1,Ne=!1,We=!1,Be=!1,ce;ce=Symbol.for("react.module.reference");function Ue(e){return!!(typeof e=="string"||typeof e=="function"||e===E||e===R||Be||e===g||e===p||e===i||We||e===O||j||Le||Ne||typeof e=="object"&&e!==null&&(e.$$typeof===f||e.$$typeof===a||e.$$typeof===b||e.$$typeof===u||e.$$typeof===c||e.$$typeof===ce||e.getModuleId!==void 0))}function ze(e,r,t){var n=e.displayName;if(n)return n;var l=r.displayName||r.name||"";return l!==""?t+"("+l+")":t}function fe(e){return e.displayName||"Context"}function F(e){if(e==null)return null;if(typeof e.tag=="number"&&h("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case w:return"Portal";case R:return"Profiler";case g:return"StrictMode";case p:return"Suspense";case i:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case u:var r=e;return fe(r)+".Consumer";case b:var t=e;return fe(t._context)+".Provider";case c:return ze(e,e.render,"ForwardRef");case a:var n=e.displayName||null;return n!==null?n:F(e.type)||"Memo";case f:{var l=e,m=l._payload,s=l._init;try{return F(s(m))}catch{return null}}}return null}var Y=Object.assign,B=0,le,de,ve,pe,he,me,ge;function ye(){}ye.__reactDisabledLog=!0;function Je(){{if(B===0){le=console.log,de=console.info,ve=console.warn,pe=console.error,he=console.group,me=console.groupCollapsed,ge=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ye,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}B++}}function Ge(){{if(B--,B===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:Y({},e,{value:le}),info:Y({},e,{value:de}),warn:Y({},e,{value:ve}),error:Y({},e,{value:pe}),group:Y({},e,{value:he}),groupCollapsed:Y({},e,{value:me}),groupEnd:Y({},e,{value:ge})})}B<0&&h("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var Q=y.ReactCurrentDispatcher,$;function z(e,r,t){{if($===void 0)try{throw Error()}catch(l){var n=l.stack.trim().match(/\n( *(at )?)/);$=n&&n[1]||""}return`
+`+$+e}}var q=!1,J;{var He=typeof WeakMap=="function"?WeakMap:Map;J=new He}function Ee(e,r){if(!e||q)return"";{var t=J.get(e);if(t!==void 0)return t}var n;q=!0;var l=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var m;m=Q.current,Q.current=null,Je();try{if(r){var s=function(){throw Error()};if(Object.defineProperty(s.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(s,[])}catch(I){n=I}Reflect.construct(e,[],s)}else{try{s.call()}catch(I){n=I}e.call(s.prototype)}}else{try{throw Error()}catch(I){n=I}e()}}catch(I){if(I&&n&&typeof I.stack=="string"){for(var o=I.stack.split(`
+`),C=n.stack.split(`
+`),_=o.length-1,x=C.length-1;_>=1&&x>=0&&o[_]!==C[x];)x--;for(;_>=1&&x>=0;_--,x--)if(o[_]!==C[x]){if(_!==1||x!==1)do if(_--,x--,x<0||o[_]!==C[x]){var A=`
+`+o[_].replace(" at new "," at ");return e.displayName&&A.includes("<anonymous>")&&(A=A.replace("<anonymous>",e.displayName)),typeof e=="function"&&J.set(e,A),A}while(_>=1&&x>=0);break}}}finally{q=!1,Q.current=m,Ge(),Error.prepareStackTrace=l}var L=e?e.displayName||e.name:"",De=L?z(L):"";return typeof e=="function"&&J.set(e,De),De}function Ke(e,r,t){return Ee(e,!1)}function Xe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function G(e,r,t){if(e==null)return"";if(typeof e=="function")return Ee(e,Xe(e));if(typeof e=="string")return z(e);switch(e){case p:return z("Suspense");case i:return z("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case c:return Ke(e.render);case a:return G(e.type,r,t);case f:{var n=e,l=n._payload,m=n._init;try{return G(m(l),r,t)}catch{}}}return""}var H=Object.prototype.hasOwnProperty,Re={},_e=y.ReactDebugCurrentFrame;function K(e){if(e){var r=e._owner,t=G(e.type,e._source,r?r.type:null);_e.setExtraStackFrame(t)}else _e.setExtraStackFrame(null)}function Ze(e,r,t,n,l){{var m=Function.call.bind(H);for(var s in e)if(m(e,s)){var o=void 0;try{if(typeof e[s]!="function"){var C=Error((n||"React class")+": "+t+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw C.name="Invariant Violation",C}o=e[s](r,s,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(_){o=_}o&&!(o instanceof Error)&&(K(l),h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,s,typeof o),K(null)),o instanceof Error&&!(o.message in Re)&&(Re[o.message]=!0,K(l),h("Failed %s type: %s",t,o.message),K(null))}}}var Qe=Array.isArray;function ee(e){return Qe(e)}function $e(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function qe(e){try{return be(e),!1}catch{return!0}}function be(e){return""+e}function xe(e){if(qe(e))return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",$e(e)),be(e)}var U=y.ReactCurrentOwner,er={key:!0,ref:!0,__self:!0,__source:!0},Te,we,re;re={};function rr(e){if(H.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function tr(e){if(H.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function nr(e,r){if(typeof e.ref=="string"&&U.current&&r&&U.current.stateNode!==r){var t=F(U.current.type);re[t]||(h('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',F(U.current.type),e.ref),re[t]=!0)}}function ar(e,r){{var t=function(){Te||(Te=!0,h("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function or(e,r){{var t=function(){we||(we=!0,h("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var ir=function(e,r,t,n,l,m,s){var o={$$typeof:v,type:e,key:r,ref:t,props:s,_owner:m};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:l}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function sr(e,r,t,n,l){{var m,s={},o=null,C=null;t!==void 0&&(xe(t),o=""+t),tr(r)&&(xe(r.key),o=""+r.key),rr(r)&&(C=r.ref,nr(r,l));for(m in r)H.call(r,m)&&!er.hasOwnProperty(m)&&(s[m]=r[m]);if(e&&e.defaultProps){var _=e.defaultProps;for(m in _)s[m]===void 0&&(s[m]=_[m])}if(o||C){var x=typeof e=="function"?e.displayName||e.name||"Unknown":e;o&&ar(s,x),C&&or(s,x)}return ir(e,o,C,l,n,U.current,s)}}var te=y.ReactCurrentOwner,Se=y.ReactDebugCurrentFrame;function M(e){if(e){var r=e._owner,t=G(e.type,e._source,r?r.type:null);Se.setExtraStackFrame(t)}else Se.setExtraStackFrame(null)}var ne;ne=!1;function ae(e){return typeof e=="object"&&e!==null&&e.$$typeof===v}function Oe(){{if(te.current){var e=F(te.current.type);if(e)return`
 
 Check the render method of \``+e+"`."}return""}}function ur(e){{if(e!==void 0){var r=e.fileName.replace(/^.*[\\\/]/,""),t=e.lineNumber;return`
 
-Check your code at `+r+":"+t+"."}return""}}var Oe={};function cr(e){{var r=we();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+Check your code at `+r+":"+t+"."}return""}}var Pe={};function cr(e){{var r=Oe();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
 
-Check the top-level render call using <`+t+">.")}return r}}function Pe(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=cr(r);if(Oe[t])return;Oe[t]=!0;var n="";e&&e._owner&&e._owner!==te.current&&(n=" It was passed a child from "+F(e._owner.type)+"."),V(e),f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),V(null)}}function Ce(e,r){{if(typeof e!="object")return;if(ee(e))for(var t=0;t<e.length;t++){var n=e[t];ae(n)&&Pe(n,r)}else if(ae(e))e._store&&(e._store.validated=!0);else if(e){var l=D(e);if(typeof l=="function"&&l!==e.entries)for(var m=l.call(e),i;!(i=m.next()).done;)ae(i.value)&&Pe(i.value,r)}}}function fr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===u||r.$$typeof===p))t=r.propTypes;else return;if(t){var n=F(r);Ze(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ne){ne=!0;var l=F(r);f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",l||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function lr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){V(e),f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),V(null);break}}e.ref!==null&&(V(e),f("Invalid attribute `ref` supplied to `React.Fragment`."),V(null))}}function je(e,r,t,n,l,m){{var i=Ue(e);if(!i){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var P=ur(l);P?o+=P:o+=we();var _;e===null?_="null":ee(e)?_="array":e!==void 0&&e.$$typeof===v?(_="<"+(F(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):_=typeof e,f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",_,o)}var x=sr(e,r,t,l,m);if(x==null)return x;if(i){var j=r.children;if(j!==void 0)if(n)if(ee(j)){for(var L=0;L<j.length;L++)Ce(j[L],e);Object.freeze&&Object.freeze(j)}else f("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ce(j,e)}return e===E?lr(x):fr(x),x}}function dr(e,r,t){return je(e,r,t,!0)}function vr(e,r,t){return je(e,r,t,!1)}var pr=vr,hr=dr;W.Fragment=E,W.jsx=pr,W.jsxs=hr}()),W}process.env.NODE_ENV==="production"?X.exports=De():X.exports=ke();var se=X.exports;const Fe=(d,v,T,E)=>{let g=v/(T+E),R=Math.floor(d.length/g);g>d.length&&(g=d.length,R=1);const b=[];for(let s=0;s<g;s++){let u=0;for(let h=0;h<R&&s*R+h<d.length;h++)u+=d[s*R+h];b.push(u/R)}return b},Ie=(d,v,T,E,g,R)=>{const b=v.height/2,s=v.getContext("2d");s&&(s.clearRect(0,0,v.width,v.height),g!=="transparent"&&(s.fillStyle=g,s.fillRect(0,0,v.width,v.height)),d.forEach((u,h)=>{s.fillStyle=R;const a=h*(T+E),p=b-u/2,c=T,w=u||1;s.beginPath(),s.roundRect(a,p,c,w,50),s.fill()}))},Ye=({mediaRecorder:d,width:v="100%",height:T="100%",barWidth:E=2,gap:g=1,backgroundColor:R="transparent",barColor:b="rgb(160, 198, 255)",fftSize:s=1024,maxDecibels:u=-10,minDecibels:h=-90,smoothingTimeConstant:a=.4})=>{const[p]=S.useState(()=>new AudioContext),[c,w]=S.useState(),C=S.useRef(null);S.useEffect(()=>{if(!d.stream)return;const y=p.createAnalyser();w(y),y.fftSize=s,y.minDecibels=h,y.maxDecibels=u,y.smoothingTimeConstant=a,p.createMediaStreamSource(d.stream).connect(y)},[d.stream]),S.useEffect(()=>{(c??d.state==="recording")&&A()},[c,d.state]);const A=S.useCallback(()=>{if(!c)return;const y=new Uint8Array(c==null?void 0:c.frequencyBinCount);d.state==="recording"?(c==null||c.getByteFrequencyData(y),D(y),requestAnimationFrame(A)):d.state==="paused"?D(y):d.state==="inactive"&&p.state!=="closed"&&p.close()},[c]),D=y=>{if(!C.current)return;const f=Fe(y,C.current.width,E,g);Ie(f,C.current,E,g,R,b)};return se.jsx("canvas",{ref:C,width:v,height:T,style:{aspectRatio:"unset"}})},Me=(d,v,T,E,g)=>{const R=d.getChannelData(0),b=T/(E+g),s=Math.floor(R.length/b),u=v/2;let h=[],a=0;for(let p=0;p<b;p++){const c=[];let w=0;const C=[];let A=0;for(let O=0;O<s&&p*s+O<d.length;O++){const k=R[p*s+O];k<=0&&(c.push(k),w++),k>0&&(C.push(k),A++)}const D=c.reduce((O,k)=>O+k,0)/w,f={max:C.reduce((O,k)=>O+k,0)/A,min:D};f.max>a&&(a=f.max),Math.abs(f.min)>a&&(a=Math.abs(f.min)),h.push(f)}if(u*.8>a*u){const p=u*.8/a;h=h.map(c=>({max:c.max*p,min:c.min*p}))}return h},Z=(d,v,T,E,g,R,b,s=0,u=1)=>{const h=v.height/2,a=v.getContext("2d");if(!a)return;a.clearRect(0,0,v.width,v.height),g!=="transparent"&&(a.fillStyle=g,a.fillRect(0,0,v.width,v.height));const p=(s||0)/u;d.forEach((c,w)=>{const C=w/d.length,A=p>C;a.fillStyle=A&&b?b:R;const D=w*(T+E),y=h+c.min,f=T,O=h+c.max-y;a.beginPath(),a.roundRect(D,y,f,O,50),a.fill()})},Ve=({blob:d,width:v,height:T,barWidth:E=2,gap:g=1,currentTime:R,style:b,backgroundColor:s="transparent",barColor:u="rgb(184, 184, 184)",barPlayedColor:h="rgb(160, 198, 255)"})=>{const a=S.useRef(null),[p,c]=S.useState([]),[w,C]=S.useState(0);return S.useEffect(()=>{(async()=>{if(!a.current)return;if(!d){const f=Array.from({length:100},()=>({max:0,min:0}));Z(f,a.current,E,g,s,u,h);return}const D=await d.arrayBuffer();await new AudioContext().decodeAudioData(D,f=>{if(!a.current)return;C(f.duration);const O=Me(f,T,v,E,g);c(O),Z(O,a.current,E,g,s,u,h)})})()},[d,a.current]),S.useEffect(()=>{a.current&&Z(p,a.current,E,g,s,u,h,R,w)},[R,w]),se.jsx("canvas",{ref:a,width:v,height:T,style:{...b}})};Y.AudioVisualizer=Ve,Y.LiveAudioVisualizer=Ye,Object.defineProperty(Y,Symbol.toStringTag,{value:"Module"})});
+Check the top-level render call using <`+t+">.")}return r}}function Ce(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=cr(r);if(Pe[t])return;Pe[t]=!0;var n="";e&&e._owner&&e._owner!==te.current&&(n=" It was passed a child from "+F(e._owner.type)+"."),M(e),h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),M(null)}}function je(e,r){{if(typeof e!="object")return;if(ee(e))for(var t=0;t<e.length;t++){var n=e[t];ae(n)&&Ce(n,r)}else if(ae(e))e._store&&(e._store.validated=!0);else if(e){var l=k(e);if(typeof l=="function"&&l!==e.entries)for(var m=l.call(e),s;!(s=m.next()).done;)ae(s.value)&&Ce(s.value,r)}}}function fr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===c||r.$$typeof===a))t=r.propTypes;else return;if(t){var n=F(r);Ze(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ne){ne=!0;var l=F(r);h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",l||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function lr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){M(e),h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),M(null);break}}e.ref!==null&&(M(e),h("Invalid attribute `ref` supplied to `React.Fragment`."),M(null))}}function Ae(e,r,t,n,l,m){{var s=Ue(e);if(!s){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var C=ur(l);C?o+=C:o+=Oe();var _;e===null?_="null":ee(e)?_="array":e!==void 0&&e.$$typeof===v?(_="<"+(F(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):_=typeof e,h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",_,o)}var x=sr(e,r,t,l,m);if(x==null)return x;if(s){var A=r.children;if(A!==void 0)if(n)if(ee(A)){for(var L=0;L<A.length;L++)je(A[L],e);Object.freeze&&Object.freeze(A)}else h("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else je(A,e)}return e===E?lr(x):fr(x),x}}function dr(e,r,t){return Ae(e,r,t,!0)}function vr(e,r,t){return Ae(e,r,t,!1)}var pr=vr,hr=dr;W.Fragment=E,W.jsx=pr,W.jsxs=hr}()),W}process.env.NODE_ENV==="production"?X.exports=ke():X.exports=Fe();var se=X.exports;const Ie=(d,v,w,E)=>{let g=v/(w+E),R=Math.floor(d.length/g);g>d.length&&(g=d.length,R=1);const b=[];for(let u=0;u<g;u++){let c=0;for(let p=0;p<R&&u*R+p<d.length;p++)c+=d[u*R+p];b.push(c/R)}return b},Ve=(d,v,w,E,g,R)=>{const b=v.height/2,u=v.getContext("2d");u&&(u.clearRect(0,0,v.width,v.height),g!=="transparent"&&(u.fillStyle=g,u.fillRect(0,0,v.width,v.height)),d.forEach((c,p)=>{u.fillStyle=R;const i=p*(w+E),a=b-c/2,f=w,O=c||1;u.beginPath(),u.roundRect(i,a,f,O,50),u.fill()}))},Ye=({mediaRecorder:d,width:v="100%",height:w="100%",barWidth:E=2,gap:g=1,backgroundColor:R="transparent",barColor:b="rgb(160, 198, 255)",fftSize:u=1024,maxDecibels:c=-10,minDecibels:p=-90,smoothingTimeConstant:i=.4})=>{const[a]=T.useState(()=>new AudioContext),[f,O]=T.useState(),P=T.useRef(null);T.useEffect(()=>{if(!d.stream)return;const y=a.createAnalyser();O(y),y.fftSize=u,y.minDecibels=p,y.maxDecibels=c,y.smoothingTimeConstant=i,a.createMediaStreamSource(d.stream).connect(y)},[d.stream]),T.useEffect(()=>{(f??d.state==="recording")&&D()},[f,d.state]);const D=T.useCallback(()=>{if(!f)return;const y=new Uint8Array(f==null?void 0:f.frequencyBinCount);d.state==="recording"?(f==null||f.getByteFrequencyData(y),k(y),requestAnimationFrame(D)):d.state==="paused"?k(y):d.state==="inactive"&&a.state!=="closed"&&a.close()},[f]),k=y=>{if(!P.current)return;const h=Ie(y,P.current.width,E,g);Ve(h,P.current,E,g,R,b)};return se.jsx("canvas",{ref:P,width:v,height:w,style:{aspectRatio:"unset"}})},Me=(d,v,w,E,g)=>{const R=d.getChannelData(0),b=w/(E+g),u=Math.floor(R.length/b),c=v/2;let p=[],i=0;for(let a=0;a<b;a++){const f=[];let O=0;const P=[];let D=0;for(let S=0;S<u&&a*u+S<d.length;S++){const j=R[a*u+S];j<=0&&(f.push(j),O++),j>0&&(P.push(j),D++)}const k=f.reduce((S,j)=>S+j,0)/O,h={max:P.reduce((S,j)=>S+j,0)/D,min:k};h.max>i&&(i=h.max),Math.abs(h.min)>i&&(i=Math.abs(h.min)),p.push(h)}if(c*.8>i*c){const a=c*.8/i;p=p.map(f=>({max:f.max*a,min:f.min*a}))}return p},Z=(d,v,w,E,g,R,b,u=0,c=1)=>{const p=v.height/2,i=v.getContext("2d");if(!i)return;i.clearRect(0,0,v.width,v.height),g!=="transparent"&&(i.fillStyle=g,i.fillRect(0,0,v.width,v.height));const a=(u||0)/c;d.forEach((f,O)=>{const P=O/d.length,D=a>P;i.fillStyle=D&&b?b:R;const k=O*(w+E),y=p+f.min,h=w,S=p+f.max-y;i.beginPath(),i.roundRect(k,y,h,S,50),i.fill()})},ue=T.forwardRef(({blob:d,width:v,height:w,barWidth:E=2,gap:g=1,currentTime:R,style:b,backgroundColor:u="transparent",barColor:c="rgb(184, 184, 184)",barPlayedColor:p="rgb(160, 198, 255)"},i)=>{const a=T.useRef(null),[f,O]=T.useState([]),[P,D]=T.useState(0);return T.useImperativeHandle(i,()=>a.current,[]),T.useEffect(()=>{(async()=>{if(!a.current)return;if(!d){const S=Array.from({length:100},()=>({max:0,min:0}));Z(S,a.current,E,g,u,c,p);return}const y=await d.arrayBuffer();await new AudioContext().decodeAudioData(y,S=>{if(!a.current)return;D(S.duration);const j=Me(S,w,v,E,g);O(j),Z(j,a.current,E,g,u,c,p)})})()},[d,a.current]),T.useEffect(()=>{a.current&&Z(f,a.current,E,g,u,c,p,R,P)},[R,P]),se.jsx("canvas",{ref:a,width:v,height:w,style:{...b}})});ue.displayName="AudioVisualizer",V.AudioVisualizer=ue,V.LiveAudioVisualizer=Ye,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "react-audio-visualize",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
@@ -64,9 +64,9 @@ "author": "",
     "typescript": "^5.0.2",
-    "vite": "^4.3.2",
+    "vite": "^4.3.9",
     "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">=16.2.0",
+    "react-dom": ">=16.2.0"
   }
 }

README.md

@@ -19,2 +19,3 @@ # **react-audio-visualize**
   const [blob, setBlob] = useState<Blob>();
+  const visualizerRef = useRef<HTMLCanvasElement>(null)
 
@@ -27,2 +28,3 @@ // set blob somewhere in code
         <AudioVisualizer
+          ref={visualizerRef}
           blob={blob}
@@ -54,2 +56,3 @@ width={500}
 | **`style`** |  Custom styles that can be passed to the visualization canvas | N/A | Yes |
+| **`ref`** |  A `ForwardedRef` for the `HTMLCanvasElement` | N/A | Yes |
 
@@ -56,0 +59,0 @@ ---

No alert changes

Improved metrics

Total package byte prevSize

55238

increased by1.12%

Lines of code

1034

increased by1.67%

Number of lines in readme file

102

increased by3.03%

No dependency changes