feat(mobile): hide the play bar with the rest of the bottom chrome - #14577
Merged
Conversation
The now-playing bar did not participate in the auto-hide, so scrolling down with a track playing left it stranded: the tab bar floats away beneath it and the play bar stayed put with an empty band underneath. It travels on the same `useTabBarHiddenProgress` the tab bar uses, so the two move as one unit rather than on two signals that can drift apart. This translates the whole drawer, not the play bar inside it. The white surface behind the play bar belongs to the drawer root, so moving only its contents slides the bar off a background that stays put — trading the empty band for an empty white block. Wrapping the drawer means restating its z-order, since the wrapper creates a new stacking context, and `box-none` so the full-screen wrapper doesn't swallow touches meant for the screen behind it. Pinned to 0 while the drawer is open: the same drawer is the full-screen player, and translating it there would drag the expanded player off screen. Verified on the iOS simulator with a track playing — chrome hides and restores as one unit with no empty band; the full-screen player still opens, still swipe-dismisses, and the left nav drawer still pushes the bar with the screen rather than being punctured by its elevation. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
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
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.
Follow-up to #14575. The now-playing bar didn't participate in the auto-hide, so scrolling down with a track playing left it stranded — the tab bar floats away beneath it and the play bar stayed put with an empty band underneath.
It now travels on the same
useTabBarHiddenProgressthe tab bar uses, so the two move as one unit rather than on two signals that can drift.Why the whole drawer moves, not the play bar
My first attempt translated just the play bar. Both bars hid — and it left an empty white band instead. The white surface behind the play bar belongs to the drawer root, so moving only its contents slid the bar off a background that stayed put. Same problem, different colour.
So this moves the drawer. Two consequences worth reviewing:
pointerEvents='box-none'keeps the full-screen wrapper from swallowing touches meant for the screen behind it. This is the same class of thing the tab bar work already had to handle.0while the drawer is open — that same drawer is the full-screen player, and translating it there would drag the expanded player off screen.Verification (iOS simulator, track actually playing)
tsc0 errors,eslintclean.Not verified
Android. This is a shared, gesture-heavy component and Android resolves z-order via
elevationrather thanzIndex, which is exactly where the wrapper could behave differently. Worth an Android check before or shortly after merge.Unrelated, but noticed
Two
SIGABRTs occurred on the simulator during this session, bothShadowTree::commitasserts insidereanimated::ReanimatedMountHook::shadowTreeDidMount. Both followed Fast Refresh reload cycles; clean launches have been stable through playback, scrolling, drawer open/close and tab switching. Likely a dev-only artifact — that assert is typically compiled out in release — but noting it since it first appeared during the #14575 reanimated work rather than before it.🤖 Generated with Claude Code