show local stream in picture

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

@@ -10,7 +10,8 @@ export function useRingContext() {
   const [state, setState] = useState({
     ringing: new Map(),
     callStatus: null,
-    stream: null,
+    localStream: null,
+    remoteStream: null,
   });
   const access = useRef(null);
 
@@ -90,7 +91,7 @@ export function useRingContext() {
           if (!stream.current) {
 console.log("ADD STREAM");
             stream.current = new MediaStream();
-            updateState({ stream: stream.current });
+            updateState({ remoteStream: stream.current });
           }
           stream.current.addTrack(ev.track);
         };
@@ -108,8 +109,8 @@ console.log("ADD STREAM");
           }
         };
 
-console.log("ADD TRANSCEIVER");
         const media = await whiteNoise();
+        updateState({ localStream: media });
         pc.current.addTransceiver(media.getTracks()[0], {streams: [media]});
 
         ws.current = createWebsocket(`wss://${contactNode}/signal`);
@@ -224,7 +225,7 @@ console.log("ADD TRANSCEIVER");
         if (!stream.current) {
           stream.current = new MediaStream();
 console.log("ADD STREAM");
-          updateState({ stream: stream.current });
+          updateState({ remoteStream: stream.current });
         }
         stream.current.addTrack(ev.track);
       };
@@ -246,6 +247,7 @@ console.log("ADD STREAM");
         video: true,
         audio: true,
       });
+      updateState({ localStream: stream });
       for (const track of stream.getTracks()) {
 console.log("ADD TRANSCEIVER TRACK");
         pc.current.addTrack(track);

net/web/src/session/Session.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
 import { Modal, Drawer, Spin } from 'antd';
-import { RingingWrapper, SessionWrapper } from './Session.styled';
+import { CallingWrapper, RingingWrapper, SessionWrapper } from './Session.styled';
 import { useSession } from './useSession.hook';
 import { Conversation } from './conversation/Conversation';
 import { Details } from './details/Details';
@@ -18,11 +18,12 @@ 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();
+  const [callWidth, setCallWidth] = useState(320);
+  const [callHeight, setCallHeight] = useState(240);
+  const remote = useRef();
+  const local = useRef();
 
   useEffect(() => {
     let incoming = [];
@@ -43,16 +44,48 @@ export function Session() {
   }, [state.ringing]);
 
   useEffect(() => {
-console.log("SHOW>>>>>", ringing.length > 0);
+    if (remote.current) {
-
+      remote.current.onloadedmetadata = (ev) => {
-    setShowRinging(ringing.length > 0 && state.callStatus == null);
+        const { videoWidth, videoHeight } = ev.target || { videoWidth: 320, videoHeight: 240 }
-  }, [state.ringing, state.callStatus]);
+        if ((window.innerWidth * 8) / 10 < videoWidth) {
+          const scaledWidth = window.innerWidth * 8 / 10;
+          const scaledHeight = videoHeight * (scaledWidth / videoWidth)
+          if ((window.innerHeight * 8) / 10 < scaledHeight) {
+            const height = (window.innerHeight * 8) / 10;
+            setCallHeight(height);
+            setCallWidth(videoWidth * (height / videoHeight));
+          }
+          else {
+            setCallHeight(scaledHeight);
+            setCallWidth(scaledWidth);
+          }
+        }
+        else if ((window.innerHeight * 8) / 10 < videoHeight) {
+          const height = (window.innerHeight * 8) / 10;
+          setCallHeight(height);
+          setCallWidth(videoWidth * (height / videoHeight));
+        }
+        else {
+          setCallHeight(videoHeight);
+          setCallWidth(videoWidth);
+        }
+      };
+      remote.current.srcObject = state.remoteStream;
+    }
+    else {
+      console.log("video player not set");
+    }
+  }, [state.remoteStream]);
 
   useEffect(() => {
-    if (vid.current) {
+    if (local.current) {
-      vid.current.srcObject = state.stream;
+      local.current.srcObject = state.localStream;
     }
-  }, [state.stream]);
+  }, [state.localStream]);
+
+  useEffect(() => {
+    console.log("DIM: ", callWidth, callHeight);
+  }, [callWidth, callHeight]);
 
   const closeAccount = () => {
     actions.closeProfile();
@@ -131,16 +164,6 @@ console.log("SHOW>>>>>", ringing.length > 0);
                 <Profile closeProfile={actions.closeProfile} />
               </div>
             )}
-            { state.callStatus && (
-              <div className="calling">
-                <div className="calling-screen">
-                  { state.stream && (
-                    <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>
-              </div>
-            )}
           </div>
           <div class="right">
             { (state.conversation || state.details) && (
@@ -221,16 +244,6 @@ console.log("SHOW>>>>>", ringing.length > 0);
                 <Profile closeProfile={closeAccount}/>
               )}
             </Drawer>
-            { state.callStatus && (
-              <div className="calling">
-                <div className="calling-screen">
-                  { state.stream && (
-                    <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>
-              </div>
-            )}
           </div>
         </div>
       )}
@@ -281,16 +294,6 @@ console.log("SHOW>>>>>", ringing.length > 0);
                 <Profile />
               </div>
             )}
-            { state.callStatus && (
-              <div className="calling">
-                <div className="calling-screen">
-                  { state.stream && (
-                    <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>
-              </div>
-            )}
           </div>
           <div class="bottom">
             <BottomNav state={state} actions={actions} />
@@ -304,6 +307,20 @@ console.log("SHOW>>>>>", ringing.length > 0);
           </div>
         </RingingWrapper>
       </Modal>
+      <Modal centered visible={state.callStatus} footer={null} closable={false} width={callWidth + 12} height={callHeight + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6 }}>
+        <CallingWrapper>
+          { state.remoteStream && (
+            <video ref={remote} disablepictureinpicture autoPlay style={{ width: '100%', height: '100%' }}
+    complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+          )}
+          { state.localStream && (
+            <div className="calling-local">
+              <video ref={local} disablepictureinpicture autoPlay style={{ width: '100%', height: '100%' }}
+    complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
+            </div>
+          )}
+        </CallingWrapper>
+      </Modal>
     </SessionWrapper>
   );
 }

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

@@ -72,6 +72,17 @@ export const RingingWrapper = styled.div`
 }
 `;
 
+export const CallingWrapper = styled.div`
+  .calling-local {
+    width: 33%;
+    height: 33%;
+    bottom: 16px;
+    right: 16px;
+    position: absolute;
+  }
+`;
+
+
 export const SessionWrapper = styled.div`
   height: 100%;
   width: 100%;
@@ -83,23 +94,6 @@ export const SessionWrapper = styled.div`
     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;
     width: 100%;

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

@@ -25,7 +25,8 @@ export function useSession() {
     loading: false,
     ringing: [],
     callStatus: null,
-    stream: null,
+    localStream: null,
+    remoteStream: null,
   });
 
   const app = useContext(AppContext);
@@ -60,9 +61,8 @@ export function useSession() {
         }
       }
     });
-console.log(ringing, ring.state.callStatus);
 
-    updateState({ ringing, stream: ring.state.stream, callStatus: ring.state.callStatus });
+    updateState({ ringing, localStream: ring.state.localStream, remoteStream: ring.state.remoteStream, callStatus: ring.state.callStatus });
   }, [ring.state]);
 
   useEffect(() => {