use call view in room view

Signed-off-by: Timo K <toger5@hotmail.de>

src/app/features/room/RoomView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Box, Text, config } from 'folds';
 import { EventType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
@@ -22,6 +22,7 @@ import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { CallView } from '../../components/element-call/CallView';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -71,6 +72,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
 
+  const [showCall, setShowCall] = useState(false);
+  const [callJoined, setCallJoined] = useState(false);
   const permissions = useRoomPermissions(creators, powerLevels);
   const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());
 
@@ -94,6 +97,15 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   return (
     <Page ref={roomViewRef}>
       <RoomViewHeader />
+      <Box grow="Yes" direction="Row">
+        {showCall && (
+          <CallView
+            onClose={() => setShowCall(false)}
+            onJoin={() => setCallJoined(true)}
+            onHangup={() => setCallJoined(false)}
+          />
+        )}
+        <Box grow="Yes" direction="Column" style={{ minWidth: 400 }}>
           <Box grow="Yes" direction="Column">
             <RoomTimeline
               key={roomId}
@@ -137,6 +149,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
             </div>
             {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
           </Box>
+        </Box>
+      </Box>
     </Page>
   );
 }