Skip to content

Commit

Permalink
fix(ui): [fixes #217] Give volume slider full width of peer list (#218)
Browse files Browse the repository at this point in the history 
* fix(ui): give volume slider full width of peer list
* refactor(PeerListItem): improve variable name
  • Loading branch information
@jeremyckahn
jeremyckahn committed Dec 10, 2023
1 parent 6cbfaac commit 15142f9
Showing 1 changed file with 50 additions and 54 deletions.
104 changes: 50 additions & 54 deletions src/components/Shell/PeerListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const PeerListItem = ({
const isPeerConnectionDirect =
peerConnectionTypes[peer.peerId] === PeerConnectionType.DIRECT

const handleListItemClick = () => {
const handleListItemTextClick = () => {
setShowPeerDialog(true)
}

Expand All @@ -71,63 +71,59 @@ export const PeerListItem = ({

return (
<>
<ListItem
key={peer.peerId}
divider={true}
onClick={handleListItemClick}
sx={{ cursor: 'pointer' }}
>
<ListItem key={peer.peerId} divider={true}>
<PeerDownloadFileButton peer={peer} />
<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}
<ListItemText>
<Box
component="span"
sx={{ pr: iconRightPadding, cursor: 'pointer' }}
sx={{ display: 'flex', alignContent: 'center', 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>
<PeerNameDisplay>{peer.userId}</PeerNameDisplay>
{peer.peerId in peerAudios && (
<AudioVolume audioEl={peerAudios[peer.peerId]} />
)}
Expand Down

1 comment on commit 15142f9

@vercel
Copy link

@vercel vercel bot commented on 15142f9 Dec 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chitchatter – ./

chitchatter.vercel.app
chitchatter-jeremyckahn.vercel.app
chitchatter-git-main-jeremyckahn.vercel.app

Please sign in to comment.