feat: Add Fullscreen API wrapping the browser Fullscreen API#24326
Open
Artur- wants to merge 5 commits into
Open
feat: Add Fullscreen API wrapping the browser Fullscreen API#24326Artur- wants to merge 5 commits into
Artur- wants to merge 5 commits into
Conversation
Adds Component.requestFullscreen() that uses a wrapper approach to handle Vaadin theming and overlay components correctly, along with Page.requestFullscreen() for whole-page fullscreen, Page.exitFullscreen(), and Page.fullscreenSignal() for reactive observation of the fullscreen state (FULLSCREEN, NOT_FULLSCREEN, UNSUPPORTED, UNKNOWN). The signal is seeded from the initial client bootstrap (v-fs parameter) and updated via a vaadin-fullscreen-change DOM event, mirroring the page-visibility wiring. The client-side bridge lives in flow-client/src/main/frontend/Fullscreen.ts, imported from Flow.ts the same way Geolocation.ts is. Fixes #21902
The file already has an exported function (currentFullscreenState), so
the trailing `export {}` is flagged by
@typescript-eslint/no-useless-empty-export and breaks the flow-client
build.
Reworks the Fullscreen API based on API-GAPS feedback:
- Page.requestFullscreen() and Component.requestFullscreen() now return
a FullscreenSession with a state signal carrying PENDING / ACTIVE /
REJECTED / EXITED_BY_USER / EXITED_BY_CODE. This covers three gaps in
one shape: which component is fullscreen (session.owner()), how the
session ended (terminal state), and whether the browser accepted the
request (PENDING -> ACTIVE or REJECTED).
- The JS connector now returns { ok, error? } from each request so
rejections (no user activation, permissions policy, document detached,
fullscreen unsupported) reach the server and are logged at WARN level
with the browser-provided message.
- Page#requestFullscreen(Component) overload lets code that already
holds a Page reference start a component session without reaching
through the component.
- Component#exitFullscreen() restores symmetry with requestFullscreen(),
delegating to Page#exitFullscreen() so component code does not need
to reach for getUI().getPage().
- Page#simulateFullscreenChange(FullscreenState) exposes a public
test-only seam so downstream tests no longer have to reflect into the
package-private setter.
- Javadoc on Page#fullscreenSignal() and Page#requestFullscreen() now
carries worked binding / lifecycle examples.
The page-level Page#fullscreenSignal() is unchanged: it answers the
broad "is anything fullscreen right now" question across sessions.
Javadoc rejects H2 inside a method comment because the surrounding context already uses H3, breaking attach-javadocs in the unit-tests (3) shard. Switch to the <p><b>...</b></p> pattern Geolocation uses, which renders the same in javadoc output.
Replaces the toggle-button example on Page#fullscreenSignal() with the two patterns most useful in practice — bindClassName for declarative CSS toggling while fullscreen, and Signal.effect for side-effecting reactions such as hiding a button when fullscreen is UNSUPPORTED. The toggle-button example was correct but covered three patterns at once; downstream use cases (chart card expand, "fullscreen unavailable" empty states) needed the focused shapes instead.
|
Artur-
added a commit
to vaadin/use-cases
that referenced
this pull request
May 13, 2026
Adds a sibling `fullscreen` module mirroring `geolocation` and `page-visibility`, demonstrating Component#requestFullscreen(), Page#requestFullscreen(), Page#fullscreenSignal(), FullscreenSession and Component#exitFullscreen() across six self-contained views: - image lightbox using per-component fullscreen (UC1) - slideshow / presentation via Page#requestFullscreen() (UC2) - distraction-free editor exiting through Component#exitFullscreen() (UC3) - reactive layout bound directly to fullscreenSignal() (UC4) - kiosk exit detection via FullscreenSession state (UC5) - chart expand using session.owner() to scope the active card (UC6) Pinned to flow 25.2.fullscreen-SNAPSHOT (vaadin/flow#24326) until the API lands in mainline. Remaining API gaps surfaced during the work are recorded in fullscreen/API-GAPS.md.
github-project-automation
Bot
moved this to 🔎Iteration reviews
in Vaadin Flow | Hilla | Kits ongoing work
Member
Author
|
This should be based on trigger/action type API |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds Component.requestFullscreen() that uses a wrapper approach to handle
Vaadin theming and overlay components correctly, along with
Page.requestFullscreen() for whole-page fullscreen, Page.exitFullscreen(),
and Page.fullscreenSignal() for reactive observation of the fullscreen
state (FULLSCREEN, NOT_FULLSCREEN, UNSUPPORTED, UNKNOWN).
The signal is seeded from the initial client bootstrap (v-fs parameter)
and updated via a vaadin-fullscreen-change DOM event, mirroring the
page-visibility wiring.