Expanded local preview: Don't overlap controls when audio-only/reconnecting

This commit is contained in:
Scott Nonnenberg 2025-03-29 02:02:31 +10:00 committed by GitHub
commit d0734bcb29
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -453,6 +453,16 @@ export function CallScreen({
const syncedLocalHandRaised = isHandRaised(raisedHands, localDemuxId);
const isLonelyInCall = !activeCall.remoteParticipants.length;
const isAudioOnly = !hasLocalVideo && !hasRemoteVideo;
const controlsFadedOut = !showControls && !isAudioOnly && isConnected;
const controlsFadeClass = classNames({
'module-ongoing-call__controls': true,
'module-ongoing-call__controls--fadeIn':
(showControls || isAudioOnly) && !isConnected,
'module-ongoing-call__controls--fadeOut': controlsFadedOut,
});
const handlePreviewClick = useCallback(
(event?: React.MouseEvent) => {
event?.preventDefault();
@ -528,7 +538,7 @@ export function CallScreen({
activeCall.selfViewExpanded
? 'module-ongoing-call__local-preview--expanded'
: undefined,
!showControls
controlsFadedOut
? 'module-ongoing-call__local-preview--controls-hidden'
: undefined
)}
@ -600,16 +610,6 @@ export function CallScreen({
? CallingButtonType.AUDIO_ON
: CallingButtonType.AUDIO_OFF;
const isAudioOnly = !hasLocalVideo && !hasRemoteVideo;
const controlsFadedOut = !showControls && !isAudioOnly && isConnected;
const controlsFadeClass = classNames({
'module-ongoing-call__controls': true,
'module-ongoing-call__controls--fadeIn':
(showControls || isAudioOnly) && !isConnected,
'module-ongoing-call__controls--fadeOut': controlsFadedOut,
});
const isGroupCall = isGroupOrAdhocActiveCall(activeCall);
let presentingButtonType: CallingButtonType;
@ -993,7 +993,7 @@ export function CallScreen({
activeCall.selfViewExpanded
? 'module-ongoing-call__direct-call-speaking-indicator--self-view-expanded'
: undefined,
activeCall.selfViewExpanded && !showControls
activeCall.selfViewExpanded && controlsFadedOut
? 'module-ongoing-call__direct-call-speaking-indicator--expanded-no-controls'
: undefined
)}