react-peer-chat 0.9.0 → 0.11.0

package/README.md

@@ -11,6 +11,7 @@ A simple-to-use React component for implementing peer-to-peer chatting, powered
 - Option to clear chat on command
 - Supports audio/voice chat with automatic mixing for multiple peers
 - Multiple peer connections. See [multi-peer usage](#multi-peer-usage)
+- Automatic reconnection handling for network interruptions
 - Fully customizable. See [usage with FaC](#full-customization)
 
 ## Installation
@@ -100,8 +101,9 @@ export default function App() {
         style: { padding: "4px" },
       }}
       props={{ title: "React Peer Chat Component" }}
-      onError={() => console.error("Browser not supported!")}
-      onMicError={() => console.error("Microphone not accessible!")}
+      onError={(error) => console.error("Fatal error:", error)}
+      onPeerError={(error) => console.error("Peer error:", error.type, error)}
+      onNetworkError={(error) => console.log("Reconnecting...")}
     />
   );
 }
@@ -120,8 +122,8 @@ export default function App() {
         name='John Doe'
         peerId='my-unique-id'
         remotePeerId='remote-unique-id'
-        onError={() => console.error('Browser not supported!')}
-        onMicError={() => console.error('Microphone not accessible!')}
+        onError={(error) => console.error('Fatal error:', error)}
+        onPeerError={(error) => console.error('Peer error:', error.type, error)}
     >
         {({ remotePeers, messages, sendMessage, audio, setAudio }) => (
             <YourCustomComponent>
@@ -293,19 +295,20 @@ export default function App() {
 
 Here is the full API for the `useChat` hook, these options can be passed as parameters to the hook:
 
-| Parameter           | Type                                          | Required | Default                                                         | Description                                                                                                                                     |
-| ------------------- | --------------------------------------------- | -------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`              | `string`                                      | No       | Anonymous User                                                  | Name of the peer which will be shown to the remote peer.                                                                                        |
-| `peerId`            | `string`                                      | Yes      | -                                                               | It is the unique id that is alloted to a peer. It uniquely identifies a peer from other peers.                                                  |
-| `remotePeerId`      | `string \| string[]`                          | No       | -                                                               | Unique id(s) of remote peer(s) to connect to. Read at mount and when `peerId` changes; changes to this prop alone won't create new connections. |
-| `text`              | `boolean`                                     | No       | `true`                                                          | Text chat will be enabled if this property is set to true.                                                                                      |
-| `recoverChat`       | `boolean`                                     | No       | `false`                                                         | Old chats will be recovered upon reconnecting with the same peer(s).                                                                            |
-| `audio`             | `boolean`                                     | No       | `true`                                                          | Voice chat will be enabled if this property is set to true. Audio from multiple peers is automatically mixed.                                   |
-| `peerOptions`       | [`PeerOptions`](#peeroptions)                 | No       | -                                                               | Options to customize peerjs Peer instance.                                                                                                      |
-| `onError`           | [`ErrorHandler`](#errorhandler)               | No       | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support `WebRTC`                                                                                     |
-| `onMicError`        | [`ErrorHandler`](#errorhandler)               | No       | `() => alert('Microphone not accessible!')`                     | Function to be executed when microphone is not accessible.                                                                                      |
-| `onMessageSent`     | [`MessageEventHandler`](#messageeventhandler) | No       | -                                                               | Function to be executed when a text message is sent to other peers.                                                                             |
-| `onMessageReceived` | [`MessageEventHandler`](#messageeventhandler) | No       | -                                                               | Function to be executed when a text message is received from other peers.                                                                       |
+| Parameter           | Type                                          | Required | Default         | Description                                                                                                                                     |
+| ------------------- | --------------------------------------------- | -------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`              | `string`                                      | No       | Anonymous User  | Name of the peer which will be shown to the remote peer.                                                                                        |
+| `peerId`            | `string`                                      | Yes      | -               | It is the unique id that is alloted to a peer. It uniquely identifies a peer from other peers.                                                  |
+| `remotePeerId`      | `string \| string[]`                          | No       | -               | Unique id(s) of remote peer(s) to connect to. Read at mount and when `peerId` changes; changes to this prop alone won't create new connections. |
+| `text`              | `boolean`                                     | No       | `true`          | Text chat will be enabled if this property is set to true.                                                                                      |
+| `recoverChat`       | `boolean`                                     | No       | `false`         | Old chats will be recovered upon reconnecting with the same peer(s).                                                                            |
+| `audio`             | `boolean`                                     | No       | `true`          | Voice chat will be enabled if this property is set to true. Audio from multiple peers is automatically mixed.                                   |
+| `peerOptions`       | [`PeerOptions`](#peeroptions)                 | No       | -               | Options to customize peerjs Peer instance.                                                                                                      |
+| `onError`           | [`ErrorHandler`](#errorhandler)               | No       | `console.error` | Function to be executed for fatal errors (browser not supported, microphone not accessible).                                                    |
+| `onPeerError`       | [`PeerErrorHandler`](#peererrorhandler)       | No       | `console.error` | Function to be executed for all peer runtime errors. The library automatically handles reconnection for network errors.                         |
+| `onNetworkError`    | [`PeerErrorHandler`](#peererrorhandler)       | No       | -               | Function to be executed for network/server errors (which trigger automatic reconnection). Useful for showing "reconnecting..." UI.              |
+| `onMessageSent`     | [`MessageEventHandler`](#messageeventhandler) | No       | -               | Function to be executed when a text message is sent to other peers.                                                                             |
+| `onMessageReceived` | [`MessageEventHandler`](#messageeventhandler) | No       | -               | Function to be executed when a text message is received from other peers.                                                                       |
 
 ### Chat Component
 
@@ -363,7 +366,15 @@ type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement
 ### ErrorHandler
 
 ```typescript
-type ErrorHandler = () => void;
+type ErrorHandler = (error: Error) => void;
+```
+
+### PeerErrorHandler
+
+```typescript
+import type { PeerError, PeerErrorType } from "peerjs";
+
+export type PeerErrorHandler = ErrorHandler<PeerError<`${PeerErrorType}`>>;
 ```
 
 ### MessageEventHandler
@@ -384,4 +395,4 @@ import type { PeerOptions } from "peerjs";
 
 ## License
 
-This project is licensed under the [MIT License](LICENSE).
+This project is licensed under the [MIT License](LICENSE)

package/dist/chunks/{chunk-N4TBKQIR.js → chunk-6JONVNJK.js}

@@ -1,4 +1,4 @@
-import { useChat } from './chunk-MBDO7IOK.js';
+import { useChat } from './chunk-FBLX5IM6.js';
 import { BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill } from './chunk-JJPIWKLG.js';
 import { __objRest, __spreadValues } from './chunk-LNEKYYG7.js';
 import React, { useRef, useState, useEffect } from 'react';
@@ -28,7 +28,7 @@ function Chat(_a) {
   const _a2 = useChat(__spreadValues({
     text,
     audio,
-    onMessageReceived: modifiedOnMessageReceived
+    onMessageReceived: receiveMessageHandler
   }, hookProps)), { peerId } = _a2, childrenOptions = __objRest(_a2, ["peerId"]);
   const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
   const containerRef = useRef(null);
@@ -36,7 +36,7 @@ function Chat(_a) {
   const dialogRef = useRef(null);
   const inputRef = useRef(null);
   const [notification, setNotification] = useState(false);
-  function modifiedOnMessageReceived(message) {
+  function receiveMessageHandler(message) {
     var _a3;
     if (!((_a3 = dialogRef.current) == null ? void 0 : _a3.open)) setNotification(true);
     onMessageReceived == null ? void 0 : onMessageReceived(message);
@@ -59,7 +59,7 @@ function Chat(_a) {
         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(
+  ), 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, name, text: text2 }, i) => /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement("strong", null, id === peerId ? "You" : name, ": "), /* @__PURE__ */ React.createElement("span", null, text2)))), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement(
     "form",
     {
       className: "rpc-input-container",

package/dist/chunks/{chunk-MBDO7IOK.js → chunk-FBLX5IM6.js}

@@ -56,8 +56,9 @@ function useChat({
   text = true,
   recoverChat = false,
   audio: allowed = true,
-  onError = () => alert("Browser not supported! Try some other browser."),
-  onMicError = () => alert("Microphone not accessible!"),
+  onError = console.error,
+  onPeerError = console.error,
+  onNetworkError,
   onMessageSent,
   onMessageReceived
 }) {
@@ -75,14 +76,29 @@ function useChat({
     return { completePeerId: addPrefix(peerId), completeRemotePeerIds: remotePeerIds.map(addPrefix) };
   }, [peerId]);
   function handleCall(call) {
-    const id = call.peer;
-    call.on("stream", (stream) => handleRemoteStream(id, stream));
+    const peerId2 = call.peer;
+    call.on("stream", () => {
+      callsRef.current[peerId2] = call;
+      if (!audioContextRef.current) audioContextRef.current = new AudioContext();
+      if (audioContextRef.current.state === "suspended") audioContextRef.current.resume();
+      if (!mixerRef.current) {
+        mixerRef.current = audioContextRef.current.createGain();
+        mixerRef.current.connect(audioContextRef.current.destination);
+      }
+      removePeerAudio(peerId2);
+      const audio2 = new Audio();
+      audio2.srcObject = call.remoteStream;
+      audio2.autoplay = true;
+      audio2.muted = false;
+      const source = audioContextRef.current.createMediaElementSource(audio2);
+      source.connect(mixerRef.current);
+      sourceNodesRef.current[peerId2] = source;
+    });
     call.on("close", () => {
       call.removeAllListeners();
-      removePeerAudio(id);
-      delete callsRef.current[id];
+      removePeerAudio(peerId2);
+      delete callsRef.current[peerId2];
     });
-    callsRef.current[id] = call;
   }
   function handleConnection(conn) {
     connRef.current[conn.peer] = conn;
@@ -98,20 +114,9 @@ function useChat({
     });
     conn.on("close", conn.removeAllListeners);
   }
-  function handleError() {
+  function handleMediaError() {
     setAudio(false);
-    onMicError();
-  }
-  function handleRemoteStream(peerId2, remoteStream) {
-    if (!audioContextRef.current) audioContextRef.current = new AudioContext();
-    if (!mixerRef.current) {
-      mixerRef.current = audioContextRef.current.createGain();
-      mixerRef.current.connect(audioContextRef.current.destination);
-    }
-    removePeerAudio(peerId2);
-    const source = audioContextRef.current.createMediaStreamSource(remoteStream);
-    source.connect(mixerRef.current);
-    sourceNodesRef.current[peerId2] = source;
+    onError(new Error("Microphone not accessible!"));
   }
   function receiveMessage(message) {
     addMessage(message);
@@ -123,9 +128,10 @@ function useChat({
     delete sourceNodesRef.current[peerId2];
   }
   function sendMessage(message) {
-    addMessage(message);
-    Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
-    onMessageSent == null ? void 0 : onMessageSent(message);
+    const event = { type: "message", message: __spreadProps(__spreadValues({}, message), { name }) };
+    addMessage(event.message);
+    Object.values(connRef.current).forEach((conn) => conn.send(event));
+    onMessageSent == null ? void 0 : onMessageSent(event.message);
   }
   useEffect(() => {
     if (!text && !audio) return;
@@ -136,9 +142,17 @@ function useChat({
           supports: { audioVideo, data }
         }
       }) => {
-        if (!data || !audioVideo) return onError();
+        if (!data || !audioVideo) return onError(new Error("Browser not supported! Try some other browser."));
         const peer2 = new Peer(completePeerId, __spreadValues({ config: defaultConfig }, peerOptions));
         peer2.on("connection", handleConnection);
+        peer2.on("disconnected", () => peer2.reconnect());
+        peer2.on("error", (error) => {
+          if (error.type === "network" || error.type === "server-error") {
+            setTimeout(() => peer2.reconnect(), 1e3);
+            onNetworkError == null ? void 0 : onNetworkError(error);
+          }
+          onPeerError(error);
+        });
         setPeer(peer2);
       }
     );
@@ -154,8 +168,9 @@ function useChat({
     if (!text || !peer) return;
     const handleOpen = () => completeRemotePeerIds.forEach((id) => handleConnection(peer.connect(id)));
     if (peer.open) handleOpen();
-    else peer.once("open", handleOpen);
+    peer.on("open", handleOpen);
     return () => {
+      peer.off("open", handleOpen);
       Object.values(connRef.current).forEach(closeConnection);
       connRef.current = {};
     };
@@ -163,33 +178,35 @@ function useChat({
   useEffect(() => {
     if (!audio || !peer) return;
     let localStream;
-    const setupAudio = () => navigator.mediaDevices.getUserMedia({
-      video: false,
-      audio: {
-        autoGainControl: false,
-        // Disable automatic gain control
-        noiseSuppression: true,
-        // Enable noise suppression
-        echoCancellation: true
-        // Enable echo cancellation
-      }
-    }).then((stream) => {
-      localStream = stream;
-      completeRemotePeerIds.forEach((id) => {
-        if (callsRef.current[id]) return;
-        const call = peer.call(id, stream);
-        handleCall(call);
-      });
-      peer.on("call", (call) => {
-        if (callsRef.current[call.peer]) return call.close();
-        call.answer(stream);
-        handleCall(call);
-      });
-    }).catch(handleError);
+    const setupAudio = () => {
+      if (!navigator.mediaDevices) return handleMediaError();
+      navigator.mediaDevices.getUserMedia({
+        video: false,
+        audio: {
+          autoGainControl: true,
+          noiseSuppression: true,
+          echoCancellation: true
+        }
+      }).then((stream) => {
+        localStream = stream;
+        completeRemotePeerIds.forEach((id) => {
+          if (callsRef.current[id]) return;
+          const call = peer.call(id, stream);
+          handleCall(call);
+        });
+        peer.on("call", (call) => {
+          if (callsRef.current[call.peer]) return call.close();
+          call.answer(stream);
+          handleCall(call);
+        });
+      }).catch(handleMediaError);
+    };
     if (peer.open) setupAudio();
-    else peer.once("open", setupAudio);
+    peer.on("open", setupAudio);
     return () => {
       var _a;
+      peer.off("open", setupAudio);
+      peer.off("call");
       localStream == null ? void 0 : localStream.getTracks().forEach((track) => track.stop());
       Object.values(callsRef.current).forEach(closeConnection);
       callsRef.current = {};

package/dist/components.js

@@ -1,5 +1,5 @@
-export { Chat as default } from './chunks/chunk-N4TBKQIR.js';
-import './chunks/chunk-MBDO7IOK.js';
+export { Chat as default } from './chunks/chunk-6JONVNJK.js';
+import './chunks/chunk-FBLX5IM6.js';
 import './chunks/chunk-JJPIWKLG.js';
 import './chunks/chunk-ZYFPSCFE.js';
 import './chunks/chunk-LNEKYYG7.js';

package/dist/hooks.d.ts

@@ -2,7 +2,7 @@ import { SetStateAction } from 'react';
 import { UseChatProps, UseChatReturn, Message } from './types.js';
 import 'peerjs';
 
-declare function useChat({ peerId, name, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: UseChatProps): UseChatReturn;
+declare function useChat({ peerId, name, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onPeerError, onNetworkError, onMessageSent, onMessageReceived, }: UseChatProps): UseChatReturn;
 declare function useMessages(): readonly [Message[], (value: SetStateAction<Message[]>) => void, (message: Message) => void];
 declare function useStorage<T>(key: string, initialValue: T, local?: boolean): readonly [T, (value: SetStateAction<T>) => void];
 declare function useStorage<T>(key: string, initialValue?: T, local?: boolean): readonly [T | undefined, (value: SetStateAction<T | undefined>) => void];

package/dist/hooks.js

@@ -1,3 +1,3 @@
-export { useAudio, useChat, useMessages, useStorage } from './chunks/chunk-MBDO7IOK.js';
+export { useAudio, useChat, useMessages, useStorage } from './chunks/chunk-FBLX5IM6.js';
 import './chunks/chunk-ZYFPSCFE.js';
 import './chunks/chunk-LNEKYYG7.js';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { Chat as default } from './chunks/chunk-N4TBKQIR.js';
-export { useChat } from './chunks/chunk-MBDO7IOK.js';
+export { Chat as default } from './chunks/chunk-6JONVNJK.js';
+export { useChat } from './chunks/chunk-FBLX5IM6.js';
 import './chunks/chunk-JJPIWKLG.js';
 export { clearChat } from './chunks/chunk-ZYFPSCFE.js';
 import './chunks/chunk-LNEKYYG7.js';

package/dist/types.d.ts

@@ -1,14 +1,18 @@
-import { PeerOptions, DataConnection, MediaConnection } from 'peerjs';
+import { PeerOptions, PeerError, PeerErrorType, DataConnection, MediaConnection } from 'peerjs';
 export { PeerOptions } from 'peerjs';
 import { CSSProperties, DetailedHTMLProps, HTMLAttributes, SetStateAction, ReactNode } from 'react';
 
 type Connection = DataConnection | MediaConnection;
-type ErrorHandler = () => void;
-type Message = {
+type ErrorHandler<E = Error> = (error: E) => void;
+type InputMessage = {
     id: string;
     text: string;
 };
+type Message = InputMessage & {
+    name: string;
+};
 type MessageEventHandler = (message: Message) => void;
+type PeerErrorHandler = ErrorHandler<PeerError<`${PeerErrorType}`>>;
 
 type RemotePeerId = string | string[];
 type UseChatProps = {
@@ -20,14 +24,15 @@ type UseChatProps = {
     audio?: boolean;
     peerOptions?: PeerOptions;
     onError?: ErrorHandler;
-    onMicError?: ErrorHandler;
+    onPeerError?: PeerErrorHandler;
+    onNetworkError?: PeerErrorHandler;
     onMessageSent?: MessageEventHandler;
     onMessageReceived?: MessageEventHandler;
 };
 type ChildrenOptions = {
     remotePeers: RemotePeers;
     messages: Message[];
-    sendMessage: (message: Message) => void;
+    sendMessage: (message: InputMessage) => void;
     audio: boolean;
     setAudio: (value: SetStateAction<boolean>) => void;
 };
@@ -49,4 +54,4 @@ type DialogPosition = "left" | "center" | "right";
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 type RemotePeers = Record<string, string>;
 
-export type { ChatProps, Children, ChildrenOptions, Connection, DialogOptions, DialogPosition, DivProps, ErrorHandler, IconProps, Message, MessageEventHandler, RemotePeerId, RemotePeers, UseChatProps, UseChatReturn };
+export type { ChatProps, Children, ChildrenOptions, Connection, DialogOptions, DialogPosition, DivProps, ErrorHandler, IconProps, InputMessage, Message, MessageEventHandler, PeerErrorHandler, RemotePeerId, RemotePeers, UseChatProps, UseChatReturn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",