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';
-
+import { useDebounce } from '../../hooks/useDebounce';
-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);
-  };
-}
 
 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), [
+  const debouncedApplyFixedPositioning = useDebounce(applyFixedPositioningToIframe, {
-    applyFixedPositioningToIframe,
+    wait: 50,
-    primaryIframeRef,
+    immediate: false,
-    backupIframeRef,
+  });
-  ]);
   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
+    <Box grow="Yes" direction="Column" style={{ display: isCallViewVisible ? 'flex' : 'none' }}>
-      direction="Column"
-      style={{
-        width: isChatOpen ? (isMobile ? '50%' : '100%') : '100%',
-        display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : '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,49 +41,24 @@ export function Room() {
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
-      <Box
+      <Box grow="Yes">
-        grow="Yes"
+        <Box grow="Yes" direction="Column">
-        style={{
+          <RoomViewHeader />
-          width: '100%',
+          <Box grow="Yes">
-          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) && (
+            {room.isCallRoom() && screenSize === ScreenSize.Desktop && (
-            <Box
+              <Line variant="Background" direction="Vertical" size="300" />
-              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>
-          )}
+        {!room.isCallRoom() && screenSize === ScreenSize.Desktop && isDrawer && (
-          {screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && (
           <>
             <Line variant="Background" direction="Vertical" size="300" />
             <MembersDrawer key={room.roomId} room={room} members={members} />
           </>
         )}
       </Box>
-      </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,9 +101,16 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef}>
+    (!room.isCallRoom() || isChatOpen) && (
-      {!room.isCallRoom() && <RoomViewHeader />}
+      <Page
-      <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+        ref={roomViewRef}
+        style={
+          room.isCallRoom() && screenSize === ScreenSize.Desktop
+            ? { maxWidth: toRem(399), minWidth: toRem(399) }
+            : {}
+        }
+      >
+        <Box grow="Yes" direction="Column">
           <RoomTimeline
             key={roomId}
             room={room}
@@ -122,6 +132,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                 replacementRoomId={tombstoneEvent.getContent().replacement_room}
               />
             ) : (
+              /* eslint-disable-next-line react/jsx-no-useless-fragment */
               <>
                 {canMessage ? (
                   <RoomInput
@@ -148,5 +159,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
           {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
         </Box>
       </Page>
+    )
   );
 }