moving ringing component into modal

2025-02-12 03:29:16 +00:00 · 2023-03-25 12:18:29 -07:00 · 2023-03-25 12:18:29 -07:00 · 10f1c77158
commit 10f1c77158
parent 5836e856f6
5 changed files with 131 additions and 120 deletions
--- a/net/web/src/constants/Colors.js
+++ b/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',
--- a/net/web/src/context/useRingContext.hook.js
+++ b/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]}) => {
-          updateState({ stream });
+        pc.current.ontrack = (ev) => { //{streams: [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();
-        pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]});
+console.log("ADD TRANSCEIVER");
+        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]}) => {
-        updateState({ stream });
+      pc.current.ontrack = (ev) => { //{streams: [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();
-      pc.current.addTransceiver(stream.getTracks()[0], {streams: [stream]});
+      const stream = await navigator.mediaDevices.getUserMedia({
+        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`);
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@ -1,6 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
-import { Drawer, Spin } from 'antd';
-import { SessionWrapper } from './Session.styled';
+import { Modal, Drawer, Spin } from 'antd';
+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>
  );
 }
--- a/net/web/src/session/Session.styled.js
+++ b/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`
-  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;
-
+export const RingingWrapper = styled.div`
  .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;
--- a/net/web/src/session/useSession.hook.js
+++ b/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]);