react-peer-chat 0.8.6 → 0.10.0

package/README.md

@@ -9,7 +9,7 @@ A simple-to-use React component for implementing peer-to-peer chatting, powered
 - Supports persistent text chat across page reloads
 - Recovers old chats upon reconnection
 - Option to clear chat on command
-- Supports audio/voice chat
+- Supports audio/voice chat with automatic mixing for multiple peers
 - Multiple peer connections. See [multi-peer usage](#multi-peer-usage)
 - Fully customizable. See [usage with FaC](#full-customization)
 
@@ -166,7 +166,9 @@ export default function App() {
 
 ### useChat Hook
 
-The `useChat` hook is ideal when you want to completely redesign the Chat UI or handle the audio stream differently, instead of using traditional playback methods.
+The `useChat` hook is ideal when you want to completely redesign the Chat UI.
+
+#### Basic Usage
 
 ```jsx
 import React, { useEffect, useRef, useState } from "react";
@@ -174,13 +176,19 @@ import { clearChat, useChat } from "react-peer-chat";
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "react-peer-chat/icons";
 
 function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children, ...hookProps }) {
-  const { peerId, audioStreamRef, ...childrenOptions } = useChat({
+  const {
+    peerId, // Complete peer ID
+    remotePeers, // Object mapping remote peer IDs to their names
+    messages, // Array of all chat messages
+    sendMessage, // Function to send a message to all connected peers
+    audio: audioEnabled, // Current audio state (enabled/disabled)
+    setAudio, // Function to toggle audio on/off (only works if audio option is set to true)
+  } = useChat({
     text,
     audio,
     onMessageReceived: modifiedOnMessageReceived,
     ...hookProps,
   });
-  const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
   const containerRef = useRef(null);
   const [dialog, setDialog] = useState(false);
   const dialogRef = useRef(null);
@@ -205,7 +213,7 @@ function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, pro
   return (
     <div className="rpc-main rpc-font" {...props}>
       {typeof children === "function" ? (
-        children(childrenOptions)
+        children({ remotePeers, messages, sendMessage, audio: audioEnabled, setAudio })
       ) : (
         <>
           {text && (
@@ -258,17 +266,12 @@ function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, pro
             </div>
           )}
           {audio && (
-            <button>
-              {audioEnabled ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)} /> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)} />}
+            <button className="rpc-button" onClick={() => setAudio(!audioEnabled)}>
+              {audioEnabled ? <BsFillMicFill title="Turn mic off" /> : <BsFillMicMuteFill title="Turn mic on" />}
             </button>
           )}
         </>
       )}
-      {audio && (
-        <button className="rpc-button" onClick={() => setAudio(!audioEnabled)}>
-          {audioEnabled ? <BsFillMicFill title="Turn mic off" /> : <BsFillMicMuteFill title="Turn mic on" />}
-        </button>
-      )}
     </div>
   );
 }
@@ -284,13 +287,11 @@ export default function App() {
 }
 ```
 
-#### Basic Usage
-
 ## API Reference
 
 ### useChat Hook
 
-Here is the full API for the `useChat` hook, these options can be passed as paramerters to the hook:
+Here is the full API for the `useChat` hook, these options can be passed as parameters to the hook:
 
 | Parameter           | Type                                          | Required | Default                                                         | Description                                                                                                                                     |
 | ------------------- | --------------------------------------------- | -------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -299,7 +300,7 @@ Here is the full API for the `useChat` hook, these options can be passed as para
 | `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`             | `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.                                                                                      |
@@ -322,19 +323,19 @@ that are listed in [useChat Hook API Reference](#usechat-hook-1) along with the
 ### Children
 
 ```typescript
-import type { ReactNode } from "react";
+import type { ReactNode, SetStateAction } from "react";
 
-type RemotePeers = { [id: string]: string };
+type RemotePeers = Record<string, string>;
 type Message = {
   id: string;
   text: string;
 };
 type ChildrenOptions = {
-  remotePeers?: RemotePeers;
-  messages?: Message[];
-  sendMessage?: (message: Message) => void;
-  audio?: boolean;
-  setAudio?: (audio: boolean) => void;
+  remotePeers: RemotePeers;
+  messages: Message[];
+  sendMessage: (message: Message) => void;
+  audio: boolean;
+  setAudio: (value: SetStateAction<boolean>) => void;
 };
 type Children = (childrenOptions: ChildrenOptions) => ReactNode;
 ```
@@ -346,8 +347,8 @@ import type { CSSProperties } from "react";
 
 type DialogPosition = "left" | "center" | "right";
 type DialogOptions = {
-  position: DialogPosition;
-  style: CSSProperties;
+  position?: DialogPosition;
+  style?: CSSProperties;
 };
 ```
 

package/dist/chunks/{chunk-GT3RG6VA.js → chunk-L3CFU5IB.js}

@@ -64,15 +64,41 @@ function useChat({
   const [peer, setPeer] = useState();
   const [audio, setAudio] = useAudio(allowed);
   const connRef = useRef({});
-  const localStreamRef = useRef(null);
-  const audioStreamRef = useRef(null);
   const callsRef = useRef({});
+  const audioContextRef = useRef(null);
+  const mixerRef = useRef(null);
+  const sourceNodesRef = useRef({});
   const [messages, setMessages, addMessage] = useMessages();
   const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
   const { completePeerId, completeRemotePeerIds } = useMemo(() => {
     const remotePeerIds = Array.isArray(remotePeerId) ? remotePeerId : [remotePeerId];
     return { completePeerId: addPrefix(peerId), completeRemotePeerIds: remotePeerIds.map(addPrefix) };
   }, [peerId]);
+  function handleCall(call) {
+    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(peerId2);
+      delete callsRef.current[peerId2];
+    });
+  }
   function handleConnection(conn) {
     connRef.current[conn.peer] = conn;
     conn.on("open", () => {
@@ -91,17 +117,20 @@ function useChat({
     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 removePeerAudio(peerId2) {
+    if (!sourceNodesRef.current[peerId2]) return;
+    sourceNodesRef.current[peerId2].disconnect();
+    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;
@@ -138,42 +167,41 @@ function useChat({
   }, [text, peer]);
   useEffect(() => {
     if (!audio || !peer) return;
+    let localStream;
     const setupAudio = () => navigator.mediaDevices.getUserMedia({
       video: false,
       audio: {
-        autoGainControl: false,
-        // Disable automatic gain control
+        autoGainControl: true,
         noiseSuppression: true,
-        // Enable noise suppression
         echoCancellation: true
-        // Enable echo cancellation
       }
     }).then((stream) => {
-      localStreamRef.current = stream;
+      localStream = stream;
       completeRemotePeerIds.forEach((id) => {
+        if (callsRef.current[id]) return;
         const call = peer.call(id, stream);
-        call.on("stream", handleRemoteStream);
-        call.on("close", call.removeAllListeners);
-        callsRef.current[id] = call;
+        handleCall(call);
       });
       peer.on("call", (call) => {
+        if (callsRef.current[call.peer]) return call.close();
         call.answer(stream);
-        call.on("stream", handleRemoteStream);
-        call.on("close", call.removeAllListeners);
-        callsRef.current[call.peer] = call;
+        handleCall(call);
       });
     }).catch(handleError);
     if (peer.open) setupAudio();
     else peer.once("open", setupAudio);
     return () => {
       var _a;
-      (_a = localStreamRef.current) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
-      localStreamRef.current = null;
+      localStream == null ? void 0 : localStream.getTracks().forEach((track) => track.stop());
       Object.values(callsRef.current).forEach(closeConnection);
       callsRef.current = {};
+      Object.keys(sourceNodesRef.current).forEach(removePeerAudio);
+      (_a = audioContextRef.current) == null ? void 0 : _a.close();
+      audioContextRef.current = null;
+      mixerRef.current = null;
     };
   }, [audio, peer]);
-  return { peerId: completePeerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
+  return { peerId: completePeerId, remotePeers, messages, sendMessage, audio, setAudio };
 }
 function useMessages() {
   const [messages, setMessages] = useStorage("rpc-messages", []);

package/dist/chunks/{chunk-YDZ27MG7.js → chunk-OB5LLPQI.js}

@@ -1,4 +1,4 @@
-import { useChat } from './chunk-GT3RG6VA.js';
+import { useChat } from './chunk-L3CFU5IB.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,15 +28,15 @@ function Chat(_a) {
   const _a2 = useChat(__spreadValues({
     text,
     audio,
-    onMessageReceived: modifiedOnMessageReceived
-  }, hookProps)), { peerId, audioStreamRef } = _a2, childrenOptions = __objRest(_a2, ["peerId", "audioStreamRef"]);
+    onMessageReceived: receiveMessageHandler
+  }, hookProps)), { peerId } = _a2, childrenOptions = __objRest(_a2, ["peerId"]);
   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) {
+  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",
@@ -75,7 +75,7 @@ function Chat(_a) {
     },
     /* @__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" } }));
+  )))), 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" }))));
 }
 
 export { Chat };

package/dist/components.js

@@ -1,5 +1,5 @@
-export { Chat as default } from './chunks/chunk-YDZ27MG7.js';
-import './chunks/chunk-GT3RG6VA.js';
+export { Chat as default } from './chunks/chunk-OB5LLPQI.js';
+import './chunks/chunk-L3CFU5IB.js';
 import './chunks/chunk-JJPIWKLG.js';
 import './chunks/chunk-ZYFPSCFE.js';
 import './chunks/chunk-LNEKYYG7.js';

package/dist/hooks.js

@@ -1,3 +1,3 @@
-export { useAudio, useChat, useMessages, useStorage } from './chunks/chunk-GT3RG6VA.js';
+export { useAudio, useChat, useMessages, useStorage } from './chunks/chunk-L3CFU5IB.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-YDZ27MG7.js';
-export { useChat } from './chunks/chunk-GT3RG6VA.js';
+export { Chat as default } from './chunks/chunk-OB5LLPQI.js';
+export { useChat } from './chunks/chunk-L3CFU5IB.js';
 import './chunks/chunk-JJPIWKLG.js';
 export { clearChat } from './chunks/chunk-ZYFPSCFE.js';
 import './chunks/chunk-LNEKYYG7.js';

package/dist/types.d.ts

@@ -1,13 +1,16 @@
 import { PeerOptions, DataConnection, MediaConnection } from 'peerjs';
 export { PeerOptions } from 'peerjs';
-import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode, RefObject, SetStateAction } from 'react';
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes, SetStateAction, ReactNode } from 'react';
 
 type Connection = DataConnection | MediaConnection;
 type ErrorHandler = () => void;
-type Message = {
+type InputMessage = {
     id: string;
     text: string;
 };
+type Message = InputMessage & {
+    name: string;
+};
 type MessageEventHandler = (message: Message) => void;
 
 type RemotePeerId = string | string[];
@@ -24,15 +27,16 @@ type UseChatProps = {
     onMessageSent?: MessageEventHandler;
     onMessageReceived?: MessageEventHandler;
 };
-type UseChatReturn = {
-    peerId: string;
-    audioStreamRef: RefObject<HTMLMediaElement | null>;
+type ChildrenOptions = {
     remotePeers: RemotePeers;
     messages: Message[];
-    sendMessage: (message: Message) => void;
+    sendMessage: (message: InputMessage) => void;
     audio: boolean;
     setAudio: (value: SetStateAction<boolean>) => void;
 };
+type UseChatReturn = ChildrenOptions & {
+    peerId: string;
+};
 type IconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
 type ChatProps = UseChatProps & {
     dialogOptions?: DialogOptions;
@@ -40,21 +44,12 @@ type ChatProps = UseChatProps & {
     children?: Children;
 };
 type Children = (childrenOptions: ChildrenOptions) => ReactNode;
-type ChildrenOptions = {
-    remotePeers?: RemotePeers;
-    messages?: Message[];
-    sendMessage?: (message: Message) => void;
-    audio?: boolean;
-    setAudio?: (audio: boolean) => void;
-};
 type DialogOptions = {
     position?: DialogPosition;
     style?: CSSProperties;
 };
 type DialogPosition = "left" | "center" | "right";
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-type RemotePeers = {
-    [id: string]: string;
-};
+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, RemotePeerId, RemotePeers, UseChatProps, UseChatReturn };

package/package.json

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