From 41ca37d2df279a403c3611dd305d47f9db257a2f Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 28 Mar 2023 13:08:12 -0700
Subject: [PATCH] render contact logo when video off

---
 net/web/src/context/useRingContext.hook.js | 25 ++++++++++++++++------
 net/web/src/session/Session.jsx            | 14 ++++++------
 net/web/src/session/Session.styled.js      | 13 ++++++-----
 net/web/src/session/useSession.hook.js     | 12 +++++++++--
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/net/web/src/context/useRingContext.hook.js b/net/web/src/context/useRingContext.hook.js
index b2257a6e..5f4ff739 100644
--- a/net/web/src/context/useRingContext.hook.js
+++ b/net/web/src/context/useRingContext.hook.js
@@ -10,6 +10,7 @@ export function useRingContext() {
   const [state, setState] = useState({
     ringing: new Map(),
     callStatus: null,
+    cardId: null,
     localStream: null,
     localVideo: false,
     localAudio: false,
@@ -30,6 +31,18 @@ export function useRingContext() {
   const videoTrack = useRef();
   const audioTrack = useRef();
 
+  const iceServers = [
+    {
+      urls: 'stun:35.165.123.117:5001?transport=udp', 
+      username: 'user', 
+      credential: 'pass'
+    },
+    {
+      urls: 'turn:35.165.123.117:5001?transport=udp', 
+      username: 'user', 
+      credential: 'pass'
+    }];
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }))
   }
@@ -95,10 +108,10 @@ export function useRingContext() {
 
         // connect signal socket
         calling.current = { state: "connecting", callId, contactNode, contactToken, host: false };
-        updateState({ callStatus: "connecting", remoteVideo: false, remoteAudio: false });
+        updateState({ callStatus: "connecting", cardId, remoteVideo: false, remoteAudio: false });
 
         // form peer connection
-        pc.current = new RTCPeerConnection();
+        pc.current = new RTCPeerConnection({ iceServers });
         pc.current.ontrack = (ev) => {
           if (!stream.current) {
             stream.current = new MediaStream();
@@ -253,10 +266,10 @@ export function useRingContext() {
       }, RING);
 
       calling.current = { state: "connecting", callId: id, host: true };
-      updateState({ callStatus: "connecting", remoteVideo: false, remoteAudio: false });
+      updateState({ callStatus: "connecting", cardId, remoteVideo: false, remoteAudio: false });
 
       // form peer connection
-      pc.current = new RTCPeerConnection();
+      pc.current = new RTCPeerConnection({ iceServers });
       pc.current.ontrack = (ev) => { //{streams: [stream]}) => {
         console.log("ADD TRACK", ev);
         if (!stream.current) {
@@ -385,7 +398,7 @@ export function useRingContext() {
       else {
         videoTrack.current.enabled = true;
       }
-      updateState({ localVideo: true });
+      updateState({ localVideo: true, localAudio: true });
     },
     disableVideo: async () => {
       if (videoTrack.current) {
@@ -399,7 +412,7 @@ export function useRingContext() {
     },
     disableAudio: async () => {
       audioTrack.current.enabled = false;
-      updateState({ loaclAudio: false });
+      updateState({ localAudio: false });
     },
   }
 
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index 8893911f..89695cb9 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -33,7 +33,7 @@ export function Session() {
       const label = ring.name ? ring.name : `${ring.handle}@${ring.node}`;
       incoming.push(
         <div className="ringing-entry">
-          <Logo url={ring.url} width={40} height={40} radius={4} />
+          <Logo url={ring.img} width={40} height={40} radius={4} />
           <div className="ringing-name">{ label }</div>
           <div onClick={() => actions.ignore(ring)} className="ringing-ignore"><EyeInvisibleOutlined /></div>
           <div onClick={() => actions.decline(ring)} className="ringing-decline"><PhoneOutlined /></div>
@@ -86,6 +86,7 @@ export function Session() {
         }
       };
       remote.current.srcObject = state.remoteStream;
+      remote.current.play();
     }
     else {
       console.log("video player not set");
@@ -95,6 +96,7 @@ export function Session() {
   useEffect(() => {
     if (local.current) {
       local.current.srcObject = state.localStream;
+      local.current.play();
     }
   }, [state.localStream]);
 
@@ -325,19 +327,19 @@ export function Session() {
       <Modal centered visible={state.callStatus} footer={null} closable={false} width={getWidth() + 12} height={getHeight() + 12} bodyStyle={{ paddingBottom: 0, paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 6 }}>
         <CallingWrapper>
           { !state.remoteVideo && (
-            <Logo url={null} width={256} height={256} radius={8} />
+            <Logo url={state.callLogo} width={256} height={256} radius={8} />
           )}
           { state.remoteStream && (
-            <video ref={remote} disablepictureinpicture autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%', height: '100%' }}
+            <video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '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%' }}
+              <video ref={local} disablepictureinpicture playsInline autoPlay style={{ width: '100%', display: 'block' }}
     complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
             </div>
           )}
-          <div className="calling-options">
+          <div className="calling-options calling-hovered">
             { state.localVideo && (
               <div className="calling-option" onClick={actions.disableVideo}>
                 <IoVideocamOutline />
@@ -359,7 +361,7 @@ export function Session() {
               </div>
             )}
           </div>
-          <div className="calling-end" onClick={actions.end}>
+          <div className="calling-end calling-hovered" onClick={actions.end}>
             <IoCallOutline />
           </div>
         </CallingWrapper>
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
index 58db2678..b83bca56 100644
--- a/net/web/src/session/Session.styled.js
+++ b/net/web/src/session/Session.styled.js
@@ -53,7 +53,7 @@ export const RingingWrapper = styled.div`
         background-color: ${Colors.white};
         border-radius: 16px;
         margin: 8px;
-        transform: rotate(135deg);
+        transform: rotate(224deg);
         cursor: pointer;
       }
 
@@ -76,10 +76,13 @@ export const CallingWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &:hover .calling-hovered {
+    display: flex;
+  }
   
   .calling-local {
     width: 33%;
-    height: 33%;
     bottom: 16px;
     left: 16px;
     position: absolute;
@@ -100,19 +103,19 @@ export const CallingWrapper = styled.div`
     color: ${Colors.white};
     font-size: 24px;
     background-color: ${Colors.alert};
-    display: flex;
+    display: none;
     align-items: center;
     justify-content: center;
     padding: 8px;
     border-radius: 20px;
     cursor: pointer;
-    transform: rotate(270deg);
+    transform: rotate(135deg);
   }
 
   .calling-options {
+    display: none;
     position: absolute;
     top: 16px;
-    display: flex;
     flex-direction: row;
   }
 
diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js
index 2199e923..533e33cf 100644
--- a/net/web/src/session/useSession.hook.js
+++ b/net/web/src/session/useSession.hook.js
@@ -25,6 +25,7 @@ export function useSession() {
     loading: false,
     ringing: [],
     callStatus: null,
+    callLogo: null,
     localStream: null,
     localVideo: false,
     localAudio: false,
@@ -60,14 +61,21 @@ export function useSession() {
           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';
+          const img = imageSet ? card.actions.getCardImageUrl(cardId) : null;
           ringing.push({ cardId, img, name, handle, contactNode: node, callId, contactToken, calleeToken });  
         }
       }
     });
 
+    let callLogo = null;
+    const contact = card.state.cards.get(ring.state.cardId);
+    if (contact) {
+      const { imageSet } = contact.data.cardProfile || {};
+      callLogo = imageSet ? card.actions.getCardImageUrl(ring.state.cardId) : null;  
+    }
+
     const { callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio } = ring.state;
-    updateState({ ringing, callStatus, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio });
+    updateState({ ringing, callStatus, callLogo, localStream, localVideo, localAudio, remoteStream, remoteVideo, remoteAudio });
   }, [ring.state]);
 
   useEffect(() => {