From 78fbc526eb735ff67296cc72fa4951b274decc4c Mon Sep 17 00:00:00 2001 From: Alex Kaminskii Date: Tue, 29 Nov 2022 15:28:14 +0100 Subject: [PATCH] fix(player):separate screen and messageManager within AssistManager --- frontend/app/player/web/WebPlayer.ts | 2 +- .../app/player/web/assist/AssistManager.ts | 36 ++++++++++--------- frontend/app/player/web/storageSelectors.ts | 18 +++++----- 3 files changed, 29 insertions(+), 27 deletions(-) diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts index add59b763..e3862c255 100644 --- a/frontend/app/player/web/WebPlayer.ts +++ b/frontend/app/player/web/WebPlayer.ts @@ -71,7 +71,7 @@ export default class WebPlayer extends Player { }) // TODO: separate LiveWebPlayer - this.assistManager = new AssistManager(session, this.messageManager, config, wpState) + this.assistManager = new AssistManager(session, this.messageManager, screen, config, wpState) if (live) { this.assistManager.connect(session.agentToken) } diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts index bac64ef39..b4704f7e3 100644 --- a/frontend/app/player/web/assist/AssistManager.ts +++ b/frontend/app/player/web/assist/AssistManager.ts @@ -2,6 +2,7 @@ import type { Socket } from 'socket.io-client'; import type Peer from 'peerjs'; import type { MediaConnection } from 'peerjs'; import type MessageManager from '../MessageManager'; +import type Screen from '../Screen/Screen'; import appStore from 'App/store'; import type { LocalStream } from './LocalStream'; import type { Store } from '../../common/types' @@ -78,6 +79,7 @@ export default class AssistManager { constructor( private session: any, private md: MessageManager, + private screen: Screen, private config: RTCIceServer[], private store: Store, ) {} @@ -94,9 +96,9 @@ export default class AssistManager { this.md.setMessagesLoading(false); } if (status === ConnectionStatus.Connected) { - this.md.display(true); + this.screen.display(true); } else { - this.md.display(false); + this.screen.display(false); } this.store.update({ peerConnectionStatus: status }); } @@ -253,7 +255,7 @@ export default class AssistManager { private onMouseMove = (e: MouseEvent): void => { if (!this.socket) { return } - const data = this.md.getInternalCoordinates(e) + const data = this.screen.getInternalCoordinates(e) this.socket.emit("move", [ data.x, data.y ]) } @@ -269,9 +271,9 @@ export default class AssistManager { if (!this.socket) { return; } if (this.store.get().annotating) { return; } // ignore clicks while annotating - const data = this.md.getInternalViewportCoordinates(e) - // const el = this.md.getElementFromPoint(e); // requires requestiong node_id from domManager - const el = this.md.getElementFromInternalPoint(data) + const data = this.screen.getInternalViewportCoordinates(e) + // const el = this.screen.getElementFromPoint(e); // requires requestiong node_id from domManager + const el = this.screen.getElementFromInternalPoint(data) if (el instanceof HTMLElement) { el.focus() el.oninput = e => { @@ -299,16 +301,16 @@ export default class AssistManager { private toggleRemoteControl(enable: boolean){ if (enable) { - this.md.overlay.addEventListener("mousemove", this.onMouseMove) - this.md.overlay.addEventListener("click", this.onMouseClick) - this.md.overlay.addEventListener("wheel", this.onWheel) - this.md.toggleBorder(true) + 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.store.update({ remoteControl: RemoteControlStatus.Enabled }) } else { - this.md.overlay.removeEventListener("mousemove", this.onMouseMove) - this.md.overlay.removeEventListener("click", this.onMouseClick) - this.md.overlay.removeEventListener("wheel", this.onWheel) - this.md.toggleBorder(false) + 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.store.update({ remoteControl: RemoteControlStatus.Disabled }) this.toggleAnnotation(false) } @@ -540,10 +542,10 @@ export default class AssistManager { } if (enable && !this.annot) { const annot = this.annot = new AnnotationCanvas() - annot.mount(this.md.overlay) + annot.mount(this.screen.overlay) annot.canvas.addEventListener("mousedown", e => { if (!this.socket) { return } - const data = this.md.getInternalViewportCoordinates(e) + const data = this.screen.getInternalViewportCoordinates(e) annot.start([ data.x, data.y ]) this.socket.emit("startAnnotation", [ data.x, data.y ]) }) @@ -560,7 +562,7 @@ export default class AssistManager { annot.canvas.addEventListener("mousemove", e => { if (!this.socket || !annot.isPainting()) { return } - const data = this.md.getInternalViewportCoordinates(e) + const data = this.screen.getInternalViewportCoordinates(e) annot.move([ data.x, data.y ]) this.socket.emit("moveAnnotation", [ data.x, data.y ]) }) diff --git a/frontend/app/player/web/storageSelectors.ts b/frontend/app/player/web/storageSelectors.ts index fc6fc7318..1fa1ea32b 100644 --- a/frontend/app/player/web/storageSelectors.ts +++ b/frontend/app/player/web/storageSelectors.ts @@ -1,6 +1,6 @@ import { State } from './Lists' -enum StorageType { +export enum StorageType { REDUX = "redux", MOBX = "mobx", VUEX = "vuex", @@ -9,22 +9,22 @@ enum StorageType { NONE = 0, } -export const STORAGE_TYPES = StorageType +export const STORAGE_TYPES = StorageType // TODO: update name everywhere export function selectStorageType(state: State): StorageType { - if (!state.reduxList) return STORAGE_TYPES.NONE + if (!state.reduxList) return StorageType.NONE if (state.reduxList.length > 0) { - return STORAGE_TYPES.REDUX + return StorageType.REDUX } else if (state.vuexList.length > 0) { - return STORAGE_TYPES.VUEX + return StorageType.VUEX } else if (state.mobxList.length > 0) { - return STORAGE_TYPES.MOBX + return StorageType.MOBX } else if (state.ngrxList.length > 0) { - return STORAGE_TYPES.NGRX + return StorageType.NGRX } else if (state.zustandList.length > 0) { - return STORAGE_TYPES.ZUSTAND + return StorageType.ZUSTAND } - return STORAGE_TYPES.NONE + return StorageType.NONE } export function selectStorageList(state: State) {