react-peer-chat 0.2.1 → 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,18 +1,17 @@
 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' },
+        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' },
+        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' },
+        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) {

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

@@ -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,27 +131,27 @@ export default function Chat(_a) {
         if (container)
             container.scrollTop = container.scrollHeight;
     }, [dialog, opponentName, messages]);
-    return React.createElement("div", Object.assign({ className: 'main' }, props),
+    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: 'notification' },
+                    : React.createElement("div", { className: 'rpc-notification' },
                         React.createElement(BiSolidMessageDetail, { onClick: () => {
                                 setNotification(false);
                                 setDialog(true);
                             } }),
-                        notification && React.createElement("span", { className: 'badge' })),
+                        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: 'heading' }, "Chat"),
+                    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 => {
+                        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;
@@ -161,7 +160,7 @@ export default function Chat(_a) {
                                     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/{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.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%);
-}