showing selected in footer

packages/desktop/src/components/Terminal.tsx

@@ -23,6 +23,7 @@ import {
   Fab,
   Switch,
   Dialog,
+  AvatarGroup,
 } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
 import { FiZap, FiHeadphones, FiLogOut, FiMonitor, FiSun } from 'react-icons/fi';
@@ -51,6 +52,7 @@ import MainPanel from './MainPanel';
 import { ConversationList } from './ConversationList';
 import NewConversationDialog from './NewConversationDialog';
 import { createGroupConversation } from '../firebase/firestore';
+import ConversationLabel from '../subcomponents/ConversationLabel';
 type ConversationMap = {
   [conversationId: string]: Conversation;
 };
@@ -381,6 +383,11 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     navigator.mediaDevices
       .getUserMedia({ audio: true })
       .then((localUserMedia: MediaStream) => {
+        if (!localUserMedia.active) {
+          enqueueSnackbar('Make sure your microphone is enabled!', { variant: 'error' });
+          return;
+        }
+
         localUserMedia.getTracks().forEach((track) => track.stop());
 
         setUserAudioStream(localUserMedia);
@@ -415,7 +422,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     }
 
     if (!userAudioStream || !mediaRecorder) {
-      enqueueSnackbar('Check your audio mic permissions in preferences!!', { variant: 'error' });
+      enqueueSnackbar('Configure your audio!!', { variant: 'error' });
 
       handleAskForMicrophonePermissions();
       return;
@@ -423,12 +430,22 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
 
     // prevent while delaying stopping
     // ? better to just start after 200 ms as put below for the delay of stopping recording?
-    if (mediaRecorder.state === 'recording') return;
+    if (mediaRecorder.state === 'recording') {
+      enqueueSnackbar(`Please don't spam!!!`, { variant: 'warning' });
+      return;
+    }
 
+    try {
       enqueueSnackbar('started recording');
       setIsCloudDoingMagic(true);
       mediaRecorder.start();
       setIsUserSpeaking(true);
+    } catch (error) {
+      console.error(error);
+      enqueueSnackbar('Problem in your audio!!!', { variant: 'error' });
+      setIsCloudDoingMagic(false);
+      setIsUserSpeaking(false);
+    }
   }, [
     selectedConversation,
     setIsUserSpeaking,
@@ -564,7 +581,8 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
         handleEscape,
       }}
     >
-      <Grid container spacing={0}>
+      <Stack direction={'column'} sx={{ flex: 1 }}>
+        <Grid container spacing={0} sx={{ flex: 1 }}>
           {/* side panel */}
           <Grid
             item
@@ -594,6 +612,10 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
                 />
               )}
             </Box>
+          </Grid>
+
+          <MainPanel />
+        </Grid>
 
         {/* footer controls */}
         <Box
@@ -657,6 +679,55 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
               </Button>
             </Stack>
 
+            {selectedConversation && (
+              <Box sx={{ mx: 'auto' }}>
+                <Stack
+                  direction={'row'}
+                  sx={{
+                    py: 2,
+                    px: 2,
+                    borderBottom: '1px solid',
+                    borderBottomColor: blueGrey[100],
+                    WebkitAppRegion: 'drag',
+                    cursor: 'pointer',
+                  }}
+                  alignItems={'center'}
+                  justifyContent={'flex-start'}
+                >
+                  <IconButton color="primary" size="small">
+                    <FiSun />
+                  </IconButton>
+
+                  <Box sx={{ color: 'GrayText' }}>
+                    <ConversationLabel
+                      users={selectedConversation.userCache ?? []}
+                      conversationName={selectedConversation.name}
+                      isSelected={true}
+                    />
+                  </Box>
+
+                  <AvatarGroup variant={'rounded'}>
+                    {selectedConversation.userCache?.map((conversationUser, index) => (
+                      <Avatar
+                        key={`${selectedConversation.id}-${conversationUser.uid}-convoIcon`}
+                        alt={conversationUser?.displayName}
+                        src={conversationUser?.photoUrl}
+                        sx={{
+                          width: 30,
+                          height: 30,
+                          opacity: selectedConversation.membersInRoom?.includes(
+                            conversationUser.uid,
+                          )
+                            ? '100%'
+                            : '20%',
+                        }}
+                      />
+                    ))}
+                  </AvatarGroup>
+                </Stack>
+              </Box>
+            )}
+
             {/* todo: add a third mode which is when toggle broadcasting */}
             {selectedConversation ? (
               <Tooltip title="Speak or toggle by clicking here!">
@@ -716,10 +787,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
             </MenuItem>
           </Menu>
         </Box>
-        </Grid>
-
-        <MainPanel />
-      </Grid>
+      </Stack>
 
       {children}