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
Download patch file Download diff file Expand all files Collapse all files

34
stylesheets/_modules.scss
View file

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

13
ts/components/GroupCallRemoteParticipant.tsx
View file

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