fix(frontend assist): fix call logic

frontend/app/components/Assist/ChatWindow/ChatWindow.tsx

@@ -13,23 +13,6 @@ export interface Props {
 
 const ChatWindow: FC<Props> = function ChatWindow({ inputStream, outputStream }) {
   const [minimize, setMinimize] = useState(false)
-  // const [ inputStream, setInputStream ] = useState<MediaStream | null>(null);
-  // const [ outputStream, setOutputStream ] = useState<MediaStream | null>(null);
-
-  // useEffect(() => {
-  //   navigator.mediaDevices.getUserMedia({video:true, audio:true})
-  //   .then(oStream => {
-  //     setOutputStream(oStream);
-  //     const call = callPeer(oStream, setInputStream, () => {
-  //       console.log('endd')
-  //       outputStream?.getTracks().forEach(t => t.stop());
-  //       //inputStream?.
-  //     }); // Returns false when unable to connect.
-  //                 // TODO: handle calling state
-  //     console.log(call)
-  //   })
-  //   .catch(console.log) // TODO: handle error in ui
-  // }, [])
 
   return (
     <div    
@@ -55,9 +38,9 @@ const ChatWindow: FC<Props> = function ChatWindow({ inputStream, outputStream })
         />
       </div>
       <div className={cn({'hidden' : minimize}, 'mt-2')}>
-        <VideoContainer stream={ inputStream } />
+        <VideoContainer stream={ incomeStream } />
         <div className="py-1" />
-        <VideoContainer stream={ outputStream } muted/>
+        <VideoContainer stream={ localStream } muted/>
       </div>
     </div>    
   )

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -17,42 +17,33 @@ interface Props {
 
 function AssistActions({ toggleChatWindow, userId, calling }: Props) {
   const [showChat, setShowChat] = useState(false)
-  const [ callBtnAction, setCallBtnAction ] = useState(()=>{});
-  const [ inputStream, setInputStream ] = useState<MediaStream | null>(null);
-  const [ outputStream, setOutputStream ] = useState<MediaStream | null>(null);
+  const [ incomeStream, setIncomeStream ] = useState<MediaStream | null>(null);
+  const [ localStream, setLocalStream ] = useState<MediaStream | null>(null);
+  const [ endCall, setEndCall ] = useState<()=>void>(()=>{});
 
   function onClose(stream) {
-    stream.getTracks().forEach(t => t.stop());
+    console.log("Closed")
+    stream.getTracks().forEach(t=>t.stop());
   }
-
   function onReject() {
     console.log("Rejected");
   }
-
   function onError() {
     console.log("Something went wrong");
   }
 
-  const endCall = () => {
-
-  }
-
-  const startCall = () => {
+  function call() { 
     navigator.mediaDevices.getUserMedia({video:true, audio:true})
       .then(lStream => {
-        setOutputStream(lStream);
-        setCallBtnAction(
-          callPeer(
-            lStream,
-            inputStream,
-            onClose.bind(null, lStream),
-            onReject,
-            onError
-          )
-        );
+        setLocalStream(lStream);
+        setEndCall(() => callPeer(
+          lStream,
+          setIncomeStream,
+          onClose.bind(null, lStream),
+          onReject,
+          onError
+        ));
       }).catch(onError);
-    
-    setShowChat(!showChat)
   }
 
   const inCall = calling == CallingState.Requesting || CallingState.True
@@ -63,7 +54,7 @@ function AssistActions({ toggleChatWindow, userId, calling }: Props) {
         trigger={
           <div
             className={cn('cursor-pointer p-2 mr-2')}
-            onClick={startCall}
+            onClick={call}
             role="button"
           >
             <Icon

frontend/app/player/MessageDistributor/managers/AssistManager.ts

@@ -176,6 +176,7 @@ export default class AssistManager {
     });
     conn.on('close', () => {
       this.md.setMessagesLoading(true);
+      this.endCall();
       console.log('closed peer conn. Reconnecting...')
       setTimeout(() => this.connectToPeer(), 300); // reconnect
     });
@@ -194,10 +195,10 @@ export default class AssistManager {
   private onCallEnd: null | (()=>void) = null;
   private endCall = () => {
     const conn = this.callConnection;
+    this.onCallEnd?.();
     if (!conn || !conn.open) { return; }
     conn.close(); //calls onCallEnd twice
     this.dataConnection?.send("call_end"); //
-    this.onCallEnd?.();
   }
 
   private handleCommand(command: string) {
@@ -221,12 +222,13 @@ export default class AssistManager {
   }
 
   call(localStream: MediaStream, onStream: (s: MediaStream)=>void, onClose: () => void, onReject: () => void, onError?: ()=> void): null | Function {
-    if (!this.peer || getState().calling) { return null; }
+    console.log(!this.peer , getState().calling, CallingState.False)
+    if (!this.peer || getState().calling !== CallingState.False) { return null; }
+    
     update({ calling: CallingState.Requesting });
         console.log('calling...')
     const call =  this.peer.call(this.peerID, localStream);
     
-    let requesting = true;
     call.on('stream', stream => {
       update({ calling: CallingState.True });
       onStream(stream);
@@ -235,14 +237,15 @@ export default class AssistManager {
     });
 
     this.onCallEnd = () => {
-      if (requesting) {
-        requesting = false;
+      if (getState().calling === CallingState.Requesting) {
         onReject();
       }
+      onClose();
+      
       // @ts-ignore ??
       this.md.overlay.removeEventListener("click",  this.onMouseMove);
-      update({ calling: CallingState.True });
-      onClose();
+      update({ calling: CallingState.False });
+      this.onCallEnd = null;
     }
     call.on("close", this.onCallEnd);
     call.on("error", (e) => {

frontend/app/player/MessageDistributor/managers/MouseManager.ts

@@ -9,13 +9,9 @@ type MouseMoveTimed = MouseMove & Timed;
 const HOVER_CLASS = "-openreplay-hover";
 
 export default class MouseManager extends ListWalker<MouseMoveTimed> {
-  private screen: StatedScreen;
 	private hoverElements: Array<Element> = [];
 
-	constructor(screen: StatedScreen): void {
-		super();
-		this.screen = screen;
-	}
+	constructor(private screen: StatedScreen) {super();}
 
 	private updateHover(): void {
     // @ts-ignore TODO