testing connecting with footer controls and working

packages/desktop/package.json

@@ -42,8 +42,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4005",
-            "loggerPort": "9005",
+            "port": "4000",
+            "loggerPort": "9000",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;",
             "renderer": {

packages/desktop/src/providers/AuthProvider.tsx

@@ -23,15 +23,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     // on load of this, if we already have jwt tokens in store,
     // then try using them with auth check
-    window.electronAPI.store.get(STORE_ITEMS.AUTH_SESSION_JWT).then((jwtToken: string) => {
-      if (jwtToken) {
-        setJwtToken(jwtToken);
-
-        console.log('retrieved jwtToken from storage', jwtToken);
-      } else {
-        console.log('no jwt token in store');
-      }
-    });
+    // window.electronAPI.store.get(STORE_ITEMS.AUTH_SESSION_JWT).then((jwtToken: string) => {
+    //   if (jwtToken) {
+    //     setJwtToken(jwtToken);
+    //     console.log('retrieved jwtToken from storage', jwtToken);
+    //   } else {
+    //     console.log('no jwt token in store');
+    //   }
+    // });
   }, []);
 
   // todo: check this in intervals repeatedly

packages/desktop/src/tree/FooterControls.tsx

@@ -3,6 +3,7 @@ import {
   AvatarGroup,
   Box,
   Button,
+  CircularProgress,
   Container,
   Dialog,
   Divider,
@@ -30,10 +31,10 @@ import {
   FiZap,
   FiZapOff,
 } from 'react-icons/fi';
+import { MasterConversation, RoomMap } from '../util/types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ConversationUserMember } from '@nirvana/core/models/conversation.model';
-import { MasterConversation } from '../util/types';
 import { SUPPORT_DISPLAY_NAME } from '../util/support';
 import { blueGrey } from '@mui/material/colors';
 import useAuth from '../providers/AuthProvider';
@@ -266,6 +267,8 @@ function OverlayConversation({
         conversationUserMembers={masterConversation.members}
         isConversationSelected={isSelected}
         tunedInUserIds={masterConversation.tunedInUsers}
+        roomPeers={masterConversation.room}
+        localStreamToPeers={masterConversation.localStream}
       />
 
       {isSelected && (
@@ -314,10 +317,14 @@ function OverlayConversationAvatars({
   conversationUserMembers,
   tunedInUserIds,
   isConversationSelected,
+  roomPeers,
+  localStreamToPeers,
 }: {
   isConversationSelected: boolean;
   tunedInUserIds: string[];
   conversationUserMembers: ConversationUserMember[];
+  roomPeers: RoomMap;
+  localStreamToPeers: MediaStream;
 }) {
   const { user } = useAuth();
 
@@ -358,6 +365,10 @@ function OverlayConversationAvatars({
           isTunedIn={tunedInUserIds?.includes(conversationUserMember._id.toString())}
           isConversationSelected={isConversationSelected}
           conversationUserMember={conversationUserMember}
+          isConnecting={
+            (roomPeers && roomPeers[conversationUserMember._id.toString()]?.isConnecting) ?? false
+          }
+          localStreamToPeers={localStreamToPeers}
         />
       ))}
     </AvatarGroup>
@@ -368,23 +379,30 @@ function OverlayConversationAvatar({
   conversationUserMember,
   isTunedIn,
   isConversationSelected,
+  isConnecting,
+  localStreamToPeers,
 }: {
   conversationUserMember: ConversationUserMember;
   isTunedIn: boolean;
   isConversationSelected: boolean; // if user is connecting or just have this conversation selected
+  isConnecting: boolean; // if we are calling or receiving call from this person and still connecting
+  localStreamToPeers: MediaStream; // the local stream that is casted to each peer
 }) {
-  const { userLocalStream } = useConversations();
   const { user } = useAuth();
 
   const localVideoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    if (localVideoRef?.current && userLocalStream) {
-      localVideoRef.current.srcObject = userLocalStream;
+    if (localVideoRef?.current && localStreamToPeers) {
+      localVideoRef.current.srcObject = localStreamToPeers;
     }
-  }, [localVideoRef, userLocalStream]);
+  }, [localVideoRef, localStreamToPeers]);
 
-  if (conversationUserMember._id.toString() === user._id.toString() && userLocalStream) {
+  if (isConnecting) {
+    return <CircularProgress />;
+  }
+
+  if (conversationUserMember._id.toString() === user._id.toString() && localStreamToPeers) {
     return (
       <Box
         height={40}

packages/desktop/src/util/types.ts

@@ -12,23 +12,26 @@ export type MasterConversation = Conversation & {
   // if action is take, normal ordering should take place with database upserts
   temporaryOverrideSort?: boolean;
 
-  room?: {
-    [userId: string]: {
-      peer: Peer;
-
-      //the remote stream of this peer
-      stream?: MediaStream;
-
-      // calling happening whether it is a newbie or master
-      isConnecting?: boolean;
-    };
-  };
+  room?: RoomMap;
+  // the local stream that we are casting to each peer
   localStream?: MediaStream;
 
   // all of audio clips, links, media, etc.
   content?: ContentBlock[];
 };
 
+export type RoomMap = {
+  [userId: string]: {
+    peer: Peer;
+
+    // the remote stream of this peer
+    stream?: MediaStream;
+
+    // calling happening whether it is a newbie or master
+    isConnecting?: boolean;
+  };
+};
+
 export type ConversationMap = {
   [conversationId: string]: MasterConversation;
 };