Skip to content

fix(Lightbox): stop a playing video when the viewer closes - #10692

Open
SebTardif wants to merge 2 commits into
meta:mainfrom
SebTardif:fix/lightbox-pause-on-close
Open

SebTardif wants to merge 2 commits into
meta:mainfrom
SebTardif:fix/lightbox-pause-on-close

Conversation

@SebTardif

Copy link
Copy Markdown

User impact

Someone watching a video in Lightbox hears it keep playing after they close the viewer. Close, Escape, and a tap outside leave the component mounted. The picture is hidden and the sound continues.

Problem and solution fit

The playback effect pauses a gallery video only when that video is no longer the current page. Closing does not change the current page, and a single video is not on a page, so nothing calls pause. The closed dialog keeps the element, and a hidden video keeps its audio. The effect now pauses every video while the viewer is closed, and plays the current one again on open when hasAutoPlay is set.

Expected behavior and authority

Gallery paging already stops a video that leaves the screen, and plays it again with hasAutoPlay (Lightbox FR18). Closing hides that same mounted element. Autoplay still follows hasAutoPlay.

Smallest restoration

The existing playback effect now also depends on isOpen. While closed it pauses every video and returns. While open it keeps the neighbour pause and plays the current video, including a single video that has no page element. No new prop and no visual change.

Evidence

  • Reproduction before the change: pnpm exec vitest run packages/core/src/Lightbox/Lightbox.test.tsx --project ui -t "pauses a playing video when the viewer closes" failed because pause was called 0 times. The video element was still in the document.
  • Result after the change: that file passed 91 tests, including the three new close and reopen cases.
  • Representative unchanged path: paging away still pauses a neighbour, and paging back with hasAutoPlay still plays that video.
  • Regression test: pauses a playing video when the viewer closes, pauses a single playing video when the viewer closes, and plays a single video again when the viewer reopens, with hasAutoPlay in Lightbox.test.tsx.

Scope

  • One defect is restored.
  • Separable contradictory or unsettled tagalongs were removed or split.
  • No new public API, visual representation, default, or interaction model is hidden under the bug-fix label.
  • Public text and artifacts contain no internal Meta context.

Testing

pnpm exec vitest run packages/core/src/Lightbox/Lightbox.test.tsx --project ui (91 passed). The new cases mock HTMLMediaElement.pause and play in jsdom, the same way the existing paging tests observe playback.

The neighbour pause landed with the gallery pager in #8197. This covers the dismiss path.

A mounted Lightbox keeps its video element after the dialog closes.
The playback effect paused only a gallery neighbour, so Close, Escape,
or a tap outside left the sound running. Closing now pauses every
video. Opening again plays the current one when hasAutoPlay is set,
including a single video that has no page.

The new close cases failed before the effect watched isOpen.
vitest run packages/core/src/Lightbox/Lightbox.test.tsx --project ui
passed 91 tests after the fix.
@vercel

vercel Bot commented Nov 8, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
astryx Ready Ready Preview Nov 8, 2026 6:02pm UTC

Request Review

@meta-cla

meta-cla Bot commented Nov 8, 2026

Copy link
Copy Markdown

Hi @SebTardif!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge labels Nov 8, 2026
@astracat-bot

astracat-bot Bot commented Nov 8, 2026 •

Copy link
Copy Markdown
Contributor

AI review status for this pull request.

Review status Updated
❓ Needs maintainer input (for maintainers only) Nov 8, 2026, 6:14 PM UTC

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Approval waits on an engineering owner's decision, not on changes from you.

  • The Lightbox spec covers pausing a gallery video on a neighbouring page while another item shows (FR18), but says nothing about what a closed viewer does with playback, so an engineering owner needs to confirm that closing should pause a playing video where it stopped (and that reopening with hasAutoPlay plays it on).

The new close and reopen tests fail on main and pass here, and in Chromium playback continues behind the closed dialog on main and stops on this branch. CI has not run on this head yet.

Optional, non-blocking:

  • The added comment sentence "Opening again plays the current one when hasAutoPlay is set." restates the code below it and could go.
  • Not caused by this pull request: a Lightbox mounted closed with hasAutoPlay still plays its video behind the closed dialog; rendering autoPlay={isOpen && isCurrent && hasAutoPlay} would close that gap, since the effect already plays the current video on open.

[Automated review]

Comment thread packages/core/src/Lightbox/Lightbox.tsx Resolved
Comment thread packages/core/src/Lightbox/Lightbox.tsx Resolved
The closed dialog still mounts the video. hasAutoPlay set the autoPlay
attribute even when isOpen was false, so a viewer mounted closed started
playback once the file loaded. The attribute now follows isOpen. The
close comment no longer restates the play check.

The new attribute test failed before this change because the closed
viewer rendered autoplay. The playback tests passed after it.
@SebTardif

Copy link
Copy Markdown
Author

The two optional notes are in 43c7d2a. The close comment no longer restates the play check, and autoPlay is set only while the viewer is open.

The owner decision is unchanged. FR18 covers a video on a neighbouring page. This pull request still needs an engineering owner to confirm that closing pauses playback.

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Approval waits on an engineering owner's decision, not on changes from you.

  • The Lightbox spec covers pausing a gallery video on a neighbouring page while another item shows (FR18), but says nothing about what a closed viewer does with playback, so an engineering owner needs to confirm that closing pauses a playing video where it stopped, that a viewer mounted closed with hasAutoPlay waits until it opens, and that reopening with hasAutoPlay plays the current video on.

Both earlier optional notes are addressed: the effect comment keeps only the reason, and autoPlay now follows isOpen. The four new tests fail on main and pass here, and in Chromium playback stops on close on this branch while it continues behind the closed dialog on main. CI has not run on this head yet; a maintainer adds the ci:run label so it runs.

[Automated review]

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Nov 8, 2026
@meta-cla

meta-cla Bot commented Nov 8, 2026

Copy link
Copy Markdown

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

This branch was successfully deployed

1 active deployment
Preview — 43c7d2a5 Deployed Nov 8, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant