From c554803376038dd05f6846180b138f3de32fd2d3 Mon Sep 17 00:00:00 2001 From: ShiKhu Date: Wed, 14 Jul 2021 19:35:56 +0300 Subject: [PATCH 1/2] fix(assist): separate audio,video tracks; fixmouse --- .../app/components/Session_/Player/Player.js | 20 ++++---- .../managers/AssistManager.ts | 35 ++++++++----- tracker/tracker-assist/src/CallWindow.ts | 50 +++++++++++++++---- tracker/tracker-assist/src/index.ts | 2 +- 4 files changed, 74 insertions(+), 33 deletions(-) diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js index e9943b3ae..51a250efe 100644 --- a/frontend/app/components/Session_/Player/Player.js +++ b/frontend/app/components/Session_/Player/Player.js @@ -20,7 +20,7 @@ const ScreenWrapper = withOverlay()(React.memo(() =>
}
- { !removeOverlay && + { (!removeOverlay || live && liveStatusText) &&
{liveStatusText} : } -
-
-
+ { !live && +
+
+
+ }
} { completed && autoplay && nextId && } diff --git a/frontend/app/player/MessageDistributor/managers/AssistManager.ts b/frontend/app/player/MessageDistributor/managers/AssistManager.ts index c6bd8c46f..0c8ee230c 100644 --- a/frontend/app/player/MessageDistributor/managers/AssistManager.ts +++ b/frontend/app/player/MessageDistributor/managers/AssistManager.ts @@ -120,6 +120,7 @@ export default class AssistManager { private peer: Peer | null = null; connectionAttempts: number = 0; + private peeropened: boolean = false; connect() { if (this.peer != null) { console.error("AssistManager: trying to connect more than once"); @@ -138,7 +139,8 @@ export default class AssistManager { peer.on('error', e => { if (e.type === 'peer-unavailable') { if (this.peer && this.connectionAttempts++ < MAX_RECONNECTION_COUNT) { - update({ peerConnectionStatus: ConnectionStatus.Connecting }) + update({ peerConnectionStatus: ConnectionStatus.Connecting }); + console.log("peerunavailable") this.connectToPeer(); } else { update({ peerConnectionStatus: ConnectionStatus.Disconnected }); @@ -149,7 +151,10 @@ export default class AssistManager { update({ peerConnectionStatus: ConnectionStatus.Error }) } }) - peer.on("open", me => { + peer.on("open", () => { + if (this.peeropened) { return; } + this.peeropened = true; + console.log('peeropen') this.connectToPeer(); }); }); @@ -164,16 +169,19 @@ export default class AssistManager { const conn = this.peer.connect(id, { serialization: 'json', reliable: true}); conn.on('open', () => { + window.addEventListener("beforeunload", ()=>conn.send("unload")); console.log("peer connected") let i = 0; let firstMessage = true; + + update({ peerConnectionStatus: ConnectionStatus.Connected }) + conn.on('data', (data) => { if (!Array.isArray(data)) { return this.handleCommand(data); } if (firstMessage) { firstMessage = false; this.md.setMessagesLoading(false); - update({ peerConnectionStatus: ConnectionStatus.Connected }) } let time = 0; @@ -228,11 +236,11 @@ export default class AssistManager { this.connectToPeer(); } - this.dataCheckIntervalID = setInterval(() => { - if (!this.dataConnection && getState().peerConnectionStatus === ConnectionStatus.Connected) { - onDataClose(); - } - }, 3000); + // this.dataCheckIntervalID = setInterval(() => { + // if (!this.dataConnection && getState().peerConnectionStatus === ConnectionStatus.Connected) { + // onDataClose(); + // } + // }, 3000); conn.on('close', onDataClose);// Does it work ? conn.on("error", (e) => { console.log("PeerJS connection error", e); @@ -355,10 +363,13 @@ export default class AssistManager { console.log('clearing', this.peerID) this.initiateCallEnd(); this.dataCheckIntervalID && clearInterval(this.dataCheckIntervalID); - this.dataConnection?.close(); - console.log("destroying peer...") - this.peer?.destroy(); - this.peer = null; + if (this.peer) { + this.peer.connections[this.peerID]?.forEach(c => c.open && c.close()); + console.log("destroying peer...") + this.peer.disconnect(); + this.peer.destroy(); + this.peer = null; + } } } diff --git a/tracker/tracker-assist/src/CallWindow.ts b/tracker/tracker-assist/src/CallWindow.ts index 273138be5..a0142b043 100644 --- a/tracker/tracker-assist/src/CallWindow.ts +++ b/tracker/tracker-assist/src/CallWindow.ts @@ -4,6 +4,7 @@ export default class CallWindow { private iframe: HTMLIFrameElement; private vRemote: HTMLVideoElement | null = null; private vLocal: HTMLVideoElement | null = null; + private aRemote: HTMLAudioElement | null = null; private audioBtn: HTMLAnchorElement | null = null; private videoBtn: HTMLAnchorElement | null = null; private userNameSpan: HTMLSpanElement | null = null; @@ -12,14 +13,16 @@ export default class CallWindow { constructor(endCall: () => void) { const iframe = this.iframe = document.createElement('iframe'); Object.assign(iframe.style, { - position: "absolute", + position: "fixed", zIndex: 2147483647 - 1, //borderRadius: ".25em .25em .4em .4em", //border: "4px rgba(0, 0, 0, .7)", border: "none", bottom: "10px", right: "10px", - display: "none", + background: "white", + height: "200px", + width: "200px", }); //iframe.src = "//static.openreplay.com/tracker-assist/index.html"; iframe.onload = () => { @@ -33,9 +36,12 @@ export default class CallWindow { .then(r => r.text()) .then((text) => { iframe.onload = () => { - iframe.style.display = "block"; + doc.body.removeChild(doc.body.children[0]); //?!!>R# + const assistSection = doc.getElementById("or-assist") + assistSection && assistSection.removeAttribute("style"); iframe.style.height = doc.body.scrollHeight + 'px'; iframe.style.width = doc.body.scrollWidth + 'px'; + iframe.onload = null; } text = text.replace(/href="css/g, "href=\"https://static.openreplay.com/tracker-assist/css") @@ -46,6 +52,7 @@ export default class CallWindow { this.vLocal = doc.getElementById("video-local") as HTMLVideoElement; this.vRemote = doc.getElementById("video-remote") as HTMLVideoElement; + this.aRemote = doc.getElementById("audio-remote") as HTMLAudioElement; this._trySetStreams(); this.vLocal.parentElement && this.vLocal.parentElement.classList.add("d-none"); @@ -76,6 +83,8 @@ export default class CallWindow { doc.body.setAttribute("draggable", "true"); doc.body.ondragstart = (e) => { if (!e.dataTransfer || !e.target) { return; } + //@ts-ignore + if (!e.target.classList || !e.target.classList.contains("card-header")) { return; } e.dataTransfer.setDragImage(doc.body, e.clientX, e.clientY); }; doc.body.ondragend = e => { @@ -99,8 +108,11 @@ export default class CallWindow { if (this.vRemote && this.remoteStream) { this.vRemote.srcObject = this.remoteStream; } - if (this.vLocal && this.localStream) { - this.vLocal.srcObject = this.localStream; + if (this.aRemote && this.localStream) { + this.aRemote.srcObject = this.localStream; + } + if (this.vLocal && this.videoStream) { + this.vLocal.srcObject = this.videoStream; } } setRemoteStream(rStream: MediaStream) { @@ -144,12 +156,9 @@ export default class CallWindow { this.audioBtn.childNodes[1].textContent = "Unmute"; } } - toggleVideo() { - let enabled = true; - this.localStream?.getVideoTracks().forEach(track => { - enabled = enabled && !track.enabled; - track.enabled = enabled; - }); + + private videoStream: MediaStream | null = null; + private _toggleVideoUI(enabled) { if (!this.videoBtn || !this.vLocal || !this.vLocal.parentElement) { return; } if (enabled) { this.vLocal.parentElement.classList.remove("d-none"); @@ -162,7 +171,26 @@ export default class CallWindow { } } + toggleVideo() { + if (this.videoStream === null) { + navigator.mediaDevices.getUserMedia({video:true, audio:false}).then(vd => { + this.videoStream = vd; + this._trySetStreams(); + this._toggleVideoUI(true); + }); + return; + } + let enabled = true; + this.videoStream?.getVideoTracks().forEach(track => { + enabled = enabled && !track.enabled; + track.enabled = enabled; + }); + this._toggleVideoUI(enabled); + + } + remove() { + this.videoStream?.getTracks().forEach(t => t.stop()); clearInterval(this.tsInterval); if (this.iframe.parentElement) { document.body.removeChild(this.iframe); diff --git a/tracker/tracker-assist/src/index.ts b/tracker/tracker-assist/src/index.ts index a9a632cb2..73b3900f4 100644 --- a/tracker/tracker-assist/src/index.ts +++ b/tracker/tracker-assist/src/index.ts @@ -116,7 +116,7 @@ export default function(opts: Partial = {}) { const mouse = new Mouse(); let callUI; - navigator.mediaDevices.getUserMedia({video:true, audio:true}) + navigator.mediaDevices.getUserMedia({video:false, audio:true}) .then(lStream => { const onCallEnd = () => { console.log("on callend", call.open) From b3fbbe20853f918f12a50f4409e66783af91d4ca Mon Sep 17 00:00:00 2001 From: Mehdi Osman Date: Wed, 14 Jul 2021 18:55:34 +0200 Subject: [PATCH 2/2] REVERT chore(install): update postgresql version --- scripts/helm/roles/openreplay/templates/postgresql.yaml | 2 -- 1 file changed, 2 deletions(-) diff --git a/scripts/helm/roles/openreplay/templates/postgresql.yaml b/scripts/helm/roles/openreplay/templates/postgresql.yaml index bb5dbacb3..4d5c600fc 100644 --- a/scripts/helm/roles/openreplay/templates/postgresql.yaml +++ b/scripts/helm/roles/openreplay/templates/postgresql.yaml @@ -1,5 +1,3 @@ -image: - tag: 13.3.0-debian-10-r53 {% if db_resource_override.postgresql %} {{ db_resource_override.postgresql|to_nice_yaml(indent=2) }} {% else %}