misty.cafe/minty
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: keep call media controls visible before joining

Browse source
This commit is contained in:
hazre 2026-02-11 16:24:38 +01:00
parent 9dbe53a36a
commit 7ceba0301e
No known key found for this signature in database
1 changed files with 99 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/app/features/room-nav/RoomCallNavStatus.tsx
View file

@ -1,4 +1,15 @@
import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds'; import {
Box,
Chip,
Icon,
IconButton,
Icons,
Text,
Tooltip,
TooltipProvider,
color,
config,
} from 'folds';
import React from 'react'; import React from 'react';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useCallState } from '../../pages/client/call/CallProvider'; import { useCallState } from '../../pages/client/call/CallProvider';
@ -9,17 +20,18 @@ export function CallNavStatus() {
activeCallRoomId, activeCallRoomId,
isAudioEnabled, isAudioEnabled,
isVideoEnabled, isVideoEnabled,
isActiveCallReady,
toggleAudio, toggleAudio,
toggleVideo, toggleVideo,
hangUp, hangUp,
} = useCallState(); } = useCallState();
const mx = useMatrixClient(); const mx = useMatrixClient();
const { navigateRoom } = useRoomNavigate(); const { navigateRoom } = useRoomNavigate();
if (!isActiveCallReady || !activeCallRoomId) return null; const hasActiveCall = Boolean(activeCallRoomId);
const handleGoToCallRoom = () => { const handleGoToCallRoom = () => {
navigateRoom(activeCallRoomId); if (activeCallRoomId) {
navigateRoom(activeCallRoomId);
}
}; };
return ( return (
@ -27,78 +39,47 @@ export function CallNavStatus() {
direction="Column" direction="Column"
style={{ style={{
flexShrink: 0, flexShrink: 0,
borderTop: `1px solid #e0e0e0`, borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
justifyContent: 'center', padding: `${config.space.S200} ${config.space.S200}`,
}} }}
> >
<Box direction="Row" justifyContent="SpaceBetween" alignItems="Center"> <Box direction="Row" alignItems="Center" gap="100">
{/* Going to need better icons for this */} <Box grow="Yes" style={{ minWidth: 0 }}>
{hasActiveCall && (
<Box> <TooltipProvider
<TooltipProvider position="Top"
position="Top" offset={4}
offset={4} tooltip={
tooltip={ <Tooltip>
<Tooltip> <Text>Go to Room</Text>
<Text>Go to Room</Text> </Tooltip>
</Tooltip> }
} >
> {(triggerRef) => (
{(triggerRef) => ( <Chip
<Chip variant="Background"
variant="Background" size="500"
size="500" fill="Soft"
fill="Soft" as="button"
as="button" onClick={handleGoToCallRoom}
onClick={handleGoToCallRoom} ref={triggerRef}
ref={triggerRef} style={{
style={{ width: '100%',
display: isActiveCallReady ? 'flex' : 'none', minWidth: 0,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Icon src={Icons.VolumeHigh} /> <Icon size="200" src={Icons.VolumeHigh} />
<Text style={{ flexGrow: 1 }} size="B400" truncate> <Text style={{ flexGrow: 1, minWidth: 0 }} size="B400" truncate>
{activeCallRoomId ? mx.getRoom(activeCallRoomId)?.name : ''} {mx.getRoom(activeCallRoomId)?.name ?? ''}
</Text> </Text>
</Chip> </Chip>
)} )}
</TooltipProvider> </TooltipProvider>
)}
</Box> </Box>
{hasActiveCall && (
<Box>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
<Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
<Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider <TooltipProvider
position="Top" position="Top"
offset={4} offset={4}
@ -111,17 +92,58 @@ export function CallNavStatus() {
{(triggerRef) => ( {(triggerRef) => (
<IconButton <IconButton
variant="Background" variant="Background"
size="400"
radii="400"
ref={triggerRef} ref={triggerRef}
onClick={hangUp} onClick={hangUp}
style={{
display: isActiveCallReady ? 'block' : 'none',
}}
> >
<Icon src={Icons.Phone} /> <Icon src={Icons.Phone} />
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
</Box> )}
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
variant="Background"
size="400"
radii="400"
ref={triggerRef}
onClick={toggleAudio}
>
<Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
</IconButton>
)}
</TooltipProvider>
<TooltipProvider
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
variant="Background"
size="400"
radii="400"
ref={triggerRef}
onClick={toggleVideo}
>
<Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
</IconButton>
)}
</TooltipProvider>
</Box> </Box>
</Box> </Box>
); );