moving ringing component into modal

net/web/src/constants/Colors.js

@@ -2,6 +2,7 @@ const Colors = {
   background: '#8fbea7',
   primary: '#448866',
   formBackground: '#f2f2f2',
+  darkBackground: '#222222',
   formFocus: '#f8f8f8',
   formHover: '#efefef',
   grey: '#888888',

net/web/src/context/useRingContext.hook.js

@@ -20,6 +20,7 @@ export function useRingContext() {
   const calling = useRef(null);
   const ws = useRef(null);
   const pc = useRef(null);
+  const stream = useRef(null);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }))
@@ -84,8 +85,14 @@ export function useRingContext() {
 
         // form peer connection
         pc.current = new RTCPeerConnection();
-        pc.current.ontrack = ({streams: [stream]}) => {
+        pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
-          updateState({ stream });
+          console.log("ADD TRACK", ev);
+          if (!stream.current) {
+console.log("ADD STREAM");
+            stream.current = new MediaStream();
+            updateState({ stream: stream.current });
+          }
+          stream.current.addTrack(ev.track);
         };
         pc.current.onicecandidate = ({candidate}) => {
           ws.current.send(JSON.stringify({ candidate }));
@@ -101,8 +108,9 @@ export function useRingContext() {
           }
         };
 
-        const stream = await whiteNoise();
+console.log("ADD TRANSCEIVER");
-        pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]});
+        const media = await whiteNoise();
+        pc.current.addTransceiver(media.getTracks()[0], {streams: [media]});
 
         ws.current = createWebsocket(`wss://${contactNode}/signal`);
         ws.current.onmessage = async (ev) => {
@@ -211,8 +219,14 @@ export function useRingContext() {
 
       // form peer connection
       pc.current = new RTCPeerConnection();
-      pc.current.ontrack = ({streams: [stream]}) => {
+      pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
-        updateState({ stream });
+        console.log("ADD TRACK", ev);
+        if (!stream.current) {
+          stream.current = new MediaStream();
+console.log("ADD STREAM");
+          updateState({ stream: stream.current });
+        }
+        stream.current.addTrack(ev.track);
       };
       pc.current.onicecandidate = ({candidate}) => {
         ws.current.send(JSON.stringify({ candidate }));
@@ -228,8 +242,16 @@ export function useRingContext() {
         }
       };
 
-      const stream = await whiteNoise();
+      const stream = await navigator.mediaDevices.getUserMedia({
-      pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]});
+        video: true,
+        audio: true,
+      });
+      for (const track of stream.getTracks()) {
+console.log("ADD TRANSCEIVER TRACK");
+        pc.current.addTrack(track);
+      }
+//      const stream = await whiteNoise();
+  //    pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]});
 
       const protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
       ws.current = createWebsocket(`${protocol}${window.location.host}/signal`);

net/web/src/session/Session.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
-import { Drawer, Spin } from 'antd';
+import { Modal, Drawer, Spin } from 'antd';
-import { SessionWrapper } from './Session.styled';
+import { RingingWrapper, SessionWrapper } from './Session.styled';
 import { useSession } from './useSession.hook';
 import { Conversation } from './conversation/Conversation';
 import { Details } from './details/Details';
@@ -18,6 +18,8 @@ import { EyeInvisibleOutlined, CloseOutlined, PhoneOutlined } from '@ant-design/
 
 export function Session() {
 
+  const [ showRinging, setShowRinging ] = useState(false);
+  const [ modal, modalContext ] = Modal.useModal();
   const { state, actions } = useSession();
   const [ringing, setRinging] = useState([]);
   const vid = useRef();
@@ -40,6 +42,12 @@ export function Session() {
     setRinging(incoming);
   }, [state.ringing]);
 
+  useEffect(() => {
+console.log("SHOW>>>>>", ringing.length > 0);
+
+    setShowRinging(ringing.length > 0 && state.callStatus == null);
+  }, [state.ringing, state.callStatus]);
+
   useEffect(() => {
     if (vid.current) {
       vid.current.srcObject = state.stream;
@@ -123,18 +131,11 @@ export function Session() {
                 <Profile closeProfile={actions.closeProfile} />
               </div>
             )}
-            { ringing.length > 0 && (
-              <div className="ringing">
-                <div className="ringing-list">
-                  {ringing}
-                </div>
-              </div>
-            )}
             { state.callStatus && (
               <div className="calling">
                 <div className="calling-screen">
                   { state.stream && (
-                    <video ref={vid} autoPlay 
+                    <video ref={vid} autoPlay controls
             complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
                   )}
                 </div>
@@ -220,18 +221,11 @@ export function Session() {
                 <Profile closeProfile={closeAccount}/>
               )}
             </Drawer>
-            { ringing.length > 0 && (
-              <div className="ringing">
-                <div className="ringing-list">
-                  {ringing}
-                </div>
-              </div>
-            )}
             { state.callStatus && (
               <div className="calling">
                 <div className="calling-screen">
                   { state.stream && (
-                    <video ref={vid} autoPlay 
+                    <video ref={vid} autoPlay controls 
             complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
                   )}
                 </div>
@@ -287,18 +281,11 @@ export function Session() {
                 <Profile />
               </div>
             )}
-            { ringing.length > 0 && (
-              <div className="ringing">
-                <div className="ringing-list">
-                  {ringing}
-                </div>
-              </div>
-            )}
             { state.callStatus && (
               <div className="calling">
                 <div className="calling-screen">
                   { state.stream && (
-                    <video ref={vid} autoPlay 
+                    <video ref={vid} autoPlay controls 
             complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
                   )}
                 </div>
@@ -310,6 +297,13 @@ export function Session() {
           </div>
         </div>
       )}
+      <Modal centered visible={ringing.length > 0 && state.callStatus == null} footer={null} closable={false}> 
+        <RingingWrapper>
+          <div className="ringing-list">
+            {ringing}
+          </div>
+        </RingingWrapper>
+      </Modal>
     </SessionWrapper>
   );
 }

net/web/src/session/Session.styled.js

@@ -1,51 +1,12 @@
 import styled from 'styled-components';
 import Colors from 'constants/Colors';
 
-export const SessionWrapper = styled.div`
+export const RingingWrapper = styled.div`
-  height: 100%;
-  width: 100%;
-
-  .reframe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-  }
-
-  .calling {
-    position: absolute;
-    top: 35%;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-
-    .calling-screen {
-      width: 256;
-      height: 256;
-      background-color: yellow;
-    }
-  }
-
-  .ringing {
-    position: absolute;
-    top: 20%;
-    max-height: 15%;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-
   .ringing-list {
     padding: 4px;
-      border-radius: 4px;
-      background-color: rgba(0,0,0,0.6);
     display: flex;
     flex-direction: column;
+    background-color: ${Colors.darkBackground};
 
     .ringing-entry {
       display: flex;
@@ -98,7 +59,7 @@ export const SessionWrapper = styled.div`
 
       .ringing-name {
         font-size: 16px;
-          width: 192px;
+        flex-grow: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -109,6 +70,35 @@ export const SessionWrapper = styled.div`
     }
   }
 }
+`;
+
+export const SessionWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+
+  .reframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .calling {
+    position: absolute;
+    top: 35%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+
+    .calling-screen {
+      width: 256;
+      height: 256;
+      background-color: yellow;
+    }
+  }
 
   .spinner {
     position: absolute;

net/web/src/session/useSession.hook.js

@@ -51,13 +51,17 @@ export function useSession() {
       if (call.expires > expired && !call.status) {
         const { callId, cardId, calleeToken } = call;
         const contact = card.state.cards.get(cardId);
+        if (contact) {
           const { imageSet, name, handle, node, guid } = contact.data.cardProfile || {};
           const { token } = contact.data.cardDetail;
           const contactToken = `${guid}.${token}`;
           const img = imageSet ? card.actions.getCardImageUrl(cardId) : 'avatar';
           ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken });  
         }
+      }
     });
+console.log(ringing, ring.state.callStatus);
+
     updateState({ ringing, stream: ring.state.stream, callStatus: ring.state.callStatus });
   }, [ring.state]);