From 1244b71b15f68b96f12c28aa4d5840ba3bff90dc Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 30 May 2022 09:35:30 -0500
Subject: [PATCH] showing selected in footer

---
 .../desktop/src/components/FooterControls.tsx |   0
 packages/desktop/src/components/Terminal.tsx  | 370 +++++++++++-------
 2 files changed, 219 insertions(+), 151 deletions(-)
 create mode 100644 packages/desktop/src/components/FooterControls.tsx

diff --git a/packages/desktop/src/components/FooterControls.tsx b/packages/desktop/src/components/FooterControls.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx
index e458205..fb1dce7 100644
--- a/packages/desktop/src/components/Terminal.tsx
+++ b/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;
+    }
 
-    enqueueSnackbar('started recording');
-    setIsCloudDoingMagic(true);
-    mediaRecorder.start();
-    setIsUserSpeaking(true);
+    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,162 +581,213 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
         handleEscape,
       }}
     >
-      <Grid container spacing={0}>
-        {/* side panel */}
-        <Grid
-          item
-          xs={4}
-          sx={{
-            zIndex: 2,
-            backgroundColor: blueGrey[50],
-            boxShadow: 3,
-            borderRight: `1px solid ${blueGrey}`,
-
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <Navbar
-            searchVal={searchVal}
-            isSearching={searching}
-            handleChangeSearchInput={handleChangeSearchInput}
-          />
-
-          <Box sx={{ p: 2 }}>
-            {searchVal ? (
-              <ListPeople people={searchUsersResults} />
-            ) : (
-              <ConversationList
-                lookingForSomeone={selectedConversationId && !selectedConversation}
-              />
-            )}
-          </Box>
-
-          {/* footer controls */}
-          <Box
+      <Stack direction={'column'} sx={{ flex: 1 }}>
+        <Grid container spacing={0} sx={{ flex: 1 }}>
+          {/* side panel */}
+          <Grid
+            item
+            xs={4}
             sx={{
-              mt: 'auto',
+              zIndex: 2,
+              backgroundColor: blueGrey[50],
+              boxShadow: 3,
+              borderRight: `1px solid ${blueGrey}`,
 
-              borderTop: '1px solid',
-              borderTopColor: blueGrey[100],
               display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-start',
-              gap: 2,
-              width: '100%',
-
-              zIndex: 10,
-              boxShadow: 10,
-
-              bgcolor: blueGrey[200],
+              flexDirection: 'column',
             }}
           >
-            <Stack
-              spacing={1}
-              direction={'row'}
-              alignItems={'center'}
-              justifyContent={'flex-start'}
-              sx={{
-                color: 'GrayText',
-                p: 1,
-                flex: 1,
-              }}
-            >
-              <IconButton
-                onClick={handleClick}
-                size="small"
-                sx={{ borderRadius: 1 }}
-                aria-controls={open ? 'account-menu' : undefined}
-                aria-haspopup="true"
-                aria-expanded={open ? 'true' : undefined}
-              >
-                <Avatar alt={user.displayName} src={user.photoURL} />
-              </IconButton>
+            <Navbar
+              searchVal={searchVal}
+              isSearching={searching}
+              handleChangeSearchInput={handleChangeSearchInput}
+            />
 
-              <Tooltip title={'overlay mode'}>
-                <Switch color="secondary" size="small" />
-              </Tooltip>
-
-              <Stack
-                direction={'row'}
-                alignItems={'center'}
-                component="div"
-                sx={{ mr: 'auto', flex: 1 }}
-              >
-                <Tooltip title="Sound configuration">
-                  <IconButton color="inherit" size="small">
-                    <FiHeadphones />
-                  </IconButton>
-                </Tooltip>
-
-                <Button size={'small'} color={'secondary'} variant="text">
-                  flow
-                </Button>
-              </Stack>
-
-              {/* todo: add a third mode which is when toggle broadcasting */}
-              {selectedConversation ? (
-                <Tooltip title="Speak or toggle by clicking here!">
-                  <Fab color="primary" aria-label="add" size="medium">
-                    <FiSun />
-                  </Fab>
-                </Tooltip>
+            <Box sx={{ p: 2 }}>
+              {searchVal ? (
+                <ListPeople people={searchUsersResults} />
               ) : (
-                <Tooltip title="No conversation selected!">
-                  <IconButton color="inherit" size="small">
-                    <FiSun />
-                  </IconButton>
-                </Tooltip>
+                <ConversationList
+                  lookingForSomeone={selectedConversationId && !selectedConversation}
+                />
               )}
-            </Stack>
+            </Box>
+          </Grid>
 
-            <Menu
-              anchorEl={anchorEl}
-              id="account-menu"
-              open={open}
-              onClose={handleClose}
-              onClick={handleClose}
-              PaperProps={{
-                elevation: 0,
-                sx: {
-                  overflow: 'visible',
-                  filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                  mt: 1.5,
-                  '& .MuiAvatar-root': {
-                    width: 32,
-                    height: 32,
-                    ml: -0.5,
-                    mr: 1,
-                  },
-                  '&:before': {
-                    content: '""',
-                    display: 'block',
-                    position: 'absolute',
-                    top: 0,
-                    right: 14,
-                    width: 10,
-                    height: 10,
-                    bgcolor: 'background.paper',
-                    transform: 'translateY(-50%) rotate(45deg)',
-                    zIndex: 0,
-                  },
-                },
-              }}
-              transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-              anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-            >
-              <MenuItem onClick={logout}>
-                <ListItemIcon>
-                  <FiLogOut />
-                </ListItemIcon>
-                <Typography color="warning">Logout</Typography>
-              </MenuItem>
-            </Menu>
-          </Box>
+          <MainPanel />
         </Grid>
 
-        <MainPanel />
-      </Grid>
+        {/* footer controls */}
+        <Box
+          sx={{
+            mt: 'auto',
+
+            borderTop: '1px solid',
+            borderTopColor: blueGrey[100],
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: 2,
+            width: '100%',
+
+            zIndex: 10,
+            boxShadow: 10,
+
+            bgcolor: blueGrey[200],
+          }}
+        >
+          <Stack
+            spacing={1}
+            direction={'row'}
+            alignItems={'center'}
+            justifyContent={'flex-start'}
+            sx={{
+              color: 'GrayText',
+              p: 1,
+              flex: 1,
+            }}
+          >
+            <IconButton
+              onClick={handleClick}
+              size="small"
+              sx={{ borderRadius: 1 }}
+              aria-controls={open ? 'account-menu' : undefined}
+              aria-haspopup="true"
+              aria-expanded={open ? 'true' : undefined}
+            >
+              <Avatar alt={user.displayName} src={user.photoURL} />
+            </IconButton>
+
+            <Tooltip title={'overlay mode'}>
+              <Switch color="secondary" size="small" />
+            </Tooltip>
+
+            <Stack
+              direction={'row'}
+              alignItems={'center'}
+              component="div"
+              sx={{ mr: 'auto', flex: 1 }}
+            >
+              <Tooltip title="Sound configuration">
+                <IconButton color="inherit" size="small">
+                  <FiHeadphones />
+                </IconButton>
+              </Tooltip>
+
+              <Button size={'small'} color={'secondary'} variant="text">
+                flow
+              </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!">
+                <Fab color="primary" aria-label="add" size="medium">
+                  <FiSun />
+                </Fab>
+              </Tooltip>
+            ) : (
+              <Tooltip title="No conversation selected!">
+                <IconButton color="inherit" size="small">
+                  <FiSun />
+                </IconButton>
+              </Tooltip>
+            )}
+          </Stack>
+
+          <Menu
+            anchorEl={anchorEl}
+            id="account-menu"
+            open={open}
+            onClose={handleClose}
+            onClick={handleClose}
+            PaperProps={{
+              elevation: 0,
+              sx: {
+                overflow: 'visible',
+                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                mt: 1.5,
+                '& .MuiAvatar-root': {
+                  width: 32,
+                  height: 32,
+                  ml: -0.5,
+                  mr: 1,
+                },
+                '&:before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  top: 0,
+                  right: 14,
+                  width: 10,
+                  height: 10,
+                  bgcolor: 'background.paper',
+                  transform: 'translateY(-50%) rotate(45deg)',
+                  zIndex: 0,
+                },
+              },
+            }}
+            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          >
+            <MenuItem onClick={logout}>
+              <ListItemIcon>
+                <FiLogOut />
+              </ListItemIcon>
+              <Typography color="warning">Logout</Typography>
+            </MenuItem>
+          </Menu>
+        </Box>
+      </Stack>
 
       {children}