jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(tracker-assist): 3.1.1 - peer singletone handling

Browse source
This commit is contained in:
ShiKhu 2021-09-05 21:54:28 +02:00
parent ce38c88a18
commit 11ee390f8d
4 changed files with 24 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
tracker/tracker-assist/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@openreplay/tracker-assist",
"description": "Tracker plugin for screen assistance through the WebRTC",
"version": "3.1.0",
"version": "3.1.1",
"keywords": [
"WebRTC",
"assistance",

2
tracker/tracker-assist/src/Confirm.ts → tracker/tracker-assist/src/ConfirmWindow.ts
View file

@ -1,7 +1,7 @@
const declineIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewBox="0 0 128 128" ><g id="Circle_Grid" data-name="Circle Grid"><circle cx="64" cy="64" fill="#ef5261" r="64"/></g><g id="icon"><path d="m57.831 70.1c8.79 8.79 17.405 12.356 20.508 9.253l4.261-4.26a7.516 7.516 0 0 1 10.629 0l9.566 9.566a7.516 7.516 0 0 1 0 10.629l-7.453 7.453c-7.042 7.042-27.87-2.358-47.832-22.319-9.976-9.981-16.519-19.382-20.748-28.222s-5.086-16.091-1.567-19.61l7.453-7.453a7.516 7.516 0 0 1 10.629 0l9.566 9.563a7.516 7.516 0 0 1 0 10.629l-4.264 4.271c-3.103 3.1.462 11.714 9.252 20.5z" fill="#eeefee"/></g></svg>`;
export default class Confirm {
export default class ConfirmWindow {
private wrapper: HTMLDivElement;
constructor(text: string, styles?: Object) {

92
tracker/tracker-assist/src/confirm.ts
View file

@ -1,92 +0,0 @@
const declineIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewBox="0 0 128 128" ><g id="Circle_Grid" data-name="Circle Grid"><circle cx="64" cy="64" fill="#ef5261" r="64"/></g><g id="icon"><path d="m57.831 70.1c8.79 8.79 17.405 12.356 20.508 9.253l4.261-4.26a7.516 7.516 0 0 1 10.629 0l9.566 9.566a7.516 7.516 0 0 1 0 10.629l-7.453 7.453c-7.042 7.042-27.87-2.358-47.832-22.319-9.976-9.981-16.519-19.382-20.748-28.222s-5.086-16.091-1.567-19.61l7.453-7.453a7.516 7.516 0 0 1 10.629 0l9.566 9.563a7.516 7.516 0 0 1 0 10.629l-4.264 4.271c-3.103 3.1.462 11.714 9.252 20.5z" fill="#eeefee"/></g></svg>`;
export default class Confirm {
private wrapper: HTMLDivElement;
constructor(text: string, styles?: Object) {
const wrapper = document.createElement('div');
const popup = document.createElement('div');
const p = document.createElement('p');
p.innerText = text;
const buttons = document.createElement('div');
const answerBtn = document.createElement('button');
answerBtn.innerHTML = declineIcon.replace('fill="#ef5261"', 'fill="green"');
const declineBtn = document.createElement('button');
declineBtn.innerHTML = declineIcon;
buttons.appendChild(answerBtn);
buttons.appendChild(declineBtn);
popup.appendChild(p);
popup.appendChild(buttons);
const btnStyles = {
borderRadius: "50%",
width: "22px",
height: "22px",
background: "transparent",
padding: 0,
margin: 0,
border: 0,
cursor: "pointer",
}
Object.assign(answerBtn.style, btnStyles);
Object.assign(declineBtn.style, btnStyles);
Object.assign(buttons.style, {
marginTop: "10px",
display: "flex",
alignItems: "center",
justifyContent: "space-evenly",
});
Object.assign(popup.style, {
position: "relative",
pointerEvents: "auto",
margin: "4em auto",
width: "90%",
maxWidth: "400px",
padding: "25px 30px",
background: "black",
opacity: ".75",
color: "white",
textAlign: "center",
borderRadius: ".25em .25em .4em .4em",
boxShadow: "0 0 20px rgb(0 0 0 / 20%)",
}, styles);
Object.assign(wrapper.style, {
position: "fixed",
left: 0,
top: 0,
height: "100%",
width: "100%",
pointerEvents: "none",
zIndex: 2147483647 - 1,
})
wrapper.appendChild(popup);
this.wrapper = wrapper;
answerBtn.onclick = () => {
this.remove();
this.callback(true);
}
declineBtn.onclick = () => {
this.remove();
this.callback(false);
}
}
mount() {
document.body.appendChild(this.wrapper);
}
private callback: (result: boolean) => void = ()=>{};
onAnswer(callback: (result: boolean) => void) {
this.callback = callback;
}
remove() {
if (!this.wrapper.parentElement) { return; }
document.body.removeChild(this.wrapper);
}
}

37
tracker/tracker-assist/src/index.ts
View file

@ -5,7 +5,7 @@ import type Message from '@openreplay/tracker';
import Mouse from './Mouse';
import CallWindow from './CallWindow';
import Confirm from './Confirm';
import ConfirmWindow from './ConfirmWindow';
export interface Options {
@ -34,23 +34,28 @@ export default function(opts: Partial<Options> = {}) {
return;
}
let observerRestart = false;
let assistDemandedRestart = false;
let peer : Peer | null = null;
app.attachStopCallback(function() {
if (assistDemandedRestart) { return; }
peer && peer.destroy();
});
app.attachStartCallback(function() {
if (observerRestart) { return; }
// @ts-ignore
if (assistDemandedRestart) { return; }
const peerID = `${app.projectKey}-${app.getSessionID()}`
const peer = new Peer(peerID, {
peer = new Peer(peerID, {
// @ts-ignore
host: app.getHost(),
path: '/assist',
port: location.protocol === 'http:' && appOptions.__DISABLE_SECURE_MODE ? 80 : 443,
});
console.log('OpenReplay tracker-assist peerID:', peerID)
peer.on('error', e => console.log("OpenReplay tracker-assist peer error: ", e.type, e))
peer.on('connection', function(conn) {
window.addEventListener("beforeunload", () => conn.open && conn.send("unload"));
peer.on('error', e => console.log("OpenReplay tracker-assist peer error: ", e.type, e))
console.log('OpenReplay tracker-assist: Connecting...')
conn.on('open', function() {
@ -70,10 +75,11 @@ export default function(opts: Partial<Options> = {}) {
}
}
observerRestart = true;
assistDemandedRestart = true;
app.stop();
//@ts-ignore (should update tracker dependency)
app.addCommitCallback((messages: Array<Message>): void => {
if (!conn.open) { return; } // TODO: clear commit callbacks on connection close
let i = 0;
while (i < messages.length) {
buffer.push(messages.slice(i, i+=1000));
@ -83,30 +89,31 @@ export default function(opts: Partial<Options> = {}) {
sendNext();
}
});
app.start().then(() => { observerRestart = false; });
app.start().then(() => { assistDemandedRestart = false; });
});
});
let calling: CallingState = CallingState.False;
let callingState: CallingState = CallingState.False;
peer.on('call', function(call) {
if (!peer) { return; }
const dataConn: DataConnection | undefined = peer
.connections[call.peer].find(c => c.type === 'data');
if (calling !== CallingState.False || !dataConn) {
if (callingState !== CallingState.False || !dataConn) {
call.close();
return;
}
calling = CallingState.Requesting;
const notifyCallEnd = () => {
dataConn.open && dataConn.send("call_end");
}
const confirm = new Confirm(options.confirmText, options.confirmStyle);
callingState = CallingState.Requesting;
const confirm = new ConfirmWindow(options.confirmText, options.confirmStyle);
dataConn.on('data', (data) => { // if call closed by a caller before confirm
if (data === "call_end") {
//console.log('OpenReplay tracker-assist: receiving callend onconfirm')
calling = CallingState.False;
callingState = CallingState.False;
confirm.remove();
}
});
@ -115,7 +122,7 @@ export default function(opts: Partial<Options> = {}) {
if (!agreed || !dataConn.open) {
call.close();
notifyCallEnd();
calling = CallingState.False;
callingState = CallingState.False;
return;
}
@ -128,7 +135,7 @@ export default function(opts: Partial<Options> = {}) {
mouse.remove();
callUI?.remove();
lStream.getTracks().forEach(t => t.stop());
calling = CallingState.False;
callingState = CallingState.False;
}
const initiateCallEnd = () => {
//console.log("callend initiated")