feat: Show peer's muted and held state on Media call widget #37469

gabriellsh · 2025-11-10T20:33:55Z

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Release Notes

New Features
- Added visual indicators in the Media Call widget displaying the remote peer's muted and on-hold states, enhancing call status awareness during active calls.

dionisio-bot · 2025-11-10T20:33:59Z

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

changeset-bot · 2025-11-10T20:33:59Z

🦋 Changeset detected

Latest commit: 9a052b8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages

Name	Type
@rocket.chat/ui-voip	Minor
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/freeswitch	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/http-router	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch

Not sure what this means? Click here to learn what changesets are.

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

coderabbitai · 2025-11-10T20:34:22Z

Walkthrough

This PR adds UI visualization of the peer's muted and held state in the Media Call widget by introducing remoteMuted and remoteHeld fields throughout the context, session state, and component layers, alongside updates to display remote status in the PeerInfo component.

Changes

Cohort / File(s)	Summary
Context and State Management `packages/ui-voip/src/v2/MediaCallContext.ts`, `packages/ui-voip/src/v2/useMediaSessionInstance.ts`	Added `remoteMuted` and `remoteHeld` boolean properties to context type and base session interface, initialized to false.
Provider Setup `packages/ui-voip/src/v2/MediaCallProvider.tsx`, `packages/ui-voip/src/v2/MockedMediaCallProvider.tsx`	Exposed `remoteMuted` and `remoteHeld` from session state in context value; mocked provider accepts these as optional props with state management for local mute/hold.
Session State `packages/ui-voip/src/v2/useMediaSession.ts`	Extended `SessionInfo` to include `remoteHeld` and `remoteMuted` fields, sourced from call data and propagated in dispatch payloads.
Slot and Info Utilities `packages/ui-voip/src/v2/useInfoSlots.ts`	Made `connectionState` parameter optional with conditional slot generation to support flexible slot composition.
PeerInfo Display `packages/ui-voip/src/v2/components/PeerInfo/InternalUser.tsx`	Added `slots` and `remoteMuted` props; introduced `getRemoteStatusText()` helper; updated rendering to show mic-off icon when remote is muted and display remote status text alongside caller ID.
PeerInfo Stories `packages/ui-voip/src/v2/components/PeerInfo/PeerInfo.stories.tsx`	Added `InternalUserWithRemoteStatus` story demonstrating remote-status rendering.
OngoingCall Component & Stories `packages/ui-voip/src/v2/views/OngoingCall.tsx`, `packages/ui-voip/src/v2/views/OngoingCall.stories.tsx`	Separated remote and local slots; PeerInfo now receives remote slots and status; WidgetInfo displays local state after PeerInfo. Added five new stories showcasing combinations of local/remote mute and hold states.
Changelog `.changeset/young-cherries-battle.md`	Minor version bump entry for `@rocket.chat/ui-voip` documenting UI enhancement.

Sequence Diagram(s)

sequenceDiagram
    participant Session as Session State
    participant Ctx as MediaCallContext
    participant OC as OngoingCall
    participant PI as PeerInfo
    participant IU as InternalUser

    Session->>Ctx: Expose remoteMuted, remoteHeld
    OC->>Ctx: Extract remoteMuted, remoteHeld
    OC->>OC: Compute remoteSlots via useInfoSlots
    OC->>PI: Pass remoteSlots, remoteMuted
    PI->>IU: Pass slots, remoteMuted
    IU->>IU: Derive remoteStatusText from slots
    IU->>IU: Render mic-off icon if remoteMuted
    IU->>IU: Display remote status alongside caller ID

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Context and session state propagation: Straightforward addition of two fields across multiple interfaces; verify consistency across all layers (MediaCallContext, SessionInfo, BaseSession).
PeerInfo component rendering logic: New getRemoteStatusText() helper and conditional UI rendering with mic-off icon—ensure text derivation logic and layout changes are correct.
OngoingCall refactoring: Separation of remote and local slots with dual rendering paths; verify slot composition, ordering, and that existing functionality is preserved.
Story additions: Five new stories with varying prop combinations—skim for coverage of edge cases (all true, all false, mixed states).

Possibly related PRs

chore: identify if a call was put on hold by the remote user #37382: Adds remote hold flag detection and propagation in media-signaling layer that feeds into this PR's ui-voip consumption of remoteHeld.
feat: sync call's "on hold" and "mute" states #37386: Parallel work introducing and wiring remoteMuted/remoteHeld flags through session and UI components in the same feature area.
chore: Update Media Call components and missing parts #36985: Broader refactor of Media Call components (MediaCallContext, PeerInfo, useInfoSlots, OngoingCall) that overlaps with this PR's modifications to the same surface.

Suggested labels

stat: ready to merge, stat: QA assured

Suggested reviewers

tassoevan
aleksandernsilva

Poem

🐰 Remote states now shine so bright,
Muted mic and held calls in sight!
Slots align, the peers now speak,
UX polish for the call you seek! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately reflects the main feature being added: visualizing the peer's muted and held state in the Media Call widget, which is the primary focus across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/remoteCallStatus

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c8d6c60 and b10e4ea.

⛔ Files ignored due to path filters (1)

packages/ui-voip/src/v2/__snapshots__/MediaCallWidget.spec.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (11)

.changeset/young-cherries-battle.md (1 hunks)
packages/ui-voip/src/v2/MediaCallContext.ts (2 hunks)
packages/ui-voip/src/v2/MediaCallProvider.tsx (1 hunks)
packages/ui-voip/src/v2/MockedMediaCallProvider.tsx (3 hunks)
packages/ui-voip/src/v2/components/PeerInfo/InternalUser.tsx (1 hunks)
packages/ui-voip/src/v2/components/PeerInfo/PeerInfo.stories.tsx (1 hunks)
packages/ui-voip/src/v2/useInfoSlots.ts (1 hunks)
packages/ui-voip/src/v2/useMediaSession.ts (4 hunks)
packages/ui-voip/src/v2/useMediaSessionInstance.ts (1 hunks)
packages/ui-voip/src/v2/views/OngoingCall.stories.tsx (1 hunks)
packages/ui-voip/src/v2/views/OngoingCall.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (7)

packages/ui-voip/src/v2/useMediaSession.ts (1)

packages/media-signaling/src/lib/Call.ts (2)

contact (80-82)

remoteMute (137-139)

packages/ui-voip/src/v2/views/OngoingCall.stories.tsx (1)

packages/ui-voip/src/v2/MediaCallWidget.stories.tsx (1)

OngoingCall (86-90)

packages/ui-voip/src/v2/useInfoSlots.ts (1)

packages/ui-voip/src/v2/MediaCallContext.ts (1)

ConnectionState (22-22)

packages/ui-voip/src/v2/components/PeerInfo/InternalUser.tsx (1)

packages/ui-voip/src/v2/useInfoSlots.ts (1)

Slot (7-11)

packages/ui-voip/src/v2/components/PeerInfo/PeerInfo.stories.tsx (1)

packages/ui-voip/src/v2/MediaCallContext.ts (1)

PeerInfo (24-24)

packages/ui-voip/src/v2/views/OngoingCall.tsx (3)

packages/ui-voip/src/v2/MediaCallContext.ts (1)

useMediaCallContext (123-132)

packages/ui-voip/src/v2/useInfoSlots.ts (1)

useInfoSlots (44-69)

packages/media-signaling/src/lib/Call.ts (1)

remoteHeld (131-133)

packages/ui-voip/src/v2/MockedMediaCallProvider.tsx (1)

packages/ui-voip/src/v2/MediaCallContext.ts (1)

State (26-26)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: 📦 Meteor Build (coverage)

🔇 Additional comments (22)

.changeset/young-cherries-battle.md (1)

1-5: LGTM!

The changelog entry appropriately documents this feature addition with a minor version bump.

packages/ui-voip/src/v2/useMediaSessionInstance.ts (1)

18-19: LGTM!

The BaseSession interface extension properly adds remote peer state tracking. The naming convention is consistent with existing local state properties (muted/held).

packages/ui-voip/src/v2/components/PeerInfo/PeerInfo.stories.tsx (1)

33-62: LGTM!

The new story provides valuable visual documentation and testing for the remote status feature. The slot configuration appropriately demonstrates both "On hold" and "Muted" remote states.

packages/ui-voip/src/v2/MediaCallProvider.tsx (1)

254-255: LGTM!

The context value correctly exposes remote state from the session, maintaining consistency with the existing pattern for local mute/hold state.

packages/ui-voip/src/v2/MediaCallContext.ts (2)

40-42: LGTM!

The context type extension follows the established pattern and appropriately adds remote peer state fields.

75-77: LGTM!

Default values are sensible - remote peer states default to not muted and not held.

packages/ui-voip/src/v2/useInfoSlots.ts (1)

44-52: LGTM!

Making connectionState optional is a good design choice that enables the hook to serve both local and remote slot derivation. The guard on Line 52 correctly prevents undefined from being passed to getConnectionStateSlot.

packages/ui-voip/src/v2/useMediaSession.ts (3)

16-17: LGTM!

Default values appropriately initialize remote peer state to not muted and not held.

146-165: LGTM!

The destructuring correctly reads remoteMute and remoteHeld from the Call object and dispatches them (with remoteMute renamed to remoteMuted for naming consistency with the local muted field). The SIP contact path properly includes remote state in the payload.

190-193: LGTM!

The non-SIP path correctly includes remote state alongside existing session fields, maintaining consistency with the SIP path above.

packages/ui-voip/src/v2/views/OngoingCall.tsx (2)

24-30: LGTM!

The destructuring and remote slot derivation are correct. Note that remoteSlots are intentionally derived without connectionState (Line 30) since connection state is a local concern, not applicable to remote peer status.

47-49: LGTM!

The UI composition appropriately separates remote status (displayed on PeerInfo with remoteSlots and remoteMuted) from local status (displayed on WidgetInfo with slots). This separation provides clear visual distinction between local and remote call states.

packages/ui-voip/src/v2/components/PeerInfo/InternalUser.tsx (6)

4-4: LGTM!

The Slot type import is correctly added to support the new slots prop.

6-13: LGTM!

The props extension is well-typed and maintains backward compatibility by making the new fields optional.

15-20: LGTM!

The helper function correctly transforms slots into a displayable status string with proper handling of empty/undefined cases.

22-23: LGTM!

The component signature is updated correctly, and the derived state is computed efficiently at the component level.

27-34: LGTM!

The layout structure properly implements the header row with space-between alignment, and the remote muted indicator is conditionally rendered with appropriate styling.

35-45: LGTM!

The conditional rendering logic correctly handles all cases: displaying the caller ID with appended remote status when both exist, or showing remote status separately when there's no caller ID.

packages/ui-voip/src/v2/views/OngoingCall.stories.tsx (1)

26-64: Excellent story coverage!

The five new stories provide comprehensive coverage of different combinations of local and remote states, making it easy to visually verify and test the new remote status indicators. The explicit prop values enhance clarity.

packages/ui-voip/src/v2/MockedMediaCallProvider.tsx (3)

10-26: LGTM!

The new props are well-typed and properly defaulted, enabling flexible testing of different call states in Storybook stories.

36-45: LGTM!

The state management correctly initializes from props and the handlers properly toggle state. Renaming to mutedState and heldState avoids naming conflicts with the props.

123-145: LGTM!

The context value correctly exposes both local state (as muted/held) and remote state (as remoteMuted/remoteHeld), enabling components to render both local and remote call status indicators.

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

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

codecov · 2025-11-10T20:40:39Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.99%. Comparing base (150efb9) to head (9a052b8).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #37469      +/-   ##
===========================================
+ Coverage    68.97%   68.99%   +0.01%     
===========================================
  Files         3358     3358              
  Lines       114226   114215      -11     
  Branches     20535    20534       -1     
===========================================
+ Hits         78792    78798       +6     
+ Misses       33342    33324      -18     
- Partials      2092     2093       +1

Flag	Coverage Δ
e2e	`57.43% <ø> (-0.02%)`	⬇️
e2e-api	`43.77% <ø> (+0.96%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-11-17T19:03:09Z

📦 Docker Image Size Report

📈 Changes

Service	Current	Baseline	Change
sum of all images	1.2GiB	1.2GiB	+12MiB
rocketchat	367MiB	355MiB	+12MiB
omnichannel-transcript-service	141MiB	141MiB	+252B
queue-worker-service	141MiB	141MiB	-229B
ddp-streamer-service	127MiB	127MiB	+65B
account-service	114MiB	114MiB	-1.8KiB
stream-hub-service	111MiB	111MiB	+380B
authorization-service	111MiB	111MiB	-591B
presence-service	111MiB	111MiB	-386B

📊 Historical Trend

---
config:
  theme: "dark"
  xyChart:
    width: 900
    height: 400
---
xychart
  title "Image Size Evolution by Service (Last 30 Days + This PR)"
  x-axis ["11/15 22:28", "11/16 01:28", "11/17 22:06", "11/17 22:55 (PR)"]
  y-axis "Size (GB)" 0 --> 0.5
  line "account-service" [0.11, 0.11, 0.11, 0.11]
  line "authorization-service" [0.11, 0.11, 0.11, 0.11]
  line "ddp-streamer-service" [0.12, 0.12, 0.12, 0.12]
  line "omnichannel-transcript-service" [0.14, 0.14, 0.14, 0.14]
  line "presence-service" [0.11, 0.11, 0.11, 0.11]
  line "queue-worker-service" [0.14, 0.14, 0.14, 0.14]
  line "rocketchat" [0.36, 0.36, 0.35, 0.36]
  line "stream-hub-service" [0.11, 0.11, 0.11, 0.11]

Statistics (last 3 days):

📊 Average: 1.4GiB
⬇️ Minimum: 1.2GiB
⬆️ Maximum: 1.6GiB
🎯 Current PR: 1.2GiB

ℹ️ About this report

This report compares Docker image sizes from this build against the develop baseline.

Tag: pr-37469
Baseline: develop
Timestamp: 2025-11-17 22:55:49 UTC
Historical data points: 3

Updated: Mon, 17 Nov 2025 22:55:50 GMT

gabriellsh added 3 commits November 10, 2025 17:31

Add remote user info to PeerInfo component

1e1b6c8

begin remoteMuted and remoteHeld implementation on MediaCallContext

27495d8

use remote information in ongoing call and change InfoSlots position

781509f

Create young-cherries-battle.md

d55e397

gabriellsh and others added 6 commits November 13, 2025 15:33

Fix no status text for users without callerID

7b7eed6

Add missing Icon

c0e3c75

Add more stories

5c547ac

update snapshots

35368ae

use remoteHeld and remoteMute

bc93db9

Merge branch 'develop' into feat/remoteCallStatus

b10e4ea

gabriellsh marked this pull request as ready for review November 17, 2025 18:42

gabriellsh added the stat: QA assured Means it has been tested and approved by a company insider label Nov 17, 2025

tassoevan approved these changes Nov 17, 2025

View reviewed changes

gabriellsh added this to the 7.13.0 milestone Nov 17, 2025

dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Nov 17, 2025

kodiakhq bot and others added 2 commits November 17, 2025 19:23

Merge branch 'develop' into feat/remoteCallStatus

74cd7d2

Merge branch 'develop' into feat/remoteCallStatus

9a052b8

kodiakhq bot merged commit 09551f9 into develop Nov 17, 2025
86 of 88 checks passed

kodiakhq bot deleted the feat/remoteCallStatus branch November 17, 2025 23:38

coderabbitai bot mentioned this pull request Nov 19, 2025

feat: Media call notifications on desktop app #37492

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Show peer's muted and held state on Media call widget #37469

feat: Show peer's muted and held state on Media call widget #37469

Uh oh!

gabriellsh commented Nov 10, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

dionisio-bot bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

codecov bot commented Nov 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: Show peer's muted and held state on Media call widget #37469

feat: Show peer's muted and held state on Media call widget #37469

Uh oh!

Conversation

gabriellsh commented Nov 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Release Notes

Uh oh!

dionisio-bot bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

codecov bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Docker Image Size Report

📈 Changes

📊 Historical Trend

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gabriellsh commented Nov 10, 2025 •

edited by coderabbitai bot

Loading

dionisio-bot bot commented Nov 10, 2025 •

edited

Loading

changeset-bot bot commented Nov 10, 2025 •

edited

Loading

coderabbitai bot commented Nov 10, 2025 •

edited

Loading

codecov bot commented Nov 10, 2025 •

edited

Loading

github-actions bot commented Nov 17, 2025 •

edited

Loading