change(ui/tracker): some code ref after review

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

@@ -57,8 +57,6 @@ export default class Screen {
   protected readonly screen: HTMLDivElement;
   protected readonly controlButton: HTMLDivElement;
   protected parentElement: HTMLElement | null = null;
-  private remoteControlEnabled = false;
-  private recordingEnabled = false;
 
   constructor() {
     const iframe = document.createElement('iframe');

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

@@ -9,6 +9,7 @@ import type { Store } from '../../common/types'
 import AnnotationCanvas from './AnnotationCanvas';
 import MStreamReader from '../messages/MStreamReader';
 import JSONRawMessageReader from '../messages/JSONRawMessageReader'
+import { toast } from 'react-toastify'
 
 export enum CallingState {
   NoCall,
@@ -260,6 +261,9 @@ export default class AssistManager {
       socket.on('recording_rejected', () => {
         this.toggleRecording(false)
       })
+      socket.on('recording_busy', () => {
+        this.onRecordingBusy()
+      })
 
       document.addEventListener('visibilitychange', this.onVisChange)
 
@@ -268,6 +272,10 @@ export default class AssistManager {
 
   /* ==== Recording the session ==== */
 
+  private onRecordingBusy = () => {
+    toast.error("This session is already being recorded by another agent")
+  }
+
   public requestRecording = () => {
     const recordingState =this.store.get().recordingState
     if (!this.socket || recordingState === SessionRecordingStatus.Requesting) return;
@@ -292,10 +300,9 @@ export default class AssistManager {
 
     const isRecordingActive = recordingState === SessionRecordingStatus.Recording
     const isControlActive = remoteControl === RemoteControlStatus.Enabled
-    const baseBorder = '2px dashed'
     // recording gets priority here
-    if (isRecordingActive) return { border: `${baseBorder} red`}
-    if (isControlActive) return { border: `${baseBorder} blue`}
+    if (isRecordingActive) return { border: '2px dashed red' }
+    if (isControlActive) return { border: '2px dashed blue' }
     return { border: 'unset'}
   }
 

tracker/tracker-assist/src/Assist.ts

@@ -27,6 +27,7 @@ export interface Options {
   session_control_peer_key: string;
   callConfirm: ConfirmOptions;
   controlConfirm: ConfirmOptions;
+  recordingConfirm: ConfirmOptions;
 
   // @depricated
   confirmText?: string;
@@ -82,6 +83,7 @@ export default class Assist {
         onRemoteControlStart: ()=>{},
         callConfirm: {},
         controlConfirm: {}, // TODO: clear options passing/merging/overriting
+        recordingConfirm: {},
       },
       options,
     )
@@ -261,6 +263,8 @@ export default class Assist {
 
       if (Object.keys(this.agents).length === 0 && recordingState.isActive) {
         recordingState.rejectRecording()
+      } else {
+        recordingState.stopAgentRecording(id)
       }
       endAgentCall(id)
     })
@@ -281,18 +285,20 @@ export default class Assist {
       callingAgents.set(id, name)
       updateCallerNames()
     })
-    socket.on('videofeed', (id, feedState) => {
+    socket.on('videofeed', (_, feedState) => {
       callUI?.toggleVideoStream(feedState)
     })
     socket.on('request_recording', (id, agentData) => {
       if (!recordingState.isActive) {
         this.options.onRecordingRequest?.(JSON.parse(agentData))
         recordingState.requestRecording(id)
+      } else {
+        this.emit('recording_busy')
       }
     })
-    socket.on('stop_recording', (id) => {
+    socket.on('stop_recording', () => {
       if (recordingState.isActive) {
-        recordingState.rejectRecording(id)
+        recordingState.rejectRecording()
       }
     })
 

tracker/tracker-assist/src/CallWindow.ts

@@ -17,8 +17,6 @@ export default class CallWindow {
 	private remoteControlContainer: HTMLElement | null = null
 	private remoteControlEndBtn: HTMLElement | null = null
 	private controlsContainer: HTMLElement | null = null
-	private remoteVideoOn = false
-	private localVideoOn = false
 	private onToggleVideo: (args: any) => void
 	private tsInterval: ReturnType<typeof setInterval>
 	private remoteVideo: MediaStreamTrack
@@ -177,7 +175,6 @@ export default class CallWindow {
 		this.load
 			.then(() => {
 				if (this.videoContainer) {
-					this.remoteVideoOn = enable
 					if (enable) {
 						this.videoContainer.classList.add('remote')
 					} else {
@@ -235,7 +232,6 @@ export default class CallWindow {
 		if (!this.videoBtn || !this.videoContainer) {
 			return
 		}
-		this.localVideoOn = enabled
 		if (enabled) {
 			this.videoContainer.classList.add('local')
 			this.videoBtn.classList.remove('off')

tracker/tracker-assist/src/ScreenRecordingState.ts

@@ -34,7 +34,7 @@ const buttonStyles = {
 
 export default class ScreenRecordingState {
   private status = RecordingState.Off
-  private agentsRecordingSession: string[] = []
+  private recordingAgent: string
   private overlayAdded = false
 
   constructor(
@@ -53,13 +53,12 @@ export default class ScreenRecordingState {
     if (this.status !== RecordingState.Off) return
     this.status = RecordingState.Requested
 
-    this.confirm = new ConfirmWindow(recordRequestDefault(this.options.controlConfirm))
+    this.confirm = new ConfirmWindow(recordRequestDefault(this.options.recordingConfirm))
     this.confirm.mount().then(allowed => {
       if (allowed) {
         this.acceptRecording()
-        this.agentsRecordingSession.push(id)
+        this.recordingAgent = id
       } else {
-        this.confirm?.remove()
         this.rejectRecording()
       }
     })
@@ -98,15 +97,13 @@ export default class ScreenRecordingState {
     this.status = RecordingState.Recording
   }
 
-  public readonly rejectRecording = (id?: string) => {
-    if (id) {
-      const agentIndex = this.agentsRecordingSession.findIndex(agentId => agentId === id)
-      if (agentIndex === -1) return
-      else this.agentsRecordingSession = this.agentsRecordingSession.filter(agentId => agentId !== id)
-
-      if (this.agentsRecordingSession.length > 0) return
+  public readonly stopAgentRecording = (id) => {
+    if (id === this.recordingAgent) {
+      this.rejectRecording()
     }
+  }
 
+  public readonly rejectRecording = () => {
     this.onDeny()
     this.confirm?.remove()
     this.status = RecordingState.Off