change(tracker): some code fixes for review

frontend/app/player/web/Screen/Screen.ts

@@ -104,7 +104,7 @@ export default class Screen {
     })
   }
 
-  toggleRemoteControlStatus(isEnabled: boolean ) {
+  toggleRemoteControlBorders(isEnabled: boolean ) {
     this.remoteControlEnabled = isEnabled;
     if (!isEnabled) {
       const styles = this.recordingEnabled ? { border: '2px dashed red' } : { border: 'unset'}
@@ -114,7 +114,7 @@ export default class Screen {
     return Object.assign(this.screen.style, styles)
   }
 
-  toggleRecordingStatus(isEnabled: boolean) {
+  toggleRecordingBorders(isEnabled: boolean) {
     this.recordingEnabled = isEnabled;
     if (!isEnabled) {
       const styles = this.remoteControlEnabled ? { border: '2px dashed blue' } : { border: 'unset'}

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

@@ -257,7 +257,7 @@ export default class AssistManager {
       socket.on('recording_accepted', () => {
         this.toggleRecording(true)
       })
-      socket.on('recording_denied', () => {
+      socket.on('recording_rejected', () => {
         this.toggleRecording(false)
       })
 
@@ -288,7 +288,7 @@ export default class AssistManager {
   }
 
   private toggleRecording = (isAccepted: boolean) => {
-    this.md.toggleRecordingStatus(isAccepted)
+    this.md.toggleRecordingBorders(isAccepted)
 
     update({ recordingState: isAccepted ? SessionRecordingStatus.Recording : SessionRecordingStatus.Off })
   }
@@ -346,13 +346,13 @@ export default class AssistManager {
       this.screen.overlay.addEventListener("mousemove", this.onMouseMove)
       this.screen.overlay.addEventListener("click", this.onMouseClick)
       this.screen.overlay.addEventListener("wheel", this.onWheel)
-      this.screen.toggleBorder(true)
+      this.screen.toggleRemoteControlBorders(true)
       this.store.update({ remoteControl: RemoteControlStatus.Enabled })
     } else {
       this.screen.overlay.removeEventListener("mousemove", this.onMouseMove)
       this.screen.overlay.removeEventListener("click", this.onMouseClick)
       this.screen.overlay.removeEventListener("wheel", this.onWheel)
-      this.screen.toggleBorder(false)
+      this.screen.toggleRemoteControlBorders(false)
       this.store.update({ remoteControl: RemoteControlStatus.Disabled })
       this.toggleAnnotation(false)
     }

frontend/app/utils/screenRecorder.ts

@@ -105,9 +105,6 @@ export async function screenRecorder(recName: string, sessionId: string, saveCb:
   }
 }
 
-// @ts-ignore
-window.recordSceenSample = screenRecorder;
-
 // NOT SUPPORTED:
 // macOS:  chrome and edge only support capturing current tab's audio
 // windows: chrome and edge supports all audio

tracker/tracker-assist/src/Assist.ts

@@ -205,10 +205,10 @@ export default class Assist {
     const onAcceptRecording = () => {
       socket.emit('recording_accepted')
     }
-    const onDenyRecording = () => {
-      socket.emit('recording_denied')
+    const onRejectRecording = () => {
+      socket.emit('recording_rejected')
     }
-    const recordingState = new ScreenRecordingState(onAcceptRecording, onDenyRecording, this.options)
+    const recordingState = new ScreenRecordingState(onAcceptRecording, onRejectRecording, this.options)
 
     // TODO: check incoming args
     socket.on('request_control', this.remoteControl.requestControl)
@@ -260,14 +260,14 @@ export default class Assist {
       delete this.agents[id]
 
       if (Object.keys(this.agents).length === 0 && recordingState.isActive) {
-        recordingState.denyRecording()
+        recordingState.rejectRecording()
       }
       endAgentCall(id)
     })
     socket.on('NO_AGENT', () => {
       Object.values(this.agents).forEach(a => a.onDisconnect?.())
       this.agents = {}
-      if (recordingState.isActive) recordingState.denyRecording()
+      if (recordingState.isActive) recordingState.rejectRecording()
     })
     socket.on('call_end', (id) => {
       if (!callingAgents.has(id)) {
@@ -292,7 +292,7 @@ export default class Assist {
     })
     socket.on('stop_recording', (id) => {
       if (recordingState.isActive) {
-        recordingState.denyRecording(id)
+        recordingState.rejectRecording(id)
       }
     })
 

tracker/tracker-assist/src/ScreenRecordingState.ts

@@ -8,39 +8,32 @@ export enum RecordingState {
   Recording,
 }
 
-const defaultStyles = '2px dashed red'
-const leftTop = { left: 0, top: 0, position: 'fixed', }
-const bottomRight = { right: 0, bottom: 0, position: 'fixed', }
+const borderStyles = {
+    height: '100vh',
+    width: '100vw',
+  border: '2px dashed red',
+  left: 0,
+  top: 0,
+  position: 'fixed',
+  'pointer-events': 'none',
+}
 
-const borderEmulationStyles = {
-  left: {
-    ...leftTop,
-    height: '100vh',
-    width: 0,
-    borderLeft: defaultStyles,
-  },
-  top: {
-    ...leftTop,
-    height: 0,
-    width: '100vw',
-    borderTop: defaultStyles,
-  },
-  right: {
-    ...bottomRight,
-    height: '100vh',
-    width: 0,
-    borderRight: defaultStyles,
-  },
-  bottom: {
-    ...bottomRight,
-    height: 0,
-    width: '100vw',
-    borderBottom: defaultStyles,
-  },
+const buttonStyles = {
+  cursor: 'pointer',
+  color: 'white',
+  position: 'fixed',
+  bottom: '0',
+  left: 'calc(50vw - 60px)',
+  'font-weight': 500,
+  padding: '2px 4px',
+  background: '#394EFF',
+  'border-top-right-radius': '3px',
+  'border-top-left-radius': '3px',
+  'text-align': 'center',
 }
 
 export default class ScreenRecordingState {
-  public status = RecordingState.Off
+  private status = RecordingState.Off
   private agentsRecordingSession: string[] = []
   private overlayAdded = false
 
@@ -67,7 +60,7 @@ export default class ScreenRecordingState {
         this.agentsRecordingSession.push(id)
       } else {
         this.confirm?.remove()
-        this.denyRecording()
+        this.rejectRecording()
       }
     })
     .then(() => {
@@ -81,54 +74,31 @@ export default class ScreenRecordingState {
 
   private readonly acceptRecording = () => {
     if (!this.overlayAdded) {
-      const borders = {
-        left: window.document.createElement('div'),
-        top: window.document.createElement('div'),
-        right: window.document.createElement('div'),
-        bottom: window.document.createElement('div'),
-      }
-
       const stopButton = window.document.createElement('div')
-      stopButton.onclick = () => this.denyRecording()
-      const styles = {
-        cursor: 'pointer',
-        color: 'white',
-        position: 'fixed',
-        bottom: '0',
-        left: 'calc(50vw - 60px)',
-        'font-weight': 500,
-        padding: '2px 4px',
-        background: '#394EFF',
-        'border-top-right-radius': '3px',
-        'border-top-left-radius': '3px',
-        'text-align': 'center',
-      }
-      Object.assign(stopButton.style, styles)
+      stopButton.onclick = () => this.rejectRecording()
+      Object.assign(stopButton.style, buttonStyles)
       stopButton.textContent = 'Stop Recording'
-      stopButton.id = 'or-recording-border'
+      stopButton.id = 'or-recording-button'
       stopButton.setAttribute('data-openreplay-obscured', '')
       stopButton.setAttribute('data-openreplay-hidden', '')
       stopButton.setAttribute('data-openreplay-ignore', '')
       window.document.body.appendChild(stopButton)
 
-      Object.entries(borderEmulationStyles).forEach(([key, style,]) => {
-        Object.assign(borders[key].style, style)
-        borders[key].id = 'or-recording-border'
-
-        borders[key].setAttribute('data-openreplay-obscured', '')
-        borders[key].setAttribute('data-openreplay-hidden', '')
-        borders[key].setAttribute('data-openreplay-ignore', '')
-        window.document.body.appendChild(borders[key])
-      })
+      const borderWindow = window.document.createElement('div')
+      Object.assign(borderWindow.style, borderStyles)
+      borderWindow.id = 'or-recording-border'
+      borderWindow.setAttribute('data-openreplay-obscured', '')
+      borderWindow.setAttribute('data-openreplay-hidden', '')
+      borderWindow.setAttribute('data-openreplay-ignore', '')
+      window.document.body.appendChild(borderWindow)
 
       this.overlayAdded = true
     }
-
     this.onAccept()
     this.status = RecordingState.Recording
   }
 
-  public readonly denyRecording = (id?: string) => {
+  public readonly rejectRecording = (id?: string) => {
     if (id) {
       const agentIndex = this.agentsRecordingSession.findIndex(agentId => agentId === id)
       if (agentIndex === -1) return
@@ -141,9 +111,11 @@ export default class ScreenRecordingState {
     this.confirm?.remove()
     this.status = RecordingState.Off
 
-    const borders = window.document.querySelectorAll('#or-recording-border')
-    if (borders.length > 0) {
-      borders.forEach(border => border.parentElement?.removeChild(border))
+    const borders = window.document.querySelector('#or-recording-border')
+    const button = window.document.querySelector('#or-recording-button')
+    if (borders && button) {
+      borders.parentElement?.removeChild(borders)
+      button.parentElement?.removeChild(button)
     }
   }
 }