Skip to content

feat: Draggable Voice/Video call popup #35830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from

Conversation

gabriellsh
Copy link
Member

@gabriellsh gabriellsh commented Apr 16, 2025

Proposed changes (including videos or screenshots)

This will be released as a feature preview.

Allows the call widget to be dragged on the screen.

This is pretty much a beta. All the logic related to positioning, transforms and events abastraction will be moved to fuselage and released as a separate package.

Screen.Recording.2025-04-16.at.18.07.34.mov

Issue(s)

CORE-954

Steps to test or reproduce

Further comments

Copy link
Contributor

dionisio-bot bot commented Apr 16, 2025

Looks like this PR is not ready to merge, because of the following issues:

  • This PR is missing the 'stat: QA assured' label
  • This PR is targeting the wrong base branch. It should target 7.7.0, but it targets 7.6.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

Copy link

changeset-bot bot commented Apr 16, 2025

🦋 Changeset detected

Latest commit: aa7cdbb

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

This PR includes changesets to release 37 packages
Name Type
@rocket.chat/meteor Minor
@rocket.chat/i18n Minor
@rocket.chat/ui-client Major
@rocket.chat/ui-voip Major
@rocket.chat/mock-providers Patch
@rocket.chat/ui-contexts Major
@rocket.chat/web-ui-registration Major
@rocket.chat/gazzodown Major
@rocket.chat/fuselage-ui-kit Major
@rocket.chat/uikit-playground Patch
@rocket.chat/livechat Patch
@rocket.chat/ui-avatar Major
@rocket.chat/ui-video-conf Major
@rocket.chat/core-typings Minor
@rocket.chat/rest-typings Minor
@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/model-typings 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/license 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/instance-status 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

Copy link

kodus-ai bot commented Apr 16, 2025

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration
Interacting with Kody
  • Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

  • Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration
Review Options

The following review options are enabled or disabled:

Options Enabled
Security
Code Style
Kody Rules
Refactoring
Error Handling
Maintainability
Potential Issues
Documentation And Comments
Performance And Optimization
Breaking Changes

Access your configuration settings here.

Copy link

kodus-ai bot commented Apr 16, 2025

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration
Interacting with Kody
  • Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

  • Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration
Review Options

The following review options are enabled or disabled:

Options Enabled
Security
Code Style
Kody Rules
Refactoring
Error Handling
Maintainability
Potential Issues
Documentation And Comments
Performance And Optimization
Breaking Changes

Access your configuration settings here.

Copy link

codecov bot commented Apr 16, 2025

Codecov Report

Attention: Patch coverage is 28.83721% with 153 lines in your changes missing coverage. Please review.

Project coverage is 61.04%. Comparing base (e9f1d6d) to head (aa7cdbb).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #35830      +/-   ##
===========================================
- Coverage    61.17%   61.04%   -0.13%     
===========================================
  Files         2971     2978       +7     
  Lines        70839    71060     +221     
  Branches     16185    16213      +28     
===========================================
+ Hits         43333    43379      +46     
- Misses       24556    24714     +158     
- Partials      2950     2967      +17     
Flag Coverage Δ
e2e 57.68% <ø> (-0.01%) ⬇️
unit 75.14% <28.83%> (-0.48%) ⬇️

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.

Copy link

kodus-ai bot commented Apr 17, 2025

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration
Interacting with Kody
  • Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

  • Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration
Review Options

The following review options are enabled or disabled:

Options Enabled
Security
Code Style
Kody Rules
Refactoring
Error Handling
Maintainability
Potential Issues
Documentation And Comments
Performance And Optimization
Breaking Changes

Access your configuration settings here.

@gabriellsh gabriellsh marked this pull request as ready for review April 17, 2025 18:00
@gabriellsh gabriellsh requested a review from a team as a code owner April 17, 2025 18:00
Copy link

kodus-ai bot commented Apr 17, 2025

Code Review Completed! 🔥

The code review was successfully completed based on your current configurations.

Kody Guide: Usage and Configuration
Interacting with Kody
  • Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

  • Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration
Review Options

The following review options are enabled or disabled:

Options Enabled
Security
Code Style
Kody Rules
Refactoring
Error Handling
Maintainability
Potential Issues
Documentation And Comments
Performance And Optimization
Breaking Changes

Access your configuration settings here.

Copy link
Contributor

github-actions bot commented Apr 17, 2025

PR Preview Action v1.6.1

🚀 View preview at
https://RocketChat.github.io/Rocket.Chat/pr-preview/pr-35830/

Built to branch gh-pages at 2025-04-17 18:35 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Copy link

kodus-ai bot commented Apr 17, 2025

Kody Review Complete

Great news! 🎉
No issues were found that match your current review configurations.

Keep up the excellent work! 🚀

Kody Guide: Usage and Configuration
Interacting with Kody
  • Request a Review: Ask Kody to review your PR manually by adding a comment with the @kody start-review command at the root of your PR.

  • Provide Feedback: Help Kody learn and improve by reacting to its comments with a 👍 for helpful suggestions or a 👎 if improvements are needed.

Current Kody Configuration
Review Options

The following review options are enabled or disabled:

Options Enabled
Security
Code Style
Kody Rules
Refactoring
Error Handling
Maintainability
Potential Issues
Documentation And Comments
Performance And Optimization
Breaking Changes

Access your configuration settings here.

@rodrigok rodrigok requested a review from Copilot April 17, 2025 19:30
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 25 out of 27 changed files in this pull request and generated no comments.

Files not reviewed (2)
  • packages/i18n/src/locales/en.i18n.json: Language not supported
  • packages/ui-voip/src/components/VoipPopup/snapshots/VoipPopup.spec.tsx.snap: Language not supported
Comments suppressed due to low confidence (2)

packages/ui-voip/src/components/VoipPopup/VoipPopup.tsx:13

  • Ensure that the forwarded ref behavior in VoipPopup (and its conditional children) is covered with tests to verify that the ref is correctly attached to the underlying container element.
const VoipPopup = forwardRef<HTMLDivElement, { position?: PositionOffsets }>(({ position, ...props }, ref) => {

packages/ui-client/src/hooks/useFeaturePreviewList.ts:9

  • Consider adding or updating tests to validate the behavior of the new 'voip-draggable' feature flag to ensure that the feature preview is correctly enabled or disabled under various scenarios.
| 'voip-draggable';

@scuciatto scuciatto added this to the 7.7.0 milestone Apr 21, 2025
Comment on lines +5 to +7
const DRAG_START_EVENTS = ['mousedown', 'touchstart'] as const;
const DRAG_END_EVENTS = ['mouseup', 'touchend'] as const;
const DRAG_MOVE_EVENTS = ['mousemove', 'touchmove'] as const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you considered using pointer events instead?
They’re well supported in modern browsers and can help unify mouse and touch event handling.
Depending on how old the browsers we need to support are, this might be a good improvement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants