VIDSOL-105: Background Replacement Support for Web VERA #190

OscarFava · 2025-07-21T11:15:49Z

What is this PR doing?

This PR is adding the feature: background replacement.

How should this be manually tested?

What are the relevant tickets?

A maintainer will add this ticket number.

Checklist

[ ] Branch is based on develop (not main).
[ ] Resolves a Known Issue.
[ ] If yes, did you remove the item from the docs/KNOWN_ISSUES.md?
[ ] Resolves an item reported in Issues.
If yes, which issue? Issue Number?

odivorra · 2025-07-23T14:45:04Z

@OscarFava , quick question:
under which license are we able to include the pictures you are adding here ?
I see some pictures that could be subject to copyright, unless you know otherwise. Checking to make sure we don't add any content we do not have the right to add.

OscarFava · 2025-07-23T15:50:54Z

Hi @odivorra I have used the free library mentioned in the Jira ticket (https://jira.vonage.com/browse/VIDSOL-105):

…with unified management in preview and meeting rooms. Refactored publisher logic, updated user context, and enhanced UI to support and display background selections.

…dded isParentVideoEnabled prop, standardized option sizing, and improved disabled video container styles.

…und-replacement

cpettet

Looks good so far! Great work with this! Just have a few comments/questions. Let me know what you think!

frontend/src/utils/videoFilterUtils.ts

frontend/src/utils/usePublisher/usePublisherUtils.ts

frontend/src/components/BackgroundEffects/BackgroundVideoContainer/BackgroundVideoContainer.tsx

behei-vonage

great job with this feature, Oscar! left a few questions/comments. thanks! 🙏

frontend/src/Context/BackgroundPublisherProvider/index.tsx

...c/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.spec.tsx

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

frontend/src/components/BackgroundEffects/EffectOptionButtons/EffectOptionButtons.spec.tsx

frontend/src/components/BackgroundEffects/EffectOptionButtons/EffectOptionButtons.tsx

frontend/src/components/MeetingRoom/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx

behei-vonage

thanks for making the changes so far 🙏 just left a few more things. thanks!

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

frontend/src/components/BackgroundEffects/BackgroundVideoContainer/BackgroundVideoContainer.tsx

...components/WaitingRoom/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx

frontend/src/utils/backgroundFilter/applyBackgroundFilter/applyBackgroundFilter.ts

cpettet

Looks good so far! Just have a few comments/questions. Let me know what you think!

frontend/src/utils/backgroundFilter/getInitialBackgroundFilter/getInitialBackgroundFilter.ts

frontend/src/Context/PreviewPublisherProvider/usePreviewPublisher/usePreviewPublisher.tsx

frontend/src/Context/PreviewPublisherProvider/usePreviewPublisher/usePreviewPublisher.spec.tsx

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

frontend/src/Context/PublisherProvider/usePublisher/usePublisher.tsx

frontend/src/Context/user.tsx

frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx

cpettet

Looks good so far! Just have a few comments/questions. Let me know what you think!

frontend/src/utils/util.ts

frontend/src/utils/backgroundFilter/applyBackgroundFilter/applyBackgroundFilter.ts

...components/WaitingRoom/BackgroundEffects/BackgroundEffectsLayout/BackgroundEffectsLayout.tsx

frontend/src/Context/PublisherProvider/usePublisher/usePublisher.tsx

cpettet

Looks good so far! Just have one more. Let me know what you think!

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx

sonarqubecloud · 2025-08-18T07:26:49Z

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
93.1% Coverage on New Code
1.8% Duplication on New Code

See analysis details on SonarQube Cloud

cpettet

LGTM Great job!

behei-vonage

LGTM! 🚀

dwivedisachin · 2025-08-19T09:56:21Z

LGTM!!
A few small observations but those can be addressed on a follow up PR.

On small Mobile devices the scroll comes up on the whole page, I believe it should be on only the choose background effects section.
The Cancel and Apply buttons should be at the bottom and always visible.
On waiting room mobile view the popup does not take up the whole screen (Not sure if this is necessary though).
Video list the one with "Background Effects" should be auto closed whe user clicks on "Background Effects" (It looks really weird on mobile view).

Let me know what do you think. 🤔

I'll merge this PR.

OscarFava · 2025-08-19T10:42:15Z

LGTM!! A few small observations but those can be addressed on a follow up PR.

On small Mobile devices the scroll comes up on the whole page, I believe it should be on only the choose background effects section.

The Cancel and Apply buttons should be at the bottom and always visible.

On waiting room mobile view the popup does not take up the whole screen (Not sure if this is necessary though).

Video list the one with "Background Effects" should be auto closed whe user clicks on "Background Effects" (It looks really weird on mobile view).

Let me know what do you think. 🤔

I'll merge this PR.

First, second and fourth suggestion will be done.
Third suggestion remains the same (Dialog must have margins).

initial background replacement

3841fd7

OscarFava added the do-not-merge Do Not Merge label Jul 21, 2025

OscarFava changed the base branch from main to develop July 21, 2025 11:15

Modify folder structure + add background video container

55af7e2

OscarFava added 9 commits July 23, 2025 18:28

Implemented background replacement and blur effects for video calls, …

506acb5

…with unified management in preview and meeting rooms. Refactored publisher logic, updated user context, and enhanced UI to support and display background selections.

Refactored background effects for better layout and responsiveness, a…

8f359b0

…dded isParentVideoEnabled prop, standardized option sizing, and improved disabled video container styles.

Add custom background images initial button

45020d0

Minor fix

f60b121

Remove blurButton

0b5e785

unit testing

d40aa17

removed

3a51e0e

Add unit testing

21077e5

Fix unit testing and first review (clean code and add comments)

7570983

OscarFava removed the do-not-merge Do Not Merge label Jul 31, 2025

OscarFava requested review from behei-vonage and cpettet and removed request for cpettet July 31, 2025 13:47

OscarFava added 10 commits July 31, 2025 17:56

Merge remote-tracking branch 'origin/develop' into vidsol-105/backgro…

ceffe18

…und-replacement

Remove unfound file

a9ba4d2

Reduce duplicated lines

310abf1

Reduce duplicated lines

cfff835

Fix unit testing

d36d700

Clean code and give appropiate names

2639977

Improve reliability

965c1fe

Fix lint

b7c582b

Fix kint

835c2b5

Fix testing

714c562

Fix integration

3d1af88

cpettet reviewed Aug 1, 2025

View reviewed changes

behei-vonage reviewed Aug 1, 2025

View reviewed changes

Fix unit testing + clean code + Fix docs typo + minor fixes

574ac90

OscarFava requested review from behei-vonage and cpettet August 4, 2025 14:34

behei-vonage reviewed Aug 4, 2025

View reviewed changes

cpettet reviewed Aug 4, 2025

View reviewed changes

Fix unit testing + add doc + minor bug fixs

9f5e3f4

OscarFava requested review from behei-vonage and cpettet August 6, 2025 07:31

cpettet reviewed Aug 6, 2025

View reviewed changes

OscarFava requested a review from cpettet August 7, 2025 07:13

Fix unit testing + add doc + minor bug fixs

651cff2

cpettet reviewed Aug 13, 2025

View reviewed changes

...nd/src/Context/BackgroundPublisherProvider/useBackgroundPublisher/useBackgroundPublisher.tsx Outdated Show resolved Hide resolved

Clean code

6b7031f

cpettet approved these changes Aug 18, 2025

View reviewed changes

behei-vonage approved these changes Aug 18, 2025

View reviewed changes

dwivedisachin merged commit bb15256 into develop Aug 19, 2025
7 checks passed

dwivedisachin deleted the vidsol-105/background-replacement branch August 19, 2025 09:56

VIDSOL-105: Background Replacement Support for Web VERA #190

VIDSOL-105: Background Replacement Support for Web VERA #190

Uh oh!

Conversation

OscarFava commented Jul 21, 2025

What is this PR doing?

How should this be manually tested?

What are the relevant tickets?

Checklist

Uh oh!

odivorra commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

OscarFava commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cpettet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behei-vonage left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

behei-vonage left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cpettet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cpettet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cpettet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sonarqubecloud bot commented Aug 18, 2025

Quality Gate passed

Uh oh!

cpettet left a comment

Choose a reason for hiding this comment

Uh oh!

odivorra commented Jul 23, 2025 •

edited

Loading

OscarFava commented Jul 23, 2025 •

edited

Loading