react-peer-chat 0.2.1 → 0.2.3

package/build/icons.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import './icons.css';
 export declare function BiSolidMessageDetail(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): React.JSX.Element;
 export declare function BiSolidMessageX(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): React.JSX.Element;
 export declare function GrSend(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): React.JSX.Element;

package/build/icons.js

@@ -1,28 +1,27 @@
 import React from "react";
-import './icons.css';
 export function BiSolidMessageDetail(props) {
-    return React.createElement("span", Object.assign({}, props),
-        React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'scale-down' },
+    return React.createElement("span", { ...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", Object.assign({}, props),
-        React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'scale-down' },
+    return React.createElement("span", { ...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", Object.assign({}, props),
-        React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'scale-down invert' },
+    return React.createElement("span", { ...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", Object.assign({}, props),
+    return React.createElement("span", { ...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", Object.assign({}, props),
+    return React.createElement("span", { ...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,6 +1,5 @@
 import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode, RefObject } from 'react';
 import { PeerOptions } from 'peerjs';
-import './index.css';
 type Message = {
     id: string;
     text: string;

package/build/index.js

@@ -1,29 +1,7 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { useEffect, useRef, useState } from 'react';
 import useStorage, { removeStorage } from './storage';
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './icons';
-import './index.css';
-export default function Chat(_a) {
-    var { name, peerId, remotePeerId, peerOptions, text = true, voice = true, dialogOptions, onError = () => console.error("Can not access microphone!"), children } = _a, props = __rest(_a, ["name", "peerId", "remotePeerId", "peerOptions", "text", "voice", "dialogOptions", "onError", "children"]);
+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);
@@ -39,11 +17,10 @@ export default function Chat(_a) {
     remotePeerId = `rpc-${remotePeerId}`;
     const handleRemoteStream = (remoteStream) => streamRef.current.srcObject = remoteStream;
     function addMessage(message, send = false) {
-        var _a, _b;
         setMessages(old => old.concat(message));
         if (send)
-            (_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))
+            connRef.current?.send({ type: 'message', message });
+        else if (!dialogRef.current?.open)
             setNotification(true);
     }
     function handleConnection(conn, setName = false) {
@@ -70,12 +47,10 @@ export default function Chat(_a) {
             setPeer(undefined);
             return;
         }
-        (function loadPeer() {
-            return __awaiter(this, void 0, void 0, function* () {
-                const Peer = (yield import('peerjs')).default;
-                const peer = new Peer(`rpc-${peerId}`, peerOptions);
-                setPeer(peer);
-            });
+        (async function loadPeer() {
+            const Peer = (await import('peerjs')).default;
+            const peer = new Peer(`rpc-${peerId}`, peerOptions);
+            setPeer(peer);
         })();
     }, [audio]);
     useEffect(() => {
@@ -110,58 +85,55 @@ export default function Chat(_a) {
         });
         peer.on('connection', handleConnection);
         return () => {
-            var _a, _b, _c;
-            (_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();
+            localStream.current?.getTracks().forEach(track => track.stop());
+            connRef.current?.removeAllListeners();
+            connRef.current?.close();
+            call?.removeAllListeners();
+            call?.close();
             peer.removeAllListeners();
             peer.destroy();
         };
     }, [peer]);
     useEffect(() => {
-        var _a, _b;
         if (dialog)
-            (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.show();
+            dialogRef.current?.show();
         else
-            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            dialogRef.current?.close();
     }, [dialog]);
     useEffect(() => {
         const container = containerRef.current;
         if (container)
             container.scrollTop = container.scrollHeight;
     }, [dialog, opponentName, messages]);
-    return React.createElement("div", Object.assign({ className: 'main' }, props),
+    return React.createElement("div", { className: 'rpc-main', ...props },
         typeof children === 'function' ? children({ notification, messages, addMessage, dialogRef, audio, setAudio }) : React.createElement(React.Fragment, null,
             text && React.createElement("div", null,
                 dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) })
-                    : React.createElement("div", { className: 'notification' },
+                    : React.createElement("div", { className: 'rpc-notification' },
                         React.createElement(BiSolidMessageDetail, { onClick: () => {
                                 setNotification(false);
                                 setDialog(true);
                             } }),
-                        notification && React.createElement("span", { className: 'badge' })),
-                React.createElement("dialog", { ref: dialogRef, className: `${dialog ? 'dialog' : ''} 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: 'heading' }, "Chat"),
+                        notification && React.createElement("span", { className: 'rpc-badge' })),
+                React.createElement("dialog", { ref: dialogRef, className: `${dialog ? 'dialog' : ''} position-${dialogOptions?.position || 'center'}`, style: dialogOptions?.style },
+                    React.createElement("div", { className: 'rpc-heading' }, "Chat"),
                     React.createElement("hr", null),
                     React.createElement("div", null,
-                        React.createElement("div", { ref: containerRef, className: 'message-container' }, opponentName && messages.map(({ id, text }, i) => React.createElement("div", { key: i },
+                        React.createElement("div", { ref: containerRef, className: 'rpc-message-container' }, opponentName && messages.map(({ id, text }, i) => React.createElement("div", { key: i },
                             React.createElement("strong", null,
                                 id === peerId ? 'You' : opponentName,
                                 ": "),
                             React.createElement("span", null, text)))),
                         React.createElement("hr", null),
-                        React.createElement("form", { className: 'input-container', onSubmit: e => {
-                                var _a;
+                        React.createElement("form", { className: 'rpc-input-container', onSubmit: e => {
                                 e.preventDefault();
-                                const text = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+                                const text = inputRef.current?.value;
                                 if (text) {
                                     inputRef.current.value = '';
                                     addMessage({ id: peerId, text }, true);
                                 }
                             } },
-                            React.createElement("input", { ref: inputRef, className: 'input', placeholder: 'Enter a message' }),
+                            React.createElement("input", { ref: inputRef, className: 'rpc-input', placeholder: 'Enter a message' }),
                             React.createElement("button", { type: 'submit' },
                                 React.createElement(GrSend, null)))))),
             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) }))),

package/build/storage.js

@@ -10,7 +10,7 @@ const getStorage = (key, fallbackValue, local = false) => {
             throw new Error("Value doesn't exist");
         value = JSON.parse(value);
     }
-    catch (_a) {
+    catch {
         if (fallbackValue !== undefined) {
             value = fallbackValue;
             setStorage(key, value, local);
@@ -23,7 +23,7 @@ const getStorage = (key, fallbackValue, local = false) => {
     return value;
 };
 export default function useStorage(key, initialValue, { local = false, save = false } = {}) {
-    save || (save = getStorage('mode') !== 'online');
+    save ||= getStorage('mode') !== 'online';
     const [storedValue, setStoredValue] = useState(save ? getStorage(key, initialValue, local) : initialValue);
     const setValue = (value) => {
         setStoredValue((old) => {

package/build/{index.css → styles.css}

@@ -1,14 +1,14 @@
-.main {
+.rpc-main {
     display: flex;
     align-items: center;
     column-gap: 0.5rem;
 }
 
-.notification {
+.rpc-notification {
     position: relative;
 }
 
-.notification .badge {
+.rpc-notification .rpc-badge {
     background-color: red;
     position: absolute;
     top: 0.25rem;
@@ -18,7 +18,7 @@
     border-radius: 100%;
 }
 
-.dialog {
+.rpc-dialog {
     display: flex;
     flex-direction: column;
     row-gap: 0.25rem;
@@ -30,52 +30,52 @@
     font-size: smaller;
 }
 
-.position-left {
+.rpc-position-left {
     left: 0.5rem;
     translate: -100%;
 }
 
-.position-center {
+.rpc-position-center {
     translate: -50%;
 }
 
-.position-right {
+.rpc-position-right {
     left: 0.5rem;
 }
 
-.message-container {
+.rpc-message-container {
     height: 6rem;
     overflow-y: scroll;
     padding-inline: 0.5rem;
     margin-bottom: 0.25rem;
 }
 
-.message-container::-webkit-scrollbar {
+.rpc-message-container::-webkit-scrollbar {
     width: 2.5px;
 }
 
-.message-container::-webkit-scrollbar-track {
+.rpc-message-container::-webkit-scrollbar-track {
     background: gray;
 }
 
-.message-container::-webkit-scrollbar-thumb {
+.rpc-message-container::-webkit-scrollbar-thumb {
     background-color: white;
 }
 
-.heading {
+.rpc-heading {
     text-align: center;
     font-weight: bold;
     padding-inline: 0.5rem;
 }
 
-.input-container {
+.rpc-input-container {
     display: flex;
     column-gap: 0.25rem;
     padding-inline: 0.5rem;
     padding-block: 0.4rem;
 }
 
-.input {
+.rpc-input {
     background-color: black;
     border: none;
     outline: 1px solid rgba(255, 255, 255, 0.8);
@@ -83,6 +83,14 @@
     padding-inline: 0.25rem;
 }
 
-.input:focus {
+.rpc-input:focus {
     outline: 2px solid white;
+}
+
+.rpc-scale-down {
+    scale: calc(2/3);
+}
+
+.rpc-invert {
+    filter: invert(100%);
 }

package/package.json

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

package/build/icons.css

@@ -1,11 +0,0 @@
-* {
-    -webkit-tap-highlight-color: transparent;
-}
-
-.scale-down {
-    scale: calc(2/3);
-}
-
-.invert {
-    filter: invert(100%);
-}