VIDSOL-599: Hide local screenshare view when sharing entire screen to prevent infinite mirror effect by ydumburs · Pull Request #381 · Vonage/vonage-video-react-app

ydumburs · 2026-02-24T14:33:58Z

What is this PR doing?

Hides the local publisher screenshare preview when the user shares the entire screen (displaySurface==='monitor') to prevent infinite mirror effect. The behavior only applies to entire screen mode. Tab and Window sharing remain unchanged.

How should this be manually tested?

Start a meeting.
Share Entire Screen.
Verify that

The local preview is hidden.
No infinite mirror effect appears.
The remote participant can see the shared screen normally.

Stop sharing and confirm the UI returns to normal.
Share a Tab or Window and verify the local preview is still visible.

What are the relevant tickets?

A maintainer will add this ticket number.

Resolves VIDSOL-599

Checklist

[x] 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?

… prevent infinite mirror effect

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx

frontend/src/css/App.css

frontend/src/hooks/useScreenShare.tsx

…odule.scss, Move a message to en.json

ydumburs · 2026-03-10T14:38:36Z

Thanks for the suggestions. I've pushed the updates addressing the comments.

OscarFava · 2026-03-10T15:03:41Z

Pd: tests are failing, maybe you need to execute yarn test:integration update ?

Hossein-Movahed

Hey, great work on this! A few things to address.

frontend/src/hooks/useScreenShare.tsx

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx

ydumburs · 2026-03-11T13:13:37Z

Thanks for the suggestion. I've updated the logic as recommended. The update has been pushed.

Hossein-Movahed

Thank you @ydumburs, just a few comments, and please add more tests, we need minimum 80% coverage for new code, and make sure the E2E test are passing

frontend/src/locales/en.json

frontend/src/hooks/useScreenShare.tsx

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx

frontend/src/hooks/useScreenShare.tsx

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx

ydumburs · 2026-03-12T12:17:17Z

Hi @Hossein-Movahed @OscarFava, I can't access the SonarCloud details page from my account. Could you please share which files or lines are uncovered so I can add the missing tests?

OscarFava · 2026-03-12T13:48:13Z

Hi @Hossein-Movahed @OscarFava, I can't access the SonarCloud details page from my account. Could you please share which files or lines are uncovered so I can add the missing tests?

frontend/src/hooks/useScreenShare.tsx

Hossein-Movahed · 2026-03-12T15:48:15Z

@ydumburs the E2E test is failing, the test now expects "You are sharing your screen." on the publisher side (Chrome always picks entire screen in E2E) instead of the User One's screen

      await pageOne.getByTestId('screen-publisher-container').getByText(`User One's screen`)
    ).toBeVisible();```

ydumburs · 2026-03-12T16:06:31Z

Thank you @Hossein-Movahed . Updated the screenshare test.

Hossein-Movahed

LGTM

OscarFava

Awesome work, minor comment.

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx

sonarqubecloud · 2026-03-13T09:26:33Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
97.1% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

OscarFava

Minor comments

OscarFava · 2026-03-17T09:26:06Z

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx

      >
-        <ScreenShareNameDisplay name={streamName} box={box} />
+        {isEntireScreen ? (
+          <div className="absolute inset-0 flex items-center justify-center text-xl font-medium bg-vera-dark-background text-vera-on-background pointer-events-none">


text-xl is wrong. You can use text-vera-heading-4

Same with font-medium. You should use our tokens.

Thanks for the suggestion. I'll update the text and font.

Is this fixed? I do not see the changes.

I fixed this locally but still waiting for @Hossein-Movahed 's answer on the next thread which I may need to change this part as well.

Hi, I've addressed the requested change.

Hossein-Movahed · 2026-03-17T11:41:55Z

frontend/src/hooks/useScreenShare.tsx

+          const mediaStream = videoEl.srcObject as MediaStream | null;
+          const track = mediaStream?.getVideoTracks?.()[0];
+          const displaySurface = track?.getSettings?.()?.displaySurface;
+          setIsEntireScreen(displaySurface === 'monitor');


The displaySurface detection doesn't work in Firefox since getSettings() exists but displaySurface is not part of Firefox's implementation, so isEntireScreen will always be false there, causing the mirror effect.

A reliable fix is to fall back to comparing the track dimensions against the screen dimensions when displaySurface is undefined:

const settings = track?.getSettings?.(); const displaySurface = settings?.displaySurface; // Firefox does not support displaySurface — fall back to dimension comparison const isMonitor = displaySurface === 'monitor' || (!displaySurface && settings?.width === screen.width && settings?.height === screen.height); setIsEntireScreen(isMonitor);

Don't forget to add a test for the Firefox fallback path (where displaySurface is undefined but dimensions match the screen).

Thanks for the suggestion. I'm trying to hide the mirror effect for full screen sharing while keeping the Firefox PiP icon visible. Since the PiP icon seems to be browser-controlled and tied to the video element, hiding the video also hides the icon.
Do we want to:

Fully hide the mirror and lose PiP, or

Keep PiP visible and partially mask the screen?

What would you prefer from a UX perspective?

Hi @Hossein-Movahed , just following up on this. Could you check the comment and let me know your thoughts when you have time?

I'd go with fully hiding the mirror. The mirror effect is a clear visual bug that affects all full-screen sharers, while PiP on a local screenshare preview is rarely used. The overlay already gives enough feedback. The trade off is worth it i guess

Got it, thanks for the confirmation. I'll fully hide the video element.

Hi, I've addressed the requested changed - fixed firefox fallback. Also, resolved lint and conflict issues. Could you please take another look?

…nshare detection and test

Hossein-Movahed · 2026-03-27T14:25:57Z

vcr:deploy

github-actions · 2026-03-27T14:28:46Z

✅ Deployed to VCR

URL: https://neru-ca37991c-vonage-video-react-app-vera-pr-381.euw1.runtime.vonage.cloud

Commit: a46d764e805175f2f274bcfc81f61c553f37d28c

View build logs

Hossein-Movahed

@ydumburs , we need the string local in de as well

VIDSOL-599: Hide local screenshare view when sharing entire screen to…

4178347

… prevent infinite mirror effect

VZaphod requested a review from a team February 24, 2026 14:36

VZaphod reviewed Feb 24, 2026

View reviewed changes

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx Outdated Show resolved Hide resolved

VZaphod requested a review from a team February 24, 2026 14:51

johnny-quesada-developer requested changes Feb 25, 2026

View reviewed changes

frontend/src/css/App.css Outdated Show resolved Hide resolved

frontend/src/hooks/useScreenShare.tsx Outdated Show resolved Hide resolved

VIDSOL-599: Move screenshare overlay styles to ScreenSharePublisher.m…

3e0dde0

…odule.scss, Move a message to en.json

Hossein-Movahed reviewed Mar 10, 2026

View reviewed changes

frontend/src/hooks/useScreenShare.tsx Outdated Show resolved Hide resolved

frontend/src/hooks/useScreenShare.tsx Outdated Show resolved Hide resolved

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx Outdated Show resolved Hide resolved

Hossein-Movahed requested changes Mar 10, 2026

View reviewed changes

VIDSOL-599: address review feedback and simplify screenshare overlay

c9a08c7

Hossein-Movahed requested changes Mar 12, 2026

View reviewed changes

VIDSOL-599: refactor screenshare logic, add translations, add unit test

c299e67

ydumburs added 4 commits March 12, 2026 13:51

VIDSOL-599: refactor screenshare logic, add translations, add unit tests

928c329

VIDSOL-599: add unit tests

e9c8455

VIDSOL-599: add Screenshare and VideoTileCanvas tests

1814043

VIDSOL-599: add more tests

8a0cfc2

VIDSOL-599: update screenshare E2E test

18ac931

VIDSOL-599: fix lint issues

668b728

Hossein-Movahed previously approved these changes Mar 12, 2026

View reviewed changes

OscarFava reviewed Mar 12, 2026

View reviewed changes

frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx Outdated Show resolved Hide resolved

VIDSOL-599: fix colour for bacnground and text

b2efca7

ydumburs dismissed Hossein-Movahed’s stale review via b2efca7 March 13, 2026 09:19

Hossein-Movahed approved these changes Mar 16, 2026

View reviewed changes

OscarFava reviewed Mar 17, 2026

View reviewed changes

Hossein-Movahed requested changes Mar 17, 2026

View reviewed changes

OscarFava assigned ydumburs Mar 19, 2026

ydumburs added 3 commits March 27, 2026 11:07

VIDSOL-599: Updated vera text style, added firefox fallback for scree…

6c03d73

…nshare detection and test

Merge branch 'develop' into VIDSOL-599-hide-entire-screenshare

89b3649

VIDSOL-599: fix lint, conflict and screenshare handling

a46d764

ydumburs requested review from Hossein-Movahed and johnny-quesada-developer March 27, 2026 12:13

Hossein-Movahed reviewed Mar 27, 2026

View reviewed changes

VIDSOL-599: add locale for de

37d0f29

ydumburs force-pushed the VIDSOL-599-hide-entire-screenshare branch from 863b15c to 37d0f29 Compare March 27, 2026 15:54

ydumburs requested review from Hossein-Movahed and OscarFava March 27, 2026 16:01

Hossein-Movahed approved these changes Mar 27, 2026

View reviewed changes

ydumburs requested a review from VZaphod March 27, 2026 16:46

Conversation

ydumburs commented Feb 24, 2026

What is this PR doing?

How should this be manually tested?

What are the relevant tickets?

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ydumburs commented Mar 10, 2026

Uh oh!

OscarFava commented Mar 10, 2026

Uh oh!

Hossein-Movahed left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ydumburs commented Mar 11, 2026

Uh oh!

Hossein-Movahed left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ydumburs commented Mar 12, 2026

Uh oh!

OscarFava commented Mar 12, 2026

Uh oh!

Hossein-Movahed commented Mar 12, 2026

Uh oh!

ydumburs commented Mar 12, 2026

Uh oh!

Hossein-Movahed left a comment

Choose a reason for hiding this comment

Uh oh!

OscarFava left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sonarqubecloud bot commented Mar 13, 2026

Quality Gate passed

Uh oh!

OscarFava left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hossein-Movahed commented Mar 27, 2026

Uh oh!

Hossein-Movahed left a comment •

edited

Loading