Move out bottom nav into own file

This commit is contained in:
GigiaJ 2025-04-21 01:39:36 -04:00
parent 79b4303154
commit 40a25aa03e

View file

@ -79,6 +79,7 @@ import {
} from '../../../hooks/useRoomsNotificationPreferences';
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
import { useCallState } from '../CallProvider';
import { CallNavBottom } from '../../call/CallNavBottom';
/**
* Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@ -357,67 +358,6 @@ function SpaceHeader() {
);
}
function FixedBottomNavArea() {
const {
sendWidgetAction,
activeCallRoomId,
isAudioEnabled,
isVideoEnabled,
toggleAudio,
toggleVideo,
hangUp,
} = useCallState();
const mx = useMatrixClient();
const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
const handleSendMessageClick = () => {
const action = 'my.custom.action';
const data = { message: `Hello from ${userName}!` };
logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
sendWidgetAction(action, data)
.then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
.catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
};
if (!activeCallRoomId) {
return (
<Box
direction="Column"
gap="500"
style={{
flexShrink: 0,
borderTop: `1px solid #e0e0e0`,
}}
>
<Text size="T200" color="Muted" align="Center">
No active call
</Text>
</Box>
);
}
return (
<Box direction="Column">
<Box
direction="Row"
gap="500"
style={{
flexShrink: 0,
borderTop: `1px solid #e0e0e0`,
}}
>
{/* Going to need better icons for this */}
<button onClick={toggleAudio}> Muted:{(!isAudioEnabled).toString()} </button>
<button onClick={toggleVideo}> Videosn't:{(!isVideoEnabled).toString()} </button>
</Box>
<Box>
<button onClick={hangUp}> Hangup </button>
</Box>
<Box>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
</Box>
);
}
export function Space() {
const mx = useMatrixClient();
const space = useSpace();
@ -607,7 +547,7 @@ export function Space() {
})}
</NavCategory>
</PageNavContent>
<FixedBottomNavArea />
<CallNavBottom />
</PageNav>
);
}