react-peer-chat 0.6.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +28 -0
  2. package/dist/icons.js +10 -10
  3. package/dist/index.js +5 -5
  4. package/dist/styles.css +0 -4
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -110,6 +110,34 @@ export default function App() {
110
110
  </Chat>
111
111
  }
112
112
  ```
113
+ #### Custom ICE Servers
114
+ You can also use custom ICE servers to avoid any connectivity issues in case free TURN server limit provided by `react-peer-chat` expires.
115
+ ```jsx
116
+ import React from 'react';
117
+ import Chat from 'react-peer-chat';
118
+ import 'react-peer-chat/dist/styles.css';
119
+
120
+ export default function App() {
121
+ return <Chat
122
+ name='John Doe'
123
+ peerId='my-unique-id'
124
+ remotePeerId='remote-unique-id'
125
+ peerOptions={{
126
+ config: {
127
+ iceServers: [
128
+ { urls: "stun:stun-server.example.com:19302" },
129
+ {
130
+ urls: 'turn:turn-server.example.com:19403',
131
+ username: 'optional-username',
132
+ credential: 'auth-token'
133
+ }
134
+ ]
135
+ }
136
+ // other peerjs options (optional)
137
+ }}
138
+ />
139
+ }
140
+ ```
113
141
  ## Chat Component API Reference
114
142
  Here is the full API for the `<Chat>` component, these properties can be set on an instance of Chat:
115
143
  | Parameter | Type | Required | Default | Description |
package/dist/icons.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import React from "react";
2
2
  export function BiSolidMessageDetail(props) {
3
- return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
4
- React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
3
+ return React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
4
+ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" },
5
5
  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" })));
6
6
  }
7
7
  export function BiSolidMessageX(props) {
8
- return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
9
- React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down' },
8
+ return React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
9
+ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" },
10
10
  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" })));
11
11
  }
12
12
  export function GrSend(props) {
13
- return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
14
- React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'rpc-scale-down rpc-invert' },
13
+ return React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
14
+ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem", className: "rpc-invert" },
15
15
  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" })));
16
16
  }
17
17
  export function BsFillMicFill(props) {
18
- return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
19
- React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
18
+ return React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
19
+ React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
20
20
  React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }),
21
21
  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" })));
22
22
  }
23
23
  export function BsFillMicMuteFill(props) {
24
- return React.createElement("span", Object.assign({ className: 'rpc-icon-container' }, props),
25
- React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
24
+ return React.createElement("span", Object.assign({ className: "rpc-icon-container" }, props),
25
+ React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
26
26
  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" }),
27
27
  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" })));
28
28
  }
package/dist/index.js CHANGED
@@ -2,11 +2,11 @@ import React, { useEffect, useRef, useState } from 'react';
2
2
  import useStorage, { removeStorage } from './storage.js';
3
3
  import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './icons.js';
4
4
  const turnAccounts = [
5
- { username: "85057be497c4a2abf5217397", credential: "5q+3qaVjpoCBt9Dm" },
6
- { username: "5b01145c9a5d422eaafcc038", credential: "469knsKDfV4YVHlY" },
7
- { username: "497c3ba46efa43c87910feee", credential: "xtQekYrNSUm2bFTG" },
8
- { username: "1d0ec99bb76eae3e0a33f124", credential: "1a72ULwxpT7yhmA3" },
9
- { username: "49a002173f35f8a72344e702", credential: "I1KFRZ2aea+bZvNf" },
5
+ { username: "70061a377b51f3a3d01c11e3", credential: "lHV4NYJ5Rfl5JNa9" },
6
+ { username: "13b19eb65bbf6e9f96d64b72", credential: "7R9P/+7y7Q516Etv" },
7
+ { username: "3469603f5cdc7ca4a1e891ae", credential: "/jMyLSDbbcgqpVQv" },
8
+ { username: "a7926f4dcc4a688d41f89752", credential: "ZYM8jFYeb8bQkL+N" },
9
+ { username: "0be25ab7f61d9d733ba94809", credential: "hiiSwWVch+ftt3SX" },
10
10
  { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" }
11
11
  ];
12
12
  const defaultConfig = {
package/dist/styles.css CHANGED
@@ -116,10 +116,6 @@
116
116
  align-items: center;
117
117
  }
118
118
 
119
- .rpc-scale-down {
120
- scale: calc(2/3);
121
- }
122
-
123
119
  .rpc-invert {
124
120
  filter: invert(100%);
125
121
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-peer-chat",
3
- "version": "0.6.0",
3
+ "version": "0.6.2",
4
4
  "description": "An easy to use react component for impleting peer-to-peer chatting.",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -36,7 +36,7 @@
36
36
  "react-dom": ">=16.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@types/react": "^18.2.47"
39
+ "@types/react": "^18.2.48"
40
40
  },
41
41
  "dependencies": {
42
42
  "peerjs": "^1.5.2"