reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

fix(ui): [fixes #217] Give volume slider full width of peer list (#218)

Browse Source 
* fix(ui): give volume slider full width of peer list
* refactor(PeerListItem): improve variable name
This commit is contained in:
Jeremy Kahn 2023-12-09 20:04:44 -06:00 committed by GitHub
parent 6cbfaacf1a
commit 15142f9328
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/Shell/PeerListItem.tsx
View File

@ -61,7 +61,7 @@ export const PeerListItem = ({
const isPeerConnectionDirect = const isPeerConnectionDirect =
peerConnectionTypes[peer.peerId] === PeerConnectionType.DIRECT peerConnectionTypes[peer.peerId] === PeerConnectionType.DIRECT
const handleListItemClick = () => { const handleListItemTextClick = () => {
setShowPeerDialog(true) setShowPeerDialog(true)
} }
@ -71,63 +71,59 @@ export const PeerListItem = ({
return ( return (
<> <>
<ListItem <ListItem key={peer.peerId} divider={true}>
key={peer.peerId}
divider={true}
onClick={handleListItemClick}
sx={{ cursor: 'pointer' }}
>
<PeerDownloadFileButton peer={peer} /> <PeerDownloadFileButton peer={peer} />
<ListItemText <ListItemText>
primaryTypographyProps={{
sx: { display: 'flex', alignContent: 'center' },
}}
>
{hasPeerConnection ? (
<Tooltip
title={
isPeerConnectionDirect ? (
<>
You are connected directly to{' '}
<PeerNameDisplay
sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
>
{peer.userId}
</PeerNameDisplay>
</>
) : (
<>
You are connected to{' '}
<PeerNameDisplay
sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
>
{peer.userId}
</PeerNameDisplay>{' '}
via a relay server. Your connection is still private and
encrypted, but performance may be degraded.
</>
)
}
>
<Box
component="span"
sx={{ pr: iconRightPadding, cursor: 'pointer' }}
>
{isPeerConnectionDirect ? (
<SyncAltIcon color="success" />
) : (
<NetworkPingIcon color="warning" />
)}
</Box>
</Tooltip>
) : null}
<Box <Box
component="span" sx={{ display: 'flex', alignContent: 'center', cursor: 'pointer' }}
sx={{ pr: iconRightPadding, cursor: 'pointer' }} onClick={handleListItemTextClick}
> >
{verificationStateDisplayMap[peer.verificationState]} {hasPeerConnection ? (
<Tooltip
title={
isPeerConnectionDirect ? (
<>
You are connected directly to{' '}
<PeerNameDisplay
sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
>
{peer.userId}
</PeerNameDisplay>
</>
) : (
<>
You are connected to{' '}
<PeerNameDisplay
sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
>
{peer.userId}
</PeerNameDisplay>{' '}
via a relay server. Your connection is still private and
encrypted, but performance may be degraded.
</>
)
}
>
<Box
component="span"
sx={{ pr: iconRightPadding, cursor: 'pointer' }}
>
{isPeerConnectionDirect ? (
<SyncAltIcon color="success" />
) : (
<NetworkPingIcon color="warning" />
)}
</Box>
</Tooltip>
) : null}
<Box
component="span"
sx={{ pr: iconRightPadding, cursor: 'pointer' }}
>
{verificationStateDisplayMap[peer.verificationState]}
</Box>
<PeerNameDisplay>{peer.userId}</PeerNameDisplay>
</Box> </Box>
<PeerNameDisplay>{peer.userId}</PeerNameDisplay>
{peer.peerId in peerAudios && ( {peer.peerId in peerAudios && (
<AudioVolume audioEl={peerAudios[peer.peerId]} /> <AudioVolume audioEl={peerAudios[peer.peerId]} />
)} )}