From f0ae152e00d3b1243712d1b3ecf9e7032a9910df Mon Sep 17 00:00:00 2001 From: sylenien Date: Wed, 23 Nov 2022 12:16:32 +0100 Subject: [PATCH] change(ui/tracker): some code ref after review --- frontend/app/player/web/Screen/Screen.ts | 2 -- .../app/player/web/assist/AssistManager.ts | 13 ++++++++++--- tracker/tracker-assist/src/Assist.ts | 12 +++++++++--- tracker/tracker-assist/src/CallWindow.ts | 4 ---- .../src/ScreenRecordingState.ts | 19 ++++++++----------- 5 files changed, 27 insertions(+), 23 deletions(-) diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts index d58365ec0..b0bc273b6 100644 --- a/frontend/app/player/web/Screen/Screen.ts +++ b/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'); diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts index 26f4dfac5..a3963f124 100644 --- a/frontend/app/player/web/assist/AssistManager.ts +++ b/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'} } diff --git a/tracker/tracker-assist/src/Assist.ts b/tracker/tracker-assist/src/Assist.ts index ceb7b0da0..ca6e5ba41 100644 --- a/tracker/tracker-assist/src/Assist.ts +++ b/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() } }) diff --git a/tracker/tracker-assist/src/CallWindow.ts b/tracker/tracker-assist/src/CallWindow.ts index d561a2ba7..aff1517f3 100644 --- a/tracker/tracker-assist/src/CallWindow.ts +++ b/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 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') diff --git a/tracker/tracker-assist/src/ScreenRecordingState.ts b/tracker/tracker-assist/src/ScreenRecordingState.ts index 37f45c444..238c36a99 100644 --- a/tracker/tracker-assist/src/ScreenRecordingState.ts +++ b/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