fix(ui): fix remote control event

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -20,6 +20,9 @@ function onReject() {
 function onControlReject() {
   toast.info('Remote control request was rejected by user');
 }
+function onControlBusy() {
+  toast.info('Remote control busy');
+}
 
 function onError(e: any) {
   console.log(e);
@@ -188,6 +191,7 @@ function AssistActions({
       onReject: onControlReject,
       onStart: onStart,
       onEnd: onEnd,
+      onBusy: onControlBusy,
     });
     requestReleaseRemoteControl();
   };

frontend/app/player/web/assist/RemoteControl.ts

@@ -24,6 +24,7 @@ export default class RemoteControl {
   onReject: () => void = () => {};
   onStart: () => void = () => {};
   onEnd: () => void = () => {};
+  onBusy: () => void = () => {};
 
   constructor(
     private store: Store<State>,
@@ -49,6 +50,12 @@ export default class RemoteControl {
         return this.store.update({ remoteControl: RemoteControlStatus.Disabled });
       }
     });
+    socket.on('control_busy', ({ meta, data }) => {
+      this.onBusy();
+      if (this.store.get().remoteControl === RemoteControlStatus.Requesting) {
+        return this.store.update({ remoteControl: RemoteControlStatus.Disabled });
+      }
+    })
     socket.on('SESSION_DISCONNECTED', () => {
       if (this.store.get().remoteControl === RemoteControlStatus.Requesting) {
         this.toggleRemoteControl(false); // else its remaining
@@ -89,10 +96,12 @@ export default class RemoteControl {
     onReject,
     onStart,
     onEnd,
+                           onBusy,
   }: {
     onReject: () => void;
     onStart: () => void;
     onEnd: () => void;
+    onBusy: () => void;
   }) => {
     this.onReject = onReject;
     this.onStart = onStart;

tracker/tracker-assist/package.json

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

tracker/tracker-assist/src/Assist.ts

@@ -195,7 +195,7 @@ export default class Assist {
       if (this.remoteControl){
         callUI?.showRemoteControl(this.remoteControl.releaseControl)
       }
-      this.agents[id].onControlReleased = this.options.onRemoteControlStart(this.agents[id]?.agentInfo)
+      this.agents[id] = { ...this.agents[id], onControlReleased: this.options.onRemoteControlStart(this.agents[id]?.agentInfo), }
       this.emit('control_granted', id)
       annot = new AnnotationCanvas()
       annot.mount()
@@ -229,6 +229,7 @@ export default class Assist {
       this.options,
       onGrand,
       (id, isDenied) => onRelease(id, isDenied),
+      (id) => this.emit('control_busy', id),
     )
 
     const onAcceptRecording = () => {

tracker/tracker-assist/src/RemoteControl.ts

@@ -25,7 +25,8 @@ export default class RemoteControl {
   constructor(
     private readonly options: AssistOptions,
     private readonly onGrand: (id: string) => string | undefined,
-    private readonly onRelease: (id?: string | null, isDenied?: boolean) => void) {}
+    private readonly onRelease: (id?: string | null, isDenied?: boolean) => void,
+    private readonly onBusy: (id?: string) => void) {}
 
   reconnect(ids: string[]) {
     const storedID = sessionStorage.getItem(this.options.session_control_peer_key)
@@ -38,6 +39,10 @@ export default class RemoteControl {
 
   private confirm: ConfirmWindow | null = null
   requestControl = (id: string) => {
+    if (this.status === RCStatus.Enabled) {
+      return this.onBusy(id)
+    }
+
     if (this.agentID !== null) {
       this.releaseControl()
       return