feat(frontend): remote control btn on assist call

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;
-}
+}

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<MediaStream | null>(null);
   const [ localStream, setLocalStream ] = useState<LocalStream | null>(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"
           >
             <Icon
@@ -84,7 +85,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
               size="20"
               color={ inCall ? "red" : "gray-darkest" }
             />
-            <span className={cn("ml-2", { 'text-red' : inCall })}>{ inCall ? 'End Call' : 'Call' }</span>
+            <span className={cn("ml-2", { 'color-red' : inCall })}>{ inCall ? 'End Call' : 'Call' }</span>
           </div>
         }
         content={ `Call ${userId}` }
@@ -92,8 +93,26 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
         inverted
         position="top right"
       />
+      { calling === CallingState.True &&
+        <div
+          className={
+            cn(
+              'cursor-pointer p-2 mr-2 flex items-center',
+            )
+          }
+          onClick={ callObject?.toggleRemoteControl }
+          role="button"
+        >
+          <Icon
+            name="remote-control"
+            size="20"
+            color={ remoteControlEnabled ? "green" : "gray-darkest"}
+          />
+          <span className={cn("ml-2", { 'color-green' : remoteControlEnabled })}>{ 'Remote Control' }</span>
+        </div>
+      }
       <div className="fixed ml-3 left-0 top-0" style={{ zIndex: 999 }}>
-        { inCall && <ChatWindow endCall={endCall} userId={userId} incomeStream={incomeStream} localStream={localStream} /> }
+        { inCall && callObject && <ChatWindow endCall={callObject.end} userId={userId} incomeStream={incomeStream} localStream={localStream} /> }
       </div>
     </div>
   )
@@ -103,5 +122,6 @@ const con = connect(null, { toggleChatWindow })
 
 export default con(connectPlayer(state => ({
   calling: state.calling,
+  remoteControlEnabled: state.remoteControl,
   peerConnectionStatus: state.peerConnectionStatus,
 }))(AssistActions))

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() {

frontend/app/svg/icons/remote-control.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14"><path d="M.59,2.59A2,2,0,0,0,0,4v8a2,2,0,0,0,.59,1.41A2,2,0,0,0,2,14H7.5a.5.5,0,0,0,0-1H2a1,1,0,0,1-.71-.29A1,1,0,0,1,1,12V7H14V8a.5.5,0,0,0,1,0V4a2,2,0,0,0-2-2H2A2,2,0,0,0,.59,2.59ZM14,6H1V4a1,1,0,0,1,.29-.71A1,1,0,0,1,2,3H13a1,1,0,0,1,1,1ZM2.85,4.85a.48.48,0,0,1-.7,0,.48.48,0,0,1,0-.7.48.48,0,0,1,.7,0,.48.48,0,0,1,0,.7Zm1.5,0a.5.5,0,1,1-.7-.7.5.5,0,1,1,.7.7Zm1.5,0a.5.5,0,1,0-.7-.7.5.5,0,1,0,.7.7ZM15,15a3.48,3.48,0,1,0-2.47,1A3.46,3.46,0,0,0,15,15Zm-4.2-4.46a.31.31,0,0,1,.19,0l3.33,1.34a.33.33,0,0,1,.15.11.34.34,0,0,1,0,.37.3.3,0,0,1-.13.12l-.92.46,1,1a.35.35,0,0,1,.1.24.34.34,0,0,1-.1.23.33.33,0,0,1-.23.1.35.35,0,0,1-.24-.1l-1-1-.46.92a.3.3,0,0,1-.12.13.34.34,0,0,1-.37,0,.33.33,0,0,1-.11-.15L10.52,11a.31.31,0,0,1,0-.19.33.33,0,0,1,.26-.26Z" transform="translate(0 -2)" style="fill-rule:evenodd"/></svg>