Merge pull request #60 from GimleLarpes/patch-3

Reworks/cleans up structure of Room, RoomView and CallView

src/app/features/call/CallView.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import { Room } from 'matrix-js-sdk';
 import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
 import { Box } from 'folds';
@@ -8,16 +7,7 @@ import {
   BackupRefContext,
 } from '../../pages/client/call/PersistentCallContainer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-
-function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-  return (...args: Parameters<F>): void => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => func(...args), waitFor);
-  };
-}
+import { useDebounce } from '../../hooks/useDebounce';
 
 type OriginalStyles = {
   position?: string;
@@ -45,7 +35,7 @@ export function CallView({ room }: { room: Room }) {
   );
 
   const screenSize = useScreenSizeContext();
-  const isMobile = screenSize === ScreenSize.Mobile;
+  /* eslint-disable-next-line no-nested-ternary */
   const activeIframeDisplayRef = isPrimaryIframe
     ? isViewingActiveCall
       ? primaryIframeRef
@@ -90,11 +80,10 @@ export function CallView({ room }: { room: Room }) {
     }
   }, [activeIframeDisplayRef, room]);
 
-  const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
-    applyFixedPositioningToIframe,
-    primaryIframeRef,
-    backupIframeRef,
-  ]);
+  const debouncedApplyFixedPositioning = useDebounce(applyFixedPositioningToIframe, {
+    wait: 50,
+    immediate: false,
+  });
   useEffect(() => {
     const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
@@ -103,7 +92,7 @@ export function CallView({ room }: { room: Room }) {
       applyFixedPositioningToIframe();
 
       const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
-      resizeObserver.observe(hostElement);
+      if (hostElement) resizeObserver.observe(hostElement);
       window.addEventListener('scroll', debouncedApplyFixedPositioning, true);
 
       return () => {
@@ -121,6 +110,8 @@ export function CallView({ room }: { room: Room }) {
         originalIframeStylesRef.current = null;
       };
     }
+
+    return undefined;
   }, [
     activeIframeDisplayRef,
     applyFixedPositioningToIframe,
@@ -130,16 +121,10 @@ export function CallView({ room }: { room: Room }) {
     room,
   ]);
 
-  const isCallViewVisible = room.isCallRoom();
+  const isCallViewVisible = room.isCallRoom() && (screenSize === ScreenSize.Desktop || !isChatOpen);
 
   return (
-    <Box
-      direction="Column"
-      style={{
-        width: isChatOpen ? (isMobile ? '50%' : '100%') : '100%',
-        display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : 'flex') : 'none',
-      }}
-    >
+    <Box grow="Yes" direction="Column" style={{ display: isCallViewVisible ? 'flex' : 'none' }}>
       <div
         ref={iframeHostRef}
         style={{
@@ -147,7 +132,7 @@ export function CallView({ room }: { room: Room }) {
           height: '100%',
           position: 'relative',
           pointerEvents: 'none',
-          display: isCallViewVisible ? 'flex' : 'none',
+          display: 'flex',
         }}
       />
     </Box>

src/app/features/room/Room.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, { useCallback } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
@@ -15,7 +14,6 @@ import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from '../call/CallView';
-import { useCallState } from '../../pages/client/call/CallProvider';
 import { RoomViewHeader } from './RoomViewHeader';
 
 export function Room() {
@@ -25,7 +23,6 @@ export function Room() {
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const { isChatOpen } = useCallState();
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room?.roomId);
@@ -44,48 +41,23 @@ export function Room() {
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
-      <Box
-        grow="Yes"
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {room.isCallRoom() && <RoomViewHeader />}
-        <Box
-          grow="Yes"
-          style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-          }}
-        >
-          <CallView room={room} />
-          {(!room.isCallRoom() || isChatOpen) && (
-            <Box
-              grow="Yes"
-              style={{
-                width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
-                <RoomView room={room} eventId={eventId} />
-              </Box>
-            </Box>
-          )}
-          {screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && (
-            <>
+      <Box grow="Yes">
+        <Box grow="Yes" direction="Column">
+          <RoomViewHeader />
+          <Box grow="Yes">
+            <CallView room={room} />
+            {room.isCallRoom() && screenSize === ScreenSize.Desktop && (
               <Line variant="Background" direction="Vertical" size="300" />
-              <MembersDrawer key={room.roomId} room={room} members={members} />
-            </>
-          )}
+            )}
+            <RoomView room={room} eventId={eventId} />
+          </Box>
         </Box>
+        {!room.isCallRoom() && screenSize === ScreenSize.Desktop && isDrawer && (
+          <>
+            <Line variant="Background" direction="Vertical" size="300" />
+            <MembersDrawer key={room.roomId} room={room} members={members} />
+          </>
+        )}
       </Box>
     </PowerLevelsContextProvider>
   );

src/app/features/room/RoomView.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { Box, Text, config } from 'folds'; // Assuming 'folds' is a UI library
+import { Box, Text, config, toRem } from 'folds';
 import { EventType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
@@ -15,7 +15,6 @@ import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
-import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import navigation from '../../../client/state/navigation';
@@ -23,6 +22,8 @@ import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
+import { useCallState } from '../../pages/client/call/CallProvider';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 
@@ -64,6 +65,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const screenSize = useScreenSizeContext();
+  const { isChatOpen } = useCallState();
   const { roomId } = room;
   const editor = useEditor();
   const mx = useMatrixClient();
@@ -98,55 +101,64 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef}>
-      {!room.isCallRoom() && <RoomViewHeader />}
-      <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
-        <RoomTimeline
-          key={roomId}
-          room={room}
-          eventId={eventId}
-          roomInputRef={roomInputRef}
-          editor={editor}
-          getPowerLevelTag={getPowerLevelTag}
-          accessibleTagColors={accessibleTagColors}
-        />
-        <RoomViewTyping room={room} />
-      </Box>
-      <Box shrink="No" direction="Column">
-        <div style={{ padding: `0 ${config.space.S400}` }}>
-          {' '}
-          {tombstoneEvent ? (
-            <RoomTombstone
-              roomId={roomId}
-              body={tombstoneEvent.getContent().body}
-              replacementRoomId={tombstoneEvent.getContent().replacement_room}
-            />
-          ) : (
-            <>
-              {canMessage ? (
-                <RoomInput
-                  room={room}
-                  editor={editor}
-                  roomId={roomId}
-                  fileDropContainerRef={roomViewRef}
-                  ref={roomInputRef}
-                  getPowerLevelTag={getPowerLevelTag}
-                  accessibleTagColors={accessibleTagColors}
-                />
-              ) : (
-                <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>
-              )}
-            </>
-          )}
-        </div>
-        {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
-      </Box>
-    </Page>
+    (!room.isCallRoom() || isChatOpen) && (
+      <Page
+        ref={roomViewRef}
+        style={
+          room.isCallRoom() && screenSize === ScreenSize.Desktop
+            ? { maxWidth: toRem(399), minWidth: toRem(399) }
+            : {}
+        }
+      >
+        <Box grow="Yes" direction="Column">
+          <RoomTimeline
+            key={roomId}
+            room={room}
+            eventId={eventId}
+            roomInputRef={roomInputRef}
+            editor={editor}
+            getPowerLevelTag={getPowerLevelTag}
+            accessibleTagColors={accessibleTagColors}
+          />
+          <RoomViewTyping room={room} />
+        </Box>
+        <Box shrink="No" direction="Column">
+          <div style={{ padding: `0 ${config.space.S400}` }}>
+            {' '}
+            {tombstoneEvent ? (
+              <RoomTombstone
+                roomId={roomId}
+                body={tombstoneEvent.getContent().body}
+                replacementRoomId={tombstoneEvent.getContent().replacement_room}
+              />
+            ) : (
+              /* eslint-disable-next-line react/jsx-no-useless-fragment */
+              <>
+                {canMessage ? (
+                  <RoomInput
+                    room={room}
+                    editor={editor}
+                    roomId={roomId}
+                    fileDropContainerRef={roomViewRef}
+                    ref={roomInputRef}
+                    getPowerLevelTag={getPowerLevelTag}
+                    accessibleTagColors={accessibleTagColors}
+                  />
+                ) : (
+                  <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>
+                )}
+              </>
+            )}
+          </div>
+          {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
+        </Box>
+      </Page>
+    )
   );
 }