Connection Unstable

When a participant's network connection becomes unstable, you can provide visual feedback in two ways: warning users when their connection quality degrades, and showing a reconnecting indicator when the connection drops entirely.

Poor Connection Quality Warning

Each participant's connection quality is available through ParticipantState.networkQuality. You can display a warning when the local user's connection quality drops to Poor:

CallContent(
    modifier = Modifier.background(color = VideoTheme.colors.appBackground),
    videoRenderer = { modifier, call, participant, style ->
        ParticipantVideo(
            modifier = modifier,
            call = call,
            participant = participant,
            style = style,
            connectionIndicatorContent = { networkQuality ->
                val me by call.state.me.collectAsStateWithLifecycle()
                if (me?.sessionId == participant.sessionId && networkQuality is NetworkQuality.Poor) {
                    Snackbar(
                        modifier = Modifier
                            .padding(8.dp)
                            .fillMaxWidth()
                            .background(VideoTheme.colors.appBackground)
                            .align(Alignment.BottomStart),
                    ) {
                        Text(text = "Please check out your network status!")
                    }
                }

                NetworkQualityIndicator(
                    networkQuality = networkQuality,
                    modifier = Modifier.align(Alignment.BottomEnd)
                )
            }
        )
    },
    ..
)

This displays a snackbar when the local user's network quality is poor:

Reconnection State

When the connection drops entirely, the SDK automatically attempts to reconnect. The reconnection state is exposed through call.state.isReconnecting, a StateFlow<Boolean> that emits true during reconnection attempts.

val isReconnecting by call.state.isReconnecting.collectAsStateWithLifecycle()

if (isReconnecting) {
    Text(
        text = "Reconnecting...",
        color = VideoTheme.colors.alertWarning
    )
}

Displaying Reconnecting UI

For a better user experience, you can display a full-screen overlay during reconnection. This pattern wraps CallContent with a semi-transparent overlay that appears only when reconnecting:

@Composable
fun CallContentWithReconnectingOverlay(call: Call) {
    val isReconnecting by call.state.isReconnecting.collectAsStateWithLifecycle()

    Box(modifier = Modifier.fillMaxSize()) {
        CallContent(call = call)

        if (isReconnecting) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Black.copy(alpha = 0.7f)),
                contentAlignment = Alignment.Center
            ) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    CircularProgressIndicator(color = Color.White)
                    Spacer(modifier = Modifier.height(16.dp))
                    Text(
                        text = "Reconnecting to call...",
                        color = Color.White
                    )
                }
            }
        }
    }
}

Built-in Support

The SDK's CallAppBar component automatically displays "Reconnecting..." when isReconnecting is true. If you're using the default CallContent with its built-in app bar, reconnection feedback is handled automatically.

Network Quality Indicator

Network Disruption