react-peer-chat 0.1.11 → 0.2.0

package/build/icons.css

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

package/build/icons.d.ts

@@ -1,3 +1,7 @@
 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;
 export declare function BsFillMicFill(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): React.JSX.Element;
 export declare function BsFillMicMuteFill(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): React.JSX.Element;

package/build/icons.js

@@ -1,13 +1,39 @@
 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>;
+}
+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>;
+}
+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>;
+}
 export function BsFillMicFill(props) {
-    return React.createElement("span", Object.assign({}, props),
-        React.createElement("svg", { fill: "currentColor", width: '16px', height: '16px' },
-            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" })));
+    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>;
 }
 export function BsFillMicMuteFill(props) {
-    return React.createElement("span", Object.assign({}, props),
-        React.createElement("svg", { fill: "currentColor", width: '16px', height: '16px' },
-            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" })));
+    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>;
 }

package/build/index.css

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

package/build/index.d.ts

@@ -1,11 +1,34 @@
-import React from 'react';
+import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode, RefObject } from 'react';
 import { PeerOptions } from 'peerjs';
-type Id = string | number;
+import './index.css';
+type Message = {
+    id: string;
+    text: string;
+};
+type ChildrenOptions = {
+    notification?: boolean;
+    messages?: Message[];
+    addMessage?: (message: Message) => void;
+    dialogRef?: RefObject<HTMLDialogElement>;
+    audio?: boolean;
+    setAudio?: (audio: boolean) => void;
+};
+type DialogPosition = 'left' | 'center' | 'up';
+type DialogOptions = {
+    position: DialogPosition;
+    style: CSSProperties;
+};
 type Props = {
-    peerId: Id;
-    remotePeerId: Id;
+    name?: string;
+    peerId: string;
+    remotePeerId: string;
+    text?: boolean;
+    voice?: boolean;
     peerOptions?: PeerOptions;
+    dialogOptions?: DialogOptions;
     onError?: () => void;
-};
-export default function Chat({ peerId, remotePeerId, peerOptions, onError }: Props): React.JSX.Element;
+    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 {};

package/build/index.js

@@ -7,18 +7,69 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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 from './useStorage';
-import { BsFillMicFill, BsFillMicMuteFill } from './icons';
-export default function Chat({ peerId, remotePeerId, peerOptions, onError = () => console.error("Can not access microphone!") }) {
+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();
+    const [opponentName, setOpponentName] = useState();
+    const [notification, setNotification] = useState(false);
+    const [messages, setMessages] = useStorage('rpc-messages', [], { save: true });
+    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, { local: true, save: true });
     const streamRef = useRef(null);
     const localStream = useRef();
+    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))
+            setNotification(true);
+    }
+    function handleConnection(conn, setName = false) {
+        if (setName)
+            setOpponentName(conn.metadata || 'Anonymous User');
+        connRef.current = conn;
+        conn.on('open', () => {
+            conn.send({ type: 'messages', messages });
+            conn.on('data', ({ type, message, messages }) => {
+                if (type === 'message')
+                    addMessage(message);
+                else if (type === 'messages') {
+                    setMessages(old => {
+                        if (messages.length > old.length)
+                            return messages;
+                        return old;
+                    });
+                }
+            });
+        });
+    }
     useEffect(() => {
-        if (!audio)
+        if (!text && !audio) {
+            setPeer(undefined);
             return;
+        }
         (function loadPeer() {
             return __awaiter(this, void 0, void 0, function* () {
                 const Peer = (yield import('peerjs')).default;
@@ -32,37 +83,97 @@ export default function Chat({ peerId, remotePeerId, peerOptions, onError = () =
             return;
         let call;
         peer.on('open', () => {
-            const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-            getUserMedia({
-                video: false,
-                audio: {
-                    autoGainControl: false,
-                    noiseSuppression: true,
-                    echoCancellation: true
-                }
-            }, (stream) => {
-                localStream.current = stream;
-                call = peer.call(`rpc-${remotePeerId}`, stream);
-                call.on('stream', handleRemoteStream);
-                call.on('close', call.removeAllListeners);
-                peer.on('call', (e) => {
-                    call = e;
-                    call.answer(stream);
+            if (text)
+                handleConnection(peer.connect(remotePeerId, { metadata: name }), true);
+            if (audio) {
+                const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+                getUserMedia({
+                    video: false,
+                    audio: {
+                        autoGainControl: false,
+                        noiseSuppression: true,
+                        echoCancellation: true
+                    }
+                }, (stream) => {
+                    localStream.current = stream;
+                    call = peer.call(remotePeerId, stream);
                     call.on('stream', handleRemoteStream);
                     call.on('close', call.removeAllListeners);
-                });
-            }, onError);
+                    peer.on('call', e => {
+                        call = e;
+                        call.answer(stream);
+                        call.on('stream', handleRemoteStream);
+                        call.on('close', call.removeAllListeners);
+                    });
+                }, onError);
+            }
         });
+        peer.on('connection', handleConnection);
         return () => {
-            var _a;
+            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();
             peer.removeAllListeners();
             peer.destroy();
         };
     }, [peer]);
-    return React.createElement("button", { onClick: () => setAudio(audio => !audio) }, audio ? React.createElement(React.Fragment, null,
-        React.createElement("audio", { ref: streamRef, autoPlay: true, className: 'hidden' }),
-        React.createElement(BsFillMicFill, { title: "Turn mic off" })) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on" }));
+    useEffect(() => {
+        var _a, _b;
+        if (dialog)
+            (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.show();
+        else
+            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
+    }, [dialog]);
+    useEffect(() => {
+        const container = containerRef.current;
+        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>;
 }
+export const cleanStorage = () => removeStorage('rpc-messages');

package/build/{useStorage.d.ts → storage.d.ts}

@@ -1,3 +1,4 @@
+export declare const removeStorage: (key: string, local?: boolean) => void;
 export default function useStorage<Value>(key: string, initialValue: Value, { local, save }?: {
     local?: boolean | undefined;
     save?: boolean | undefined;

package/build/{useStorage.js → storage.js}

@@ -1,6 +1,6 @@
 import { useState } from "react";
 const setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
-const removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
+export const removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
 const getStorage = (key, fallbackValue, local = false) => {
     if (typeof window === "undefined")
         return fallbackValue;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-peer-chat",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "main": "./build/index.js",
   "type": "module",
   "scripts": {
-    "build": "npm i && tsc"
+    "copy": "copy .\\src\\*.css build",
+    "build": "npm i && tsc && npm run copy"
   },
   "repository": {
     "type": "git",
@@ -38,4 +39,4 @@
   "dependencies": {
     "peerjs": "^1.5.0"
   }
-}
+}