From 660c196ae2544730d5b3ae027e906c3513531bb4 Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 22 Nov 2022 15:53:25 +0100 Subject: [PATCH] change(tracker): some code fixes for review --- frontend/app/player/web/Screen/Screen.ts | 4 +- .../app/player/web/assist/AssistManager.ts | 8 +- frontend/app/utils/screenRecorder.ts | 3 - tracker/tracker-assist/src/Assist.ts | 12 +- .../src/ScreenRecordingState.ts | 106 +++++++----------- 5 files changed, 51 insertions(+), 82 deletions(-) diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts index 9715cf011..5c51d07be 100644 --- a/frontend/app/player/web/Screen/Screen.ts +++ b/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'} diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts index 8c30d9876..26bbbd2ee 100644 --- a/frontend/app/player/web/assist/AssistManager.ts +++ b/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) } diff --git a/frontend/app/utils/screenRecorder.ts b/frontend/app/utils/screenRecorder.ts index 6c7985a04..705b72af5 100644 --- a/frontend/app/utils/screenRecorder.ts +++ b/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 diff --git a/tracker/tracker-assist/src/Assist.ts b/tracker/tracker-assist/src/Assist.ts index 34d479f35..ceb7b0da0 100644 --- a/tracker/tracker-assist/src/Assist.ts +++ b/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) } }) diff --git a/tracker/tracker-assist/src/ScreenRecordingState.ts b/tracker/tracker-assist/src/ScreenRecordingState.ts index 580f6fd5f..37f45c444 100644 --- a/tracker/tracker-assist/src/ScreenRecordingState.ts +++ b/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) } } }