From 64843b87f94cf5ea7d8b674fe52a65b13523c66a Mon Sep 17 00:00:00 2001 From: ShiKhu Date: Tue, 16 Nov 2021 20:51:46 +0100 Subject: [PATCH] feat(frontend): remote control btn on assist call --- .../AssistActions/AassistActions.css | 9 +---- .../AssistActions/AssistActions.tsx | 36 ++++++++++++++----- .../managers/AssistManager.ts | 27 ++++++++++++-- frontend/app/svg/icons/remote-control.svg | 1 + 4 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 frontend/app/svg/icons/remote-control.svg diff --git a/frontend/app/components/Assist/components/AssistActions/AassistActions.css b/frontend/app/components/Assist/components/AssistActions/AassistActions.css index 85f5867c6..8a5758d90 100644 --- a/frontend/app/components/Assist/components/AssistActions/AassistActions.css +++ b/frontend/app/components/Assist/components/AssistActions/AassistActions.css @@ -1,11 +1,4 @@ -.inCall { - & svg { - fill: $red - } - color: $red; -} - .disabled { opacity: 0.5; pointer-events: none; -} \ No newline at end of file +} diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index 493ed3cfe..7d4d5526a 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -30,16 +30,17 @@ interface Props { userId: String, toggleChatWindow: (state) => void, calling: CallingState, - peerConnectionStatus: ConnectionStatus + peerConnectionStatus: ConnectionStatus, + remoteControlEnabled: boolean, } -function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus }: Props) { +function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus, remoteControlEnabled }: Props) { const [ incomeStream, setIncomeStream ] = useState(null); const [ localStream, setLocalStream ] = useState(null); - const [ endCall, setEndCall ] = useState<()=>void>(()=>{}); + const [ callObject, setCallObject ] = useState<{ end: ()=>void, toggleRemoteControl: ()=>void } | null >(null); useEffect(() => { - return endCall + return callObject?.end() }, []) useEffect(() => { @@ -52,7 +53,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus function call() { RequestLocalStream().then(lStream => { setLocalStream(lStream); - setEndCall(() => callPeer( + setCallObject(callPeer( lStream, setIncomeStream, lStream.stop.bind(lStream), @@ -76,7 +77,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus {[stl.disabled]: peerConnectionStatus !== ConnectionStatus.Connected} ) } - onClick={ inCall ? endCall : call} + onClick={ inCall ? callObject?.end : call} role="button" > - { inCall ? 'End Call' : 'Call' } + { inCall ? 'End Call' : 'Call' } } content={ `Call ${userId}` } @@ -92,8 +93,26 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus inverted position="top right" /> + { calling === CallingState.True && +
+ + { 'Remote Control' } +
+ }
- { inCall && } + { inCall && callObject && }
) @@ -103,5 +122,6 @@ const con = connect(null, { toggleChatWindow }) export default con(connectPlayer(state => ({ calling: state.calling, + remoteControlEnabled: state.remoteControl, peerConnectionStatus: state.peerConnectionStatus, }))(AssistActions)) diff --git a/frontend/app/player/MessageDistributor/managers/AssistManager.ts b/frontend/app/player/MessageDistributor/managers/AssistManager.ts index 9e508de25..992cdc987 100644 --- a/frontend/app/player/MessageDistributor/managers/AssistManager.ts +++ b/frontend/app/player/MessageDistributor/managers/AssistManager.ts @@ -47,11 +47,13 @@ export function getStatusText(status: ConnectionStatus): string { export interface State { calling: CallingState, peerConnectionStatus: ConnectionStatus, + remoteControl: boolean, } export const INITIAL_STATE: State = { calling: CallingState.False, peerConnectionStatus: ConnectionStatus.Connecting, + remoteControl: false, } const MAX_RECONNECTION_COUNT = 4; @@ -348,6 +350,24 @@ export default class AssistManager { conn.send({ x: Math.round(data.x), y: Math.round(data.y) }); } + private onMouseClick = (e: MouseEvent): void => { + const conn = this.dataConnection; + if (!conn) { return; } + const data = this.md.getInternalCoordinates(e); + // const el = this.md.getElementFromPoint(e); // requires requestiong node_id from domManager + conn.send({ type: "click", x: Math.round(data.x), y: Math.round(data.y) }); + } + + private toggleRemoteControl = () => { + if (getState().remoteControl) { + this.md.overlay.removeEventListener("click", this.onMouseClick); + update({ remoteControl: false }) + } else { + this.md.overlay.addEventListener("click", this.onMouseClick); + update({ remoteControl: true }) + } + } + private localCallData: { localStream: LocalStream, @@ -357,7 +377,7 @@ export default class AssistManager { onError?: ()=> void } | null = null - call(localStream: LocalStream, onStream: (s: MediaStream)=>void, onCallEnd: () => void, onReject: () => void, onError?: ()=> void): null | Function { + call(localStream: LocalStream, onStream: (s: MediaStream)=>void, onCallEnd: () => void, onReject: () => void, onError?: ()=> void): { end: Function, toggleRemoteControl: Function } { this.localCallData = { localStream, onStream, @@ -371,7 +391,10 @@ export default class AssistManager { onError, } this._call() - return this.initiateCallEnd; + return { + end: this.initiateCallEnd, + toggleRemoteControl: this.toggleRemoteControl, + } } private _call() { diff --git a/frontend/app/svg/icons/remote-control.svg b/frontend/app/svg/icons/remote-control.svg new file mode 100644 index 000000000..64087850c --- /dev/null +++ b/frontend/app/svg/icons/remote-control.svg @@ -0,0 +1 @@ + \ No newline at end of file