adding stuff for mic

packages/desktop/src/components/Terminal.tsx

@@ -65,6 +65,7 @@ import NirvanaAvatar from './NirvanaAvatar';
 import { useDebounce, useKeyPressEvent } from 'react-use';
 
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
+import Channels from '../electron/constants';
 type ConversationMap = {
   [conversationId: string]: Conversation;
 };
@@ -86,10 +87,14 @@ interface ITerminalContext {
   handleQuickDial?: (otherUserId: string) => void;
 
   getUser?: (userId: string) => Promise<User | undefined>;
+
+  isUserSpeaking: boolean;
 }
 
 const TerminalContext = React.createContext<ITerminalContext>({
   conversationMap: {},
+
+  isUserSpeaking: false,
 });
 
 // TODOS
@@ -151,7 +156,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     });
 
     return () => unsub();
-  }, [user, enqueueSnackbar, updateConversationMap]);
+  }, [user, updateConversationMap]);
 
   // cache of selected conversation
   const selectedConversation: Conversation | undefined = useMemo(() => {
@@ -240,15 +245,32 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
 
   useKeyPressEvent('Shift', onSearchFocus);
 
+  const [isUserSpeaking, setIsUserSpeaking] = useState<boolean>(false);
+
+  const [userAudioStream, setUserAudioStream] = useState<MediaStream>(null);
+
+  const handleAskForMicrophonePermissions = useCallback(() => {
+    window.electronAPI.send(Channels.ASK_MICROPHONE_PERMISSIONS);
+  }, []);
+
   // when user wants to talk,
   //  unmute them and send clip for everyone to hear in the distance
   const handleBroadcast = useCallback(() => {
+    if (!userAudioStream) {
+      enqueueSnackbar('Check your audio mic permissions!', { variant: 'error' });
+      handleAskForMicrophonePermissions();
+      return;
+    }
+    setIsUserSpeaking(true);
+
     enqueueSnackbar('started recording');
-  }, []);
+  }, [setIsUserSpeaking, userAudioStream, handleAskForMicrophonePermissions]);
 
   const handleStopBroadcast = useCallback(() => {
+    setIsUserSpeaking(false);
+
     enqueueSnackbar('stopped...', { variant: 'info' });
-  }, []);
+  }, [setIsUserSpeaking]);
 
   useKeyPressEvent('`', handleBroadcast, handleStopBroadcast);
 
@@ -295,6 +317,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
   return (
     <TerminalContext.Provider
       value={{
+        isUserSpeaking,
         selectedConversation,
         conversationMap,
         getUser,
@@ -633,8 +656,6 @@ function ConversationRow({ conversation }: { conversation: Conversation }) {
     return;
   }, [conversation.memberIdsList, getUser, user, setConversationUsers]);
 
-  console.log(conversationUsers);
-
   return (
     <ListItem key={`${conversation.id}-priorityConvoList`}>
       <ListItemButton
@@ -782,103 +803,7 @@ function ConversationDetails() {
       </Stack>
 
       <Container maxWidth={false} sx={{ position: 'relative', flex: 1 }}>
-        <Container maxWidth="xs">
+        {/* <ConversationHistory /> */}
-          <Stack
-            justifyContent={'flex-start'}
-            alignItems={'center'}
-            sx={{
-              pt: 2,
-            }}
-          >
-            <Typography variant="caption">yesterday</Typography>
-
-            <Paper elevation={1} sx={{ p: 1, width: '100%' }}>
-              <Stack direction={'row'} alignItems="center">
-                <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                  <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
-
-                  <Typography color={'GrayText'} variant="overline">
-                    {'Viet Phan'}
-                  </Typography>
-                </Stack>
-
-                <Box
-                  sx={{
-                    ml: 'auto',
-                    color: 'GrayText',
-                  }}
-                >
-                  <FiPlay />
-                </Box>
-              </Stack>
-            </Paper>
-          </Stack>
-
-          <Stack
-            justifyContent={'flex-start'}
-            alignItems={'center'}
-            sx={{
-              pt: 2,
-            }}
-          >
-            <Typography variant="caption">today</Typography>
-
-            <Paper elevation={8} sx={{ p: 1, width: '100%' }}>
-              <Stack direction={'row'} alignItems="center">
-                <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                  <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
-
-                  <Typography color={'GrayText'} variant="overline">
-                    {'Viet Phan'}
-                  </Typography>
-                </Stack>
-
-                <Box
-                  sx={{
-                    ml: 'auto',
-                    color: 'GrayText',
-                  }}
-                >
-                  <FiPlay />
-                </Box>
-              </Stack>
-            </Paper>
-          </Stack>
-
-          <Stack
-            justifyContent={'flex-start'}
-            alignItems={'center'}
-            sx={{
-              pt: 2,
-            }}
-          >
-            <Typography variant="caption">right now</Typography>
-
-            <Paper elevation={24} sx={{ p: 1, width: '100%' }}>
-              <Stack direction={'row'} alignItems="center">
-                <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                  <Avatar
-                    alt={'Arjun Patel'}
-                    src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
-                  />
-
-                  <Typography color={'GrayText'} variant="overline">
-                    {'Arjun Patel'}
-                  </Typography>
-                </Stack>
-
-                <Box
-                  sx={{
-                    ml: 'auto',
-                    color: 'GrayText',
-                  }}
-                >
-                  <FiPlay />
-                </Box>
-              </Stack>
-            </Paper>
-          </Stack>
-        </Container>
 
         <Box
           sx={{
@@ -897,3 +822,105 @@ function ConversationDetails() {
     </>
   );
 }
+
+function ConversationHistory() {
+  return (
+    <Container maxWidth="xs">
+      <Stack
+        justifyContent={'flex-start'}
+        alignItems={'center'}
+        sx={{
+          pt: 2,
+        }}
+      >
+        <Typography variant="caption">yesterday</Typography>
+
+        <Paper elevation={1} sx={{ p: 1, width: '100%' }}>
+          <Stack direction={'row'} alignItems="center">
+            <Stack spacing={2} direction={'row'} alignItems={'center'}>
+              <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+
+              <Typography color={'GrayText'} variant="overline">
+                {'Viet Phan'}
+              </Typography>
+            </Stack>
+
+            <Box
+              sx={{
+                ml: 'auto',
+                color: 'GrayText',
+              }}
+            >
+              <FiPlay />
+            </Box>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack
+        justifyContent={'flex-start'}
+        alignItems={'center'}
+        sx={{
+          pt: 2,
+        }}
+      >
+        <Typography variant="caption">today</Typography>
+
+        <Paper elevation={8} sx={{ p: 1, width: '100%' }}>
+          <Stack direction={'row'} alignItems="center">
+            <Stack spacing={2} direction={'row'} alignItems={'center'}>
+              <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+
+              <Typography color={'GrayText'} variant="overline">
+                {'Viet Phan'}
+              </Typography>
+            </Stack>
+
+            <Box
+              sx={{
+                ml: 'auto',
+                color: 'GrayText',
+              }}
+            >
+              <FiPlay />
+            </Box>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack
+        justifyContent={'flex-start'}
+        alignItems={'center'}
+        sx={{
+          pt: 2,
+        }}
+      >
+        <Typography variant="caption">right now</Typography>
+
+        <Paper elevation={24} sx={{ p: 1, width: '100%' }}>
+          <Stack direction={'row'} alignItems="center">
+            <Stack spacing={2} direction={'row'} alignItems={'center'}>
+              <Avatar
+                alt={'Arjun Patel'}
+                src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
+              />
+
+              <Typography color={'GrayText'} variant="overline">
+                {'Arjun Patel'}
+              </Typography>
+            </Stack>
+
+            <Box
+              sx={{
+                ml: 'auto',
+                color: 'GrayText',
+              }}
+            >
+              <FiPlay />
+            </Box>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Container>
+  );
+}

packages/desktop/src/electron/constants.ts

@@ -8,6 +8,8 @@ enum Channels {
   RESIZE_WINDOW = 'RESIZE_WINDOW',
   ON_WINDOW_BLUR = 'ON_WINDOW_BLUR',
   ON_WINDOW_FOCUS = 'ON_WINDOW_FOCUS',
+
+  ASK_MICROPHONE_PERMISSIONS = 'ASK_MICROPHONE_PERMISSIONS',
 }
 
 export enum STORE_ITEMS {

packages/desktop/src/electron/global.d.ts

@@ -15,6 +15,7 @@ declare global {
       window: {
         resizeWindow(dimensionChangeRequest: DimensionChangeRequest): void;
       };
+      send(channel: Channels, data?: any);
       on(channel: Channels, func: any): () => void;
       once(channel: Channels, func: any): () => void;
     };

packages/desktop/src/electron/preload.ts

@@ -23,6 +23,10 @@ const electronAPI = {
     },
   },
 
+  send(channel: Channels, data?: any) {
+    ipcRenderer.send(channel, data);
+  },
+
   on(channel: Channels, func: any) {
     // const validChannels = ['ipc-example'];
     // if (validChannels.includes(channel)) {

packages/desktop/src/firebase/firestore.ts

@@ -134,7 +134,7 @@ export const getUserById = async (userId: string): Promise<User | undefined> =>
 
 // get the conversations for particular user
 export const getConversationsQueryLIVE = (userId: string) =>
-  query(db.conversations, where('memberIdsList', 'array-contains', userId));
+  query(db.conversations, where(`members.${userId}.isActive`, '==', true));
 
 /**
  *

packages/desktop/src/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain, Display, screen } from 'electron';
+import { app, BrowserWindow, ipcMain, Display, screen, systemPreferences } from 'electron';
 
 import Channels, { DEFAULT_APP_PRESET, DimensionChangeRequest } from './electron/constants';
 import { handleGoogleLogin } from './electron/handleLogin';
@@ -64,6 +64,10 @@ app
       console.log('initiating log in');
       await handleGoogleLogin();
     });
+
+    ipcMain.on(Channels.ASK_MICROPHONE_PERMISSIONS, async () => {
+      systemPreferences.askForMediaAccess('microphone');
+    });
   })
   .then(() => {
     // dynamically changing the window bounds