Calling: Add local video/mute to local preview; button order

This commit is contained in:
ayumi-signal 2023-11-01 10:56:38 -07:00 committed by GitHub
parent 0da867a0ef
commit 6d216a3eca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 106 additions and 59 deletions

View file

@ -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>
);

View file

@ -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

View file

@ -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