signal-desktop/ts/components/DirectCallRemoteParticipant.tsx

86 lines
2 KiB
TypeScript
Raw Normal View History

2023-01-03 11:55:46 -08:00
// Copyright 2020 Signal Messenger, LLC
2020-11-13 13:57:55 -06:00
// SPDX-License-Identifier: AGPL-3.0-only
import React, { useRef, useEffect } from 'react';
import type { SetRendererCanvasType } from '../state/ducks/calling';
import type { ConversationType } from '../state/ducks/conversations';
import type { LocalizerType } from '../types/Util';
2021-08-05 20:17:05 -04:00
import { AvatarColors } from '../types/Colors';
2022-12-09 13:37:45 -07:00
import { Avatar, AvatarSize } from './Avatar';
2020-11-13 13:57:55 -06:00
type PropsType = {
2020-11-13 13:57:55 -06:00
conversation: ConversationType;
hasRemoteVideo: boolean;
i18n: LocalizerType;
setRendererCanvas: (_: SetRendererCanvasType) => void;
};
2020-11-13 13:57:55 -06:00
2022-11-17 16:45:19 -08:00
export function DirectCallRemoteParticipant({
2020-11-13 13:57:55 -06:00
conversation,
hasRemoteVideo,
i18n,
setRendererCanvas,
2022-11-17 16:45:19 -08:00
}: PropsType): JSX.Element {
2020-11-13 13:57:55 -06:00
const remoteVideoRef = useRef<HTMLCanvasElement | null>(null);
useEffect(() => {
setRendererCanvas({ element: remoteVideoRef });
return () => {
setRendererCanvas({ element: undefined });
};
}, [setRendererCanvas]);
return hasRemoteVideo ? (
<canvas
className="module-ongoing-call__remote-video-enabled"
ref={remoteVideoRef}
/>
) : (
renderAvatar(i18n, conversation)
);
2022-11-17 16:45:19 -08:00
}
2020-11-13 13:57:55 -06:00
function renderAvatar(
i18n: LocalizerType,
{
2021-05-07 17:21:10 -05:00
acceptedMessageRequest,
2020-11-13 13:57:55 -06:00
avatarPath,
color,
2021-05-07 17:21:10 -05:00
isMe,
2020-11-13 13:57:55 -06:00
phoneNumber,
profileName,
2021-05-07 17:21:10 -05:00
sharedGroupNames,
2020-11-13 13:57:55 -06:00
title,
2021-05-07 17:21:10 -05:00
}: Pick<
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'color'
| 'isMe'
| 'phoneNumber'
| 'profileName'
| 'sharedGroupNames'
| 'title'
>
2020-11-13 13:57:55 -06:00
): JSX.Element {
return (
<div className="module-ongoing-call__remote-video-disabled">
<Avatar
2021-05-07 17:21:10 -05:00
acceptedMessageRequest={acceptedMessageRequest}
2020-11-13 13:57:55 -06:00
avatarPath={avatarPath}
badge={undefined}
2021-08-05 20:17:05 -04:00
color={color || AvatarColors[0]}
2020-11-13 13:57:55 -06:00
noteToSelf={false}
conversationType="direct"
i18n={i18n}
2021-05-07 17:21:10 -05:00
isMe={isMe}
2020-11-13 13:57:55 -06:00
phoneNumber={phoneNumber}
profileName={profileName}
title={title}
2021-05-07 17:21:10 -05:00
sharedGroupNames={sharedGroupNames}
2022-12-09 13:37:45 -07:00
size={AvatarSize.EIGHTY}
2020-11-13 13:57:55 -06:00
/>
</div>
);
}