change(tracker): change func composition

tracker/tracker-assist/src/Assist.ts

@@ -171,17 +171,13 @@ export default class Assist {
           callUI = new CallWindow(app.debug.error)
         }
         setTimeout(() => {
-          if (this.callingState === CallingState.False) {
-            callUI?.showRemoteOnly()
-          } else {
-            callUI?.showRemoteControl()
-          }
+            callUI?.showRemoteControl(remoteControl.releaseControl)
         }, 150)
         this.agents[id].onControlReleased = this.options.onRemoteControlStart()
         this.emit('control_granted', id)
         annot = new AnnotationCanvas()
         annot.mount()
-        return { agentName: callingAgents.get(id), callUI, }
+        return callingAgents.get(id)
       },
       releaseControlCb,
     )

tracker/tracker-assist/src/CallWindow.ts

@@ -84,6 +84,9 @@ export default class CallWindow {
 				this.remoteControlContainer = doc.getElementById('remote-control-row')
 				this.remoteControlEndBtn = doc.getElementById('end-control-btn')
 				this.controlsContainer = doc.getElementById('controls')
+				if (this.controlsContainer) {
+					this.controlsContainer.style.display = 'none'
+				}
 
 				const tsElem = doc.getElementById('duration')
 				if (tsElem) {
@@ -129,16 +132,6 @@ export default class CallWindow {
 			.catch((e) => this.logError(e))
 	}
 
-	setRemoteControlEnd(endControl: () => void) {
-		this.load
-			.then(() => {
-				if (this.remoteControlEndBtn) {
-					this.remoteControlEndBtn.onclick = endControl
-				}
-			})
-			.catch((e) => this.logError(e))
-	}
-
 	private checkRemoteVideoInterval: ReturnType<typeof setInterval>
 	private audioContainer: HTMLDivElement | null = null
 	addRemoteStream(rStream: MediaStream) {
@@ -273,23 +266,29 @@ export default class CallWindow {
 		})
 	}
 
-	public showRemoteControl() {
-		if (this.remoteControlContainer) {
-			this.remoteControlContainer.style.display = 'flex'
-		}
-		this.adjustIframeSize()
-	}
-
-	public showRemoteOnly() {
-		this.hideControls()
-		this.showRemoteControl()
+	public showRemoteControl(endControl: () => void) {
+		this.load
+			.then(() => {
+				if (this.remoteControlContainer) {
+					this.remoteControlContainer.style.display = 'flex'
+				}
+				if (this.remoteControlEndBtn) {
+					this.remoteControlEndBtn.onclick = endControl
+				}
+				this.adjustIframeSize()
+			})
+			.catch((e) => this.logError(e))
 	}
 
 	public showControls() {
-		if (this.controlsContainer) {
-			this.controlsContainer.style.display = 'unset'
-		}
-		this.adjustIframeSize()
+		this.load
+			.then(() => {
+				if (this.controlsContainer) {
+					this.controlsContainer.style.display = 'unset'
+				}
+				this.adjustIframeSize()
+			})
+			.catch((e) => this.logError(e))
 	}
 
 	public hideControls() {

tracker/tracker-assist/src/Mouse.ts

@@ -10,7 +10,7 @@ export default class Mouse {
     const svg ='<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="32" height="32" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><polygon fill="#FFFFFF" points="8.2,20.9 8.2,4.9 19.8,16.5 13,16.5 12.6,16.6 "/><polygon fill="#FFFFFF" points="17.3,21.6 13.7,23.1 9,12 12.7,10.5 "/><rect x="12.5" y="13.6" transform="matrix(0.9221 -0.3871 0.3871 0.9221 -5.7605 6.5909)" width="2" height="8"/><polygon points="9.2,7.3 9.2,18.5 12.2,15.6 12.6,15.5 17.4,15.5 "/></svg>'
 
     this.mouse.innerHTML = svg
-
+    this.mouse.setAttribute('data-openreplay-hidden', '')
     Object.assign(agentBubble.style, {
       position: 'absolute',
       padding: '4px 6px',

tracker/tracker-assist/src/RemoteControl.ts

@@ -24,8 +24,8 @@ export default class RemoteControl {
 
   constructor(
     private readonly options: AssistOptions,
-    private readonly onGrand: (string?) => { agentName: string | undefined, callUI: any },
-    private readonly onRelease: (string?) => void) {}
+    private readonly onGrand: (id: string) => string | undefined,
+    private readonly onRelease: (id: string) => void) {}
 
   reconnect(ids: string[]) {
     const storedID = sessionStorage.getItem(this.options.session_control_peer_key)
@@ -71,10 +71,7 @@ export default class RemoteControl {
     this.agentID = id
     this.status = RCStatus.Enabled
     sessionStorage.setItem(this.options.session_control_peer_key, id)
-    const { agentName, callUI, } = this.onGrand(id)
-    if (callUI) {
-      callUI?.setRemoteControlEnd(this.releaseControl)
-    }
+    const agentName = this.onGrand(id)
     if (this.mouse) {
       this.resetMouse()
     }