showing selected in footer
This commit is contained in:
talksik
@@ -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}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user