Add toggleable chat drawer in call
During a call, the chat button is enabled and lets the user open the
chat drawer.
GitLab: #177
Change-Id: I7a2ae09fca5af904c3280bc948a2d36135c1c63d
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index b6266ac..29dd4e0 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -44,11 +44,12 @@
CallingVideoCameraButton,
CallingVolumeButton,
} from '../components/CallButtons';
+import CallChatDrawer from '../components/CallChatDrawer';
import { CallContext, CallStatus } from '../contexts/CallProvider';
import { CallPending } from './CallPending';
export default () => {
- const { callRole, callStatus } = useContext(CallContext);
+ const { callRole, callStatus, isChatShown } = useContext(CallContext);
if (callStatus !== CallStatus.InCall) {
return (
@@ -60,7 +61,12 @@
);
}
- return <CallInterface />;
+ return (
+ <Box flexGrow={1} display="flex">
+ <CallInterface />
+ {isChatShown && <CallChatDrawer />}
+ </Box>
+ );
};
interface Props {
@@ -86,7 +92,7 @@
}, [remoteStream]);
return (
- <>
+ <Box display="flex" flexGrow={1}>
<video
ref={remoteVideoRef}
autoPlay
@@ -123,7 +129,7 @@
</Grid>
</Grid>
</Box>
- </>
+ </Box>
);
};
diff --git a/client/src/pages/ChatInterface.tsx b/client/src/pages/ChatInterface.tsx
index f30c15a..5bcd8a2 100644
--- a/client/src/pages/ChatInterface.tsx
+++ b/client/src/pages/ChatInterface.tsx
@@ -16,7 +16,7 @@
* <https://www.gnu.org/licenses/>.
*/
import { Box, Divider, Stack } from '@mui/material';
-import { ConversationMember, ConversationMessage, Message, WebSocketMessageType } from 'jami-web-common';
+import { ConversationMessage, Message, WebSocketMessageType } from 'jami-web-common';
import { useCallback, useContext, useEffect, useState } from 'react';
import { useDropzone } from 'react-dropzone';
@@ -24,16 +24,14 @@
import LoadingPage from '../components/Loading';
import MessageList from '../components/MessageList';
import SendMessageForm from '../components/SendMessageForm';
+import { ConversationContext } from '../contexts/ConversationProvider';
import { WebSocketContext } from '../contexts/WebSocketProvider';
import { useMessagesQuery, useSendMessageMutation } from '../services/Conversation';
import { FileHandler } from '../utils/files';
-type ChatInterfaceProps = {
- conversationId: string;
- members: ConversationMember[];
-};
-const ChatInterface = ({ conversationId, members }: ChatInterfaceProps) => {
+const ChatInterface = () => {
const webSocket = useContext(WebSocketContext);
+ const { conversationId, conversation } = useContext(ConversationContext);
const [messages, setMessages] = useState<Message[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(false);
@@ -107,6 +105,8 @@
return <div>Error loading {conversationId}</div>;
}
+ const members = conversation.getMembers();
+
return (
<Stack flex={1} overflow="hidden" {...getRootProps()} paddingBottom="16px">
{isDragActive && (