react-peer-chat 0.2.0 → 0.2.2

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,39 +1,28 @@
 import React from "react";
-import './icons.css';
 export function BiSolidMessageDetail(props) {
-    return <span {...props}>
-        <svg fill="currentColor" width='1.5rem' height='1.5rem' className='scale-down'>
-            <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"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, 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 <span {...props}>
-        <svg fill="currentColor" width='1.5rem' height='1.5rem' className='scale-down'>
-            <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"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, 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 <span {...props}>
-        <svg fill="currentColor" width='1.5rem' height='1.5rem' className='scale-down invert'>
-            <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"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, 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 <span {...props}>
-        <svg fill="currentColor" width='1rem' height='1rem'>
-            <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
-            <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"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, 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 <span {...props}>
-        <svg fill="currentColor" width='1rem' height='1rem'>
-            <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"/>
-            <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"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, 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;
@@ -30,5 +29,5 @@ type Props = {
     children?: ReactNode | ((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;
-export declare const cleanStorage: () => void;
+export declare const clearChat: () => void;
 export {};

package/build/index.js

@@ -21,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 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"]);
     const [peer, setPeer] = useState();
@@ -132,48 +131,39 @@ export default function Chat(_a) {
         if (container)
             container.scrollTop = container.scrollHeight;
     }, [dialog, opponentName, messages]);
-    return <div className='main' {...props}>
-        {typeof children === 'function' ? children({ notification, messages, addMessage, dialogRef, audio, setAudio }) : <>
-            {text && <div>
-                {dialog ? <BiSolidMessageX onClick={() => setDialog(false)}/>
-                    : <div className='notification'>
-                        <BiSolidMessageDetail onClick={() => {
-                            setNotification(false);
-                            setDialog(true);
-                        }}/>
-                        {notification && <span className='badge'/>}
-                    </div>}
-                <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}>
-                    <div className='heading'>Chat</div>
-                    <hr />
-                    <div>
-                        <div ref={containerRef} className='message-container'>
-                            {opponentName && messages.map(({ id, text }, i) => <div key={i}>
-                                <strong>{id === peerId ? 'You' : opponentName}: </strong>
-                                <span>{text}</span>
-                            </div>)}
-                        </div>
-                        <hr />
-                        <form className='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 = '';
-                        addMessage({ id: peerId, text }, true);
-                    }
-                }}>
-                            <input ref={inputRef} className='input' placeholder='Enter a message'/>
-                            <button type='submit'><GrSend /></button>
-                        </form>
-                    </div>
-                </dialog>
-            </div>}
-            {voice && <div>
-                {audio ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)}/> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)}/>}
-            </div>}
-        </>}
-        {voice && audio && <audio ref={streamRef} autoPlay style={{ display: 'none' }}/>}
-    </div>;
+    return React.createElement("div", Object.assign({ 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: 'rpc-notification' },
+                        React.createElement(BiSolidMessageDetail, { onClick: () => {
+                                setNotification(false);
+                                setDialog(true);
+                            } }),
+                        notification && React.createElement("span", { className: 'rpc-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: '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("strong", null,
+                                id === peerId ? 'You' : opponentName,
+                                ": "),
+                            React.createElement("span", null, text)))),
+                        React.createElement("hr", null),
+                        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 = '';
+                                    addMessage({ id: peerId, text }, true);
+                                }
+                            } },
+                            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) }))),
+        voice && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: 'none' } }));
 }
-export const cleanStorage = () => removeStorage('rpc-messages');
+export const clearChat = () => removeStorage('rpc-messages');

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;
@@ -28,43 +28,54 @@
     outline: 2px solid white;
     border-radius: 0.25rem;
     font-size: smaller;
+}
+
+.rpc-position-left {
+    left: 0.5rem;
+    translate: -100%;
+}
+
+.rpc-position-center {
     translate: -50%;
-    left: 50%;
 }
 
-.message-container {
+.rpc-position-right {
+    left: 0.5rem;
+}
+
+.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);
@@ -72,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.0",
+  "version": "0.2.2",
   "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%);
-}