feat(#141): [wip] render direct message room

jeremyckahn · Nov 20, 2024 · ce503c0 · ce503c0
1 parent ff54d0b
commit ce503c0
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 44 deletions.
diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
@@ -1,17 +1,21 @@
-import { HTMLAttributes, useRef, useEffect, useState, useContext } from 'react'
-import Box from '@mui/material/Box'
+import { useRef, useEffect, useState, useContext } from 'react'
+import Box, { BoxProps } from '@mui/material/Box'
 import useTheme from '@mui/material/styles/useTheme'
 
 import { Message as IMessage, InlineMedia } from 'models/chat'
 import { Message } from 'components/Message'
 import { ShellContext } from 'contexts/ShellContext'
 
-export interface ChatTranscriptProps extends HTMLAttributes<HTMLDivElement> {
+export interface ChatTranscriptProps extends BoxProps {
   messageLog: Array<IMessage | InlineMedia>
   userId: string
 }
 
-export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => {
+export const ChatTranscript = ({
+  messageLog,
+  userId,
+  sx,
+}: ChatTranscriptProps) => {
   const { showRoomControls } = useContext(ShellContext)
   const theme = useTheme()
   const boxRef = useRef<HTMLDivElement>(null)
@@ -62,17 +66,20 @@ export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => {
     <Box
       ref={boxRef}
       className="ChatTranscript"
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: 1,
-        overflow: 'auto',
-        pb: transcriptMinPadding,
-        pt: showRoomControls ? theme.spacing(10) : theme.spacing(2),
-        px: `max(${transcriptPaddingX}, ${transcriptMinPadding})`,
-        transition: `padding-top ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
-        width: '100%',
-      }}
+      sx={[
+        {
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          overflow: 'auto',
+          pb: transcriptMinPadding,
+          pt: showRoomControls ? theme.spacing(10) : theme.spacing(2),
+          px: `max(${transcriptPaddingX}, ${transcriptMinPadding})`,
+          transition: `padding-top ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
+          width: '100%',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {messageLog.map((message, idx) => {
         const previousMessage = messageLog[idx - 1]

diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
@@ -33,6 +33,7 @@ export interface RoomProps {
   userId: string
   encryptionService?: typeof encryption
   timeService?: typeof time
+  targetUserId?: string
 }
 
 export function Room({
@@ -43,6 +44,7 @@ export function Room({
   roomId,
   password,
   userId,
+  targetUserId,
 }: RoomProps) {
   const theme = useTheme()
   const settingsContext = useContext(SettingsContext)
@@ -72,9 +74,12 @@ export function Room({
       publicKey,
       encryptionService,
       timeService,
+      targetUserId,
     }
   )
 
+  const isDirectMessageRoom = typeof targetUserId === 'string'
+
   const handleMessageSubmit = async (message: string) => {
     await sendMessage(message)
   }
@@ -105,32 +110,34 @@ export function Room({
             overflow: 'auto',
           }}
         >
-          <Zoom in={showRoomControls}>
-            <Box
-              sx={{
-                alignItems: 'flex-start',
-                display: 'flex',
-                justifyContent: 'center',
-                overflow: 'visible',
-                height: 0,
-                position: 'relative',
-                top: theme.spacing(1),
-              }}
-            >
-              <RoomAudioControls peerRoom={peerRoom} />
-              <RoomVideoControls peerRoom={peerRoom} />
-              <RoomScreenShareControls peerRoom={peerRoom} />
-              <RoomFileUploadControls
-                peerRoom={peerRoom}
-                onInlineMediaUpload={handleInlineMediaUpload}
-              />
-              <Zoom in={showVideoDisplay} mountOnEnter unmountOnExit>
-                <span>
-                  <RoomShowMessagesControls />
-                </span>
-              </Zoom>
-            </Box>
-          </Zoom>
+          {!isDirectMessageRoom && (
+            <Zoom in={showRoomControls}>
+              <Box
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  overflow: 'visible',
+                  height: 0,
+                  position: 'relative',
+                  top: theme.spacing(1),
+                }}
+              >
+                <RoomAudioControls peerRoom={peerRoom} />
+                <RoomVideoControls peerRoom={peerRoom} />
+                <RoomScreenShareControls peerRoom={peerRoom} />
+                <RoomFileUploadControls
+                  peerRoom={peerRoom}
+                  onInlineMediaUpload={handleInlineMediaUpload}
+                />
+                <Zoom in={showVideoDisplay} mountOnEnter unmountOnExit>
+                  <span>
+                    <RoomShowMessagesControls />
+                  </span>
+                </Zoom>
+              </Box>
+            </Zoom>
+          )}
           <Box
             sx={{
               display: 'flex',
@@ -157,7 +164,11 @@ export function Room({
                   height: landscape ? '100%' : '40%',
                 }}
               >
-                <ChatTranscript messageLog={messageLog} userId={userId} />
+                <ChatTranscript
+                  messageLog={messageLog}
+                  userId={userId}
+                  sx={{ pt: 1 }}
+                />
                 <Divider />
                 <Box>
                   <MessageForm

diff --git a/src/components/Room/useRoom.ts b/src/components/Room/useRoom.ts
@@ -44,6 +44,7 @@ interface UseRoomConfig {
   getUuid?: typeof uuid
   encryptionService?: typeof encryption
   timeService?: typeof time
+  targetUserId?: string | null
 }
 
 interface UserMetadata extends Record<string, any> {
@@ -58,13 +59,16 @@ export function useRoom(
     roomId,
     userId,
     publicKey,
+    targetUserId = null,
     getUuid = uuid,
     encryptionService = encryption,
     timeService = time,
   }: UseRoomConfig
 ) {
   const isPrivate = password !== undefined
 
+  const isDirectMessageRoom = typeof targetUserId === 'string'
+
   const {
     peerList,
     setPeerList,
@@ -191,12 +195,20 @@ export function useRoom(
 
   useEffect(() => {
     return () => {
+      if (isDirectMessageRoom) return
+
       sendTypingStatusChange({ isTyping: false })
       peerRoom.leaveRoom()
       peerRoomRef.current = null
       setPeerList([])
     }
-  }, [peerRoom, setPeerList, sendTypingStatusChange, peerRoomRef])
+  }, [
+    peerRoom,
+    setPeerList,
+    sendTypingStatusChange,
+    peerRoomRef,
+    isDirectMessageRoom,
+  ])
 
   useEffect(() => {
     setPassword(password)

diff --git a/src/components/Shell/PeerListItem.tsx b/src/components/Shell/PeerListItem.tsx
@@ -16,18 +16,21 @@ import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
-import { useState } from 'react'
+import useTheme from '@mui/material/styles/useTheme'
+import { useContext, useState } from 'react'
 
 import { AudioVolume } from 'components/AudioVolume'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 import { PublicKey } from 'components/PublicKey'
+import { Room } from 'components/Room'
 import { PeerConnectionType } from 'lib/PeerRoom'
 import {
   AudioChannel,
   AudioChannelName,
   Peer,
   PeerVerificationState,
 } from 'models/chat'
+import { SettingsContext } from 'contexts/SettingsContext'
 
 import { PeerDownloadFileButton } from './PeerDownloadFileButton'
 
@@ -62,6 +65,9 @@ export const PeerListItem = ({
   peerConnectionTypes,
   peerAudioChannels,
 }: PeerListItemProps) => {
+  const theme = useTheme()
+  const { getUserSettings } = useContext(SettingsContext)
+  const { userId } = getUserSettings()
   const [showPeerDialog, setShowPeerDialog] = useState(false)
 
   const hasPeerConnection = peer.peerId in peerConnectionTypes
@@ -169,6 +175,15 @@ export const PeerListItem = ({
               <PublicKey publicKey={peer.publicKey} />
             </AccordionDetails>
           </Accordion>
+          <Box
+            mt={1}
+            display="flex"
+            flexDirection="column"
+            minHeight="350px"
+            bgcolor={theme.palette.background.paper}
+          >
+            <Room roomId="" userId={userId} targetUserId={peer.userId} />
+          </Box>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleDialogClose}>Close</Button>