feat: Voice call popup window

[gabriellsh]

Proposed changes (including videos or screenshots)

Issue(s)

SSGA-4

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Release Notes

• New Features
  • Voice calls can now be opened in a separate popout window for easier multitasking.
  • Added ability to switch between in-room, widget, and popout call views.
  • Screen sharing is supported in popout window mode.
• Accessibility & UI
  • Improved accessibility for the voice call widget and popout controls.
• Bug Fixes
  • Improved popout handling and fallback behavior when call permissions are restricted.

[dionisio-bot]

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 89416be6-4278-4e41-a7b6-f13a39dc7ff2

📥 Commits

Reviewing files that changed from the base of the PR and between f558cc8 and 4de6495.

📒 Files selected for processing (5)

• apps/meteor/tests/e2e/voice-calls-ee.spec.ts
• packages/ui-voip/src/generate-landing-view.tsx
• packages/ui-voip/src/providers/useMediaSessionInstance.ts
• packages/ui-voip/src/views/MediaCallPopout.tsx
• packages/ui-voip/src/views/usePopoutWindow.ts

🚧 Files skipped from review as they are similar to previous changes (5)

• packages/ui-voip/src/providers/useMediaSessionInstance.ts
• packages/ui-voip/src/views/MediaCallPopout.tsx
• packages/ui-voip/src/views/usePopoutWindow.ts
• packages/ui-voip/src/generate-landing-view.tsx
• apps/meteor/tests/e2e/voice-calls-ee.spec.ts

📜 Recent review details

⏰ Context from checks skipped due to timeout. (5)

• GitHub Check: ⚙️ Variables Setup
• GitHub Check: cubic · AI code reviewer
• GitHub Check: Hacktron Security Check
• GitHub Check: CodeQL-Build
• GitHub Check: CodeQL-Build

---

Walkthrough

Introduces a popout window mode for voice calls by refactoring the view-tracking context model from a single boolean to a multi-view registry, adding a window-management hook and HTML landing page generator, introducing three new popout UI components, updating existing views and providers to support multi-view rendering, and expanding E2E tests to cover widget, in-room, and popout interactions.

Changes

Voice Call Popout Feature

Layer / File(s)	Summary
Context contracts: AvailableViews, view callbacks, and call ID hook packages/ui-voip/src/context/MediaCallInstanceContext.ts, packages/ui-voip/src/context/MediaCallViewContext.ts, packages/ui-voip/src/context/usePeekMediaSessionCallId.ts, packages/ui-voip/src/context/index.ts	Defines AvailableViews = 'room' | 'popout' | 'widget' and replaces inRoomView/setInRoomView with currentViews/registerView/unregisterView in MediaCallInstanceContext. Adds onOpenPopout/onClosePopout to MediaCallViewContext. Introduces usePeekMediaSessionCallId using useSyncExternalStore to expose tempCallId.
View tracking: useAvailableViewTracker, useRegisterView, and provider integration packages/ui-voip/src/providers/useAvailableViewTracker.ts, packages/ui-voip/src/context/useRegisterView.ts, packages/ui-voip/src/providers/MediaCallInstanceProvider.tsx, packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx, packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx, packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx, packages/ui-voip/src/hooks/useMediaCallOpenRoomTracker.spec.tsx	Implements useAvailableViewTracker with a debounced (100 ms) Set-based store and filter excluding 'room' when 'widget' is registered. Adds useRegisterView hook for mount/unmount registration. Wires tracker into MediaCallInstanceProvider. Removes old useRoomView hook. Updates all unit-test wrappers to use the new context shape.
Popout window infrastructure: HTML generation, lifecycle management, and screen-share targeting packages/ui-voip/src/views/usePopoutWindow.ts, packages/ui-voip/src/providers/useMediaSessionInstance.ts, packages/ui-voip/src/generate-landing-view.tsx, packages/ui-voip/package.json, apps/meteor/public/voice-call-popup.html, apps/meteor/packages/meteor-inject-initial/lib/inject-core.js	Implements usePopoutWindow managing window.open('/voice-call-popup.html') with retry/polling for root creation, theme sync, and beforeunload cleanup. Extends MediaSessionStore with popoutWindow field so getDisplayMedia targets the popout navigator. Adds a JSDOM-based build script generating a self-contained voice-call-popup.html with inlined Fuselage CSS, icon fonts, and palette styles. Publishes the file as a symlink and excludes it from Inject.appUrl. Adds @types/node and jsdom dev dependencies.
New popout UI: MediaCallPopout, MediaCallPopoutWindow, and MediaCallPopoutView packages/ui-voip/src/views/MediaCallPopout.tsx, packages/ui-voip/src/views/MediaCallPopoutWindow.tsx, packages/ui-voip/src/views/MediaCallPopoutView.tsx	MediaCallPopout orchestrates opening/closing the popout window and renders MediaCallPopoutWindow. MediaCallPopoutWindow creates a cross-document portal with modal, tooltip, and theme providers. MediaCallPopoutView renders the full-screen call UI with peer cards, timer, call controls (mute/hold/forward/hangup), fullscreen toggle, device picker, and "Return to main window" button.
Provider architecture: MediaCallProvider, MediaCallViewProvider, and context defaults packages/ui-voip/src/providers/MediaCallProvider.tsx, packages/ui-voip/src/providers/MediaCallViewProvider.tsx, packages/ui-voip/src/providers/MockedMediaCallProvider.tsx, apps/meteor/client/providers/MediaCallProvider.tsx	Moves MediaCallWidget + AnchorPortal mounting from MediaCallViewProvider into MediaCallProvider; adds MediaCallPopout rendering there. MediaCallViewProvider gains memoized onOpenPopout/onClosePopout backed by registerView/unregisterView. Updates MockedMediaCallProvider and the Meteor unauthorized fallback to provide currentViews/registerView/unregisterView.
Existing view updates: popout toggles, visibility logic, and accessibility improvements packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.tsx, packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx, packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx, packages/ui-voip/src/components/ToggleButton.tsx, packages/ui-voip/src/components/Widget/Widget.tsx, packages/ui-voip/src/components/Widget/WidgetHeader.tsx, packages/i18n/src/locales/en.i18n.json	MediaCallWidget uses useRegisterView('widget') for visibility. OngoingCallWithScreen adds a popout-toggle button and conditional content. MediaCallRoomSection switches to useRegisterView('room'), renders a "show call here" placeholder when isPopout, and adds a ToggleButton. ToggleButton gains danger, secondary, tiny props with dynamic sizing. Widget changes to div with role="dialog". WidgetHeader adds a visually hidden i18n label. Video elements set autoPlay, muted, playsInline. Seven new i18n keys added.
E2E page objects and test suite: refactored fragments and comprehensive popout coverage apps/meteor/tests/e2e/page-objects/fragments/voice-calls.ts, apps/meteor/tests/e2e/voice-calls-ee.spec.ts, .changeset/upset-rats-work.md	Refactors VoiceCalls page object into composable Widget, RoomSection, PopoutPage, VoiceCallControls, and TransferModal classes. Updates all EE voice-call tests and adds "In-room view" and "Popout view" describe blocks covering view switching, chat show/hide, "Show call here", popout transitions, and screen-sharing assertions. Changeset marks three packages for minor releases.

Sequence Diagram(s)

sequenceDiagram
  participant User as User (main window)
  participant RoomSection as MediaCallRoomSection
  participant Widget as MediaCallWidget
  participant ViewProvider as MediaCallViewProvider
  participant Tracker as useAvailableViewTracker
  participant Popout as MediaCallPopout
  participant WinHook as usePopoutWindow
  participant PopoutWin as voice-call-popup.html
  participant PopoutUI as MediaCallPopoutWindow/View

  rect rgba(70, 130, 180, 0.5)
    Note over User,Widget: Widget/Room active (no popout)
    RoomSection->>Tracker: registerView('room')
    Widget->>Tracker: registerView('widget')
    Tracker-->>Widget: currentViews=['widget'] (room filtered)
    Widget-->>User: renders floating widget
  end

  rect rgba(100, 160, 100, 0.5)
    Note over User,PopoutWin: User opens popout
    User->>RoomSection: click "Open in new window"
    RoomSection->>ViewProvider: onOpenPopout()
    ViewProvider->>Tracker: registerView('popout')
    Tracker-->>Widget: currentViews=['widget','popout']
    Popout->>WinHook: openPopoutWindow(callId)
    WinHook->>PopoutWin: window.open('/voice-call-popup.html')
    WinHook-->>Popout: container {root, ownerDocument}
    Popout->>PopoutUI: render MediaCallPopoutWindow
    PopoutUI-->>PopoutWin: createPortal → MediaCallPopoutView
    Widget-->>User: shows "Show call here" placeholder
  end

  rect rgba(180, 100, 100, 0.5)
    Note over User,PopoutWin: User returns to main window
    User->>PopoutUI: click "Return to main window"
    PopoutUI->>ViewProvider: onClosePopout()
    ViewProvider->>Tracker: unregisterView('popout')
    Tracker-->>Widget: currentViews=['widget'] (room still filtered)
    WinHook->>PopoutWin: closePopoutWindow()
  end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Suggested reviewers

• ggazzo
• ricardogarim

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat: Voice call popup window' directly and clearly summarizes the main feature being implemented across the changeset.
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.

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

---

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.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 4de6495

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

This PR includes changesets to release 16 packages

Name	Type
@rocket.chat/meteor	Minor
@rocket.chat/i18n	Minor
@rocket.chat/ui-voip	Major
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-contexts	Major
@rocket.chat/web-ui-registration	Major
@rocket.chat/uikit-playground	Patch
@rocket.chat/fuselage-ui-kit	Major
@rocket.chat/gazzodown	Major
@rocket.chat/livechat	Patch
@rocket.chat/ui-avatar	Major
@rocket.chat/ui-client	Major
@rocket.chat/ui-video-conf	Major
@rocket.chat/ui-composer	Major
@rocket.chat/core-typings	Minor
@rocket.chat/rest-typings	Minor

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

[codecov]

Codecov Report

❌ Patch coverage is 57.89474% with 40 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.12%. Comparing base (9ab1cf6) to head (4de6495).
⚠️ Report is 4 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #40202      +/-   ##
===========================================
- Coverage    70.14%   70.12%   -0.03%     
===========================================
  Files         3359     3360       +1     
  Lines       129609   129655      +46     
  Branches     22452    22459       +7     
===========================================
+ Hits         90919    90923       +4     
- Misses       35379    35422      +43     
+ Partials      3311     3310       -1     

Flag	Coverage Δ
e2e	59.32% <0.00%> (-0.02%)	⬇️
e2e-api	46.22% <ø> (-0.90%)	⬇️
unit	70.06% <59.13%> (+<0.01%)	⬆️

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.