diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx
index 338b32fb5947..556f93f15fb2 100644
--- a/ts/components/CallScreen.tsx
+++ b/ts/components/CallScreen.tsx
@@ -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
           )}