talksik/nirvana-v4
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

showing selected in footer

Browse Source
This commit is contained in:
talksik
2022-05-30 09:35:30 -05:00
parent 25eec206e9
commit 1244b71b15
2 changed files with 219 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/components/FooterControls.tsx
View File
packages/desktop/src/components/Terminal.tsx
+219 -151
View File
@@ -23,6 +23,7 @@ import {
Fab, Fab,
Switch, Switch,
Dialog, Dialog,
AvatarGroup,
} from '@mui/material'; } from '@mui/material';
import { blueGrey } from '@mui/material/colors'; import { blueGrey } from '@mui/material/colors';
import { FiZap, FiHeadphones, FiLogOut, FiMonitor, FiSun } from 'react-icons/fi'; import { FiZap, FiHeadphones, FiLogOut, FiMonitor, FiSun } from 'react-icons/fi';
@@ -51,6 +52,7 @@ import MainPanel from './MainPanel';
import { ConversationList } from './ConversationList'; import { ConversationList } from './ConversationList';
import NewConversationDialog from './NewConversationDialog'; import NewConversationDialog from './NewConversationDialog';
import { createGroupConversation } from '../firebase/firestore'; import { createGroupConversation } from '../firebase/firestore';
import ConversationLabel from '../subcomponents/ConversationLabel';
type ConversationMap = { type ConversationMap = {
[conversationId: string]: Conversation; [conversationId: string]: Conversation;
}; };
@@ -381,6 +383,11 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ audio: true }) .getUserMedia({ audio: true })
.then((localUserMedia: MediaStream) => { .then((localUserMedia: MediaStream) => {
if (!localUserMedia.active) {
enqueueSnackbar('Make sure your microphone is enabled!', { variant: 'error' });
return;
}
localUserMedia.getTracks().forEach((track) => track.stop()); localUserMedia.getTracks().forEach((track) => track.stop());
setUserAudioStream(localUserMedia); setUserAudioStream(localUserMedia);
@@ -415,7 +422,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
} }
if (!userAudioStream || !mediaRecorder) { if (!userAudioStream || !mediaRecorder) {
enqueueSnackbar('Check your audio mic permissions in preferences!!', { variant: 'error' }); enqueueSnackbar('Configure your audio!!', { variant: 'error' });
handleAskForMicrophonePermissions(); handleAskForMicrophonePermissions();
return; return;
@@ -423,12 +430,22 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
// prevent while delaying stopping // prevent while delaying stopping
// ? better to just start after 200 ms as put below for the delay of stopping recording? // ? 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'); try {
setIsCloudDoingMagic(true); enqueueSnackbar('started recording');
mediaRecorder.start(); setIsCloudDoingMagic(true);
setIsUserSpeaking(true); mediaRecorder.start();
setIsUserSpeaking(true);
} catch (error) {
console.error(error);
enqueueSnackbar('Problem in your audio!!!', { variant: 'error' });
setIsCloudDoingMagic(false);
setIsUserSpeaking(false);
}
}, [ }, [
selectedConversation, selectedConversation,
setIsUserSpeaking, setIsUserSpeaking,
@@ -564,162 +581,213 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
handleEscape, handleEscape,
}} }}
> >
<Grid container spacing={0}> <Stack direction={'column'} sx={{ flex: 1 }}>
{/* side panel */} <Grid container spacing={0} sx={{ flex: 1 }}>
<Grid {/* side panel */}
item <Grid
xs={4} item
sx={{ xs={4}
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
sx={{ sx={{
mt: 'auto', zIndex: 2,
backgroundColor: blueGrey[50],
boxShadow: 3,
borderRight: `1px solid ${blueGrey}`,
borderTop: '1px solid',
borderTopColor: blueGrey[100],
display: 'flex', display: 'flex',
alignItems: 'center', flexDirection: 'column',
justifyContent: 'flex-start',
gap: 2,
width: '100%',
zIndex: 10,
boxShadow: 10,
bgcolor: blueGrey[200],
}} }}
> >
<Stack <Navbar
spacing={1} searchVal={searchVal}
direction={'row'} isSearching={searching}
alignItems={'center'} handleChangeSearchInput={handleChangeSearchInput}
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'}> <Box sx={{ p: 2 }}>
<Switch color="secondary" size="small" /> {searchVal ? (
</Tooltip> <ListPeople people={searchUsersResults} />
<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>
) : ( ) : (
<Tooltip title="No conversation selected!"> <ConversationList
<IconButton color="inherit" size="small"> lookingForSomeone={selectedConversationId && !selectedConversation}
<FiSun /> />
</IconButton>
</Tooltip>
)} )}
</Stack> </Box>
</Grid>
<Menu <MainPanel />
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>
</Grid> </Grid>
<MainPanel /> {/* footer controls */}
</Grid> <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} {children}