added call option icons

app/mobile/src/context/useRingContext.hook.js

@@ -147,13 +147,16 @@ export function useRingContext() {
           console.log("ICE SIGNALING", event);
         } );
         pc.current.addEventListener( 'track', event => {
-
-          console.log("ICE TRACK", event.track);
           if (stream.current == null) {
-console.log("NEW STREAM.");
             stream.current = new MediaStream();
             updateState({ remoteStream: stream.current });
           }
+          if (event.track.kind === 'audio') {
+            updateState({ remoteAudio: true });
+          }
+          if (event.track.kind === 'video') {
+            updateState({ remoteVideo: true });
+          }
           stream.current.addTrack(event.track, stream.current);
         } );
 
@@ -172,9 +175,7 @@ console.log("NEW STREAM.");
               const description = descriptions[i];
               stream.current = null;
 
-console.log("OFFER:", description);
               if (description.type === 'offer' && pc.current.signalingState !== 'stable') {
-console.log("IGNORE");
                 continue;
               }
 
@@ -192,6 +193,27 @@ console.log("IGNORE");
           processing.current = false;
         }
 
+        updateState({ localVideo: false, localAudio: false, localStream: null });
+        videoTrack.current = false;
+        audioTrack.current = false;
+        accessVideo.current = false;
+        try {
+          const stream = await mediaDevices.getUserMedia({
+            video: false,
+            audio: true,
+          });
+          accessAudio.current = true;
+          updateState({ localAudio: true, localStream: stream });
+          for (const track of stream.getTracks()) {
+            if (track.kind === 'audio') {
+              audioTrack.current = track;
+            }
+            pc.current.addTrack(track);
+          }
+        }
+        catch (err) {
+          console.log(err);
+        }
 
         ws.current = createWebsocket(`wss://${contactNode}/signal`);
         ws.current.onmessage = async (ev) => {
@@ -248,15 +270,6 @@ console.log("IGNORE");
             const offer = await pc.current.createOffer(constraints);
             await pc.current.setLocalDescription(offer);
             ws.current.send(JSON.stringify({ description: offer }));
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-console.log("OPENING OFFER");
-
           }
           catch(err) {
             console.log(err);
@@ -266,10 +279,33 @@ console.log("OPENING OFFER");
           console.log(e)
           ws.current.close();
         }
-
       }
     },
     end: async () => {
+      if (!calling.current) {
+        throw new Error('inactive session');
+      }
+      try {
+        const { host, callId, contactNode, contactToken } = calling.current;
+        if (host) {
+          await removeCall(access.current, callId);
+        }
+        else {
+          await removeContactCall(contactNode, contactToken, callId);
+        }
+      }
+      catch (err) {
+        console.log(err);
+      }
+      ws.current.close();
+      if (videoTrack.current) {
+        videoTrack.current.stop();
+        videoTrack.current = null;
+      }
+      if (audioTrack.current) {
+        audioTrack.current.stop();
+        audioTrack.current = null;
+      }
     },
     call: async (cardId, contactNode, contactToken) => {
     },

app/mobile/src/session/Session.jsx

@@ -457,6 +457,36 @@ export function Session() {
                 zOrder={0}
               />
             )}
+            { !state.remoteVideo && (
+              <View style={styles.callLogo}>
+                <Logo src={state.callLogo} width={callWidth} height={callHeight} radius={4} />
+              </View>
+            )}
+            <View style={styles.callOptions}>
+              { !state.localVideo && (
+                <TouchableOpacity style={styles.callOption} onPress={actions.enableVideo}>
+                  <MatIcons name={'video-outline'} size={20} color={Colors.white} />
+                </TouchableOpacity>
+              )}
+              { state.localVideo && (
+                <TouchableOpacity style={styles.callOption} onPress={actions.disableVideo}>
+                  <MatIcons name={'video-off-outline'} size={20} color={Colors.white} />
+                </TouchableOpacity>
+              )}
+              { !state.localAudio && (
+                <TouchableOpacity style={styles.callOption} onPress={actions.enableVideo}>
+                  <MatIcons name={'phone'} size={20} color={Colors.white} />
+                </TouchableOpacity>
+              )}
+              { state.localAudio && (
+                <TouchableOpacity style={styles.callOption} onPress={actions.disableVideo}>
+                  <MatIcons name={'phone-off'} size={20} color={Colors.white} />
+                </TouchableOpacity>
+              )}
+            </View>
+            <TouchableOpacity style={styles.callEnd} onPress={actions.end}>
+              <MatIcons name={'phone-hangup'} size={20} color={Colors.white} />
+            </TouchableOpacity>
           </View>
         </View>
       </Modal>

app/mobile/src/session/Session.styled.js

@@ -198,6 +198,37 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.formBackground,
     padding: 8,
     borderRadius: 4,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  callEnd: {
+    position: 'absolute',
+    bottom: 16,
+    borderRadius: 16,
+    borderColor: Colors.white,
+    borderWidth: 1,
+    padding: 4,
+    backgroundColor: Colors.alert,
+  },
+  callLogo: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+  },
+  callOptions: {
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'absolute',
+    top: 16,
+  },
+  callOption: {
+    borderRadius: 16,
+    borderColor: Colors.white,
+    borderWidth: 1,
+    padding: 4,
+    backgroundColor: Colors.primary,
+    marginLeft: 8,
+    marginRight: 8,
   },
   callRemote: {
     width: '100%',

app/mobile/src/session/useSession.hook.js

@@ -111,16 +111,46 @@ export function useSession() {
       await ring.actions.end();
     },
     enableVideo: async () => {
-      await ring.actions.enableVideo();
+      if (!accessVideo.current) {
+        const stream = await mediaDevices.getUserMedia({
+          video: true,
+          audio: true,
+        });
+        accessVideo.current = true;
+        accessAudio.current = true;
+        updateState({ localStream: stream });
+        for (const track of stream.getTracks()) {
+          if (track.kind === 'audio') {
+            audioTrack.current = track;
+          }
+          if (track.kind === 'video') {
+            videoTrack.current = track;
+          }
+          pc.current.addTrack(track);
+        }
+      }
+      else {
+        videoTrack.current.enabled = true;
+      }
+      updateState({ localVideo: true, localAudio: true });
     },
     disableVideo: async () => {
-      await ring.actions.disableVideo();
+      if (videoTrack.current) {
+        videoTrack.current.enabled = false;
+      }
+      updateState({ localVideo: false });
     },
     enableAudio: async () => {
-      await ring.actions.enableAudio();
+      if (accessAudio.current) {
+        audioTrack.current.enabled = true;
+        updateState({ localAudio: true });
+      }
     },
     disableAudio: async () => {
-      await ring.actions.disableAudio();
+      if (accessAudio.current) {
+        audioTrack.current.enabled = false;
+        updateState({ localAudio: false });
+      }
     },
   };