react-peer-chat 0.8.0 → 0.8.2

package/LICENSE

@@ -1,9 +1,9 @@
 MIT License
 
-Copyright (c) 2024 Sahil Aggawal, <aggarwalsahil2004@gmail.com>
+Copyright (c) Sahil Aggawal, <aggarwalsahil2004@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -46,7 +46,6 @@ The default export of `react-peer-chat` is the `<Chat>` component, which offers
 ```jsx
 import React from "react";
 import Chat, { clearChat } from "react-peer-chat";
-import "react-peer-chat/styles.css";
 
 export default function App() {
   return (
@@ -64,7 +63,6 @@ export default function App() {
 ```jsx
 import React from "react";
 import Chat, { clearChat } from "react-peer-chat";
-import "react-peer-chat/styles.css";
 
 export default function App() {
   return (
@@ -88,7 +86,6 @@ Use the props provided by the `<Chat>` component for customization.
 ```jsx
 import React from "react";
 import Chat from "react-peer-chat";
-import "react-peer-chat/styles.css";
 
 export default function App() {
   return (
@@ -115,7 +112,6 @@ Use Function as Children (FaC) to fully customize the `<Chat>` component.
 ```jsx
 import React from 'react'
 import Chat from 'react-peer-chat'
-// import 'react-peer-chat/styles.css' (No need to import CSS when using custom component)
 
 export default function App() {
     return <Chat
@@ -141,7 +137,6 @@ You can also provide custom ICE servers to avoid connectivity issues if the free
 ```jsx
 import React from "react";
 import Chat from "react-peer-chat";
-import "react-peer-chat/styles.css";
 
 export default function App() {
   return (
@@ -175,7 +170,6 @@ The `useChat` hook is ideal when you want to completely redesign the Chat UI or
 import React, { useEffect, useRef, useState } from "react";
 import { clearChat, useChat } from "react-peer-chat";
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "react-peer-chat/icons";
-import "react-peer-chat/styles.css"; // (No need to import CSS when using custom styles)
 
 function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children, ...hookProps }) {
   const { peerId, audioStreamRef, ...childrenOptions } = useChat({
@@ -261,10 +255,18 @@ function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, pro
               </dialog>
             </div>
           )}
-          {audio && <button>{audioEnabled ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)} /> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)} />}</button>}
+          {audio && (
+            <button>
+              {audioEnabled ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)} /> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)} />}
+            </button>
+          )}
         </>
       )}
-      {audio && audioEnabled && <audio ref={audioStreamRef} autoPlay style={{ display: "none" }} />}
+      {audio && (
+        <button className="rpc-button" onClick={() => setAudio(!audioEnabled)}>
+          {audioEnabled ? <BsFillMicFill title="Turn mic off" /> : <BsFillMicMuteFill title="Turn mic on" />}
+        </button>
+      )}
     </div>
   );
 }

package/dist/chunks/chunk-4CBQRGQ3.js

@@ -0,0 +1,75 @@
+import React from 'react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function BiSolidMessageDetail(props) {
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z" })));
+}
+function BiSolidMessageX(props) {
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z" })));
+}
+function GrSend(props) {
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem", className: "rpc-invert" }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fill: "none",
+      stroke: "#000",
+      strokeWidth: 2,
+      d: "M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z"
+    }
+  )));
+}
+function BsFillMicFill(props) {
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }), /* @__PURE__ */ React.createElement("path", { d: "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" })));
+}
+function BsFillMicMuteFill(props) {
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React.createElement("path", { d: "M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z" }), /* @__PURE__ */ React.createElement("path", { d: "M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" })));
+}
+
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend, __async, __objRest, __spreadValues };

package/dist/icons.d.ts

@@ -1,7 +1,11 @@
-import React from "react";
-import { IconProps } from "./types.js";
-export declare function BiSolidMessageDetail(props: IconProps): React.JSX.Element;
-export declare function BiSolidMessageX(props: IconProps): React.JSX.Element;
-export declare function GrSend(props: IconProps): React.JSX.Element;
-export declare function BsFillMicFill(props: IconProps): React.JSX.Element;
-export declare function BsFillMicMuteFill(props: IconProps): React.JSX.Element;
+import React__default from 'react';
+import { IconProps } from './types.js';
+import 'peerjs';
+
+declare function BiSolidMessageDetail(props: IconProps): React__default.JSX.Element;
+declare function BiSolidMessageX(props: IconProps): React__default.JSX.Element;
+declare function GrSend(props: IconProps): React__default.JSX.Element;
+declare function BsFillMicFill(props: IconProps): React__default.JSX.Element;
+declare function BsFillMicMuteFill(props: IconProps): React__default.JSX.Element;
+
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend };

package/dist/icons.js

@@ -1,28 +1 @@
-import React from "react";
-export function BiSolidMessageDetail(props) {
-    return (React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
-        React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" },
-            React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z" }))));
-}
-export function BiSolidMessageX(props) {
-    return (React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
-        React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" },
-            React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z" }))));
-}
-export function GrSend(props) {
-    return (React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
-        React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem", className: "rpc-invert" },
-            React.createElement("path", { fill: "none", stroke: "#000", strokeWidth: 2, d: "M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z" }))));
-}
-export function BsFillMicFill(props) {
-    return (React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
-        React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
-            React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }),
-            React.createElement("path", { d: "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" }))));
-}
-export function BsFillMicMuteFill(props) {
-    return (React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
-        React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
-            React.createElement("path", { d: "M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z" }),
-            React.createElement("path", { d: "M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" }))));
-}
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './chunks/chunk-4CBQRGQ3.js';

package/dist/index.d.ts

@@ -1,6 +1,20 @@
-import React from "react";
-import { useChat } from "./hooks.js";
-import { clearChat } from "./storage.js";
-import { ChatProps } from "./types.js";
-export default function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React.JSX.Element;
-export { clearChat, useChat };
+import * as React from 'react';
+import React__default from 'react';
+import { useChatProps, RemotePeers, Message, ChatProps } from './types.js';
+import 'peerjs';
+
+declare function useChat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: useChatProps): {
+    peerId: string;
+    audioStreamRef: React.RefObject<HTMLMediaElement | null>;
+    remotePeers: RemotePeers;
+    messages: Message[];
+    sendMessage: (message: Message) => void;
+    audio: boolean;
+    setAudio: (value: boolean | ((old: boolean) => boolean)) => void;
+};
+
+declare const clearChat: () => void;
+
+declare function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React__default.JSX.Element;
+
+export { clearChat, Chat as default, useChat };

package/dist/index.js

@@ -1,78 +1,296 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { __spreadValues, __async, __objRest, BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill } from './chunks/chunk-4CBQRGQ3.js';
+import React, { useRef, useState, useEffect } from 'react';
+
+// src/connection.tsx
+function closeConnection(conn) {
+  conn.removeAllListeners();
+  conn.close();
+}
+
+// src/constants.ts
+var turnAccounts = [
+  { username: "70061a377b51f3a3d01c11e3", credential: "lHV4NYJ5Rfl5JNa9" },
+  { username: "13b19eb65bbf6e9f96d64b72", credential: "7R9P/+7y7Q516Etv" },
+  { username: "3469603f5cdc7ca4a1e891ae", credential: "/jMyLSDbbcgqpVQv" },
+  { username: "a7926f4dcc4a688d41f89752", credential: "ZYM8jFYeb8bQkL+N" },
+  { username: "0be25ab7f61d9d733ba94809", credential: "hiiSwWVch+ftt3SX" },
+  { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" }
+];
+var defaultConfig = {
+  iceServers: [
+    {
+      urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"]
+    }
+  ].concat(
+    turnAccounts.map((account) => __spreadValues({
+      urls: [
+        "turn:standard.relay.metered.ca:80",
+        "turn:standard.relay.metered.ca:80?transport=tcp",
+        "turn:standard.relay.metered.ca:443",
+        "turns:standard.relay.metered.ca:443?transport=tcp"
+      ]
+    }, account))
+  )
+};
+
+// src/storage.ts
+var removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
+var setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
+var getStorage = (key, fallbackValue, local = false) => {
+  let value = (local ? localStorage : sessionStorage).getItem(key);
+  try {
+    if (!value) throw new Error("Value doesn't exist");
+    value = JSON.parse(value);
+  } catch (e) {
+    if (fallbackValue !== void 0) {
+      value = fallbackValue;
+      setStorage(key, value, local);
+    } else {
+      value = null;
+      removeStorage(key, local);
+    }
+  }
+  return value;
+};
+var clearChat = () => {
+  removeStorage("rpc-remote-peer");
+  removeStorage("rpc-messages");
 };
-import React, { useEffect, useRef, useState } from "react";
-import { useChat } from "./hooks.js";
-import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "./icons.js";
-import { clearChat } from "./storage.js";
-export default function Chat(_a) {
-    var { text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children } = _a, hookProps = __rest(_a, ["text", "audio", "onMessageReceived", "dialogOptions", "props", "children"]);
-    const _b = useChat(Object.assign({ text,
-        audio, onMessageReceived: modifiedOnMessageReceived }, hookProps)), { peerId, audioStreamRef } = _b, childrenOptions = __rest(_b, ["peerId", "audioStreamRef"]);
-    const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
-    const containerRef = useRef(null);
-    const [dialog, setDialog] = useState(false);
-    const dialogRef = useRef(null);
-    const inputRef = useRef(null);
-    const [notification, setNotification] = useState(false);
-    function modifiedOnMessageReceived(message) {
-        var _a;
-        if (!((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.open))
-            setNotification(true);
-        onMessageReceived === null || onMessageReceived === void 0 ? void 0 : onMessageReceived(message);
+
+// src/utils.ts
+var addPrefix = (str) => `rpc-${str}`;
+
+// src/hooks.tsx
+function useChat({
+  name,
+  peerId,
+  remotePeerId = [],
+  peerOptions,
+  text = true,
+  recoverChat = false,
+  audio: allowed = true,
+  onError = () => alert("Browser not supported! Try some other browser."),
+  onMicError = () => alert("Microphone not accessible!"),
+  onMessageSent,
+  onMessageReceived
+}) {
+  const [audio, setAudio] = useAudio(allowed);
+  const audioStreamRef = useRef(null);
+  const connRef = useRef({});
+  const localStream = useRef(null);
+  const [messages, setMessages, addMessage] = useMessages();
+  const [peer, setPeer] = useState();
+  const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
+  peerId = addPrefix(peerId);
+  if (typeof remotePeerId === "string") remotePeerId = [remotePeerId];
+  const remotePeerIds = remotePeerId.map(addPrefix);
+  function handleConnection(conn) {
+    connRef.current[conn.peer] = conn;
+    conn.on("open", () => {
+      conn.on("data", ({ message, messages: messages2, remotePeerName, type }) => {
+        if (type === "message") receiveMessage(message);
+        else if (type === "init") {
+          setRemotePeers((prev) => {
+            prev[conn.peer] = remotePeerName || "Anonymous User";
+            return prev;
+          });
+          if (recoverChat) setMessages((old) => messages2.length > old.length ? messages2 : old);
+        }
+      });
+      conn.send({ type: "init", remotePeerName: name, messages });
+    });
+    conn.on("close", conn.removeAllListeners);
+  }
+  function handleError() {
+    setAudio(false);
+    onMicError();
+  }
+  function handleRemoteStream(remoteStream) {
+    if (audioStreamRef.current) audioStreamRef.current.srcObject = remoteStream;
+  }
+  function receiveMessage(message) {
+    addMessage(message);
+    onMessageReceived == null ? void 0 : onMessageReceived(message);
+  }
+  function sendMessage(message) {
+    addMessage(message);
+    Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
+    onMessageSent == null ? void 0 : onMessageSent(message);
+  }
+  useEffect(() => {
+    if (!text && !audio) {
+      setPeer(void 0);
+      return;
     }
-    useEffect(() => {
-        var _a, _b;
-        if (dialog)
-            (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.show();
-        else
-            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
-    }, [dialog]);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (container)
-            container.scrollTop = container.scrollHeight;
-    }, [dialog, remotePeers, messages]);
-    return (React.createElement("div", Object.assign({ className: "rpc-main rpc-font" }, props),
-        typeof children === "function" ? (children(childrenOptions)) : (React.createElement(React.Fragment, null,
-            text && (React.createElement("div", { className: "rpc-dialog-container" },
-                dialog ? (React.createElement(BiSolidMessageX, { title: "Close chat", onClick: () => setDialog(false) })) : (React.createElement("div", { className: "rpc-notification" },
-                    React.createElement(BiSolidMessageDetail, { title: "Open chat", onClick: () => {
-                            setNotification(false);
-                            setDialog(true);
-                        } }),
-                    notification && React.createElement("span", { className: "rpc-badge" }))),
-                React.createElement("dialog", { ref: dialogRef, className: `${dialog ? "rpc-dialog" : ""} rpc-position-${(dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.position) || "center"}`, style: dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.style },
-                    React.createElement("div", { className: "rpc-heading" }, "Chat"),
-                    React.createElement("hr", { className: "rpc-hr" }),
-                    React.createElement("div", null,
-                        React.createElement("div", { ref: containerRef, className: "rpc-message-container" }, messages.map(({ id, text }, i) => (React.createElement("div", { key: i },
-                            React.createElement("strong", null,
-                                id === peerId ? "You" : remotePeers[id],
-                                ": "),
-                            React.createElement("span", null, text))))),
-                        React.createElement("hr", { className: "rpc-hr" }),
-                        React.createElement("form", { className: "rpc-input-container", onSubmit: (e) => {
-                                var _a;
-                                e.preventDefault();
-                                const text = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
-                                if (text) {
-                                    inputRef.current.value = "";
-                                    sendMessage({ id: peerId, text });
-                                }
-                            } },
-                            React.createElement("input", { ref: inputRef, className: "rpc-input rpc-font", placeholder: "Enter a message" }),
-                            React.createElement("button", { type: "submit", className: "rpc-button" },
-                                React.createElement(GrSend, { title: "Send message" }))))))),
-            audio && React.createElement("button", null, audioEnabled ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) })))),
-        audio && audioEnabled && React.createElement("audio", { ref: audioStreamRef, autoPlay: true, style: { display: "none" } })));
+    (function() {
+      return __async(this, null, function* () {
+        const {
+          Peer,
+          util: {
+            supports: { audioVideo, data }
+          }
+        } = yield import('peerjs');
+        if (!data || !audioVideo) return onError();
+        const peer2 = new Peer(peerId, __spreadValues({ config: defaultConfig }, peerOptions));
+        setPeer(peer2);
+      });
+    })();
+  }, [audio]);
+  useEffect(() => {
+    if (!peer) return;
+    let calls = {};
+    peer.on("open", () => {
+      remotePeerIds.forEach((id) => {
+        if (text) handleConnection(peer.connect(id));
+      });
+      if (audio) {
+        const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+        try {
+          getUserMedia(
+            {
+              video: false,
+              audio: {
+                autoGainControl: false,
+                // Disable automatic gain control
+                noiseSuppression: true,
+                // Enable noise suppression
+                echoCancellation: true
+                // Enable echo cancellation
+              }
+            },
+            (stream) => {
+              localStream.current = stream;
+              remotePeerIds.forEach((id) => {
+                const call = peer.call(id, stream);
+                call.on("stream", handleRemoteStream);
+                call.on("close", call.removeAllListeners);
+                calls[id] = call;
+              });
+              peer.on("call", (call) => {
+                call.answer(stream);
+                call.on("stream", handleRemoteStream);
+                call.on("close", call.removeAllListeners);
+                calls[call.peer] = call;
+              });
+            },
+            handleError
+          );
+        } catch (e) {
+          handleError();
+        }
+      }
+    });
+    peer.on("connection", handleConnection);
+    return () => {
+      var _a;
+      (_a = localStream.current) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
+      Object.values(connRef.current).forEach(closeConnection);
+      connRef.current = {};
+      Object.values(calls).forEach(closeConnection);
+      peer.removeAllListeners();
+      peer.destroy();
+    };
+  }, [peer]);
+  return { peerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
+}
+function useMessages() {
+  const [messages, setMessages] = useStorage("rpc-messages", []);
+  const addMessage = (message) => setMessages((prev) => prev.concat(message));
+  return [messages, setMessages, addMessage];
+}
+function useStorage(key, initialValue, local = false) {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === "undefined") return initialValue;
+    return getStorage(key, initialValue, local);
+  });
+  const setValue = (value) => {
+    setStoredValue((old) => {
+      const updatedValue = typeof value === "function" ? value(old) : value;
+      setStorage(key, updatedValue, local);
+      return updatedValue;
+    });
+  };
+  return [storedValue, setValue];
+}
+function useAudio(allowed) {
+  const [audio, setAudio] = useStorage("rpc-audio", false, true);
+  const enabled = audio && allowed;
+  return [enabled, setAudio];
+}
+
+// src/styles.css
+function injectStyle(css) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (head.firstChild) {
+    head.insertBefore(style, head.firstChild);
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+injectStyle('.rpc-font {\n  font-family:\n    "Trebuchet MS",\n    "Lucida Sans Unicode",\n    "Lucida Grande",\n    "Lucida Sans",\n    Arial,\n    sans-serif;\n}\n.rpc-main {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n}\n.rpc-dialog-container {\n  position: relative;\n}\n.rpc-notification {\n  position: relative;\n}\n.rpc-notification .rpc-badge {\n  background-color: red;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 6px;\n  aspect-ratio: 1;\n  border-radius: 100%;\n}\n.rpc-dialog {\n  position: absolute;\n  background-color: black;\n  color: white;\n  padding: 0.4rem 0 0.25rem 0;\n  border-radius: 0.4rem;\n  font-size: small;\n}\n.rpc-position-left {\n  left: 0.6rem;\n  translate: -100%;\n}\n.rpc-position-center {\n  left: 0.5rem;\n  translate: -50%;\n}\n.rpc-position-right {\n  left: 0.3rem;\n}\n.rpc-hr {\n  margin: 0.25rem 0;\n  border-color: rgba(255, 255, 255, 0.7);\n}\n.rpc-message-container {\n  height: 7rem;\n  overflow-y: scroll;\n  padding-inline: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n.rpc-message-container::-webkit-scrollbar {\n  width: 2.5px;\n}\n.rpc-message-container::-webkit-scrollbar-track {\n  background: gray;\n}\n.rpc-message-container::-webkit-scrollbar-thumb {\n  background-color: white;\n}\n.rpc-heading {\n  text-align: center;\n  font-size: medium;\n  font-weight: bold;\n  padding-inline: 0.5rem;\n}\n.rpc-input-container {\n  display: flex;\n  width: 15rem;\n  max-width: 90vw;\n  column-gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n}\n.rpc-input {\n  color: white;\n  width: 100%;\n  background-color: black;\n  border: none;\n  outline: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: 0.25rem;\n  padding: 0.3rem 0.25rem;\n}\n.rpc-input::placeholder {\n  color: rgba(255, 255, 255, 0.7);\n}\n.rpc-input:focus {\n  outline: 2px solid white;\n}\n.rpc-button {\n  all: unset;\n  display: flex;\n}\n.rpc-icon-container {\n  display: flex;\n  align-items: center;\n}\n.rpc-invert {\n  filter: invert(100%);\n}\n');
+
+// src/index.tsx
+function Chat(_a) {
+  var _b = _a, { text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children } = _b, hookProps = __objRest(_b, ["text", "audio", "onMessageReceived", "dialogOptions", "props", "children"]);
+  const _a2 = useChat(__spreadValues({
+    text,
+    audio,
+    onMessageReceived: modifiedOnMessageReceived
+  }, hookProps)), { peerId, audioStreamRef } = _a2, childrenOptions = __objRest(_a2, ["peerId", "audioStreamRef"]);
+  const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
+  const containerRef = useRef(null);
+  const [dialog, setDialog] = useState(false);
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const [notification, setNotification] = useState(false);
+  function modifiedOnMessageReceived(message) {
+    var _a3;
+    if (!((_a3 = dialogRef.current) == null ? void 0 : _a3.open)) setNotification(true);
+    onMessageReceived == null ? void 0 : onMessageReceived(message);
+  }
+  useEffect(() => {
+    var _a3, _b2;
+    if (dialog) (_a3 = dialogRef.current) == null ? void 0 : _a3.show();
+    else (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
+  }, [dialog]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container) container.scrollTop = container.scrollHeight;
+  }, [dialog, remotePeers, messages]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: "rpc-main rpc-font" }, props), typeof children === "function" ? children(childrenOptions) : /* @__PURE__ */ React.createElement(React.Fragment, null, text && /* @__PURE__ */ React.createElement("div", { className: "rpc-dialog-container" }, dialog ? /* @__PURE__ */ React.createElement(BiSolidMessageX, { title: "Close chat", onClick: () => setDialog(false) }) : /* @__PURE__ */ React.createElement("div", { className: "rpc-notification" }, /* @__PURE__ */ React.createElement(
+    BiSolidMessageDetail,
+    {
+      title: "Open chat",
+      onClick: () => {
+        setNotification(false);
+        setDialog(true);
+      }
+    }
+  ), notification && /* @__PURE__ */ React.createElement("span", { className: "rpc-badge" })), /* @__PURE__ */ React.createElement("dialog", { ref: dialogRef, className: `${dialog ? "rpc-dialog" : ""} rpc-position-${(dialogOptions == null ? void 0 : dialogOptions.position) || "center"}`, style: dialogOptions == null ? void 0 : dialogOptions.style }, /* @__PURE__ */ React.createElement("div", { className: "rpc-heading" }, "Chat"), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: "rpc-message-container" }, messages.map(({ id, text: text2 }, i) => /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement("strong", null, id === peerId ? "You" : remotePeers[id], ": "), /* @__PURE__ */ React.createElement("span", null, text2)))), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement(
+    "form",
+    {
+      className: "rpc-input-container",
+      onSubmit: (e) => {
+        var _a3;
+        e.preventDefault();
+        const text2 = (_a3 = inputRef.current) == null ? void 0 : _a3.value;
+        if (text2) {
+          inputRef.current.value = "";
+          sendMessage({ id: peerId, text: text2 });
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement("input", { ref: inputRef, className: "rpc-input rpc-font", placeholder: "Enter a message" }),
+    /* @__PURE__ */ React.createElement("button", { type: "submit", className: "rpc-button" }, /* @__PURE__ */ React.createElement(GrSend, { title: "Send message" }))
+  )))), audio && /* @__PURE__ */ React.createElement("button", { className: "rpc-button", onClick: () => setAudio(!audioEnabled) }, audioEnabled ? /* @__PURE__ */ React.createElement(BsFillMicFill, { title: "Turn mic off" }) : /* @__PURE__ */ React.createElement(BsFillMicMuteFill, { title: "Turn mic on" }))), audio && audioEnabled && /* @__PURE__ */ React.createElement("audio", { ref: audioStreamRef, autoPlay: true, style: { display: "none" } }));
 }
-export { clearChat, useChat };
+
+export { clearChat, Chat as default, useChat };

package/dist/types.d.ts

@@ -1,13 +1,15 @@
-import { PeerOptions } from "peerjs";
-import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
-export type Message = {
+import { PeerOptions } from 'peerjs';
+export { PeerOptions } from 'peerjs';
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+
+type Message = {
     id: string;
     text: string;
 };
-export type MessageEvent = (message: Message) => void;
-export type { PeerOptions };
-export type RemotePeerId = string | string[];
-export type useChatProps = {
+type MessageEvent = (message: Message) => void;
+
+type RemotePeerId = string | string[];
+type useChatProps = {
     name?: string;
     peerId: string;
     remotePeerId?: RemotePeerId;
@@ -20,26 +22,28 @@ export type useChatProps = {
     onMessageSent?: MessageEvent;
     onMessageReceived?: MessageEvent;
 };
-export type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-export type RemotePeers = {
+type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+type RemotePeers = {
     [id: string]: string;
 };
-export type Children = (childrenOptions: ChildrenOptions) => ReactNode;
-export type ChildrenOptions = {
+type Children = (childrenOptions: ChildrenOptions) => ReactNode;
+type ChildrenOptions = {
     remotePeers?: RemotePeers;
     messages?: Message[];
     sendMessage?: (message: Message) => void;
     audio?: boolean;
     setAudio?: (audio: boolean) => void;
 };
-export type ChatProps = useChatProps & {
+type ChatProps = useChatProps & {
     dialogOptions?: DialogOptions;
     props?: DivProps;
     children?: Children;
 };
-export type DialogOptions = {
+type DialogOptions = {
     position?: DialogPosition;
     style?: CSSProperties;
 };
-export type DialogPosition = "left" | "center" | "right";
-export type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type DialogPosition = "left" | "center" | "right";
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export type { ChatProps, Children, ChildrenOptions, DialogOptions, DialogPosition, DivProps, IconProps, Message, MessageEvent, RemotePeerId, RemotePeers, useChatProps };

package/dist/types.js

@@ -1 +1 @@
-export {};
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
@@ -17,7 +17,6 @@
   "exports": {
     ".": "./dist/index.js",
     "./icons": "./dist/icons.js",
-    "./styles.css": "./dist/styles.css",
     "./types": "./dist/types.js"
   },
   "main": "dist/index.js",
@@ -26,7 +25,9 @@
     "peerjs": "^1.5.4"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0"
+    "@types/react": "^19.0.10",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -49,7 +50,8 @@
     "audio-chat"
   ],
   "scripts": {
-    "copy": "copy .\\src\\*.css dist",
-    "build": "pnpm i && tsc && pnpm copy"
+    "build": "pnpm i && pnpm run compile",
+    "compile": "tsup",
+    "dev": "tsup --watch"
   }
 }

package/dist/connection.d.ts

@@ -1,2 +0,0 @@
-import { DataConnection, MediaConnection } from "peerjs";
-export declare function closeConnection(conn: DataConnection | MediaConnection): void;

package/dist/connection.js

@@ -1,4 +0,0 @@
-export function closeConnection(conn) {
-    conn.removeAllListeners();
-    conn.close();
-}

package/dist/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const defaultConfig: {
-    iceServers: {
-        urls: string[];
-    }[];
-};

package/dist/constants.js

@@ -1,15 +0,0 @@
-const turnAccounts = [
-    { username: "70061a377b51f3a3d01c11e3", credential: "lHV4NYJ5Rfl5JNa9" },
-    { username: "13b19eb65bbf6e9f96d64b72", credential: "7R9P/+7y7Q516Etv" },
-    { username: "3469603f5cdc7ca4a1e891ae", credential: "/jMyLSDbbcgqpVQv" },
-    { username: "a7926f4dcc4a688d41f89752", credential: "ZYM8jFYeb8bQkL+N" },
-    { username: "0be25ab7f61d9d733ba94809", credential: "hiiSwWVch+ftt3SX" },
-    { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" },
-];
-export const defaultConfig = {
-    iceServers: [
-        {
-            urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"],
-        },
-    ].concat(turnAccounts.map((account) => (Object.assign({ urls: ["turn:standard.relay.metered.ca:80", "turn:standard.relay.metered.ca:80?transport=tcp", "turn:standard.relay.metered.ca:443", "turns:standard.relay.metered.ca:443?transport=tcp"] }, account)))),
-};

package/dist/hooks.d.ts

@@ -1,13 +0,0 @@
-import { Message, RemotePeers, useChatProps } from "./types.js";
-export declare function useChat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived }: useChatProps): {
-    peerId: string;
-    audioStreamRef: import("react").RefObject<HTMLMediaElement>;
-    remotePeers: RemotePeers;
-    messages: Message[];
-    sendMessage: (message: Message) => void;
-    audio: boolean;
-    setAudio: (value: boolean | ((old: boolean) => boolean)) => void;
-};
-export declare function useMessages(): readonly [Message[], (value: Message[] | ((old: Message[]) => Message[])) => void, (message: Message) => void];
-export declare function useStorage<Value>(key: string, initialValue: Value, local?: boolean): [Value, (value: Value | ((old: Value) => Value)) => void];
-export declare function useAudio(allowed: boolean): readonly [boolean, (value: boolean | ((old: boolean) => boolean)) => void];

package/dist/hooks.js

@@ -1,155 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { useEffect, useRef, useState } from "react";
-import { closeConnection } from "./connection.js";
-import { defaultConfig } from "./constants.js";
-import { getStorage, setStorage } from "./storage.js";
-import { addPrefix } from "./utils.js";
-export function useChat({ name, peerId, remotePeerId = [], peerOptions, text = true, recoverChat = false, audio: allowed = true, onError = () => alert("Browser not supported! Try some other browser."), onMicError = () => alert("Microphone not accessible!"), onMessageSent, onMessageReceived }) {
-    const [audio, setAudio] = useAudio(allowed);
-    const audioStreamRef = useRef(null);
-    const connRef = useRef({});
-    const localStream = useRef();
-    const [messages, setMessages, addMessage] = useMessages();
-    const [peer, setPeer] = useState();
-    const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
-    peerId = addPrefix(peerId);
-    if (typeof remotePeerId === "string")
-        remotePeerId = [remotePeerId];
-    const remotePeerIds = remotePeerId.map(addPrefix);
-    function handleConnection(conn) {
-        connRef.current[conn.peer] = conn;
-        conn.on("open", () => {
-            conn.on("data", ({ message, messages, remotePeerName, type }) => {
-                if (type === "message")
-                    receiveMessage(message);
-                else if (type === "init") {
-                    setRemotePeers((prev) => {
-                        prev[conn.peer] = remotePeerName || "Anonymous User";
-                        return prev;
-                    });
-                    if (recoverChat)
-                        setMessages((old) => (messages.length > old.length ? messages : old));
-                }
-            });
-            conn.send({ type: "init", remotePeerName: name, messages });
-        });
-        conn.on("close", conn.removeAllListeners);
-    }
-    function handleError() {
-        setAudio(false);
-        onMicError();
-    }
-    function handleRemoteStream(remoteStream) {
-        if (audioStreamRef.current)
-            audioStreamRef.current.srcObject = remoteStream;
-    }
-    function receiveMessage(message) {
-        addMessage(message);
-        onMessageReceived === null || onMessageReceived === void 0 ? void 0 : onMessageReceived(message);
-    }
-    function sendMessage(message) {
-        addMessage(message);
-        Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
-        onMessageSent === null || onMessageSent === void 0 ? void 0 : onMessageSent(message);
-    }
-    useEffect(() => {
-        if (!text && !audio) {
-            setPeer(undefined);
-            return;
-        }
-        (function () {
-            return __awaiter(this, void 0, void 0, function* () {
-                const { Peer, util: { supports: { audioVideo, data }, }, } = yield import("peerjs");
-                if (!data || !audioVideo)
-                    return onError();
-                const peer = new Peer(peerId, Object.assign({ config: defaultConfig }, peerOptions));
-                setPeer(peer);
-            });
-        })();
-    }, [audio]);
-    useEffect(() => {
-        if (!peer)
-            return;
-        let calls = {};
-        peer.on("open", () => {
-            remotePeerIds.forEach((id) => {
-                if (text)
-                    handleConnection(peer.connect(id));
-            });
-            if (audio) {
-                const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-                try {
-                    getUserMedia({
-                        video: false,
-                        audio: {
-                            autoGainControl: false,
-                            noiseSuppression: true,
-                            echoCancellation: true,
-                        },
-                    }, (stream) => {
-                        localStream.current = stream;
-                        remotePeerIds.forEach((id) => {
-                            const call = peer.call(id, stream);
-                            call.on("stream", handleRemoteStream);
-                            call.on("close", call.removeAllListeners);
-                            calls[id] = call;
-                        });
-                        peer.on("call", (call) => {
-                            call.answer(stream);
-                            call.on("stream", handleRemoteStream);
-                            call.on("close", call.removeAllListeners);
-                            calls[call.peer] = call;
-                        });
-                    }, handleError);
-                }
-                catch (_a) {
-                    handleError();
-                }
-            }
-        });
-        peer.on("connection", handleConnection);
-        return () => {
-            var _a;
-            (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
-            Object.values(connRef.current).forEach(closeConnection);
-            connRef.current = {};
-            Object.values(calls).forEach(closeConnection);
-            peer.removeAllListeners();
-            peer.destroy();
-        };
-    }, [peer]);
-    return { peerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
-}
-export function useMessages() {
-    const [messages, setMessages] = useStorage("rpc-messages", []);
-    const addMessage = (message) => setMessages((prev) => prev.concat(message));
-    return [messages, setMessages, addMessage];
-}
-export function useStorage(key, initialValue, local = false) {
-    const [storedValue, setStoredValue] = useState(() => {
-        if (typeof window === "undefined")
-            return initialValue;
-        return getStorage(key, initialValue, local);
-    });
-    const setValue = (value) => {
-        setStoredValue((old) => {
-            const updatedValue = typeof value === "function" ? value(old) : value;
-            setStorage(key, updatedValue, local);
-            return updatedValue;
-        });
-    };
-    return [storedValue, setValue];
-}
-export function useAudio(allowed) {
-    const [audio, setAudio] = useStorage("rpc-audio", false, true);
-    const enabled = audio || allowed;
-    return [enabled, setAudio];
-}

package/dist/storage.d.ts

@@ -1,4 +0,0 @@
-export declare const removeStorage: (key: string, local?: boolean) => void;
-export declare const setStorage: (key: string, value: any, local?: boolean) => void;
-export declare const getStorage: (key: string, fallbackValue?: any, local?: boolean) => any;
-export declare const clearChat: () => void;

package/dist/storage.js

@@ -1,25 +0,0 @@
-export const removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
-export const setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
-export const getStorage = (key, fallbackValue, local = false) => {
-    let value = (local ? localStorage : sessionStorage).getItem(key);
-    try {
-        if (!value)
-            throw new Error("Value doesn't exist");
-        value = JSON.parse(value);
-    }
-    catch (_a) {
-        if (fallbackValue !== undefined) {
-            value = fallbackValue;
-            setStorage(key, value, local);
-        }
-        else {
-            value = null;
-            removeStorage(key, local);
-        }
-    }
-    return value;
-};
-export const clearChat = () => {
-    removeStorage("rpc-remote-peer");
-    removeStorage("rpc-messages");
-};

package/dist/styles.css

@@ -1,121 +0,0 @@
-.rpc-font {
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-}
-
-.rpc-main {
-    display: flex;
-    align-items: center;
-    column-gap: 0.5rem;
-}
-
-.rpc-dialog-container {
-    position: relative;
-}
-
-.rpc-notification {
-    position: relative;
-}
-
-.rpc-notification .rpc-badge {
-    background-color: red;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 6px;
-    aspect-ratio: 1;
-    border-radius: 100%;
-}
-
-.rpc-dialog {
-    position: absolute;
-    background-color: black;
-    color: white;
-    padding: 0.4rem 0 0.25rem 0;
-    border-radius: 0.4rem;
-    font-size: small;
-}
-
-.rpc-position-left {
-    left: 0.6rem;
-    translate: -100%;
-}
-
-.rpc-position-center {
-    left: 0.5rem;
-    translate: -50%;
-}
-
-.rpc-position-right {
-    left: 0.3rem;
-}
-
-.rpc-hr {
-    margin: 0.25rem 0;
-    border-color: rgba(255, 255, 255, 0.7);
-}
-
-.rpc-message-container {
-    height: 7rem;
-    overflow-y: scroll;
-    padding-inline: 0.5rem;
-    margin-bottom: 0.25rem;
-}
-
-.rpc-message-container::-webkit-scrollbar {
-    width: 2.5px;
-}
-
-.rpc-message-container::-webkit-scrollbar-track {
-    background: gray;
-}
-
-.rpc-message-container::-webkit-scrollbar-thumb {
-    background-color: white;
-}
-
-.rpc-heading {
-    text-align: center;
-    font-size: medium;
-    font-weight: bold;
-    padding-inline: 0.5rem;
-}
-
-.rpc-input-container {
-    display: flex;
-    width: 15rem;
-    max-width: 90vw;
-    column-gap: 0.25rem;
-    padding: 0.25rem 0.5rem;
-}
-
-.rpc-input {
-    color: white;
-    width: 100%;
-    background-color: black;
-    border: none;
-    outline: 1px solid rgba(255, 255, 255, 0.8);
-    border-radius: 0.25rem;
-    padding: 0.3rem 0.25rem;
-}
-
-.rpc-input::placeholder {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.rpc-input:focus {
-    outline: 2px solid white;
-}
-
-.rpc-button {
-    all: unset;
-    display: flex;
-}
-
-.rpc-icon-container {
-    display: flex;
-    align-items: center;
-}
-
-.rpc-invert {
-    filter: invert(100%);
-}

package/dist/utils.d.ts

@@ -1 +0,0 @@
-export declare const addPrefix: (str: string) => string;

package/dist/utils.js

@@ -1 +0,0 @@
-export const addPrefix = (str) => `rpc-${str}`;