react-peer-chat 0.3.0 → 0.3.2

package/build/index.d.ts

@@ -5,7 +5,7 @@ type Message = {
     text: string;
 };
 type ChildrenOptions = {
-    opponentName?: string;
+    remotePeer?: string;
     messages?: Message[];
     addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
     audio?: boolean;
@@ -26,7 +26,8 @@ type Props = {
     dialogOptions?: DialogOptions;
     onError?: () => void;
     children?: (childrenOptions: ChildrenOptions) => ReactNode;
-} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export default function Chat({ name, peerId, remotePeerId, peerOptions, text, voice, dialogOptions, onError, children, ...props }: Props): React.JSX.Element;
+    props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+};
+export default function Chat({ name, peerId, remotePeerId, peerOptions, text, voice, dialogOptions, onError, children, props }: Props): React.JSX.Element;
 export declare const clearChat: () => void;
 export {};

package/build/index.js

@@ -1,10 +1,10 @@
 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 = () => console.error("Can not access microphone!"), children, ...props }) {
+export default function Chat({ name, peerId, remotePeerId, peerOptions, text = true, voice = true, dialogOptions, onError = () => console.error("Can not access microphone!"), children, props }) {
     const [peer, setPeer] = useState();
-    const [opponentName, setOpponentName] = useState();
     const [notification, setNotification] = useState(false);
+    const [remotePeer, setRemotePeer] = useStorage('rpc-remote-peer', '', { save: true });
     const [messages, setMessages] = useStorage('rpc-messages', [], { save: true });
     const connRef = useRef();
     const [dialog, setDialog] = useState(false);
@@ -23,16 +23,14 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
         else if (!((_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.open))
             setNotification(true);
     }
-    function handleConnection(conn, setName = false) {
-        if (setName)
-            setOpponentName(conn.metadata || 'Anonymous User');
+    function handleConnection(conn) {
         connRef.current = conn;
         conn.on('open', () => {
-            conn.send({ type: 'messages', messages });
-            conn.on('data', ({ type, message, messages }) => {
+            conn.on('data', ({ type, message, remotePeer, messages }) => {
                 if (type === 'message')
                     addMessage(message);
-                else if (type === 'messages') {
+                else if (type === 'init') {
+                    setRemotePeer(remotePeer || 'Anonymous User');
                     setMessages(old => {
                         if (messages.length > old.length)
                             return messages;
@@ -40,6 +38,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
                     });
                 }
             });
+            conn.send({ type: 'init', remotePeer: name, messages });
         });
     }
     useEffect(() => {
@@ -61,7 +60,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
             if (remotePeerId) {
                 remotePeerId = `rpc-${remotePeerId}`;
                 if (text)
-                    handleConnection(peer.connect(remotePeerId, { metadata: name }), true);
+                    handleConnection(peer.connect(remotePeerId, { metadata: name }));
             }
             if (audio) {
                 const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@@ -111,24 +110,23 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
         const container = containerRef.current;
         if (container)
             container.scrollTop = container.scrollHeight;
-    }, [dialog, opponentName, messages]);
+    }, [dialog, remotePeer, messages]);
     return React.createElement("div", { className: 'rpc-main', ...props },
-        typeof children === 'function' ? children({ opponentName, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
+        typeof children === 'function' ? children({ remotePeer, messages, addMessage, audio, setAudio }) : React.createElement(React.Fragment, null,
             text && React.createElement("div", null,
-                dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) })
-                    : React.createElement("div", { className: 'rpc-notification' },
-                        React.createElement(BiSolidMessageDetail, { onClick: () => {
-                                setNotification(false);
-                                setDialog(true);
-                            } }),
-                        notification && React.createElement("span", { className: 'rpc-badge' })),
+                dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) }) : React.createElement("div", { className: 'rpc-notification' },
+                    React.createElement(BiSolidMessageDetail, { 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", null),
                     React.createElement("div", null,
-                        React.createElement("div", { ref: containerRef, className: 'rpc-message-container' }, opponentName && messages.map(({ id, text }, i) => React.createElement("div", { key: i },
+                        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' : opponentName,
+                                id === peerId ? 'You' : remotePeer,
                                 ": "),
                             React.createElement("span", null, text)))),
                         React.createElement("hr", null),
@@ -147,4 +145,7 @@ export default function Chat({ name, peerId, remotePeerId, peerOptions, text = t
             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 = () => removeStorage('rpc-messages');
+export const clearChat = () => {
+    removeStorage('rpc-remote-peer');
+    removeStorage('rpc-messages');
+};

package/package.json

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