g4borg/cinny
1
0
Fork 0
forked from github/cinny
Code Pull Requests Packages Wiki Activity

Merge pull request #60 from GimleLarpes/patch-3

Browse Source 
Reworks/cleans up structure of Room, RoomView and CallView
This commit is contained in:
Jaggar
2025-08-09 20:51:09 +00:00
committed by GitHub
parent 51cfd7201c 528cbc5c79
commit 141f148e37
3 changed files with 91 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/features/call/CallView.tsx
View File

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

58
src/app/features/room/Room.tsx
View File

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

116
src/app/features/room/RoomView.tsx
View File

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