From c355c0829c4a3756c533c67e1e059ef946ae32ee Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 22 Nov 2022 16:18:43 +0100
Subject: [PATCH] change(ui): change style applying for borders

---
 frontend/app/player/web/Screen/Screen.ts      | 20 ++-----------
 .../app/player/web/assist/AssistManager.ts    | 30 ++++++++++++++-----
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts
index 5c51d07be..d58365ec0 100644
--- a/frontend/app/player/web/Screen/Screen.ts
+++ b/frontend/app/player/web/Screen/Screen.ts
@@ -104,24 +104,8 @@ export default class Screen {
     })
   }
 
-  toggleRemoteControlBorders(isEnabled: boolean ) {
-    this.remoteControlEnabled = isEnabled;
-    if (!isEnabled) {
-      const styles = this.recordingEnabled ? { border: '2px dashed red' } : { border: 'unset'}
-      return Object.assign(this.screen.style, styles)
-    }
-    const styles = { border: '2px dashed blue' }
-    return Object.assign(this.screen.style, styles)
-  }
-
-  toggleRecordingBorders(isEnabled: boolean) {
-    this.recordingEnabled = isEnabled;
-    if (!isEnabled) {
-      const styles = this.remoteControlEnabled ? { border: '2px dashed blue' } : { border: 'unset'}
-      return Object.assign(this.screen.style, styles)
-    }
-    const styles = { border: '2px dashed red' }
-    return Object.assign(this.screen.style, styles)
+  setBorderStyle(style: { border: string }) {
+    return Object.assign(this.screen.style, style)
   }
 
   get window(): WindowProxy | null {
diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts
index 26bbbd2ee..26f4dfac5 100644
--- a/frontend/app/player/web/assist/AssistManager.ts
+++ b/frontend/app/player/web/assist/AssistManager.ts
@@ -269,10 +269,10 @@ export default class AssistManager {
   /* ==== Recording the session ==== */
 
   public requestRecording = () => {
-    const recordingState = getState().recordingState
+    const recordingState =this.store.get().recordingState
     if (!this.socket || recordingState === SessionRecordingStatus.Requesting) return;
 
-    update({ recordingState: SessionRecordingStatus.Requesting })
+    this.store.update({ recordingState: SessionRecordingStatus.Requesting })
     this.socket.emit("request_recording", JSON.stringify({
       ...this.session.agentInfo,
       query: document.location.search,
@@ -280,17 +280,29 @@ export default class AssistManager {
   }
 
   public stopRecording = () => {
-    const recordingState = getState().recordingState
+    const recordingState = this.store.get().recordingState
     if (!this.socket || recordingState === SessionRecordingStatus.Off) return;
 
     this.socket.emit("stop_recording")
     this.toggleRecording(false)
   }
 
-  private toggleRecording = (isAccepted: boolean) => {
-    this.md.toggleRecordingBorders(isAccepted)
+  private get borderStyle() {
+    const { recordingState, remoteControl } = this.store.get()
 
-    update({ recordingState: isAccepted ? SessionRecordingStatus.Recording : SessionRecordingStatus.Off })
+    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`}
+    return { border: 'unset'}
+  }
+
+  private toggleRecording = (isAccepted: boolean) => {
+    this.store.update({ recordingState: isAccepted ? SessionRecordingStatus.Recording : SessionRecordingStatus.Off })
+
+    this.screen.setBorderStyle(this.borderStyle)
   }
 
   /* ==== Remote Control ==== */
@@ -346,15 +358,17 @@ 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.toggleRemoteControlBorders(true)
       this.store.update({ remoteControl: RemoteControlStatus.Enabled })
+
+      this.screen.setBorderStyle(this.borderStyle)
     } else {
       this.screen.overlay.removeEventListener("mousemove", this.onMouseMove)
       this.screen.overlay.removeEventListener("click", this.onMouseClick)
       this.screen.overlay.removeEventListener("wheel", this.onWheel)
-      this.screen.toggleRemoteControlBorders(false)
       this.store.update({ remoteControl: RemoteControlStatus.Disabled })
       this.toggleAnnotation(false)
+
+      this.screen.setBorderStyle(this.borderStyle)
     }
   }