// Copyright 2020 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import React from 'react'; import { Avatar } from './Avatar'; import { Tooltip } from './Tooltip'; import { Theme } from '../util/theme'; import { ContactName } from './conversation/ContactName'; import { LocalizerType } from '../types/Util'; import { ColorType } from '../types/Colors'; import { AcceptCallType, DeclineCallType } from '../state/ducks/calling'; export type PropsType = { acceptCall: (_: AcceptCallType) => void; declineCall: (_: DeclineCallType) => void; i18n: LocalizerType; call: { isVideoCall: boolean; }; conversation: { id: string; avatarPath?: string; color?: ColorType; title: string; name?: string; phoneNumber?: string; profileName?: string; }; }; type CallButtonProps = { classSuffix: string; tabIndex: number; tooltipContent: string; onClick: () => void; }; const CallButton = ({ classSuffix, onClick, tabIndex, tooltipContent, }: CallButtonProps): JSX.Element => { return ( <Tooltip content={tooltipContent} theme={Theme.Dark}> <button aria-label={tooltipContent} className={`module-incoming-call__button module-incoming-call__button--${classSuffix}`} onClick={onClick} tabIndex={tabIndex} type="button" > <div /> </button> </Tooltip> ); }; export const IncomingCallBar = ({ acceptCall, declineCall, i18n, call, conversation, }: PropsType): JSX.Element | null => { const { isVideoCall } = call; const { id: conversationId, avatarPath, color, title, name, phoneNumber, profileName, } = conversation; return ( <div className="module-incoming-call"> <div className="module-incoming-call__contact"> <div className="module-incoming-call__contact--avatar"> <Avatar avatarPath={avatarPath} color={color || 'ultramarine'} noteToSelf={false} conversationType="direct" i18n={i18n} name={name} phoneNumber={phoneNumber} profileName={profileName} title={title} size={52} /> </div> <div className="module-incoming-call__contact--name"> <div className="module-incoming-call__contact--name-header"> <ContactName name={name} phoneNumber={phoneNumber} profileName={profileName} title={title} i18n={i18n} /> </div> <div dir="auto" className="module-incoming-call__contact--message-text" > {i18n(isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall')} </div> </div> </div> <div className="module-incoming-call__actions"> {isVideoCall ? ( <> <CallButton classSuffix="decline" onClick={() => { declineCall({ conversationId }); }} tabIndex={0} tooltipContent={i18n('declineCall')} /> <CallButton classSuffix="accept-video-as-audio" onClick={() => { acceptCall({ conversationId, asVideoCall: false }); }} tabIndex={0} tooltipContent={i18n('acceptCallWithoutVideo')} /> <CallButton classSuffix="accept-video" onClick={() => { acceptCall({ conversationId, asVideoCall: true }); }} tabIndex={0} tooltipContent={i18n('acceptCall')} /> </> ) : ( <> <CallButton classSuffix="decline" onClick={() => { declineCall({ conversationId }); }} tabIndex={0} tooltipContent={i18n('declineCall')} /> <CallButton classSuffix="accept-audio" onClick={() => { acceptCall({ conversationId, asVideoCall: false }); }} tabIndex={0} tooltipContent={i18n('acceptCall')} /> </> )} </div> </div> ); };