mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Always show audio mute icon in group calls

Browse source
This commit is contained in:
Evan Hahn 2021-12-08 09:22:37 -06:00 • committed by GitHub
parent f9e98836b0
commit 9f4a01c535
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
stylesheets/_modules.scss
View file

@ -4126,41 +4126,53 @@ button.module-image__border-overlay:focus {
}
}
&--title {
&__info {
@include font-caption;
background: linear-gradient(
180deg,
transparent,
$color-black-alpha-60 100%
);
bottom: 0;
display: flex;
justify-content: space-between;
padding: 6px;
position: absolute;
user-select: none;
width: 100%;
z-index: $z-index-above-base;
&__contact-name {
color: $color-white;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
visibility: hidden;
white-space: nowrap;
}
&--audio-muted::after {
$size: 14px;
@include color-svg(
'../images/icons/v2/mic-off-solid-28.svg',
$color-white
);
content: '';
height: $size;
min-width: $size;
right: 6px;
width: $size;
z-index: $z-index-base;
}
}
&--contact-name {
color: $color-white;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover {
.module-ongoing-call__group-call-remote-participant__info {
background: linear-gradient(
180deg,
transparent,
$color-black-alpha-60 100%
);
&--audio-muted::after {
@include color-svg(
'../images/icons/v2/mic-off-solid-28.svg',
$color-white
);
content: '';
height: 14px;
position: absolute;
right: 6px;
width: 14px;
z-index: $z-index-base;
&__contact-name {
visibility: visible;
}
}
}
}

13
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -80,7 +80,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
const [isWide, setIsWide] = useState<boolean>(
videoAspectRatio ? videoAspectRatio >= 1 : true
);
const [hasHover, setHover] = useState(false);
const [showBlockInfo, setShowBlockInfo] = useState(false);
// We have some state (`hasReceivedVideoRecently`) and this ref. We can't have a
@ -238,8 +237,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
}
}
const showHover = hasHover && !props.isInPip;
return (
<>
{showBlockInfo && (
@ -266,22 +263,20 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
<div
className="module-ongoing-call__group-call-remote-participant"
ref={intersectionRef}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={containerStyles}
>
{showHover && (
{!props.isInPip && (
<div
className={classNames(
'module-ongoing-call__group-call-remote-participant--title',
'module-ongoing-call__group-call-remote-participant__info',
{
'module-ongoing-call__group-call-remote-participant--audio-muted':
'module-ongoing-call__group-call-remote-participant__info--audio-muted':
!hasRemoteAudio,
}
)}
>
<ContactName
module="module-ongoing-call__group-call-remote-participant--contact-name"
module="module-ongoing-call__group-call-remote-participant__info__contact-name"
title={title}
/>
</div>