react-peer-chat 0.3.10 → 0.4.1

package/README.md

@@ -1,13 +1,13 @@
 # react-peer-chat
 An easy to use react component for impleting peer-to-peer chatting using [peerjs](https://peerjs.com/) under the hood.
 
-It is as easy as to import a React component!
 ## Features
 - Peer-to-peer chat without need to have any knowledge about WebRTC
 - Easy to use
 - Supports text chat that persists on page reload
 - Clear text chat on command
 - Supports voice chat
+- Multiple peer connections. See [multi peer usage](#Multi-Peer-Usage)
 - Fully Customizable. See [usage with FoC](#Full-Customization)
 ## Installation
 To install react-peer-chat
@@ -38,8 +38,26 @@ export default function App() {
     return <div>
         <Chat
             name='John Doe'
-            peerId='some-unique-id' 
-            remotePeerId='another-unique-id'
+            peerId='my-unique-id'
+            remotePeerId='remote-unique-id'
+        />
+        {/* Text chat will be cleared when following button is clicked. */}
+        <button onClick={clearChat}>Clear Chat</button>
+    </div>
+}
+```
+#### Multi Peer Usage
+```jsx
+import React from 'react';
+import Chat, { clearChat } from 'react-peer-chat';
+import 'react-peer-chat/build/styles.css';
+
+export default function App() {
+    return <div>
+        <Chat
+            name='John Doe'
+            peerId='my-unique-id'
+            remotePeerId={['remote-unique-id-1', 'remote-unique-id-2', 'remote-unique-id-3']} // Array of remote peer ids
         />
         {/* Text chat will be cleared when following button is clicked. */}
         <button onClick={clearChat}>Clear Chat</button>
@@ -56,16 +74,15 @@ import 'react-peer-chat/build/styles.css';
 export default function App() {
     return <Chat 
         name='John Doe'
-        peerId='some-unique-id'
-        remotePeerId='another-unique-id'
-        dialogOptions={{ 
+        peerId='my-unique-id'
+        remotePeerId='remote-unique-id'
+        dialogOptions={{
             position: 'left',
             style: { padding: '4px' }
         }}
         props={{ title: 'React Peer Chat Component' }}
-        onError={() => {
-            console.error('Microphone not accessible!');
-        }}
+        onError={() => console.error('Browser not supported!')}
+        onMicError={() => console.error('Microphone not accessible!')}
     />
 }
 ```
@@ -79,13 +96,12 @@ import Chat from 'react-peer-chat'
 export default function App() {
     return <Chat
         name='John Doe'
-        peerId='some-unique-id'
-        remotePeerId='another-unique-id'
-        onError={() => {
-            console.error('Microphone not accessible!');
-        }}
+        peerId='my-unique-id'
+        remotePeerId='remote-unique-id'
+        onError={() => console.error('Browser not supported!')}
+        onMicError={() => console.error('Microphone not accessible!')}
     >
-        {({ remotePeerName, messages, addMessage, audio, setAudio }) => (
+        {({ remotePeers, messages, addMessage, audio, setAudio }) => (
             <YourCustomComponent>
                 {...}
             </YourCustomComponent>
@@ -97,14 +113,15 @@ export default function App() {
 Here is the full API for the `<Chat>` component, these properties can be set on an instance of Chat:
 | 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` | No | - | It is the unique id of the remote peer. If provided, the peer will try to connect to the remote peer. |
-| `text` | `Boolean` | No | `true` | Text chat will be enabled if this property is set to true. |
-| `voice` | `Boolean` | No | `true` | Voice chat will be enabled if this property is set to true. |
+| `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 | - | It is the unique id (or array of unique ids) of the remote peer(s). If provided, the peer will try to connect to the remote peer(s). |
+| `text` | `boolean` | No | `true` | Text chat will be enabled if this property is set to true. |
+| `voice` | `boolean` | No | `true` | Voice chat will be enabled if this property is set to true. |
 | `peerOptions` | [`PeerOptions`](#PeerOptions) | No | - | Options to customize peerjs Peer instance. |
 | `dialogOptions` | [`DialogOptions`](#DialogOptions) | No | { position: 'center' } | Options to customize text dialog box styling. |
-| `onError` | `Function` | No | `() => alert('Microphone not accessible!')` | Function to be executed when microphone is not accessible. |
+| `onError` | `Function` | No | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support [WebRTC](https://webrtc.org/). |
+| `onMicError` | `Function` | No | `() => alert('Microphone not accessible!')` | Function to be executed when microphone is not accessible. |
 | `props` | `React.DetailedHTMLProps` | No | - | Props to customize the `<Chat>` component. |
 | `children` | [`Children`](#Children) | No | - | Props to customize the `<Chat>` component. |
 ### Types
@@ -124,12 +141,13 @@ type DialogOptions = {
 #### Children
 ```typescript
 import { ReactNode } from 'react';
+type RemotePeers = { [id: string]: string }
 type Message = {
     id: string;
     text: string;
 };
 type ChildrenOptions = {
-    remotePeerName?: string;
+    remotePeers?: RemotePeers;
     messages?: Message[];
     addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
     audio?: boolean;

package/build/icons.js

@@ -1,27 +1,27 @@
 import React from "react";
 export function BiSolidMessageDetail(props) {
-    return React.createElement("span", { className: 'rpc-icon-container', ...props },
+    return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
             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", { className: 'rpc-icon-container', ...props },
+    return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
             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", { className: 'rpc-icon-container', ...props },
+    return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
         React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down 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", { className: 'rpc-icon-container', ...props },
+    return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
         React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
             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", { className: 'rpc-icon-container', ...props },
+    return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
         React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
             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" })));

package/build/index.d.ts

@@ -1,17 +1,21 @@
 import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
 import { PeerOptions as ImportedPeerOptions } from 'peerjs';
+export type RemotePeerId = string | string[];
 export type PeerOptions = ImportedPeerOptions;
 export type DialogPosition = 'left' | 'center' | 'right';
 export interface DialogOptions {
     position?: DialogPosition;
     style?: CSSProperties;
 }
+type RemotePeers = {
+    [id: string]: string;
+};
 export interface Message {
     id: string;
     text: string;
 }
 export interface ChildrenOptions {
-    remotePeerName?: string;
+    remotePeers?: RemotePeers;
     messages?: Message[];
     addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
     audio?: boolean;
@@ -22,14 +26,16 @@ export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivEle
 export interface ChatProps {
     name?: string;
     peerId: string;
-    remotePeerId?: string;
+    remotePeerId?: RemotePeerId;
     text?: boolean;
     voice?: boolean;
     peerOptions?: PeerOptions;
     dialogOptions?: DialogOptions;
     onError?: Function;
+    onMicError?: Function;
     children?: Children;
     props?: Props;
 }
-export default function Chat({ name, peerId, remotePeerId, peerOptions, text, voice, dialogOptions, onError, children, props }: ChatProps): React.JSX.Element;
+export type { IconProps } from './icons.js';
+export default function Chat({ name, peerId, remotePeerId, peerOptions, text, voice, dialogOptions, onError, onMicError, children, props }: ChatProps): React.JSX.Element;
 export declare const clearChat: () => void;

package/build/index.js

@@ -1,12 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
 import useStorage, { removeStorage } from './storage.js';
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './icons.js';
-export default function Chat({ name, peerId, remotePeerId, peerOptions, text = true, voice = true, dialogOptions, onError = () => alert("Microphone not accessible!"), children, props = {} }) {
+function closeConnection(conn) {
+    conn.removeAllListeners();
+    conn.close();
+}
+export default function Chat({ name, peerId, remotePeerId = [], peerOptions, text = true, voice = true, dialogOptions, onError = () => alert('Browser not supported! Try some other browser.'), onMicError = () => alert('Microphone not accessible!'), children, props = {} }) {
     const [peer, setPeer] = useState();
     const [notification, setNotification] = useState(false);
-    const [remotePeerName, setRemotePeer] = useStorage('rpc-remote-peer', '', { save: true });
+    const [remotePeers, setRemotePeers] = useStorage('rpc-remote-peer', {}, { save: true });
     const [messages, setMessages] = useStorage('rpc-messages', [], { save: true });
-    const connRef = useRef();
+    const connRef = useRef({});
     const [dialog, setDialog] = useState(false);
     const dialogRef = useRef(null);
     const containerRef = useRef(null);
@@ -14,54 +18,57 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
     const [audio, setAudio] = useStorage('rpc-audio', false, { local: true, save: true });
     const streamRef = useRef(null);
     const localStream = useRef();
+    peerId = `rpc-${peerId}`;
+    if (typeof remotePeerId === 'string')
+        remotePeerId = [remotePeerId];
+    const remotePeerIds = remotePeerId.map(id => `rpc-${id}`);
     const handleRemoteStream = (remoteStream) => streamRef.current.srcObject = remoteStream;
     function addMessage(message, sendToRemotePeer = false) {
-        var _a, _b;
-        setMessages(old => old.concat(message));
+        var _a;
+        setMessages(prev => prev.concat(message));
         if (sendToRemotePeer)
-            (_a = connRef.current) === null || _a === void 0 ? void 0 : _a.send({ type: 'message', message });
-        else if (!((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.open))
+            Object.values(connRef.current).forEach(conn => conn.send({ type: 'message', message }));
+        else if (!((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.open))
             setNotification(true);
     }
     function handleConnection(conn) {
-        connRef.current = conn;
+        connRef.current[conn.peer] = conn;
         conn.on('open', () => {
-            conn.on('data', ({ type, message, remotePeerName, messages }) => {
+            conn.on('data', ({ type, message, remotePeerName }) => {
                 if (type === 'message')
                     addMessage(message);
-                else if (type === 'init') {
-                    setRemotePeer(remotePeerName || 'Anonymous User');
-                    setMessages(old => {
-                        if (messages.length > old.length)
-                            return messages;
-                        return old;
+                else if (type === 'init')
+                    setRemotePeers(prev => {
+                        prev[conn.peer] = remotePeerName || 'Anonymous User';
+                        return prev;
                     });
-                }
             });
-            conn.send({ type: 'init', remotePeerName: name, messages });
+            conn.send({ type: 'init', remotePeerName: name });
         });
+        conn.on('close', conn.removeAllListeners);
     }
     useEffect(() => {
         if (!text && !audio) {
             setPeer(undefined);
             return;
         }
-        (async function loadPeer() {
-            const { Peer } = await import('peerjs');
-            const peer = new Peer(`rpc-${peerId}`, peerOptions);
+        (async function () {
+            const { Peer, util: { supports: { audioVideo, data } } } = await import('peerjs');
+            if (!data || !audioVideo)
+                return onError();
+            const peer = new Peer(peerId, peerOptions);
             setPeer(peer);
         })();
     }, [audio]);
     useEffect(() => {
         if (!peer)
             return;
-        let call;
+        let calls = {};
         peer.on('open', () => {
-            if (remotePeerId) {
-                remotePeerId = `rpc-${remotePeerId}`;
+            remotePeerIds.forEach(id => {
                 if (text)
-                    handleConnection(peer.connect(remotePeerId, { metadata: name }));
-            }
+                    handleConnection(peer.connect(id));
+            });
             if (audio) {
                 const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                 try {
@@ -74,32 +81,32 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                         }
                     }, (stream) => {
                         localStream.current = stream;
-                        if (remotePeerId) {
-                            call = peer.call(remotePeerId, stream);
+                        remotePeerIds.forEach(id => {
+                            const call = peer.call(id, stream);
                             call.on('stream', handleRemoteStream);
                             call.on('close', call.removeAllListeners);
-                        }
-                        peer.on('call', e => {
-                            call = e;
+                            calls[id] = call;
+                        });
+                        peer.on('call', call => {
                             call.answer(stream);
                             call.on('stream', handleRemoteStream);
                             call.on('close', call.removeAllListeners);
+                            calls[call.peer] = call;
                         });
-                    }, onError);
+                    }, onMicError);
                 }
                 catch (_a) {
-                    onError();
+                    onMicError();
                 }
             }
         });
         peer.on('connection', handleConnection);
         return () => {
-            var _a, _b, _c;
+            var _a;
             (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(track => track.stop());
-            (_b = connRef.current) === null || _b === void 0 ? void 0 : _b.removeAllListeners();
-            (_c = connRef.current) === null || _c === void 0 ? void 0 : _c.close();
-            call === null || call === void 0 ? void 0 : call.removeAllListeners();
-            call === null || call === void 0 ? void 0 : call.close();
+            Object.values(connRef.current).forEach(closeConnection);
+            connRef.current = {};
+            Object.values(calls).forEach(closeConnection);
             peer.removeAllListeners();
             peer.destroy();
         };
@@ -115,9 +122,9 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
         const container = containerRef.current;
         if (container)
             container.scrollTop = container.scrollHeight;
-    }, [dialog, remotePeerName, messages]);
-    return React.createElement("div", { className: 'rpc-main rpc-font', ...props },
-        typeof children === 'function' ? children({ remotePeerName, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
+    }, [dialog, remotePeers, messages]);
+    return React.createElement("div", Object.assign({ className: 'rpc-main rpc-font' }, props),
+        typeof children === 'function' ? children({ remotePeers, messages, addMessage, audio, setAudio }) : 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: () => {
@@ -131,7 +138,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                     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' : remotePeerName,
+                                id === peerId ? 'You' : remotePeers[id],
                                 ": "),
                             React.createElement("span", null, text)))),
                         React.createElement("hr", { className: 'rpc-hr' }),
@@ -147,7 +154,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                             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' })))))),
-            voice && React.createElement("div", null, audio ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) }))),
+            voice && React.createElement("div", null, audio ? React.createElement(BsFillMicFill, { title: 'Turn mic off', onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: 'Turn mic on', onClick: () => setAudio(true) }))),
         voice && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: 'none' } }));
 }
 export const clearChat = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.3.10",
+  "version": "0.4.1",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "main": "./build/index.js",
   "type": "module",