From 43ce6f0210c2b76a0418127644a23bc51c9e05fc Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 18:01:27 -0500
Subject: [PATCH] Update room to use CallView

---
 src/app/features/room/Room.tsx | 41 ++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index ffc21857..d2fea381 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -13,6 +13,7 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { CallView } from './CallView';
 
 export function Room() {
   const { eventId } = useParams();
@@ -23,7 +24,7 @@ export function Room() {
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
-  const members = useRoomMembers(mx, room.roomId);
+  const members = useRoomMembers(mx, room?.roomId);
 
   useKeyDown(
     window,
@@ -39,14 +40,36 @@ export function Room() {
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
-      <Box grow="Yes">
-        <RoomView room={room} eventId={eventId} />
-        {screenSize === ScreenSize.Desktop && isDrawer && (
-          <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} members={members} />
-          </>
-        )}
+      <Box
+        grow="Yes"
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
+        <CallView room={room} eventId={eventId} />
+
+        <Box
+          grow="Yes"
+          style={{
+            width: room.isCallRoom() ? '50%' : '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
+            <RoomView room={room} eventId={eventId} />
+          </Box>
+          {screenSize === ScreenSize.Desktop && isDrawer && (
+            <>
+              <Line variant="Background" direction="Vertical" size="300" />
+              <MembersDrawer key={room.roomId} room={room} members={members} />
+            </>
+          )}
+        </Box>
       </Box>
     </PowerLevelsContextProvider>
   );