jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): change style applying for borders

Browse source
This commit is contained in:
sylenien 2022-11-22 16:18:43 +01:00 • committed by Delirium
parent 660c196ae2
commit c355c0829c
2 changed files with 24 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/app/player/web/Screen/Screen.ts
View file

@ -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 {

30
frontend/app/player/web/assist/AssistManager.ts
View file

@ -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)
}
}