react-peer-chat 0.6.3 → 0.6.5

package/dist/icons.js

@@ -1,28 +1,28 @@
 import React from "react";
 export function BiSolidMessageDetail(props) {
-    return React.createElement("span", Object.assign({ className: "rpc-icon-container" }, 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" })));
+            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),
+    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" })));
+            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),
+    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" })));
+            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),
+    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" })));
+            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),
+    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" })));
+            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/dist/index.d.ts

@@ -1,8 +1,8 @@
-import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
-import { PeerOptions as ImportedPeerOptions } from 'peerjs';
+import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import { PeerOptions } from "peerjs";
 export type RemotePeerId = string | string[];
-export type PeerOptions = ImportedPeerOptions;
-export type DialogPosition = 'left' | 'center' | 'right';
+export type { PeerOptions };
+export type DialogPosition = "left" | "center" | "right";
 export type DialogOptions = {
     position?: DialogPosition;
     style?: CSSProperties;
@@ -37,6 +37,6 @@ export type ChatProps = {
     children?: Children;
     props?: Props;
 };
-export type { IconProps } from './icons.js';
+export type { IconProps } from "./icons.js";
 export default function Chat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, voice, dialogOptions, onError, onMicError, children, props }: ChatProps): React.JSX.Element;
 export declare const clearChat: () => void;

package/dist/index.js

@@ -7,78 +7,72 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useRef, useState } from 'react';
-import useStorage, { removeStorage } from './storage.js';
-import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './icons.js';
+import React, { useEffect, useRef, useState } from "react";
+import useStorage, { removeStorage } from "./storage.js";
+import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "./icons.js";
 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" }
+    { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" },
 ];
 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))))
+    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)))),
 };
 function closeConnection(conn) {
     conn.removeAllListeners();
     conn.close();
 }
-export default function Chat({ name, peerId, remotePeerId = [], peerOptions, text = true, recoverChat = false, voice = true, dialogOptions, onError = () => alert('Browser not supported! Try some other browser.'), onMicError = () => alert('Microphone not accessible!'), children, props = {} }) {
+export default function Chat({ name, peerId, remotePeerId = [], peerOptions, text = true, recoverChat = false, 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 [remotePeers, setRemotePeers] = useStorage('rpc-remote-peer', {});
-    const [messages, setMessages] = useStorage('rpc-messages', []);
+    const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
+    const [messages, setMessages] = useStorage("rpc-messages", []);
     const connRef = useRef({});
     const [dialog, setDialog] = useState(false);
     const dialogRef = useRef(null);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const [audio, setAudio] = useStorage('rpc-audio', false, true);
+    const [audio, setAudio] = useStorage("rpc-audio", false, true);
     const streamRef = useRef(null);
     const localStream = useRef();
     peerId = `rpc-${peerId}`;
-    if (typeof remotePeerId === 'string')
+    if (typeof remotePeerId === "string")
         remotePeerId = [remotePeerId];
-    const remotePeerIds = remotePeerId.map(id => `rpc-${id}`);
-    const handleRemoteStream = (remoteStream) => streamRef.current.srcObject = remoteStream;
+    const remotePeerIds = remotePeerId.map((id) => `rpc-${id}`);
+    const handleRemoteStream = (remoteStream) => (streamRef.current.srcObject = remoteStream);
     function addMessage(message, sendToRemotePeer = false) {
         var _a;
-        setMessages(prev => prev.concat(message));
+        setMessages((prev) => prev.concat(message));
         if (sendToRemotePeer)
-            Object.values(connRef.current).forEach(conn => conn.send({ type: 'message', message }));
+            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.peer] = conn;
-        conn.on('open', () => {
-            conn.on('data', ({ type, message, remotePeerName, messages }) => {
-                if (type === 'message')
+        conn.on("open", () => {
+            conn.on("data", ({ type, message, remotePeerName, messages }) => {
+                if (type === "message")
                     addMessage(message);
-                else if (type === 'init') {
-                    setRemotePeers(prev => {
-                        prev[conn.peer] = remotePeerName || 'Anonymous User';
+                else if (type === "init") {
+                    setRemotePeers((prev) => {
+                        prev[conn.peer] = remotePeerName || "Anonymous User";
                         return prev;
                     });
                     if (recoverChat)
-                        setMessages(old => messages.length > old.length ? messages : old);
+                        setMessages((old) => (messages.length > old.length ? messages : old));
                 }
             });
-            conn.send({ type: 'init', remotePeerName: name, messages });
+            conn.send({ type: "init", remotePeerName: name, messages });
         });
-        conn.on('close', conn.removeAllListeners);
+        conn.on("close", conn.removeAllListeners);
     }
     function handleError() {
         setAudio(false);
@@ -91,7 +85,7 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
         }
         (function () {
             return __awaiter(this, void 0, void 0, function* () {
-                const { Peer, util: { supports: { audioVideo, data } } } = yield import('peerjs');
+                const { Peer, util: { supports: { audioVideo, data }, }, } = yield import("peerjs");
                 if (!data || !audioVideo)
                     return onError();
                 const peer = new Peer(peerId, Object.assign({ config: defaultConfig }, peerOptions));
@@ -103,8 +97,8 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
         if (!peer)
             return;
         let calls = {};
-        peer.on('open', () => {
-            remotePeerIds.forEach(id => {
+        peer.on("open", () => {
+            remotePeerIds.forEach((id) => {
                 if (text)
                     handleConnection(peer.connect(id));
             });
@@ -116,20 +110,20 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
                         audio: {
                             autoGainControl: false,
                             noiseSuppression: true,
-                            echoCancellation: true
-                        }
+                            echoCancellation: true,
+                        },
                     }, (stream) => {
                         localStream.current = stream;
-                        remotePeerIds.forEach(id => {
+                        remotePeerIds.forEach((id) => {
                             const call = peer.call(id, stream);
-                            call.on('stream', handleRemoteStream);
-                            call.on('close', call.removeAllListeners);
+                            call.on("stream", handleRemoteStream);
+                            call.on("close", call.removeAllListeners);
                             calls[id] = call;
                         });
-                        peer.on('call', call => {
+                        peer.on("call", (call) => {
                             call.answer(stream);
-                            call.on('stream', handleRemoteStream);
-                            call.on('close', call.removeAllListeners);
+                            call.on("stream", handleRemoteStream);
+                            call.on("close", call.removeAllListeners);
                             calls[call.peer] = call;
                         });
                     }, handleError);
@@ -139,10 +133,10 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
                 }
             }
         });
-        peer.on('connection', handleConnection);
+        peer.on("connection", handleConnection);
         return () => {
             var _a;
-            (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(track => track.stop());
+            (_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);
@@ -162,41 +156,41 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
         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({ 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: () => {
+    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: () => {
                             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' }),
+                    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("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],
+                                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 => {
+                            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 = '';
+                                    inputRef.current.value = "";
                                     addMessage({ id: peerId, text }, true);
                                 }
                             } },
-                            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 && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: 'none' } }));
+                            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 && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: "none" } })));
 }
 export const clearChat = () => {
-    removeStorage('rpc-remote-peer');
-    removeStorage('rpc-messages');
+    removeStorage("rpc-remote-peer");
+    removeStorage("rpc-messages");
 };

package/dist/storage.js

@@ -28,7 +28,7 @@ export default function useStorage(key, initialValue, local = false) {
     });
     const setValue = (value) => {
         setStoredValue((old) => {
-            const updatedValue = typeof value === 'function' ? value(old) : value;
+            const updatedValue = typeof value === "function" ? value(old) : value;
             setStorage(key, updatedValue, local);
             return updatedValue;
         });

package/dist/styles.css

@@ -19,10 +19,10 @@
 .rpc-notification .rpc-badge {
     background-color: red;
     position: absolute;
-    top: 0.25rem;
-    right: 0.25rem;
-    width: 0.3rem;
-    height: 0.3rem;
+    top: 0;
+    right: 0;
+    width: 6px;
+    aspect-ratio: 1;
     border-radius: 100%;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "type": "module",
   "main": "dist/index.js",
@@ -32,11 +32,11 @@
   },
   "homepage": "https://github.com/SahilAggarwal2004/react-peer-chat#readme",
   "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.48"
+    "@types/react": "^18.2.57"
   },
   "dependencies": {
     "peerjs": "^1.5.2"