cleaner flow without trickle as get video same time?

packages/desktop/package.json

@@ -42,8 +42,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4000",
-            "loggerPort": "9000",
+            "port": "4002",
+            "loggerPort": "9002",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;",
             "renderer": {

packages/desktop/src/providers/ConversationProvider.tsx

@@ -367,21 +367,22 @@ const iceServers = [
   //   credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
   //   username: '28224511:1379330808',
   // },
-  // {
-  //   url: 'turn:turn.bistri.com:80',
-  //   credential: 'homeo',
-  //   username: 'homeo',
-  // },
+  {
+    url: 'turn:turn.bistri.com:80',
+    credential: 'homeo',
+    username: 'homeo',
+  },
+
   // {
   //   url: 'turn:turn.anyfirewall.com:443?transport=tcp',
   //   credential: 'webrtc',
   //   username: 'webrtc',
   // },
-  {
-    url: 'turn:openrelay.metered.ca:80',
-    credential: 'openrelayproject',
-    username: 'openrelayproject',
-  },
+  // {
+  //   url: 'turn:openrelay.metered.ca:80',
+  //   credential: 'openrelayproject',
+  //   username: 'openrelayproject',
+  // },
 ];
 
 function useDevices() {
@@ -471,7 +472,7 @@ function Room({
           const localPeerConnection = new Peer({
             initiator: true,
             stream: localMediaStream,
-            trickle: true, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times,
+            trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times,
             config: {
               iceServers,
             },
@@ -508,6 +509,7 @@ function Room({
             setConversationMap((draft) => {
               if (draft[conversation._id.toString()].room[otherUserId]) {
                 draft[conversation._id.toString()].room[otherUserId].stream = remoteStream;
+
                 remoteStream.getTracks().forEach((track) => {
                   // TODO: add particular track to right place
                 });
@@ -569,7 +571,7 @@ function Room({
       const peerForMeAndNewbie = new Peer({
         initiator: false,
         stream: userLocalStream,
-        trickle: true, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
+        trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
         config: {
           iceServers,
         },

packages/desktop/src/providers/SocketProvider.tsx

@@ -4,6 +4,7 @@ import { Socket, io } from 'socket.io-client';
 
 import toast from 'react-hot-toast';
 import useAuth from './AuthProvider';
+import { useUnmount } from 'react-use';
 
 interface ISocketProvider {
   $ws: Socket;
@@ -42,7 +43,7 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
     [set$ws],
   );
 
-  useEffect(() => {
+  const connect = useCallback(() => {
     if (!jwtToken) {
       set$ws(undefined);
       toast.error('no jwt token!!!');
@@ -60,17 +61,20 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
 
     initiateSocketStabilityListeners(socketConnection);
     set$ws(socketConnection);
+  }, [initiateSocketStabilityListeners, jwtToken, set$ws]);
 
-    return () => {
-      socketConnection.disconnect();
-      socketConnection.removeAllListeners();
-    };
-  }, [set$ws, jwtToken, initiateSocketStabilityListeners]);
+  useEffect(() => {
+    connect();
+  }, [connect]);
+
+  useUnmount(() => {
+    $ws?.disconnect();
+    $ws?.removeAllListeners();
+  });
 
   const handleReconnect = useCallback(() => {
-    initiateSocketStabilityListeners($ws);
-    $ws.connect();
-  }, [$ws, initiateSocketStabilityListeners]);
+    connect();
+  }, [connect]);
 
   if (!$ws) {
     return (