react-voice-visualizer - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/react-voice-visualizer.js

@@ -1,3 +0,3 @@
-(function(){"use strict";(e=>{try{if(typeof window>"u")return;var i=document.createElement("style");i.appendChild(document.createTextNode(e)),document.head.appendChild(i)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".voice-visualizer__buttons-container{display:flex;justify-content:center;align-items:center;column-gap:20px;row-gap:15px;flex-wrap:wrap;margin-bottom:40px}.voice-visualizer__btn-center{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s}.voice-visualizer__btn-center:hover{background-color:#eaeaea}.voice-visualizer__btn-center>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause{background-color:#ff3030}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause:hover{background-color:#ff4f4f}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause>img{height:50%;max-height:16px}.voice-visualizer__btn-center:hover{border:4px solid #9f9f9f}.voice-visualizer__btn-left{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#ff3030;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s,opacity .3s}.voice-visualizer__btn-left:hover{background-color:#ff4f4f}.voice-visualizer__btn-left:disabled{opacity:.6;background-color:#ff3030}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone{background-color:#fff}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-left>img{width:auto;height:50%;max-height:16px}.voice-visualizer__btn-left:hover{border:4px solid #9f9f9f}.voice-visualizer__btn{box-sizing:border-box;min-width:100px;min-height:60px;padding:5px 20px;border-radius:40px;font-size:15px;background-color:#f0f0f0;transition:background-color .3s,opacity .3s}.voice-visualizer__btn:disabled{opacity:.8;background-color:#f0f0f0}.voice-visualizer__btn:hover{background-color:#bebebe}.voice-visualizer__canvas-container{position:relative;margin:0 auto;overflow:hidden}.voice-visualizer__canvas-container canvas{display:block}.voice-visualizer__canvas-microphone-btn{position:absolute;top:50%;left:50%;width:auto;max-width:12%;height:50%;max-height:100px;background-color:transparent;border:none;outline:none;transform:translate(-50%,-50%)}.voice-visualizer__canvas-microphone-icon{width:100%;height:100%;will-change:transform;transition:transform .35s}.voice-visualizer__canvas-microphone-btn:hover .voice-visualizer__canvas-microphone-icon{transform:scale(1.03)}.voice-visualizer__canvas-audio-wave-icon{position:absolute;top:50%;left:50%;width:auto;max-width:40%;height:40%;max-height:100px;transform:translate(-118%,-50%) scale(-1)}.voice-visualizer__canvas-audio-wave-icon2{transform:translate(18%,-50%)}.voice-visualizer__canvas-audio-processing{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}.voice-visualizer__progress-indicator-hovered{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#85858599}.voice-visualizer__progress-indicator-hovered-time{position:absolute;top:3%;left:1px;width:fit-content;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;background-color:#575757;opacity:.8}.voice-visualizer__progress-indicator-hovered-time.voice-visualizer__progress-indicator-hovered-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__progress-indicator{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#efefef}.voice-visualizer__progress-indicator-time{position:absolute;top:3%;left:1px;width:fit-content;box-sizing:border-box;min-width:41px;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;text-align:left;color:#000;font-weight:500;background-color:#efefef}.voice-visualizer__progress-indicator-time.voice-visualizer__progress-indicator-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__audio-info-container{box-sizing:border-box;height:56px;display:flex;gap:30px;justify-content:center}.voice-visualizer__audio-info-current-time{min-width:45px;text-align:left}.voice-visualizer__visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:4px solid #c5c5c5;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}")})();
-import { jsx as a, jsxs as B, Fragment as ye } from "react/jsx-runtime";
+(function(){"use strict";(e=>{try{if(typeof window>"u")return;var i=document.createElement("style");i.appendChild(document.createTextNode(e)),document.head.appendChild(i)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".voice-visualizer__buttons-container{display:flex;justify-content:center;align-items:center;column-gap:20px;row-gap:15px;flex-wrap:wrap;margin-bottom:40px}.voice-visualizer__btn-center{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s}.voice-visualizer__btn-center:hover{background-color:#eaeaea}.voice-visualizer__btn-center>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause{background-color:#ff3030}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause:hover{background-color:#ff4f4f}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause>img{height:50%;max-height:16px}.voice-visualizer__btn-center:hover{border:4px solid #9f9f9f}.voice-visualizer__btn-left{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#ff3030;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s,opacity .3s}.voice-visualizer__btn-left:hover{background-color:#ff4f4f}.voice-visualizer__btn-left:disabled{opacity:.6;background-color:#ff3030}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone{background-color:#fff}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-left>img{width:auto;height:50%;max-height:16px}.voice-visualizer__btn-left:hover{border:4px solid #9f9f9f}.voice-visualizer__btn{box-sizing:border-box;min-width:100px;min-height:60px;padding:5px 20px;border-radius:40px;font-size:15px;background-color:#f0f0f0;transition:background-color .3s,opacity .3s}.voice-visualizer__btn:disabled{opacity:.8;background-color:#f0f0f0}.voice-visualizer__btn:hover{background-color:#bebebe}.voice-visualizer__canvas-container{position:relative;margin:0 auto;overflow:hidden}.voice-visualizer__canvas-container canvas{display:block}.voice-visualizer__canvas-microphone-btn{position:absolute;top:50%;left:50%;width:auto;max-width:12%;min-width:24px;height:50%;max-height:100px;background-color:transparent;border:none;outline:none;transform:translate(-50%,-50%)}.voice-visualizer__canvas-microphone-icon{width:100%;height:100%;will-change:transform;transition:transform .35s}.voice-visualizer__canvas-microphone-btn:hover .voice-visualizer__canvas-microphone-icon{transform:scale(1.03)}.voice-visualizer__canvas-audio-wave-icon{position:absolute;top:50%;left:50%;width:auto;max-width:40%;height:40%;max-height:100px;transform:translate(-118%,-50%) scale(-1)}.voice-visualizer__canvas-audio-wave-icon2{transform:translate(18%,-50%)}.voice-visualizer__canvas-audio-processing{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}.voice-visualizer__progress-indicator-hovered{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#85858599}.voice-visualizer__progress-indicator-hovered-time{position:absolute;top:3%;left:1px;width:fit-content;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;background-color:#575757;opacity:.8}.voice-visualizer__progress-indicator-hovered-time.voice-visualizer__progress-indicator-hovered-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__progress-indicator{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#efefef}.voice-visualizer__progress-indicator-time{position:absolute;top:3%;left:1px;width:fit-content;box-sizing:border-box;min-width:41px;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;text-align:left;color:#000;font-weight:500;background-color:#efefef}.voice-visualizer__progress-indicator-time.voice-visualizer__progress-indicator-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__audio-info-container{box-sizing:border-box;height:56px;display:flex;gap:30px;justify-content:center}.voice-visualizer__audio-info-current-time{min-width:45px;text-align:left}.voice-visualizer__visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:4px solid #c5c5c5;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}")})();
+import { jsx as a, jsxs as V, Fragment as we } from "react/jsx-runtime";
 import { useRef as j, useLayoutEffect as Re, forwardRef as Ze, useState as d, useCallback as Oe, useEffect as $ } from "react";
@@ -111,3 +111,3 @@ function Pe(e) {
     }
-    t.current += 1, !L && te(), A && he({
+    t.current += 1, !L && re(), A && he({
       context: o,
@@ -135,3 +135,3 @@ rounded: f,
     s.length = 0;
-  function te() {
+  function re() {
     Ye({
@@ -146,3 +146,3 @@ context: o,
   }
-}, je = (e) => {
+}, ye = (e) => {
   const r = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), t = e % 60, i = Math.floor(
@@ -168,3 +168,3 @@ (t - Math.floor(t)) * 1e3
 };
-function De(e) {
+function je(e) {
   if (typeof e == "string") {
@@ -237,3 +237,3 @@ const r = Number(e);
   }
-), Te = ({
+), De = ({
   color: e = "#FFFFFF",
@@ -255,3 +255,3 @@ reflect: r
   }
-), Ee = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEuMSAxNi43MmMwIDMgLjk2IDUuOCAzLjYxIDcuOTVhOS45NiA5Ljk2IDAgMCAwIDYuNSAyLjE3bTAgMHY0LjM0aDQuMzQtOC42N200LjM0LTQuMzRjMi4zNSAwIDQuNDItLjQ4IDYuNS0yLjE3YTkuODcgOS44NyAwIDAgMCAzLjYxLTcuOTVNMTEuMjIgMS44MmMtMS40NSAwLTIuNS4zNy0zLjMuOTNhNS42IDUuNiAwIDAgMC0xLjg0IDIuNGMtLjkgMi4wNi0xLjEgNC43Ny0xLjEgNy4yNCAwIDIuNDYuMiA1LjE3IDEuMSA3LjI0YTUuNiA1LjYgMCAwIDAgMS44NCAyLjRjLjguNTUgMS44NS45MiAzLjMuOTIgMS40NCAwIDIuNS0uMzcgMy4yOS0uOTNhNS42IDUuNiAwIDAgMCAxLjg0LTIuNGMuOS0yLjA2IDEuMS00Ljc3IDEuMS03LjIzIDAtMi40Ny0uMi01LjE4LTEuMS03LjI0YTUuNiA1LjYgMCAwIDAtMS44NC0yLjQgNS41MiA1LjUyIDAgMCAwLTMuMy0uOTNaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K", Qe = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE4Ljc1IDYuMTZjNC4zMSAyLjYgNi40NiAzLjkgNi40NiA1Ljg0IDAgMS45NS0yLjE1IDMuMjQtNi40NiA1Ljg0bC00Ljg0IDIuOTJjLTQuMzEgMi42LTYuNDYgMy44OS04LjA4IDIuOTItMS42Mi0uOTgtMS42Mi0zLjU3LTEuNjItOC43NlY5LjA4YzAtNS4xOSAwLTcuNzggMS42Mi04Ljc2IDEuNjItLjk3IDMuNzcuMzMgOC4wOCAyLjkybDQuODQgMi45MloiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", _e = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE0IDMuNWEzLjUgMy41IDAgMSAxIDcgMHYyMmEzLjUgMy41IDAgMSAxLTcgMHYtMjJaIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjkiIHJ4PSIzLjUiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", We = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3QgeD0iLjIxIiB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=", Ke = Ze(
+), Te = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEuMSAxNi43MmMwIDMgLjk2IDUuOCAzLjYxIDcuOTVhOS45NiA5Ljk2IDAgMCAwIDYuNSAyLjE3bTAgMHY0LjM0aDQuMzQtOC42N200LjM0LTQuMzRjMi4zNSAwIDQuNDItLjQ4IDYuNS0yLjE3YTkuODcgOS44NyAwIDAgMCAzLjYxLTcuOTVNMTEuMjIgMS44MmMtMS40NSAwLTIuNS4zNy0zLjMuOTNhNS42IDUuNiAwIDAgMC0xLjg0IDIuNGMtLjkgMi4wNi0xLjEgNC43Ny0xLjEgNy4yNCAwIDIuNDYuMiA1LjE3IDEuMSA3LjI0YTUuNiA1LjYgMCAwIDAgMS44NCAyLjRjLjguNTUgMS44NS45MiAzLjMuOTIgMS40NCAwIDIuNS0uMzcgMy4yOS0uOTNhNS42IDUuNiAwIDAgMCAxLjg0LTIuNGMuOS0yLjA2IDEuMS00Ljc3IDEuMS03LjIzIDAtMi40Ny0uMi01LjE4LTEuMS03LjI0YTUuNiA1LjYgMCAwIDAtMS44NC0yLjQgNS41MiA1LjUyIDAgMCAwLTMuMy0uOTNaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K", Qe = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE4Ljc1IDYuMTZjNC4zMSAyLjYgNi40NiAzLjkgNi40NiA1Ljg0IDAgMS45NS0yLjE1IDMuMjQtNi40NiA1Ljg0bC00Ljg0IDIuOTJjLTQuMzEgMi42LTYuNDYgMy44OS04LjA4IDIuOTItMS42Mi0uOTgtMS42Mi0zLjU3LTEuNjItOC43NlY5LjA4YzAtNS4xOSAwLTcuNzggMS42Mi04Ljc2IDEuNjItLjk3IDMuNzcuMzMgOC4wOCAyLjkybDQuODQgMi45MloiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", Ee = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE0IDMuNWEzLjUgMy41IDAgMSAxIDcgMHYyMmEzLjUgMy41IDAgMSAxLTcgMHYtMjJaIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjkiIHJ4PSIzLjUiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==", We = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3QgeD0iLjIxIiB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=", Ke = Ze(
   ({
@@ -278,3 +278,3 @@ controls: {
     },
-    width: te = "100%",
+    width: re = "100%",
     height: R = 200,
@@ -285,5 +285,5 @@ speed: Z = 3,
     secondaryBarColor: C = "#5e5e5e",
-    barWidth: re = 2,
-    gap: V = 1,
-    rounded: ne = 5,
+    barWidth: ne = 2,
+    gap: J = 1,
+    rounded: Q = 5,
     isControlPanelShown: ie = !0,
@@ -295,34 +295,34 @@ isDownloadAudioButtonShown: ce = !1,
     isDefaultUIShown: P = !1,
-    defaultMicrophoneIconColor: J = b,
+    defaultMicrophoneIconColor: W = b,
     defaultAudioWaveIconColor: x = b,
     canvasContainerClassName: E,
-    isProgressIndicatorShown: Q = !0,
+    isProgressIndicatorShown: q = !0,
     progressIndicatorClassName: l,
     isProgressIndicatorTimeShown: le = !0,
     progressIndicatorTimeClassName: oe,
-    isProgressIndicatorOnHoverShown: W = !0,
+    isProgressIndicatorOnHoverShown: X = !0,
     progressIndicatorOnHoverClassName: se,
     isProgressIndicatorTimeOnHoverShown: me = !0,
     progressIndicatorTimeOnHoverClassName: ve,
-    isAudioProcessingTextShown: q = !0,
+    isAudioProcessingTextShown: K = !0,
     audioProcessingTextClassName: de,
     controlButtonsClassName: ue
   }, H) => {
-    const [ae, c] = d(0), [w, y] = d([]), [z, X] = d(0), [U, Y] = d(0), [G, K] = d(!1), Me = Math.trunc(Z), ee = Math.trunc(re), ze = Math.trunc(V), p = j(null), pe = j([]), fe = j(Me), be = j(ee), Ce = j(re), Ie = ee + ze * ee, xe = Oe((_) => {
-      const F = Math.floor(_.clientWidth / 2) * 2, k = Math.trunc(_.clientHeight);
-      X(F), Y(k);
+    const [ae, c] = d(0), [w, y] = d([]), [z, ee] = d(0), [U, Y] = d(0), [G, te] = d(!1), Me = Math.trunc(Z), F = Math.trunc(ne), ze = Math.trunc(J), p = j(null), pe = j([]), fe = j(Me), _e = j(F), be = j(ne), Ce = F + ze * F, xe = Oe((_) => {
+      const k = Math.floor(_.clientWidth / 2) * 2, B = Math.trunc(_.clientHeight);
+      ee(k), Y(B);
     }, []), He = Pe(xe);
-    $(() => (o || window.addEventListener("beforeunload", Le), () => {
-      window.removeEventListener("beforeunload", Le);
+    $(() => (o || window.addEventListener("beforeunload", Ie), () => {
+      window.removeEventListener("beforeunload", Ie);
     }), [o]), $(() => {
-      var _, F;
+      var _, k;
       if (s)
-        return G ? (_ = p.current) == null || _.addEventListener("mouseleave", Ae) : (F = p.current) == null || F.addEventListener("mouseenter", Se), () => {
-          var k, we;
-          G ? (k = p.current) == null || k.removeEventListener(
+        return G ? (_ = p.current) == null || _.addEventListener("mouseleave", Se) : (k = p.current) == null || k.addEventListener("mouseenter", Le), () => {
+          var B, Ne;
+          G ? (B = p.current) == null || B.removeEventListener(
             "mouseleave",
-            Ae
-          ) : (we = p.current) == null || we.removeEventListener(
+            Se
+          ) : (Ne = p.current) == null || Ne.removeEventListener(
             "mouseenter",
-            Se
+            Le
           );
@@ -333,5 +333,5 @@ };
         audioData: e,
-        unit: Ie,
-        index: be,
-        index2: Ce,
+        unit: Ce,
+        index: _e,
+        index2: be,
         canvas: p.current,
@@ -343,4 +343,4 @@ picks: pe.current,
         secondaryBarColor: C,
-        barWidth: ee,
-        rounded: ne,
+        barWidth: F,
+        rounded: Q,
         animateCurrentPick: O,
@@ -352,6 +352,7 @@ fullscreen: h
       e,
-      Ie,
+      F,
       N,
       b,
       C,
+      Q,
       z,
@@ -362,3 +363,3 @@ U,
     ]), $(() => {
-      var F;
+      var k;
       if (!s || !p.current || r)
@@ -376,14 +377,14 @@ return;
             z,
-            ee,
+            F,
             ze
           )
         );
-      })(), (F = p.current) == null || F.addEventListener(
+      })(), (k = p.current) == null || k.addEventListener(
         "mousemove",
-        Ne
+        Ae
       ), () => {
-        var k;
-        (k = p.current) == null || k.removeEventListener(
+        var B;
+        (B = p.current) == null || B.removeEventListener(
           "mousemove",
-          Ne
+          Ae
         );
@@ -395,4 +396,4 @@ };
       U,
-      V,
-      re
+      J,
+      ne
     ]), $(() => {
@@ -407,3 +408,3 @@ if (!(T || !w.length || !p.current)) {
           canvas: p.current,
-          barWidth: ee,
+          barWidth: F,
           gap: ze,
@@ -414,3 +415,3 @@ backgroundColor: N,
           currentAudioTime: m,
-          rounded: ne,
+          rounded: Q,
           duration: t
@@ -423,3 +424,3 @@ });
       o,
-      ne,
+      Q,
       N,
@@ -434,9 +435,9 @@ b,
     }, [M]);
-    const Le = (_) => {
+    const Ie = (_) => {
       _.preventDefault(), _.returnValue = "";
+    }, Le = () => {
+      te(!0);
     }, Se = () => {
-      K(!0);
-    }, Ae = () => {
-      K(!1);
-    }, Ne = (_) => {
+      te(!1);
+    }, Ae = (_) => {
       c(_.offsetX);
@@ -446,4 +447,4 @@ }, $e = (_) => {
     };
-    return /* @__PURE__ */ B("div", { className: "voice-visualizer", children: [
-      /* @__PURE__ */ B(
+    return /* @__PURE__ */ V("div", { className: "voice-visualizer", children: [
+      /* @__PURE__ */ V(
         "div",
@@ -454,4 +455,4 @@ {
           style: {
-            height: De(R),
-            width: De(te)
+            height: je(R),
+            width: je(re)
           },
@@ -469,5 +470,5 @@ children: [
             ),
-            P && o && /* @__PURE__ */ B(ye, { children: [
-              /* @__PURE__ */ a(Te, { color: x }),
-              /* @__PURE__ */ a(Te, { color: x, reflect: !0 }),
+            P && o && /* @__PURE__ */ V(we, { children: [
+              /* @__PURE__ */ a(De, { color: x }),
+              /* @__PURE__ */ a(De, { color: x, reflect: !0 }),
               /* @__PURE__ */ a(
@@ -481,3 +482,3 @@ "button",
                     {
-                      color: J,
+                      color: W,
                       stroke: 0.5,
@@ -490,3 +491,3 @@ className: "voice-visualizer__canvas-microphone-icon"
             ] }),
-            q && M && /* @__PURE__ */ a(
+            K && M && /* @__PURE__ */ a(
               "p",
@@ -499,3 +500,3 @@ {
             ),
-            G && s && W && /* @__PURE__ */ a(
+            G && s && X && /* @__PURE__ */ a(
               "div",
@@ -514,3 +515,3 @@ {
                     ${ve ?? ""}`,
-                    children: je(
+                    children: ye(
                       t / z * ae
@@ -522,3 +523,3 @@ )
             ),
-            s && t && Q ? /* @__PURE__ */ a(
+            s && t && q ? /* @__PURE__ */ a(
               "div",
@@ -534,3 +535,3 @@ {
                     className: `voice-visualizer__progress-indicator-time ${z - m * z / t < 70 ? "voice-visualizer__progress-indicator-time-left" : ""} ${oe ?? ""}`,
-                    children: je(m)
+                    children: ye(m)
                   }
@@ -543,6 +544,6 @@ )
       ),
-      ie && /* @__PURE__ */ B(ye, { children: [
-        /* @__PURE__ */ B("div", { className: "voice-visualizer__audio-info-container", children: [
+      ie && /* @__PURE__ */ V(we, { children: [
+        /* @__PURE__ */ V("div", { className: "voice-visualizer__audio-info-container", children: [
           r && /* @__PURE__ */ a("p", { className: "voice-visualizer__audio-info-current-time", children: Fe(f) }),
-          t ? /* @__PURE__ */ B("p", { children: [
+          t ? /* @__PURE__ */ V("p", { children: [
             "Duration: ",
@@ -552,3 +553,3 @@ Ve(t)
         ] }),
-        /* @__PURE__ */ B("div", { className: "voice-visualizer__buttons-container", children: [
+        /* @__PURE__ */ V("div", { className: "voice-visualizer__buttons-container", children: [
           r && /* @__PURE__ */ a(
@@ -562,3 +563,3 @@ "button",
                 {
-                  src: L ? Ee : _e,
+                  src: L ? Te : Ee,
                   alt: L ? "Play" : "Pause"
@@ -578,3 +579,3 @@ }
                 {
-                  src: A ? Qe : _e,
+                  src: A ? Qe : Ee,
                   alt: A ? "Play" : "Pause"
@@ -590,3 +591,3 @@ }
               onClick: v,
-              children: /* @__PURE__ */ a("img", { src: Ee, alt: "Microphone" })
+              children: /* @__PURE__ */ a("img", { src: Te, alt: "Microphone" })
             }
@@ -635,3 +636,3 @@ ),
 function et() {
-  const [e, r] = d(!1), [n, t] = d(!1), [i, m] = d(null), [s, D] = d(new Uint8Array(0)), [v, I] = d(!1), [g, f] = d(null), [A, L] = d(null), [M, o] = d(0), [u, S] = d(0), [te, R] = d(0), [Z, N] = d(""), [b, C] = d(!0), [re, V] = d(0), [ne, ie] = d(!0), [ce, O] = d(null), h = j(null), T = j(null), P = j(null), J = j(null), x = j(null), E = j(null), Q = j(null), l = j(null);
+  const [e, r] = d(!1), [n, t] = d(!1), [i, m] = d(null), [s, D] = d(new Uint8Array(0)), [v, I] = d(!1), [g, f] = d(null), [A, L] = d(null), [M, o] = d(0), [u, S] = d(0), [re, R] = d(0), [Z, N] = d(""), [b, C] = d(!0), [ne, J] = d(0), [Q, ie] = d(!0), [ce, O] = d(null), h = j(null), T = j(null), P = j(null), W = j(null), x = j(null), E = j(null), q = j(null), l = j(null);
   $(() => {
@@ -656,3 +657,3 @@ if (!e || n)
         z && N(z);
-        const X = await g.arrayBuffer(), Y = await new AudioContext().decodeAudioData(X);
+        const ee = await g.arrayBuffer(), Y = await new AudioContext().decodeAudioData(ee);
         L(Y), R(Y.duration - 0.06), I(!1);
@@ -669,9 +670,9 @@ } catch (y) {
     if (ce) {
-      q();
+      K();
       return;
     }
   }, [ce]), $(() => () => {
-    Q.current && cancelAnimationFrame(Q.current), x.current && x.current.disconnect(), T.current && T.current.state !== "closed" && T.current.close(), E.current && cancelAnimationFrame(E.current), l != null && l.current && l.current.removeEventListener("ended", H), h.current && h.current.removeEventListener(
+    q.current && cancelAnimationFrame(q.current), x.current && x.current.disconnect(), T.current && T.current.state !== "closed" && T.current.close(), E.current && cancelAnimationFrame(E.current), l != null && l.current && l.current.removeEventListener("ended", H), h.current && h.current.removeEventListener(
       "dataavailable",
-      W
+      X
     );
@@ -681,7 +682,7 @@ }, []);
     navigator.mediaDevices.getUserMedia({ audio: !0 }).then((c) => {
-      q(), ie(!1), S(performance.now()), r(!0), m(c), T.current = new window.AudioContext(), P.current = T.current.createAnalyser(), J.current = new Uint8Array(
+      K(), ie(!1), S(performance.now()), r(!0), m(c), T.current = new window.AudioContext(), P.current = T.current.createAnalyser(), W.current = new Uint8Array(
         P.current.frequencyBinCount
       ), x.current = T.current.createMediaStreamSource(c), x.current.connect(P.current), h.current = new MediaRecorder(c), h.current.addEventListener(
         "dataavailable",
-        W
+        X
       ), h.current.start(), oe();
@@ -696,7 +697,7 @@ }).catch((c) => {
   }, oe = () => {
-    P.current.getByteTimeDomainData(J.current), D(new Uint8Array(J.current)), E.current = requestAnimationFrame(oe);
-  }, W = (c) => {
+    P.current.getByteTimeDomainData(W.current), D(new Uint8Array(W.current)), E.current = requestAnimationFrame(oe);
+  }, X = (c) => {
     h.current && f(c.data);
   }, se = () => {
-    l.current && (V(l.current.currentTime), Q.current = requestAnimationFrame(se));
+    l.current && (J(l.current.currentTime), q.current = requestAnimationFrame(se));
   }, me = () => {
@@ -707,20 +708,20 @@ e || le();
       "dataavailable",
-      W
+      X
     )));
-  }, q = () => {
+  }, K = () => {
     E.current && cancelAnimationFrame(E.current), l != null && l.current && l.current.removeEventListener("ended", H), h.current && (h.current.removeEventListener(
       "dataavailable",
-      W
-    ), h.current.stop(), h.current = null), i == null || i.getTracks().forEach((c) => c.stop()), h.current = null, T.current = null, P.current = null, J.current = null, x.current = null, E.current = null, Q.current = null, m(null), r(!1), I(!1), f(null), L(null), o(0), S(0), R(0), N(""), V(0), C(!0), t(!1), D(new Uint8Array(0)), O(null), ie(!0);
+      X
+    ), h.current.stop(), h.current = null), i == null || i.getTracks().forEach((c) => c.stop()), h.current = null, T.current = null, P.current = null, W.current = null, x.current = null, E.current = null, q.current = null, m(null), r(!1), I(!1), f(null), L(null), o(0), S(0), R(0), N(""), J(0), C(!0), t(!1), D(new Uint8Array(0)), O(null), ie(!0);
   }, de = (c) => {
-    c instanceof Blob && (q(), ie(!1), I(!0), r(!1), o(0), t(!1), f(c));
+    c instanceof Blob && (K(), ie(!1), I(!0), r(!1), o(0), t(!1), f(c));
   }, ue = () => {
-    var c, w, y, z, X, U, Y, G;
+    var c, w, y, z, ee, U, Y, G;
     if (e) {
-      t((K) => !K), ((c = h.current) == null ? void 0 : c.state) === "recording" ? ((w = h.current) == null || w.pause(), o((K) => K + (performance.now() - u)), E.current && cancelAnimationFrame(E.current)) : ((y = h.current) == null || y.resume(), S(performance.now()), E.current = requestAnimationFrame(oe));
+      t((te) => !te), ((c = h.current) == null ? void 0 : c.state) === "recording" ? ((w = h.current) == null || w.pause(), o((te) => te + (performance.now() - u)), E.current && cancelAnimationFrame(E.current)) : ((y = h.current) == null || y.resume(), S(performance.now()), E.current = requestAnimationFrame(oe));
       return;
     }
-    l.current && A && ((z = l.current) != null && z.paused ? ((X = l.current) == null || X.addEventListener("ended", H), (U = l.current) == null || U.play(), C(!1)) : ((Y = l.current) == null || Y.removeEventListener("ended", H), (G = l.current) == null || G.pause(), C(!0)));
+    l.current && A && ((z = l.current) != null && z.paused ? ((ee = l.current) == null || ee.addEventListener("ended", H), (U = l.current) == null || U.play(), C(!1)) : ((Y = l.current) == null || Y.removeEventListener("ended", H), (G = l.current) == null || G.pause(), C(!0)));
   }, H = () => {
-    C(!0), l != null && l.current && (l.current.currentTime = 0, V(0));
+    C(!0), l != null && l.current && (l.current.currentTime = 0, J(0));
   }, ae = () => {
@@ -743,8 +744,8 @@ var w;
     mediaRecorder: h.current,
-    duration: te,
-    currentAudioTime: re,
+    duration: re,
+    currentAudioTime: ne,
     audioSrc: Z,
     isPausedRecordedAudio: b,
     bufferFromRecordedBlob: A,
-    isCleared: ne,
+    isCleared: Q,
     setPreloadedAudioBlob: de,
@@ -755,3 +756,3 @@ startRecording: me,
     saveAudioFile: ae,
-    clearCanvas: q,
+    clearCanvas: K,
     error: ce,
@@ -758,0 +759,0 @@ _handleTimeUpdate: se,

package.json

 {
   "name": "react-voice-visualizer",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
@@ -6,0 +6,0 @@ "author": "Yurii Zarytskyi",

New alerts

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

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

110056

0.04%

Lines of code

1032

0.1%

No dependency changes