Calling: Add local video/mute to local preview; button order
This commit is contained in:
parent
0da867a0ef
commit
6d216a3eca
7 changed files with 106 additions and 59 deletions
|
@ -581,21 +581,21 @@ export function CallScreen({
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-ongoing-call__footer__local-preview',
|
||||
`module-ongoing-call__footer__local-preview--${
|
||||
localPreviewNode ? 'active' : 'inactive'
|
||||
}`
|
||||
)}
|
||||
>
|
||||
{localPreviewNode}
|
||||
<CallingAudioIndicator
|
||||
hasAudio={hasLocalAudio}
|
||||
audioLevel={localAudioLevel}
|
||||
shouldShowSpeaking={isSpeaking}
|
||||
/>
|
||||
</div>
|
||||
{localPreviewNode ? (
|
||||
<div className="module-ongoing-call__footer__local-preview module-ongoing-call__footer__local-preview--active">
|
||||
{localPreviewNode}
|
||||
{!isSendingVideo && (
|
||||
<div className="CallingStatusIndicator CallingStatusIndicator--Video" />
|
||||
)}
|
||||
<CallingAudioIndicator
|
||||
hasAudio={hasLocalAudio}
|
||||
audioLevel={localAudioLevel}
|
||||
shouldShowSpeaking={isSpeaking}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="module-ongoing-call__footer__local-preview" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -42,24 +42,6 @@ export function CallingHeader({
|
|||
<div className="module-ongoing-call__header-message">{message}</div>
|
||||
) : null}
|
||||
<div className="module-calling-tools">
|
||||
{togglePip && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:calling__pip--on')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:calling__pip--on')}
|
||||
className="CallSettingsButton__Button"
|
||||
onClick={togglePip}
|
||||
type="button"
|
||||
>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Pip" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
{isGroupCall && participantCount > 2 && toggleSpeakerView && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
|
@ -109,6 +91,24 @@ export function CallingHeader({
|
|||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{togglePip && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
content={i18n('icu:calling__pip--on')}
|
||||
className="CallingButton__tooltip"
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<button
|
||||
aria-label={i18n('icu:calling__pip--on')}
|
||||
className="CallSettingsButton__Button"
|
||||
onClick={togglePip}
|
||||
type="button"
|
||||
>
|
||||
<span className="CallSettingsButton__Icon CallSettingsButton__Icon--Pip" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
{onCancel && (
|
||||
<div className="module-calling-tools__button">
|
||||
<Tooltip
|
||||
|
|
|
@ -300,21 +300,23 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
|
|||
style={containerStyles}
|
||||
>
|
||||
{!props.isInPip && (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-ongoing-call__group-call-remote-participant__info'
|
||||
)}
|
||||
>
|
||||
<ContactName
|
||||
module="module-ongoing-call__group-call-remote-participant__info__contact-name"
|
||||
title={title}
|
||||
/>
|
||||
<>
|
||||
<CallingAudioIndicator
|
||||
hasAudio={hasRemoteAudio}
|
||||
audioLevel={props.audioLevel}
|
||||
shouldShowSpeaking={isSpeaking}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'module-ongoing-call__group-call-remote-participant__info'
|
||||
)}
|
||||
>
|
||||
<ContactName
|
||||
module="module-ongoing-call__group-call-remote-participant__info__contact-name"
|
||||
title={title}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{wantsToShowVideo && (
|
||||
<canvas
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue