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

redo roomcallnavstatus ui, force user preferred mute/video states when first joining calls, update variable names and remove unnecessary logic

Browse Source
This commit is contained in:
YoJames2019
2026-02-09 22:17:28 -05:00
parent e481116b04
commit 990a92a32c
4 changed files with 175 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/app/features/room-nav/RoomCallNavStatus.tsx
View File

@@ -8,8 +8,8 @@ export function CallNavStatus() {
const {
activeCallRoomId,
isAudioEnabled,
isVideoEnabled,
isActiveCallReady,
isVideoEnabled,
isActiveCallReady,
toggleAudio,
toggleVideo,
hangUp,
@@ -21,9 +21,6 @@ export function CallNavStatus() {
navigateRoom(activeCallRoomId);
}
};
if (!isActiveCallReady) {
return null;
}
return (
<Box
@@ -34,56 +31,10 @@ export function CallNavStatus() {
justifyContent: 'center',
}}
>
<Box direction="Row" style={{ justifyContent: 'center' }}>
<Box direction="Row" justifyContent='SpaceBetween' alignItems='Center'>
{/* Going to need better icons for this */}
<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
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>Hang Up</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton variant="Background" ref={triggerRef} onClick={hangUp}>
<Icon src={Icons.Phone} />
</IconButton>
)}
</TooltipProvider>
<Box grow="Yes" justifyContent="Center" alignItems="Center">
<Box>
<TooltipProvider
position="Top"
offset={4}
@@ -101,7 +52,13 @@ export function CallNavStatus() {
as="button"
onClick={handleGoToCallRoom}
ref={triggerRef}
style={{
display: isActiveCallReady ? 'flex' : 'none',
alignItems: "center",
justifyContent: "center"
}}
>
<Icon src={Icons.VolumeHigh}/>
<Text style={{ flexGrow: 1 }} size="B400" truncate>
{mx.getRoom(activeCallRoomId)?.name}
</Text>
@@ -109,6 +66,62 @@ export function CallNavStatus() {
)}
</TooltipProvider>
</Box>
<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
position="Top"
offset={4}
tooltip={
<Tooltip>
<Text>Hang Up</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
variant="Background"
ref={triggerRef}
onClick={hangUp}
style={{
display: isActiveCallReady ? 'block' : 'none'
}}
>
<Icon src={Icons.Phone} />
</IconButton>
)}
</TooltipProvider>
</Box>
</Box>
</Box>
);