diff --git a/tracker/tracker-assist/package.json b/tracker/tracker-assist/package.json index 067fbe302..683c9c322 100644 --- a/tracker/tracker-assist/package.json +++ b/tracker/tracker-assist/package.json @@ -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", diff --git a/tracker/tracker-assist/src/Confirm.ts b/tracker/tracker-assist/src/ConfirmWindow.ts similarity index 98% rename from tracker/tracker-assist/src/Confirm.ts rename to tracker/tracker-assist/src/ConfirmWindow.ts index fd1075789..64dc98a28 100644 --- a/tracker/tracker-assist/src/Confirm.ts +++ b/tracker/tracker-assist/src/ConfirmWindow.ts @@ -1,7 +1,7 @@ const declineIcon = ``; -export default class Confirm { +export default class ConfirmWindow { private wrapper: HTMLDivElement; constructor(text: string, styles?: Object) { diff --git a/tracker/tracker-assist/src/confirm.ts b/tracker/tracker-assist/src/confirm.ts deleted file mode 100644 index fd1075789..000000000 --- a/tracker/tracker-assist/src/confirm.ts +++ /dev/null @@ -1,92 +0,0 @@ - -const declineIcon = ``; - -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); - } -} diff --git a/tracker/tracker-assist/src/index.ts b/tracker/tracker-assist/src/index.ts index e5a7085b6..89d233e70 100644 --- a/tracker/tracker-assist/src/index.ts +++ b/tracker/tracker-assist/src/index.ts @@ -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 = {}) { 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 = {}) { } } - observerRestart = true; + assistDemandedRestart = true; app.stop(); //@ts-ignore (should update tracker dependency) app.addCommitCallback((messages: Array): 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 = {}) { 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 = {}) { if (!agreed || !dataConn.open) { call.close(); notifyCallEnd(); - calling = CallingState.False; + callingState = CallingState.False; return; } @@ -128,7 +135,7 @@ export default function(opts: Partial = {}) { mouse.remove(); callUI?.remove(); lStream.getTracks().forEach(t => t.stop()); - calling = CallingState.False; + callingState = CallingState.False; } const initiateCallEnd = () => { //console.log("callend initiated")