change(tracker): smaller fonts for cursors, keep control after call

frontend/app/player/MessageDistributor/StatedScreen/Screen/Cursor.ts

@@ -27,11 +27,11 @@ export default class Cursor {
         position: 'absolute',
         padding: '4px 6px',
         borderRadius: '8px',
-        backgroundColor: 'rgb(57, 78, 255)',
+        backgroundColor: '#3EAAAF',
         color: 'white',
-        bottom: '-30px',
-        left: '100%',
-        fontSize: '16px',
+        bottom: '-25px',
+        left: '80%',
+        fontSize: '12px',
         whiteSpace: 'nowrap',
       })
       this.cursor.appendChild(this.nameElement)

tracker/tracker-assist/layout/index.html

@@ -113,6 +113,7 @@
       display: none;
       justify-content: space-between;
       flex-direction: row;
+      align-items: center;
       padding: 8px 16px;
     }
 
@@ -191,7 +192,7 @@
       </div>
     </div>
     <div id="remote-control-row" class="remote-control">
-      <div>Remote control active</div>
+      <div>Your tab is now remotely controlled</div>
       <button style="min-width:55px;" id="end-control-btn" href="#" class="btn btn-danger btn-sm text-uppercase">
         Stop
       </button>

tracker/tracker-assist/src/Assist.ts

@@ -6,7 +6,7 @@ import type { Properties, } from 'csstype'
 import { App, } from '@openreplay/tracker'
 
 import RequestLocalStream, { LocalStream, } from './LocalStream.js'
-import RemoteControl from './RemoteControl.js'
+import RemoteControl, { RCStatus, } from './RemoteControl.js'
 import CallWindow from './CallWindow.js'
 import AnnotationCanvas from './AnnotationCanvas.js'
 import ConfirmWindow from './ConfirmWindow/ConfirmWindow.js'
@@ -314,18 +314,19 @@ export default class Assist {
 
       // UI
       closeCallConfirmWindow()
-      remoteControl.releaseControl()
-      callUI?.remove()
-      annot?.remove()
-      callUI = null
-      annot = null
+      if (remoteControl.status === RCStatus.Disabled) {
+        callUI?.remove()
+        annot?.remove()
+        callUI = null
+        annot = null
+      } else {
+        callUI?.hideControls()
+      }
 
       this.emit('UPDATE_SESSION', { agentIds: [], isCallActive: false, })
       this.setCallingState(CallingState.False)
       sessionStorage.removeItem(this.options.session_calling_peer_key)
 
-      remoteControl.releaseControl()
-
       callEndCallback?.()
     }
     const initiateCallEnd = () => {

tracker/tracker-assist/src/Mouse.ts

@@ -15,11 +15,11 @@ export default class Mouse {
       position: 'absolute',
       padding: '4px 6px',
       borderRadius: '8px',
-      backgroundColor: 'green',
+      backgroundColor: '#394EFF',
       color: 'white',
-      bottom: '-18px',
-      left: '50%',
-      fontSize: '16px',
+      bottom: '-14px',
+      left: '55%',
+      fontSize: '12px',
       whiteSpace: 'nowrap',
     })
 

tracker/tracker-assist/src/RemoteControl.ts

@@ -3,7 +3,7 @@ import ConfirmWindow from './ConfirmWindow/ConfirmWindow.js'
 import { controlConfirmDefault, } from './ConfirmWindow/defaults.js'
 import type { Options as AssistOptions, } from './Assist'
 
-enum RCStatus {
+export enum RCStatus {
   Disabled,
   Requesting,
   Enabled,
@@ -19,7 +19,7 @@ if (nativeInputValueDescriptor && nativeInputValueDescriptor.set) {
 
 export default class RemoteControl {
   private mouse: Mouse | null
-  private status: RCStatus = RCStatus.Disabled
+  status: RCStatus = RCStatus.Disabled
   private agentID: string | null = null
 
   constructor(