Add routing for call page
Enable buttons to start a call.
Improve ConversationListItem context menu layout.
Move calling buttons from `Button.tsx` to `CallButtons.tsx`.
Add CallProvider
GitLab: #78
Change-Id: I921aa11383bf39fae18e59b01afb00dc66b0d5e6
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index bab36b0..9dab62e 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -15,10 +15,21 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Box, ListItem, ListItemAvatar, ListItemText, Stack, StackProps, Typography } from '@mui/material';
+import {
+ Box,
+ ListItem,
+ ListItemAvatar,
+ ListItemIcon,
+ ListItemText,
+ Menu,
+ MenuItem,
+ Stack,
+ Typography,
+} from '@mui/material';
import { Conversation } from 'jami-web-common';
import { QRCodeCanvas } from 'qrcode.react';
import { MouseEvent, useState } from 'react';
+import { Trans } from 'react-i18next';
import Modal from 'react-modal';
import { useNavigate, useParams } from 'react-router-dom';
@@ -26,32 +37,8 @@
import { setRefreshFromSlice } from '../redux/appSlice';
import { useAppDispatch } from '../redux/hooks';
import ConversationAvatar from './ConversationAvatar';
-import { RemoveContactIcon, VideoCallIcon } from './SvgIcon';
-import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './SvgIcon';
-
-const customStyles: Modal.Styles = {
- content: {
- // right: "auto",
- // bottom: "auto",
- // // marginRight: "-50%",
- // transform: "translate(-50%, -50%)",
- // padding: "16px"
-
- // top: "1364px",
- left: '94px',
- width: '180px',
- height: '262px',
- background: '#FFFFFF 0% 0% no-repeat padding-box',
- boxShadow: '3px 3px 7px #00000029',
- borderRadius: '5px 20px 20px 20px',
- opacity: '1',
-
- textAlign: 'left',
- font: 'normal normal normal 12px/26px Ubuntu',
- letterSpacing: '0px',
- color: '#000000',
- },
-};
+import { CancelIcon, RemoveContactIcon, VideoCallIcon } from './SvgIcon';
+import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, MessageIcon } from './SvgIcon';
const cancelStyles: Modal.Styles = {
content: {
@@ -87,18 +74,6 @@
},
};
-const stackStyles: StackProps = {
- flexDirection: 'row',
- marginBottom: '4px',
- spacing: '40px',
- flex: 1,
- alignItems: 'center',
-};
-
-const iconTextStyle = {
- marginRight: '10px',
-};
-
const iconColor = '#005699';
type ConversationListItemProps = {
@@ -113,21 +88,21 @@
const isSelected = conversation.getDisplayUri() === pathId;
const navigate = useNavigate();
- const [modalIsOpen, setIsOpen] = useState(false);
+ const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
const [blockOrRemove, setBlockOrRemove] = useState(true);
const [userId, setUserId] = useState(conversation?.getFirstMember()?.contact.getUri());
- const [isSwarm, setIsSwarm] = useState('true');
+ const [isSwarm, setIsSwarm] = useState(true);
- const openModal = (e: MouseEvent<HTMLDivElement>) => {
+ const openMenu = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
console.log(e);
- setIsOpen(true);
+ setMenuAnchorEl(e.currentTarget);
};
const openModalDetails = () => setModalDetailsIsOpen(true);
const openModalDelete = () => setModalDeleteIsOpen(true);
- const closeModal = () => setIsOpen(false);
+ const closeModal = () => setMenuAnchorEl(null);
const closeModalDetails = () => setModalDetailsIsOpen(false);
const closeModalDelete = () => setModalDeleteIsOpen(false);
@@ -170,97 +145,110 @@
const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
return (
- <div onContextMenu={openModal}>
+ <div onContextMenu={openMenu}>
<div>
- <Modal
- isOpen={modalIsOpen}
- // onAfterOpen={afterOpenModal}
- onRequestClose={closeModal}
- style={customStyles}
- contentLabel="Example Modal"
- >
- <Stack
+ <Menu open={!!menuAnchorEl} onClose={closeModal} anchorEl={menuAnchorEl}>
+ <MenuItem
onClick={() => {
navigate(`/account/${conversation.getAccountId()}/${uri}`);
closeModal();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<MessageIcon style={{ color: iconColor }} />
- </div>
- Message
- </Stack>
- <Stack {...stackStyles}>
- <div style={{ ...iconTextStyle }}>
- <AudioCallIcon style={{ color: iconColor }} />
- </div>
- Démarrer appel audio
- </Stack>
-
- <Stack {...stackStyles}>
- <div style={{ ...iconTextStyle }}>
- <VideoCallIcon style={{ color: iconColor }} />
- </div>
- Démarrer appel vidéo
- </Stack>
-
- <Stack
- {...stackStyles}
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_message" />
+ </ListItemText>
+ </MenuItem>
+ <MenuItem
onClick={() => {
- navigate(`/account/${conversation.getAccountId()}/`);
- closeModal();
+ navigate(`/account/${conversation.getAccountId()}/call/${conversation.getId()}`);
}}
>
- <div style={{ ...iconTextStyle }}>
- <CrossIcon style={{ color: iconColor }} />
- </div>
- Fermer la conversation
- </Stack>
+ <ListItemIcon>
+ <AudioCallIcon style={{ color: iconColor }} />
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_start_audiocall" />
+ </ListItemText>
+ </MenuItem>
- <Stack
+ <MenuItem
+ onClick={() => {
+ navigate(`/account/${conversation.getAccountId()}/call/${conversation.getId()}?video=true`);
+ }}
+ >
+ <ListItemIcon>
+ <VideoCallIcon style={{ color: iconColor }} />
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_start_videocall" />
+ </ListItemText>
+ </MenuItem>
+
+ {isSelected && (
+ <MenuItem
+ onClick={() => {
+ navigate(`/account/${conversation.getAccountId()}/`);
+ closeModal();
+ }}
+ >
+ <ListItemIcon>
+ <CancelIcon style={{ color: iconColor }} />
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_close" />
+ </ListItemText>
+ </MenuItem>
+ )}
+
+ <MenuItem
onClick={() => {
console.log('open details contact for: ');
closeModal();
openModalDetails();
getContactDetails();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<ContactDetailsIcon style={{ color: iconColor }} />
- </div>
- Détails de la conversation
- </Stack>
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_details" />
+ </ListItemText>
+ </MenuItem>
- <Stack
+ <MenuItem
onClick={() => {
setBlockOrRemove(true);
closeModal();
openModalDelete();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<BlockContactIcon style={{ color: iconColor }} />
- </div>
- Bloquer le contact
- </Stack>
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_block_contact" />
+ </ListItemText>
+ </MenuItem>
- <Stack
+ <MenuItem
onClick={() => {
setBlockOrRemove(false);
closeModal();
openModalDelete();
}}
- {...stackStyles}
>
- <div style={{ ...iconTextStyle }}>
+ <ListItemIcon>
<RemoveContactIcon style={{ color: iconColor }} />
- </div>
- Supprimer contact
- </Stack>
- </Modal>
+ </ListItemIcon>
+ <ListItemText>
+ <Trans i18nKey="conversation_delete_contact" />
+ </ListItemText>
+ </MenuItem>
+ </Menu>
</div>
<div>
@@ -338,7 +326,7 @@
</div>
<Typography variant="caption">
- <div style={{ fontWeight: 'bold' }}> {isSwarm}</div>
+ <div style={{ fontWeight: 'bold' }}> {String(isSwarm)}</div>
</Typography>
</Stack>
</Stack>