react-peer-chat 0.1.6 → 0.1.8
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.
- package/build/icons.js +2 -13
- package/build/index.js +19 -37
- package/build/useStorage.js +11 -35
- package/package.json +1 -1
package/build/icons.js
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
export function BsFillMicFill(props) {
|
|
14
|
-
return React.createElement("span",
|
|
3
|
+
return React.createElement("span", { ...props },
|
|
15
4
|
React.createElement("svg", { fill: "currentColor", width: '16px', height: '16px' },
|
|
16
5
|
React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }),
|
|
17
6
|
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" })));
|
|
18
7
|
}
|
|
19
8
|
export function BsFillMicMuteFill(props) {
|
|
20
|
-
return React.createElement("span",
|
|
9
|
+
return React.createElement("span", { ...props },
|
|
21
10
|
React.createElement("svg", { fill: "currentColor", width: '16px', height: '16px' },
|
|
22
11
|
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" }),
|
|
23
12
|
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.js
CHANGED
|
@@ -1,36 +1,19 @@
|
|
|
1
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
1
|
import React, { useEffect, useRef } from 'react';
|
|
18
2
|
import useStorage from './useStorage';
|
|
19
3
|
import { BsFillMicFill, BsFillMicMuteFill } from './icons';
|
|
20
|
-
export default function Chat(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
useEffect(function () {
|
|
4
|
+
export default function Chat({ peerId, remotePeerId, peerOptions, onError = () => console.error("Can not access microphone!") }) {
|
|
5
|
+
const [audio, setAudio] = useStorage('rpc-audio', false, { local: true, save: true });
|
|
6
|
+
const streamRef = useRef(null);
|
|
7
|
+
const localStream = useRef();
|
|
8
|
+
const handleRemoteStream = (remoteStream) => streamRef.current.srcObject = remoteStream;
|
|
9
|
+
useEffect(() => {
|
|
27
10
|
if (!audio)
|
|
28
11
|
return;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
peer.on('open',
|
|
33
|
-
|
|
12
|
+
const Peer = require('peerjs').default;
|
|
13
|
+
const peer = new Peer(`rpc-${peerId}`, peerOptions);
|
|
14
|
+
let call;
|
|
15
|
+
peer.on('open', () => {
|
|
16
|
+
const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
|
|
34
17
|
getUserMedia({
|
|
35
18
|
video: false,
|
|
36
19
|
audio: {
|
|
@@ -38,12 +21,12 @@ export default function Chat(_a) {
|
|
|
38
21
|
noiseSuppression: true,
|
|
39
22
|
echoCancellation: true
|
|
40
23
|
}
|
|
41
|
-
},
|
|
24
|
+
}, (stream) => {
|
|
42
25
|
localStream.current = stream;
|
|
43
|
-
call = peer.call(
|
|
26
|
+
call = peer.call(`rpc-${remotePeerId}`, stream);
|
|
44
27
|
call.on('stream', handleRemoteStream);
|
|
45
28
|
call.on('close', call.removeAllListeners);
|
|
46
|
-
peer.on('call',
|
|
29
|
+
peer.on('call', (e) => {
|
|
47
30
|
call = e;
|
|
48
31
|
call.answer(stream);
|
|
49
32
|
call.on('stream', handleRemoteStream);
|
|
@@ -51,16 +34,15 @@ export default function Chat(_a) {
|
|
|
51
34
|
});
|
|
52
35
|
}, onError);
|
|
53
36
|
});
|
|
54
|
-
return
|
|
55
|
-
|
|
56
|
-
(
|
|
57
|
-
call
|
|
58
|
-
call === null || call === void 0 ? void 0 : call.close();
|
|
37
|
+
return () => {
|
|
38
|
+
localStream.current?.getTracks().forEach(track => track.stop());
|
|
39
|
+
call?.removeAllListeners();
|
|
40
|
+
call?.close();
|
|
59
41
|
peer.removeAllListeners();
|
|
60
42
|
peer.destroy();
|
|
61
43
|
};
|
|
62
44
|
}, [audio]);
|
|
63
|
-
return React.createElement("button", { onClick:
|
|
45
|
+
return React.createElement("button", { onClick: () => setAudio(audio => !audio) }, audio ? React.createElement(React.Fragment, null,
|
|
64
46
|
React.createElement("audio", { ref: streamRef, autoPlay: true, className: 'hidden' }),
|
|
65
47
|
React.createElement(BsFillMicFill, { title: "Turn mic off" })) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on" }));
|
|
66
48
|
}
|
package/build/useStorage.js
CHANGED
|
@@ -1,39 +1,16 @@
|
|
|
1
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
-
if (!m) return o;
|
|
4
|
-
var i = m.call(o), r, ar = [], e;
|
|
5
|
-
try {
|
|
6
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
-
}
|
|
8
|
-
catch (error) { e = { error: error }; }
|
|
9
|
-
finally {
|
|
10
|
-
try {
|
|
11
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
-
}
|
|
13
|
-
finally { if (e) throw e.error; }
|
|
14
|
-
}
|
|
15
|
-
return ar;
|
|
16
|
-
};
|
|
17
1
|
import { useState } from "react";
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
var removeStorage = function (key, local) {
|
|
23
|
-
if (local === void 0) { local = false; }
|
|
24
|
-
return (local ? localStorage : sessionStorage).removeItem(key);
|
|
25
|
-
};
|
|
26
|
-
var getStorage = function (key, fallbackValue, local) {
|
|
27
|
-
if (local === void 0) { local = false; }
|
|
2
|
+
const setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
|
|
3
|
+
const removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
|
|
4
|
+
const getStorage = (key, fallbackValue, local = false) => {
|
|
28
5
|
if (typeof window === "undefined")
|
|
29
6
|
return fallbackValue;
|
|
30
|
-
|
|
7
|
+
let value = (local ? localStorage : sessionStorage).getItem(key);
|
|
31
8
|
try {
|
|
32
9
|
if (!value)
|
|
33
10
|
throw new Error("Value doesn't exist");
|
|
34
11
|
value = JSON.parse(value);
|
|
35
12
|
}
|
|
36
|
-
catch
|
|
13
|
+
catch {
|
|
37
14
|
if (fallbackValue !== undefined) {
|
|
38
15
|
value = fallbackValue;
|
|
39
16
|
setStorage(key, value, local);
|
|
@@ -45,13 +22,12 @@ var getStorage = function (key, fallbackValue, local) {
|
|
|
45
22
|
}
|
|
46
23
|
return value;
|
|
47
24
|
};
|
|
48
|
-
export default function useStorage(key, initialValue,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
var updatedValue = typeof value === 'function' ? value(old) : value;
|
|
25
|
+
export default function useStorage(key, initialValue, { local = false, save = false } = {}) {
|
|
26
|
+
save ||= getStorage('mode') !== 'online';
|
|
27
|
+
const [storedValue, setStoredValue] = useState(save ? getStorage(key, initialValue, local) : initialValue);
|
|
28
|
+
const setValue = (value) => {
|
|
29
|
+
setStoredValue((old) => {
|
|
30
|
+
const updatedValue = typeof value === 'function' ? value(old) : value;
|
|
55
31
|
if (save)
|
|
56
32
|
setStorage(key, updatedValue, local);
|
|
57
33
|
return updatedValue;
|