react-voice-visualizer - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

dist/react-voice-visualizer.js

@@ -10,3 +10,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;width:fit-content;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:55px;display:flex;align-items:center;justify-content:center;gap:30px}.voice-visualizer__audio-info-time{margin:15px 0;min-width:38px;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}")})();
   return o ? (o.clearRect(0, 0, t, n), r !== "transparent" && (o.fillStyle = r, o.fillRect(0, 0, t, n)), { context: o, height: n, width: t, halfWidth: i }) : null;
-}, me = ({
+}, de = ({
   context: e,
@@ -33,9 +33,9 @@ color: r,
 }) => {
-  const f = pe({ canvas: r, backgroundColor: i });
-  if (!f)
+  const z = pe({ canvas: r, backgroundColor: i });
+  if (!z)
     return;
-  const { context: S, height: I } = f, N = M / u;
-  e.forEach((z, a) => {
+  const { context: S, height: I } = z, N = M / u;
+  e.forEach((f, a) => {
     const p = a / e.length, h = N > p;
-    me({
+    de({
       context: S,
@@ -45,4 +45,4 @@ color: h ? d : o,
       x: a * (n + t * n),
-      y: I / 2 - z.max,
-      h: z.max * 2,
+      y: I / 2 - f.max,
+      h: f.max * 2,
       w: n
@@ -60,3 +60,3 @@ });
 }) {
-  me({
+  de({
     context: e,
@@ -82,7 +82,7 @@ color: r,
   barWidth: u,
-  mainBarColor: f,
+  mainBarColor: z,
   secondaryBarColor: S,
   rounded: I,
   animateCurrentPick: N,
-  fullscreen: z
+  fullscreen: f
 }) => {
@@ -102,11 +102,11 @@ const a = pe({ canvas: i, backgroundColor: b });
         } : null;
-        n.current >= r ? n.current = u : n.current += u, M.length > (z ? R : Z) / u && M.pop(), M.unshift(O);
+        n.current >= r ? n.current = u : n.current += u, M.length > (f ? R : Z) / u && M.pop(), M.unshift(O);
       }
       t.current += 1;
     }
-    !z && P(), N && me({
+    !f && P(), N && de({
       context: p,
       rounded: I,
-      color: f,
-      x: z ? R : Z,
+      color: z,
+      x: f ? R : Z,
       y: h - T / 258 * h,
@@ -116,7 +116,7 @@ h: -h + T / 258 * h * 2,
     });
-    let x = (z ? R : Z) - t.current;
+    let x = (f ? R : Z) - t.current;
     M.forEach((L) => {
-      L && me({
+      L && de({
         context: p,
-        color: f,
+        color: z,
         rounded: I,
@@ -172,3 +172,3 @@ x,
   const o = e.getChannelData(0), d = n / (t + i * t), M = Math.floor(o.length / d), b = r / 2;
-  let u = [], f = 0;
+  let u = [], z = 0;
   for (let S = 0; S < d; S++) {
@@ -181,7 +181,7 @@ const I = [];
     }
-    const z = I.reduce((a, p) => a + p, 0) / N;
-    z > f && (f = z), u.push({ max: z });
+    const f = I.reduce((a, p) => a + p, 0) / N;
+    f > z && (z = f), u.push({ max: f });
   }
-  if (b * 0.95 > f * b) {
-    const S = b * 0.95 / f;
+  if (b * 0.95 > z * b) {
+    const S = b * 0.95 / z;
     u = u.map((I) => ({
@@ -262,7 +262,7 @@ max: I.max > 0.01 ? I.max * S : 1
       stopRecording: u,
-      saveAudioFile: f,
+      saveAudioFile: z,
       recordingTime: S,
       isPausedRecordedAudio: I,
       isPausedRecording: N,
-      isProcessingRecordedAudio: z,
+      isProcessingRecordedAudio: f,
       isCleared: a,
@@ -292,15 +292,15 @@ clearCanvas: p,
     progressIndicatorClassName: v,
-    isProgressIndicatorTimeShown: de = !0,
+    isProgressIndicatorTimeShown: ze = !0,
     progressIndicatorTimeClassName: ie,
     isProgressIndicatorOnHoverShown: q = !A,
     progressIndicatorOnHoverClassName: he,
-    isProgressIndicatorTimeOnHoverShown: ze = !0,
-    progressIndicatorTimeOnHoverClassName: fe,
+    isProgressIndicatorTimeOnHoverShown: fe = !0,
+    progressIndicatorTimeOnHoverClassName: ge,
     isAudioProcessingTextShown: X = !0,
-    audioProcessingTextClassName: ge,
+    audioProcessingTextClassName: Me,
     controlButtonsClassName: ue
   }, H) => {
-    const [ce, c] = m(0), [y, j] = m([]), [w, K] = m(0), [k, B] = m(0), [ee, oe] = m(0), [le, Le] = m(!1), [Se, He] = m(0), Me = Math.trunc(P), G = Math.trunc(
-      Se > 768 ? F : F + 1
-    ), Ie = Math.trunc(O), g = E(null), we = E([]), ve = E(Me), $e = E(G), Re = E(G), ae = E(null), Ze = G + Ie * G;
+    const [ce, c] = m(0), [y, j] = m([]), [w, K] = m(0), [k, B] = m(0), [ee, oe] = m(0), [le, Le] = m(!1), [Se, He] = m(0), Ie = Math.trunc(P), ve = Math.trunc(O), G = Math.trunc(
+      Se < 768 && ve > 0 ? F + 1 : F
+    ), g = E(null), we = E([]), me = E(Ie), $e = E(G), Re = E(G), ae = E(null), Ze = G + ve * G;
     $(() => {
@@ -310,3 +310,3 @@ const D = () => {
           return;
-        ve.current = Me;
+        me.current = Ie;
         const W = Math.trunc(
@@ -325,3 +325,3 @@ ae.current.clientHeight * window.devicePixelRatio / 2
     }, [R]), Ue(() => {
-      g.current && ((ve.current >= Me || !e.length) && (ve.current = 0, Fe({
+      g.current && ((me.current >= Ie || !e.length) && (me.current = 0, Fe({
         audioData: e,
@@ -342,3 +342,3 @@ unit: Ze,
         fullscreen: l
-      })), ve.current += 1);
+      })), me.current += 1);
     }, [
@@ -385,3 +385,3 @@ g.current,
             G,
-            Ie
+            ve
           )
@@ -415,3 +415,3 @@ );
           barWidth: G,
-          gap: Ie,
+          gap: ve,
           backgroundColor: T,
@@ -434,7 +434,7 @@ mainBarColor: x,
     ]), $(() => {
-      z && g.current && pe({
+      f && g.current && pe({
         canvas: g.current,
         backgroundColor: T
       });
-    }, [z]);
+    }, [f]);
     const Ae = (D) => {
@@ -492,6 +492,6 @@ D.preventDefault(), D.returnValue = "";
             ] }),
-            X && z && /* @__PURE__ */ s(
+            X && f && /* @__PURE__ */ s(
               "p",
               {
-                className: `voice-visualizer__canvas-audio-processing ${ge ?? ""}`,
+                className: `voice-visualizer__canvas-audio-processing ${Me ?? ""}`,
                 style: { color: x },
@@ -509,3 +509,3 @@ children: "Processing Audio..."
                 },
-                children: ze && /* @__PURE__ */ s(
+                children: fe && /* @__PURE__ */ s(
                   "p",
@@ -515,3 +515,3 @@ {
                     ${w - ce < 70 ? "voice-visualizer__progress-indicator-hovered-time-left" : ""} 
-                    ${fe ?? ""}`,
+                    ${ge ?? ""}`,
                     children: Te(
@@ -531,3 +531,3 @@ t / w * ce
                 },
-                children: de && /* @__PURE__ */ s(
+                children: ze && /* @__PURE__ */ s(
                   "p",
@@ -569,3 +569,3 @@ {
               onClick: M,
-              disabled: z,
+              disabled: f,
               children: /* @__PURE__ */ s(
@@ -601,3 +601,3 @@ "img",
               className: `voice-visualizer__btn ${ue ?? ""}`,
-              disabled: z,
+              disabled: f,
               children: "Clear"
@@ -609,3 +609,3 @@ }
             {
-              onClick: f,
+              onClick: z,
               className: `voice-visualizer__btn ${ue ?? ""}`,
@@ -631,3 +631,3 @@ children: "Download Audio"
 function tt() {
-  const [e, r] = m(!1), [n, t] = m(!1), [i, o] = m(null), [d, M] = m(new Uint8Array(0)), [b, u] = m(!1), [f, S] = m(null), [I, N] = m(null), [z, a] = m(0), [p, h] = m(0), [R, Z] = m(0), [P, T] = m(""), [x, L] = m(!0), [F, O] = m(0), [J, re] = m(!0), [ne, U] = m(null), l = E(null), A = E(null), Y = E(null), Q = E(null), C = E(null), _ = E(null), V = E(null), v = E(null);
+  const [e, r] = m(!1), [n, t] = m(!1), [i, o] = m(null), [d, M] = m(new Uint8Array(0)), [b, u] = m(!1), [z, S] = m(null), [I, N] = m(null), [f, a] = m(0), [p, h] = m(0), [R, Z] = m(0), [P, T] = m(""), [x, L] = m(!0), [F, O] = m(0), [J, re] = m(!0), [ne, U] = m(null), l = E(null), A = E(null), Y = E(null), Q = E(null), C = E(null), _ = E(null), V = E(null), v = E(null);
   $(() => {
@@ -642,3 +642,3 @@ if (!e || n)
   }, [p, n, e]), $(() => {
-    if (!f)
+    if (!z || z.size === 0)
       return;
@@ -649,7 +649,7 @@ (async () => {
         U(null);
-        const j = new Blob([f], {
+        const j = new Blob([z], {
           type: (y = l.current) == null ? void 0 : y.mimeType
         }), w = URL.createObjectURL(j);
         w && T(w);
-        const K = await f.arrayBuffer(), B = await new AudioContext().decodeAudioData(K);
+        const K = await z.arrayBuffer(), B = await new AudioContext().decodeAudioData(K);
         N(B), Z(B.duration - 0.06), u(!1);
@@ -664,3 +664,3 @@ } catch (j) {
     })();
-  }, [f]), $(() => {
+  }, [z]), $(() => {
     if (ne) {
@@ -676,3 +676,3 @@ X();
   }, []);
-  const de = () => {
+  const ze = () => {
     navigator.mediaDevices.getUserMedia({ audio: !0 }).then((c) => {
@@ -698,5 +698,5 @@ X(), re(!1), h(performance.now()), r(!0), o(c), A.current = new window.AudioContext(), Y.current = A.current.createAnalyser(), Q.current = new Uint8Array(
     v.current && (O(v.current.currentTime), V.current = requestAnimationFrame(he));
-  }, ze = () => {
-    e || de();
   }, fe = () => {
+    e || ze();
+  }, ge = () => {
     e && (u(!0), r(!1), a(0), t(!1), _.current && cancelAnimationFrame(_.current), C.current && C.current.disconnect(), A.current && A.current.state !== "closed" && A.current.close(), i == null || i.getTracks().forEach((c) => c.stop()), l.current && (l.current.stop(), l.current.removeEventListener(
@@ -711,3 +711,3 @@ "dataavailable",
     ), l.current.stop(), l.current = null), i == null || i.getTracks().forEach((c) => c.stop()), l.current = null, A.current = null, Y.current = null, Q.current = null, C.current = null, _.current = null, V.current = null, o(null), r(!1), u(!1), S(null), N(null), a(0), h(0), Z(0), T(""), O(0), L(!0), t(!1), M(new Uint8Array(0)), U(null), re(!0);
-  }, ge = (c) => {
+  }, Me = (c) => {
     c instanceof Blob && (X(), re(!1), u(!0), r(!1), a(0), t(!1), S(c));
@@ -736,5 +736,5 @@ }, ue = () => {
     audioData: d,
-    recordingTime: z,
+    recordingTime: f,
     isProcessingRecordedAudio: b,
-    recordedBlob: f,
+    recordedBlob: z,
     mediaRecorder: l.current,
@@ -747,6 +747,6 @@ duration: R,
     isCleared: J,
-    setPreloadedAudioBlob: ge,
-    startRecording: ze,
+    setPreloadedAudioBlob: Me,
+    startRecording: fe,
     togglePauseResume: ue,
-    stopRecording: fe,
+    stopRecording: ge,
     saveAudioFile: ce,
@@ -753,0 +753,0 @@ clearCanvas: X,

package.json

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

README.md

@@ -1,2 +0,2 @@
-# react-voice-visualizer  ([Demo App](https://react-voice-visualizer.vercel.app/))
+# react-voice-visualizer [Demo App](https://react-voice-visualizer.vercel.app/)
 
@@ -241,2 +241,6 @@ ## Overview
 
-This library was created by [Yurii Zarytskyi](https://github.com/YZarytskyi).
+This library was created by [Yurii Zarytskyi](https://github.com/YZarytskyi) 
+
+  <a href="https://www.linkedin.com/in/yurii-zarytskyi/" rel="nofollow noreferrer">
+    <img src="https://i.stack.imgur.com/gVE0j.png" alt="linkedIn"> LinkedIn
+  </a>

No alert changes

Improved metrics

Total package byte prevSize

105573

0.2%

Number of lines in readme file

246

1.65%

No dependency changes