avoid internal webrtc state conflict by forcing caller to connect audio track first

app/client/mobile/ios/Podfile.lock

@@ -2250,7 +2250,7 @@ SPEC CHECKSUMS:
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: b05994d1933f507b0a28ceaa4fdb968dc18da178
+  Yoga: a9ef4f5c2cd79ad812110525ef61048be6a582a4
 
 PODFILE CHECKSUM: 9cf7373afef7b881c911fda82ff1f94eacee3e98
 

app/client/mobile/src/context/useRingContext.hook.ts

@@ -33,6 +33,8 @@ export function useRingContext() {
   const updatingPeer = useRef(false);
   const peerUpdate = useRef([] as {type: string, data?: any}[]);
   const connecting = useRef(false);
+  const passive = useRef(false);
+  const passiveTrack = useRef([] as MediaStreamTrack);
   const closing = useRef(false);
   const [ringing, setRinging] = useState([] as { cardId: string, callId: string }[]);
   const [cards, setCards] = useState([] as Card[]);
@@ -77,9 +79,6 @@ export function useRingContext() {
       if (status === 'connected') {
         const now = new Date();
         const connectedTime = Math.floor(now.getTime() / 1000);
-
-console.log("CONTEXT CONNECTED: ", connectedTime);
-
         updateState({ connected: true, connectedTime });
         await actions.enableAudio();
       } else if (status === 'closed') {
@@ -131,6 +130,10 @@ console.log("CONTEXT CONNECTED: ", connectedTime);
             case 'remote_track':
               if (remoteStream.current) {
                 remoteStream.current.addTrack(data);
+                passive.current = false;
+                passiveTrack.current.forEach(track => {
+                  peer.addTrack(track, sourceStream.current);
+                });
                 if (data.kind === 'video') {
                   InCallManager.setForceSpeakerphoneOn(true);
                   updateState({ remoteVideo: true });
@@ -138,7 +141,11 @@ console.log("CONTEXT CONNECTED: ", connectedTime);
               }
               break;
             case 'local_track':
-              peer.addTrack(data, sourceStream.current);
+              if (passive.current) {
+                passiveTrack.push(data);
+              } else {
+                peer.addTrack(data, sourceStream.current);
+              }
               if (data.kind === 'video') {
                 InCallManager.setForceSpeakerphoneOn(true);
                 updateState({ localVideo: true })
@@ -157,8 +164,10 @@ console.log("CONTEXT CONNECTED: ", connectedTime);
     }
   }
 
-  const setup = async (link: Link, card: Card) => {
+  const setup = async (link: Link, card: Card, polite: boolean) => {
 
+    passive.current = polite;
+    passiveTrack.current = [];
     remoteStream.current = new MediaStream();
     localStream.current = new MediaStream();
     sourceStream.current = await mediaDevices.getUserMedia({
@@ -290,7 +299,7 @@ console.log("CONTEXT CONNECTED: ", connectedTime);
         const { cardId, node } = card;
         const ring = app.state.session.getRing();
         const link = await ring.accept(cardId, callId, node);
-        await setup(link, card);
+        await setup(link, card, true);
         connecting.current = false;
       } catch (err) {
         connecting.current = false;
@@ -305,7 +314,7 @@ console.log("CONTEXT CONNECTED: ", connectedTime);
         connecting.current = true;
         const contact = app.state.session.getContact();
         const link = await contact.callCard(card.cardId);
-        await setup(link, card);
+        await setup(link, card, false);
         connecting.current = false;
       } catch (err) {
         connecting.current = false;

app/client/mobile/src/session/Session.styled.ts

@@ -105,4 +105,7 @@ export const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 'transparent',
   },
+  ring: {
+    paddingLeft: 16,
+  },
 });