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

Calling support

Browse source
This commit is contained in:
Peter Thatcher 2020-06-04 11:16:19 -07:00 • committed by Scott Nonnenberg
parent 83574eb067
commit d3a27a6442
72 changed files with 3864 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

158
ts/components/IncomingCallBar.tsx Normal file
View file

@ -0,0 +1,158 @@
import React from 'react';
import Tooltip from 'react-tooltip-lite';
import { Avatar } from './Avatar';
import { ContactName } from './conversation/ContactName';
import { LocalizerType } from '../types/Util';
import {
AcceptCallType,
CallDetailsType,
DeclineCallType,
} from '../state/ducks/calling';
export type PropsType = {
acceptCall: (_: AcceptCallType) => void;
callDetails?: CallDetailsType;
declineCall: (_: DeclineCallType) => void;
i18n: LocalizerType;
};
type CallButtonProps = {
classSuffix: string;
tabIndex: number;
tooltipContent: string;
onClick: () => void;
};
const CallButton = ({
classSuffix,
onClick,
tabIndex,
tooltipContent,
}: CallButtonProps): JSX.Element => {
return (
<button
className={`module-incoming-call__icon module-incoming-call__button--${classSuffix}`}
onClick={onClick}
tabIndex={tabIndex}
>
<Tooltip
arrowSize={6}
content={tooltipContent}
direction="bottom"
distance={16}
hoverDelay={0}
>
<div />
</Tooltip>
</button>
);
};
// tslint:disable-next-line max-func-body-length
export const IncomingCallBar = ({
acceptCall,
callDetails,
declineCall,
i18n,
}: PropsType): JSX.Element | null => {
if (!callDetails) {
return null;
}
const {
avatarPath,
callId,
contactColor,
name,
phoneNumber,
profileName,
} = callDetails;
return (
<div className="module-incoming-call">
<div className="module-incoming-call__contact">
<div className="module-incoming-call__contact--avatar">
<Avatar
avatarPath={avatarPath}
color={contactColor || 'ultramarine'}
noteToSelf={false}
conversationType="direct"
i18n={i18n}
name={name}
phoneNumber={phoneNumber}
profileName={profileName}
size={52}
/>
</div>
<div className="module-incoming-call__contact--name">
<div className="module-incoming-call__contact--name-header">
<ContactName
phoneNumber={phoneNumber}
name={name}
profileName={profileName}
/>
</div>
<div
dir="auto"
className="module-incoming-call__contact--message-text"
>
{i18n(
callDetails.isVideoCall
? 'incomingVideoCall'
: 'incomingAudioCall'
)}
</div>
</div>
</div>
<div className="module-incoming-call__actions">
{callDetails.isVideoCall ? (
<>
<CallButton
classSuffix="decline"
onClick={() => {
declineCall({ callId });
}}
tabIndex={0}
tooltipContent={i18n('declineCall')}
/>
<CallButton
classSuffix="accept-video-as-audio"
onClick={() => {
acceptCall({ callId, asVideoCall: false });
}}
tabIndex={0}
tooltipContent={i18n('acceptCallWithoutVideo')}
/>
<CallButton
classSuffix="accept-video"
onClick={() => {
acceptCall({ callId, asVideoCall: true });
}}
tabIndex={0}
tooltipContent={i18n('acceptCall')}
/>
</>
) : (
<>
<CallButton
classSuffix="decline"
onClick={() => {
declineCall({ callId });
}}
tabIndex={0}
tooltipContent={i18n('declineCall')}
/>
<CallButton
classSuffix="accept-audio"
onClick={() => {
acceptCall({ callId, asVideoCall: false });
}}
tabIndex={0}
tooltipContent={i18n('acceptCall')}
/>
</>
)}
</div>
</div>
);
};