react-audio-voice-recorder - npm Package Compare versions

Comparing version 0.0.15 to 1.0.0

dist/react-audio-voice-recorder.es.js

 (function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode(".audio-recorder{background-color:#ebebeb;box-shadow:0 2px 5px #bebebe;border-radius:20px;box-sizing:border-box;width:40px;display:flex;align-items:center;padding:12px;transition:all .2s ease-in}.audio-recorder-mic{cursor:pointer;height:16px;color:#000}.audio-recorder-timer,.audio-recorder-status{margin-left:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;font-weight:400;line-height:1}.audio-recorder-status{margin-left:15px;display:flex;align-items:baseline;flex-grow:1;animation-name:fading-ar-status;animation-duration:2s;animation-iteration-count:infinite}.audio-recorder-status-dot{background-color:#d00;border-radius:50%;height:10px;width:9px;margin-right:5px}.audio-recorder-options{height:16px;margin-left:10px;cursor:pointer}.recording{border-radius:12px;width:300px;transition:all .2s ease-out}.display-none{display:none}@keyframes fading-ar-status{0%{opacity:1}50%{opacity:0}to{opacity:1}}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import i, { useState as N, useCallback as T, useEffect as l } from "react";
+import N, { useState as u, useCallback as s, useEffect as l } from "react";
 const A = () => {
-  const [w, t] = N(!1), [M, u] = N(!1), [o, a] = N(0), [I, D] = N(), [g, c] = N(), [z, r] = N(), d = () => {
+  const [w, e] = u(!1), [M, t] = u(!1), [o, a] = u(0), [I, D] = u(), [i, c] = u(), [z, r] = u(), d = () => {
     const L = setInterval(() => {
-      a((e) => e + 1);
+      a((g) => g + 1);
     }, 1e3);
     c(L);
   }, j = () => {
-    g != null && clearInterval(g), c(void 0);
+    i != null && clearInterval(i), c(void 0);
   };
   return {
-    startRecording: T(() => {
-      g == null && navigator.mediaDevices.getUserMedia({ audio: !0 }).then((L) => {
-        t(!0);
-        const e = new MediaRecorder(L);
-        D(e), e.start(), d(), e.addEventListener("dataavailable", (s) => {
-          r(s.data);
+    startRecording: s(() => {
+      i == null && navigator.mediaDevices.getUserMedia({ audio: !0 }).then((L) => {
+        e(!0);
+        const g = new MediaRecorder(L);
+        D(g), g.start(), d(), g.addEventListener("dataavailable", (T) => {
+          r(T.data);
         });
       }).catch((L) => console.log(L));
-    }, [g]),
+    }, [i]),
     stopRecording: () => {
-      I == null || I.stop(), j(), D(null), a(0), t(!1), u(!1);
+      I == null || I.stop(), j(), D(null), a(0), e(!1), t(!1);
     },
     togglePauseResume: () => {
-      M ? (u(!1), I == null || I.resume(), d()) : (u(!0), j(), I == null || I.pause());
+      M ? (t(!1), I == null || I.resume(), d()) : (t(!0), j(), I == null || I.pause());
     },
@@ -36,8 +36,8 @@ recordingBlob: z,
   onRecordingComplete: w,
-  recorderControls: t,
+  recorderControls: e,
   classes: M
 }) => {
-  var j, n, y, C, L, e;
+  var j, n, y, C, L, g;
   const {
-    startRecording: u,
+    startRecording: t,
     stopRecording: o,
@@ -47,34 +47,34 @@ togglePauseResume: a,
     isRecording: D,
-    isPaused: g,
+    isPaused: i,
     recordingTime: c
-  } = t != null ? t : A(), [z, r] = N(!1), d = (s = !0) => {
-    r(s), o();
+  } = e != null ? e : A(), [z, r] = u(!1), d = (T = !0) => {
+    r(T), o();
   };
   return l(() => {
-    z && I != null && w != null && w(I);
-  }, [I]), /* @__PURE__ */ i.createElement("div", {
+    (z || e) && I != null && w != null && w(I);
+  }, [I]), /* @__PURE__ */ N.createElement("div", {
     className: `audio-recorder ${D ? "recording" : ""} ${(j = M == null ? void 0 : M.AudioRecorderClass) != null ? j : ""}`,
     "data-testid": "audio_recorder"
-  }, /* @__PURE__ */ i.createElement("img", {
+  }, /* @__PURE__ */ N.createElement("img", {
     src: D ? E : S,
     className: `audio-recorder-mic ${(n = M == null ? void 0 : M.AudioRecorderStartSaveClass) != null ? n : ""}`,
-    onClick: D ? () => d() : u,
+    onClick: D ? () => d() : t,
     "data-testid": "ar_mic",
     title: D ? "Save recording" : "Start recording"
-  }), /* @__PURE__ */ i.createElement("span", {
+  }), /* @__PURE__ */ N.createElement("span", {
     className: `audio-recorder-timer ${D ? "" : "display-none"} ${(y = M == null ? void 0 : M.AudioRecorderTimerClass) != null ? y : ""}`,
     "data-testid": "ar_timer"
-  }, Math.floor(c / 60), ":", String(c % 60).padStart(2, "0")), /* @__PURE__ */ i.createElement("span", {
+  }, Math.floor(c / 60), ":", String(c % 60).padStart(2, "0")), /* @__PURE__ */ N.createElement("span", {
     className: `audio-recorder-status ${D ? "" : "display-none"} ${(C = M == null ? void 0 : M.AudioRecorderStatusClass) != null ? C : ""}`
-  }, /* @__PURE__ */ i.createElement("span", {
+  }, /* @__PURE__ */ N.createElement("span", {
     className: "audio-recorder-status-dot"
-  }), "Recording"), /* @__PURE__ */ i.createElement("img", {
-    src: g ? Q : m,
+  }), "Recording"), /* @__PURE__ */ N.createElement("img", {
+    src: i ? Q : m,
     className: `audio-recorder-options ${D ? "" : "display-none"} ${(L = M == null ? void 0 : M.AudioRecorderPauseResumeClass) != null ? L : ""}`,
     onClick: a,
-    title: g ? "Resume recording" : "Pause recording",
+    title: i ? "Resume recording" : "Pause recording",
     "data-testid": "ar_pause"
-  }), /* @__PURE__ */ i.createElement("img", {
+  }), /* @__PURE__ */ N.createElement("img", {
     src: Y,
-    className: `audio-recorder-options ${D ? "" : "display-none"} ${(e = M == null ? void 0 : M.AudioRecorderDiscardClass) != null ? e : ""}`,
+    className: `audio-recorder-options ${D ? "" : "display-none"} ${(g = M == null ? void 0 : M.AudioRecorderDiscardClass) != null ? g : ""}`,
     onClick: () => d(!1),
@@ -81,0 +81,0 @@ title: "Discard Recording",

dist/react-audio-voice-recorder.umd.js

 (function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode(".audio-recorder{background-color:#ebebeb;box-shadow:0 2px 5px #bebebe;border-radius:20px;box-sizing:border-box;width:40px;display:flex;align-items:center;padding:12px;transition:all .2s ease-in}.audio-recorder-mic{cursor:pointer;height:16px;color:#000}.audio-recorder-timer,.audio-recorder-status{margin-left:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;font-weight:400;line-height:1}.audio-recorder-status{margin-left:15px;display:flex;align-items:baseline;flex-grow:1;animation-name:fading-ar-status;animation-duration:2s;animation-iteration-count:infinite}.audio-recorder-status-dot{background-color:#d00;border-radius:50%;height:10px;width:9px;margin-right:5px}.audio-recorder-options{height:16px;margin-left:10px;cursor:pointer}.recording{border-radius:12px;width:300px;transition:all .2s ease-out}.display-none{display:none}@keyframes fading-ar-status{0%{opacity:1}50%{opacity:0}to{opacity:1}}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-(function(I,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(I=typeof globalThis<"u"?globalThis:I||self,e(I.AudioRecorder={},I.React))})(this,function(I,e){"use strict";const g=(u=>u&&typeof u=="object"&&"default"in u?u:{default:u})(e),C=()=>{const[u,N]=e.useState(!1),[M,c]=e.useState(!1),[w,n]=e.useState(0),[i,t]=e.useState(),[d,o]=e.useState(),[r,z]=e.useState(),a=()=>{const D=setInterval(()=>{n(L=>L+1)},1e3);o(D)},j=()=>{d!=null&&clearInterval(d),o(void 0)};return{startRecording:e.useCallback(()=>{d==null&&navigator.mediaDevices.getUserMedia({audio:!0}).then(D=>{N(!0);const L=new MediaRecorder(D);t(L),L.start(),a(),L.addEventListener("dataavailable",T=>{z(T.data)})}).catch(D=>console.log(D))},[d]),stopRecording:()=>{i==null||i.stop(),j(),t(null),n(0),N(!1),c(!1)},togglePauseResume:()=>{M?(c(!1),i==null||i.resume(),a()):(c(!0),j(),i==null||i.pause())},recordingBlob:r,isRecording:u,isPaused:M,recordingTime:w}},S="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTIzNSwzMDIuMjk2YzQ3LjE3NywwLDg1LjQyMy0zOC4yNDUsODUuNDIzLTg1LjQyM1Y4NS40MjNDMzIwLjQyMywzOC4yNDUsMjgyLjE3NywwLDIzNSwwcy04NS40MjMsMzguMjQ1LTg1LjQyMyw4NS40MjMNCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+DQoJCTxwYXRoIGQ9Ik0zNTAuNDIzLDEzNi4xNDh2MzBoMTV2NTAuNzI2YzAsNzEuOTE1LTU4LjUwOCwxMzAuNDIzLTEzMC40MjMsMTMwLjQyM3MtMTMwLjQyMy01OC41MDctMTMwLjQyMy0xMzAuNDIzdi01MC43MjZoMTV2LTMwDQoJCQloLTQ1djgwLjcyNkM3NC41NzcsMzAwLjI3MywxMzguNTUxLDM2OSwyMjAsMzc2LjU4OVY0NDBoLTkwLjQ0NHYzMGgyMTAuODg5di0zMEgyNTB2LTYzLjQxMQ0KCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPg0KCTwvZz4NCjwvc3ZnPg0K",A="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTcuOTkxLDQwLjk3NmMwLDMuNjYyLTIuOTY5LDYuNjMxLTYuNjMxLDYuNjMxbDAsMGMtMy42NjIsMC02LjYzMS0yLjk2OS02LjYzMS02LjYzMVY2LjYzMUM0LjcyOSwyLjk2OSw3LjY5OCwwLDExLjM2LDANCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+DQoJCTxwYXRoIGQ9Ik00Mi44NzcsNDAuOTc2YzAsMy42NjItMi45NjksNi42MzEtNi42MzEsNi42MzFsMCwwYy0zLjY2MiwwLTYuNjMxLTIuOTY5LTYuNjMxLTYuNjMxVjYuNjMxDQoJCQlDMjkuNjE2LDIuOTY5LDMyLjU4NSwwLDM2LjI0NiwwbDAsMGMzLjY2MiwwLDYuNjMxLDIuOTY5LDYuNjMxLDYuNjMxVjQwLjk3NnoiLz4NCgk8L2c+DQo8L3N2Zz4NCg==",m="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0DQoJCQkJYzAsMjcuNTQsMTIuNjgsNDMuOTgsMzMuMTU2LDQzLjk4YzEwLjYzMiwwLDIzLjItNC42LDM1LjkwNC0xMy4zMDhsMjc0LjYwOC0xODcuOTA0YzE3LjY2LTEyLjEwNCwyNy40NC0yOC4zOTIsMjcuNDQtNDUuODg0DQoJCQkJQzQzMi42MzIsMjI5LjU3Miw0MjIuOTY0LDIxMy4yODgsNDA1LjI4NCwyMDEuMTg4eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9zdmc+DQo=",Q="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNy44NSAzLjE1bC0yLjk5LTNBLjUwOC41MDggMCAwIDAgMTQuNSAwSDEuNEExLjQxNyAxLjQxNyAwIDAgMCAwIDEuNDN2MTUuMTRBMS40MTcgMS40MTcgMCAwIDAgMS40IDE4aDE1LjJhMS40MTcgMS40MTcgMCAwIDAgMS40LTEuNDNWMy41YS40Ny40NyAwIDAgMC0uMTUtLjM1ek0yIDVWM2ExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xem03IDExYTQgNCAwIDEgMSA0LTQgNCA0IDAgMCAxLTQgNHoiLz4NCjwvc3ZnPg0K",E="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQxLjM0NiwwSDUuMzg4QzIuNDE3LDAsMCwyLjQxNywwLDUuMzg4djM1Ljk1OGMwLDIuOTcxLDIuNDE3LDUuMzg4LDUuMzg4LDUuMzg4aDM1Ljk1OGMyLjk3MSwwLDUuMzg4LTIuNDE3LDUuMzg4LTUuMzg4DQoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==",b="",Y=({onRecordingComplete:u,recorderControls:N,classes:M})=>{var j,s,y,l,D,L;const{startRecording:c,stopRecording:w,togglePauseResume:n,recordingBlob:i,isRecording:t,isPaused:d,recordingTime:o}=N!=null?N:C(),[r,z]=e.useState(!1),a=(T=!0)=>{z(T),w()};return e.useEffect(()=>{r&&i!=null&&u!=null&&u(i)},[i]),g.default.createElement("div",{className:`audio-recorder ${t?"recording":""} ${(j=M==null?void 0:M.AudioRecorderClass)!=null?j:""}`,"data-testid":"audio_recorder"},g.default.createElement("img",{src:t?Q:S,className:`audio-recorder-mic ${(s=M==null?void 0:M.AudioRecorderStartSaveClass)!=null?s:""}`,onClick:t?()=>a():c,"data-testid":"ar_mic",title:t?"Save recording":"Start recording"}),g.default.createElement("span",{className:`audio-recorder-timer ${t?"":"display-none"} ${(y=M==null?void 0:M.AudioRecorderTimerClass)!=null?y:""}`,"data-testid":"ar_timer"},Math.floor(o/60),":",String(o%60).padStart(2,"0")),g.default.createElement("span",{className:`audio-recorder-status ${t?"":"display-none"} ${(l=M==null?void 0:M.AudioRecorderStatusClass)!=null?l:""}`},g.default.createElement("span",{className:"audio-recorder-status-dot"}),"Recording"),g.default.createElement("img",{src:d?m:A,className:`audio-recorder-options ${t?"":"display-none"} ${(D=M==null?void 0:M.AudioRecorderPauseResumeClass)!=null?D:""}`,onClick:n,title:d?"Resume recording":"Pause recording","data-testid":"ar_pause"}),g.default.createElement("img",{src:E,className:`audio-recorder-options ${t?"":"display-none"} ${(L=M==null?void 0:M.AudioRecorderDiscardClass)!=null?L:""}`,onClick:()=>a(!1),title:"Discard Recording","data-testid":"ar_cancel"}))};I.AudioRecorder=Y,I.useAudioRecorder=C,Object.defineProperties(I,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(I,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(I=typeof globalThis<"u"?globalThis:I||self,e(I.AudioRecorder={},I.React))})(this,function(I,e){"use strict";const g=(u=>u&&typeof u=="object"&&"default"in u?u:{default:u})(e),C=()=>{const[u,d]=e.useState(!1),[M,c]=e.useState(!1),[n,w]=e.useState(0),[i,t]=e.useState(),[N,o]=e.useState(),[z,r]=e.useState(),a=()=>{const D=setInterval(()=>{w(L=>L+1)},1e3);o(D)},j=()=>{N!=null&&clearInterval(N),o(void 0)};return{startRecording:e.useCallback(()=>{N==null&&navigator.mediaDevices.getUserMedia({audio:!0}).then(D=>{d(!0);const L=new MediaRecorder(D);t(L),L.start(),a(),L.addEventListener("dataavailable",T=>{r(T.data)})}).catch(D=>console.log(D))},[N]),stopRecording:()=>{i==null||i.stop(),j(),t(null),w(0),d(!1),c(!1)},togglePauseResume:()=>{M?(c(!1),i==null||i.resume(),a()):(c(!0),j(),i==null||i.pause())},recordingBlob:z,isRecording:u,isPaused:M,recordingTime:n}},S="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3MCA0NzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3MCA0NzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTIzNSwzMDIuMjk2YzQ3LjE3NywwLDg1LjQyMy0zOC4yNDUsODUuNDIzLTg1LjQyM1Y4NS40MjNDMzIwLjQyMywzOC4yNDUsMjgyLjE3NywwLDIzNSwwcy04NS40MjMsMzguMjQ1LTg1LjQyMyw4NS40MjMNCgkJCXYxMzEuNDUxQzE0OS41NzcsMjY0LjA1MSwxODcuODIzLDMwMi4yOTYsMjM1LDMwMi4yOTZ6Ii8+DQoJCTxwYXRoIGQ9Ik0zNTAuNDIzLDEzNi4xNDh2MzBoMTV2NTAuNzI2YzAsNzEuOTE1LTU4LjUwOCwxMzAuNDIzLTEzMC40MjMsMTMwLjQyM3MtMTMwLjQyMy01OC41MDctMTMwLjQyMy0xMzAuNDIzdi01MC43MjZoMTV2LTMwDQoJCQloLTQ1djgwLjcyNkM3NC41NzcsMzAwLjI3MywxMzguNTUxLDM2OSwyMjAsMzc2LjU4OVY0NDBoLTkwLjQ0NHYzMGgyMTAuODg5di0zMEgyNTB2LTYzLjQxMQ0KCQkJYzgxLjQ0OS03LjU4OSwxNDUuNDIzLTc2LjMxNywxNDUuNDIzLTE1OS43MTZ2LTgwLjcyNkgzNTAuNDIzeiIvPg0KCTwvZz4NCjwvc3ZnPg0K",A="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDcuNjA3IDQ3LjYwNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDcuNjA3IDQ3LjYwNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTcuOTkxLDQwLjk3NmMwLDMuNjYyLTIuOTY5LDYuNjMxLTYuNjMxLDYuNjMxbDAsMGMtMy42NjIsMC02LjYzMS0yLjk2OS02LjYzMS02LjYzMVY2LjYzMUM0LjcyOSwyLjk2OSw3LjY5OCwwLDExLjM2LDANCgkJCWwwLDBjMy42NjIsMCw2LjYzMSwyLjk2OSw2LjYzMSw2LjYzMVY0MC45NzZ6Ii8+DQoJCTxwYXRoIGQ9Ik00Mi44NzcsNDAuOTc2YzAsMy42NjItMi45NjksNi42MzEtNi42MzEsNi42MzFsMCwwYy0zLjY2MiwwLTYuNjMxLTIuOTY5LTYuNjMxLTYuNjMxVjYuNjMxDQoJCQlDMjkuNjE2LDIuOTY5LDMyLjU4NSwwLDM2LjI0NiwwbDAsMGMzLjY2MiwwLDYuNjMxLDIuOTY5LDYuNjMxLDYuNjMxVjQwLjk3NnoiLz4NCgk8L2c+DQo8L3N2Zz4NCg==",m="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ5NC4xNDggNDk0LjE0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk0LjE0OCA0OTQuMTQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQwNS4yODQsMjAxLjE4OEwxMzAuODA0LDEzLjI4QzExOC4xMjgsNC41OTYsMTA1LjM1NiwwLDk0Ljc0LDBDNzQuMjE2LDAsNjEuNTIsMTYuNDcyLDYxLjUyLDQ0LjA0NHY0MDYuMTI0DQoJCQkJYzAsMjcuNTQsMTIuNjgsNDMuOTgsMzMuMTU2LDQzLjk4YzEwLjYzMiwwLDIzLjItNC42LDM1LjkwNC0xMy4zMDhsMjc0LjYwOC0xODcuOTA0YzE3LjY2LTEyLjEwNCwyNy40NC0yOC4zOTIsMjcuNDQtNDUuODg0DQoJCQkJQzQzMi42MzIsMjI5LjU3Miw0MjIuOTY0LDIxMy4yODgsNDA1LjI4NCwyMDEuMTg4eiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9zdmc+DQo=",Q="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNy44NSAzLjE1bC0yLjk5LTNBLjUwOC41MDggMCAwIDAgMTQuNSAwSDEuNEExLjQxNyAxLjQxNyAwIDAgMCAwIDEuNDN2MTUuMTRBMS40MTcgMS40MTcgMCAwIDAgMS40IDE4aDE1LjJhMS40MTcgMS40MTcgMCAwIDAgMS40LTEuNDNWMy41YS40Ny40NyAwIDAgMC0uMTUtLjM1ek0yIDVWM2ExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xem03IDExYTQgNCAwIDEgMSA0LTQgNCA0IDAgMCAxLTQgNHoiLz4NCjwvc3ZnPg0K",E="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuNzM0IDQ2LjczNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYuNzM0IDQ2LjczNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQxLjM0NiwwSDUuMzg4QzIuNDE3LDAsMCwyLjQxNywwLDUuMzg4djM1Ljk1OGMwLDIuOTcxLDIuNDE3LDUuMzg4LDUuMzg4LDUuMzg4aDM1Ljk1OGMyLjk3MSwwLDUuMzg4LTIuNDE3LDUuMzg4LTUuMzg4DQoJCVY1LjM4OEM0Ni43MzMsMi40MTcsNDQuMzE2LDAsNDEuMzQ2LDB6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==",b="",Y=({onRecordingComplete:u,recorderControls:d,classes:M})=>{var j,s,y,l,D,L;const{startRecording:c,stopRecording:n,togglePauseResume:w,recordingBlob:i,isRecording:t,isPaused:N,recordingTime:o}=d!=null?d:C(),[z,r]=e.useState(!1),a=(T=!0)=>{r(T),n()};return e.useEffect(()=>{(z||d)&&i!=null&&u!=null&&u(i)},[i]),g.default.createElement("div",{className:`audio-recorder ${t?"recording":""} ${(j=M==null?void 0:M.AudioRecorderClass)!=null?j:""}`,"data-testid":"audio_recorder"},g.default.createElement("img",{src:t?Q:S,className:`audio-recorder-mic ${(s=M==null?void 0:M.AudioRecorderStartSaveClass)!=null?s:""}`,onClick:t?()=>a():c,"data-testid":"ar_mic",title:t?"Save recording":"Start recording"}),g.default.createElement("span",{className:`audio-recorder-timer ${t?"":"display-none"} ${(y=M==null?void 0:M.AudioRecorderTimerClass)!=null?y:""}`,"data-testid":"ar_timer"},Math.floor(o/60),":",String(o%60).padStart(2,"0")),g.default.createElement("span",{className:`audio-recorder-status ${t?"":"display-none"} ${(l=M==null?void 0:M.AudioRecorderStatusClass)!=null?l:""}`},g.default.createElement("span",{className:"audio-recorder-status-dot"}),"Recording"),g.default.createElement("img",{src:N?m:A,className:`audio-recorder-options ${t?"":"display-none"} ${(D=M==null?void 0:M.AudioRecorderPauseResumeClass)!=null?D:""}`,onClick:w,title:N?"Resume recording":"Pause recording","data-testid":"ar_pause"}),g.default.createElement("img",{src:E,className:`audio-recorder-options ${t?"":"display-none"} ${(L=M==null?void 0:M.AudioRecorderDiscardClass)!=null?L:""}`,onClick:()=>a(!1),title:"Discard Recording","data-testid":"ar_cancel"}))};I.AudioRecorder=Y,I.useAudioRecorder=C,Object.defineProperties(I,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "react-audio-voice-recorder",
   "private": false,
-  "version": "0.0.15",
+  "version": "1.0.0",
   "license": "MIT",
@@ -20,3 +20,5 @@ "author": "",
     "voice recorder",
-    "recorder"
+    "recorder",
+    "getUserMedia",
+    "mediaDevices"
   ],
@@ -23,0 +25,0 @@ "files": [

README.md

@@ -35,2 +35,5 @@
 ```
+
+The component also takes a `classes` as a prop, allowing you to modify the styles for the entire component or specific portions of it.
+
 ---
@@ -90,3 +93,3 @@ ### **useAudioRecorder** hook
 
-#### Sample usage
+#### Sample usage ([Working example](https://stackblitz.com/edit/react-ts-ryj6jz?file=App.tsx))
 
@@ -93,0 +96,0 @@ ```js

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27331

increased by1%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

118

increased by2.61%

No dependency changes