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/components/CallChatDrawer.tsx b/client/src/components/CallChatDrawer.tsx
new file mode 100644
index 0000000..d2040d7
--- /dev/null
+++ b/client/src/components/CallChatDrawer.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program. If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Divider, Stack, Typography } from '@mui/material';
+import { useContext } from 'react';
+
+import { CallContext } from '../contexts/CallProvider';
+import { ConversationContext } from '../contexts/ConversationProvider';
+import ChatInterface from '../pages/ChatInterface';
+import { CloseButton } from './Button';
+
+export default () => {
+ return (
+ <Stack
+ width="33%"
+ height="100%"
+ sx={{
+ backgroundColor: 'white',
+ }}
+ >
+ <CallChatDrawerHeader />
+ <Divider
+ sx={{
+ borderTop: '1px solid #E5E5E5',
+ }}
+ />
+ <ChatInterface />
+ </Stack>
+ );
+};
+
+const CallChatDrawerHeader = () => {
+ const { setIsChatShown } = useContext(CallContext);
+ const { conversation } = useContext(ConversationContext);
+
+ // TODO: Improve this to support multiple members
+ const contact = conversation.getFirstMember().contact;
+
+ return (
+ <Stack direction="row" padding={2} spacing={2} alignItems="center">
+ <CloseButton
+ onClick={() => {
+ setIsChatShown(false);
+ }}
+ />
+ <Stack direction="column">
+ <Typography variant="h3" textOverflow="ellipsis">
+ {contact.getDisplayName()}
+ </Typography>
+ </Stack>
+ </Stack>
+ );
+};