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,48 +97,59 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   return (
     <Page ref={roomViewRef}>
       <RoomViewHeader />
-      <Box grow="Yes" direction="Column">
+      <Box grow="Yes" direction="Row">
-        <RoomTimeline
+        {showCall && (
-          key={roomId}
+          <CallView
-          room={room}
+            onClose={() => setShowCall(false)}
-          eventId={eventId}
+            onJoin={() => setCallJoined(true)}
-          roomInputRef={roomInputRef}
+            onHangup={() => setCallJoined(false)}
-          editor={editor}
+          />
-        />
+        )}
-        <RoomViewTyping room={room} />
+        <Box grow="Yes" direction="Column" style={{ minWidth: 400 }}>
-      </Box>
+          <Box grow="Yes" direction="Column">
-      <Box shrink="No" direction="Column">
+            <RoomTimeline
-        <div style={{ padding: `0 ${config.space.S400}` }}>
+              key={roomId}
-          {tombstoneEvent ? (
+              room={room}
-            <RoomTombstone
+              eventId={eventId}
-              roomId={roomId}
+              roomInputRef={roomInputRef}
-              body={tombstoneEvent.getContent().body}
+              editor={editor}
-              replacementRoomId={tombstoneEvent.getContent().replacement_room}
             />
-          ) : (
+            <RoomViewTyping room={room} />
-            <>
+          </Box>
-              {canMessage && (
+          <Box shrink="No" direction="Column">
-                <RoomInput
+            <div style={{ padding: `0 ${config.space.S400}` }}>
-                  room={room}
+              {tombstoneEvent ? (
-                  editor={editor}
+                <RoomTombstone
                   roomId={roomId}
-                  fileDropContainerRef={roomViewRef}
+                  body={tombstoneEvent.getContent().body}
-                  ref={roomInputRef}
+                  replacementRoomId={tombstoneEvent.getContent().replacement_room}
                 />
+              ) : (
+                <>
+                  {canMessage && (
+                    <RoomInput
+                      room={room}
+                      editor={editor}
+                      roomId={roomId}
+                      fileDropContainerRef={roomViewRef}
+                      ref={roomInputRef}
+                    />
+                  )}
+                  {!canMessage && (
+                    <RoomInputPlaceholder
+                      style={{ padding: config.space.S200 }}
+                      alignItems="Center"
+                      justifyContent="Center"
+                    >
+                      <Text align="Center">You do not have permission to post in this room</Text>
+                    </RoomInputPlaceholder>
+                  )}
+                </>
               )}
-              {!canMessage && (
+            </div>
-                <RoomInputPlaceholder
+            {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
-                  style={{ padding: config.space.S200 }}
+          </Box>
-                  alignItems="Center"
+        </Box>
-                  justifyContent="Center"
-                >
-                  <Text align="Center">You do not have permission to post in this room</Text>
-                </RoomInputPlaceholder>
-              )}
-            </>
-          )}
-        </div>
-        {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
     </Page>
   );