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

Group Calling: show participant name on hover

Browse source
This commit is contained in:
Josh Perez 2020-11-19 18:31:04 -05:00 • committed by Josh Perez
parent 5cc7c9a66a
commit 6a6f8e28ce
5 changed files with 145 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

30
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -18,6 +18,7 @@ import {
import { LocalizerType } from '../types/Util';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { Avatar, AvatarSize } from './Avatar';
import { ContactName } from './conversation/ContactName';
// The max size video frame we'll support (in RGBA)
const FRAME_BUFFER_SIZE = 1920 * 1080 * 4;
@ -40,7 +41,7 @@ interface NotInPipPropsType {
width: number;
}
type PropsType = BasePropsType & (InPipPropsType | NotInPipPropsType);
export type PropsType = BasePropsType & (InPipPropsType | NotInPipPropsType);
export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
props => {
@ -57,6 +58,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
} = props.remoteParticipant;
const [isWide, setIsWide] = useState(true);
const [hasHover, setHover] = useState(false);
const remoteVideoRef = useRef<HTMLCanvasElement | null>(null);
const canvasContextRef = useRef<CanvasRenderingContext2D | null>(null);
@ -172,14 +174,28 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
return (
<div
className={classNames(
'module-ongoing-call__group-call-remote-participant',
{
'module-ongoing-call__group-call-remote-participant--audio-muted': !hasRemoteAudio,
}
)}
className="module-ongoing-call__group-call-remote-participant"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={containerStyles}
>
{hasHover && (
<div
className={classNames(
'module-ongoing-call__group-call-remote-participant--title',
{
'module-ongoing-call__group-call-remote-participant--audio-muted': !hasRemoteAudio,
}
)}
>
<ContactName
module="module-ongoing-call__group-call-remote-participant--contact-name"
profileName={profileName}
title={title}
i18n={props.i18n}
/>
</div>
)}
{hasRemoteVideo ? (
<canvas
className="module-ongoing-call__group-call-remote-participant__remote-video"