feat: audio connecting hook in bindings and RN UI

[santhoshvai]

💡 Overview

• Moved the track unmuted hook from react sdk to bindings
• Added loading indicator in default label like react SDK for RN

📝 Implementation notes

Depends on rn-webrtc release: GetStream/react-native-webrtc#32

🎫 Ticket: https://linear.app/stream/issue/XYZ-123

📑 Docs: https://github.com/GetStream/docs-content/pull/1239

Summary by CodeRabbit

• New Features
  • Visual indicators now display when participants' audio is connecting, showing animated activity indicators alongside participant names.
  • Participant labels include connection status badges to provide real-time feedback during audio setup across the application.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 78370ad

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

A new useIsAudioConnecting React hook is introduced to detect when a participant's audio track is unmuted. This hook replaces custom implementations across react-sdk and react-native-sdk packages, while new UI components display activity indicators during audio connection, with integration in sample applications.

Changes

Cohort / File(s)	Summary
Core Hook Implementation packages/react-bindings/src/hooks/callUtilHooks.ts	New useIsAudioConnecting hook that tracks whether a participant has an audio track and monitors its muted state via event listeners.
SDK Components Using Hook packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx, packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx	Components refactored to use the new hook instead of custom muted state tracking; activity indicators display during audio connection.
Sample App Integration sample-apps/react-native/dogfood/src/components/ActiveCall.tsx, sample-apps/react-native/dogfood/src/components/AudioConnectingParticipantLabel.tsx	New AudioConnectingParticipantLabel component created for React Native with themed badge and "Connecting to audio…" messaging; integrated into active call.

Sequence Diagram(s)

sequenceDiagram
    participant Component as ParticipantLabel<br/>Component
    participant Hook as useIsAudioConnecting<br/>Hook
    participant Track as Audio Track
    participant UI as Activity Indicator<br/>& Label

    Component->>Hook: Call hook with participant
    Hook->>Track: Check if audio track exists
    Track-->>Hook: hasAudio = true/false
    
    alt Audio track exists
        Hook->>Track: Subscribe to mute/unmute events
        Track-->>Hook: Initial muted state
        Hook->>Hook: Store unmuted state in useState
        Hook-->>Component: Return boolean (unmuted)
    else No audio track
        Hook-->>Component: Return false
    end
    
    Component->>UI: Render conditional on isAudioConnecting
    alt isAudioConnecting = true
        UI->>UI: Show ActivityIndicator<br/>+ "Connecting..." text
    else
        UI->>UI: Show label only
    end
    
    Note over Track,Hook: On track mute/unmute events
    Track->>Hook: Trigger mute/unmute listener
    Hook->>Hook: Update unmuted state
    Component->>UI: Re-render with new state

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A new hook hops into view,
Tracking audio, tried and true,
Connecting indicators flutter with care,
While participants smile everywhere!
✨🎵

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding an audio connecting hook to bindings and implementing it in React Native UI components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description covers the main objectives (moved hook, added loading indicator) and includes required sections with ticket and docs references.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch audio-connecting-label

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/react-bindings/src/hooks/callUtilHooks.ts`:
- Around line 55-83: The hook useIsAudioConnecting should explicitly return
boolean and must reset and track the actual active audio track so unmuted is
cleared when the first audio track changes or disappears; update
useIsAudioConnecting to declare a boolean return type, derive the current Track
object (e.g., const track = audioStream?.getAudioTracks()[0]) inside
state/effect logic, store that track reference (or its id) in state/ref and
include it in the effect dependencies, setUnmuted(false) when no track exists,
and attach/remove mute/unmute listeners to the current track so state is updated
only for that track change.

In
`@sample-apps/react-native/dogfood/src/components/AudioConnectingParticipantLabel.tsx`:
- Around line 15-30: ParticipantLabel already renders the audio-connecting
spinner so AudioConnectingParticipantLabel is duplicating indicators by calling
useIsAudioConnecting(participant) and rendering an extra ActivityIndicator; fix
this by either removing the custom badge block (the isAudioConnecting
conditional render in AudioConnectingParticipantLabel) so ParticipantLabel’s
built-in spinner is used, or add a suppression prop to ParticipantLabel (e.g.,
showAudioConnectingIndicator or disableAudioSpinner) and pass it from
AudioConnectingParticipantLabel while keeping the text badge logic; update the
useIsAudioConnecting usage accordingly to avoid duplicate listeners when you
choose suppression.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b6a22bf7-b2c6-4885-ad1f-715fae947f7a

📥 Commits

Reviewing files that changed from the base of the PR and between bac1a96 and b33abc3.

📒 Files selected for processing (5)

• packages/react-bindings/src/hooks/callUtilHooks.ts
• packages/react-native-sdk/src/components/Participant/ParticipantView/ParticipantLabel.tsx
• packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
• sample-apps/react-native/dogfood/src/components/ActiveCall.tsx
• sample-apps/react-native/dogfood/src/components/AudioConnectingParticipantLabel.tsx