[Mobile] Fix queue drawer: full scroll, header, and full-screen toggle#14278
Merged
dylanjeffers merged 2 commits intomainfrom May 8, 2026
Merged
[Mobile] Fix queue drawer: full scroll, header, and full-screen toggle#14278dylanjeffers merged 2 commits intomainfrom
dylanjeffers merged 2 commits intomainfrom
Conversation
The queue drawer was rendering its content without a height constraint, so on long queues the drawer's auto-sized height exceeded screen height and the drawer translated above the top of the screen — hiding the drag handle and header, and leaving the user stuck mid-list with no way to scroll up. The list also only included tracks after the currently playing one, so prior queue history was unreachable. - Constrain drawer to ~85% of screen height (full screen when expanded) so the header is always visible. - Render the entire queue (past + now-playing + upcoming) in the DraggableFlatList; current track is highlighted and visible at top of viewport via initialScrollIndex, with past tracks scrollable above and upcoming below. - Add a fullscreen expand/collapse IconButton in the header. - Move the "Up Next from source" section into ListFooterComponent so it scrolls with the queue. - Add fixed row height + getItemLayout so initialScrollIndex works reliably and scroll bounds aren't clipped. - Restrict drag-to-reorder to upcoming tracks only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The pulsing/swelling dot badge over the queue button was visually noisy. Drop the animation and the absolute-positioned badge entirely; instead tint the queue IconButton with the 'active' color when there's a new feature to surface, matching the cast button's pattern. Dismissal still runs on first open. - Remove withRepeat/withTiming pulse animation and Animated.View badge - Set IconButton color to 'active' when showQueueNewFeatureBadge is true - Drop unused reanimated imports and queueButtonContainer/newFeatureBadge styles Co-Authored-By: Claude Opus 4.7 (1M context) <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
1 participant
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.
Summary
The mobile play queue drawer had several broken behaviors visible in the original screenshot:
queue.slice(index + 1)(now-playing + upcoming).Changes
<View>wrapping the drawer content now has a fixed height of ~85% of the screen (or full screen when expanded), so the drag handle and header are always on-screen regardless of queue length.DraggableFlatListnow renders all queue items (past/now-playing/upcoming), with the current track highlighted via accent color. Past tracks render at 0.6 opacity. The list opens scrolled to the now-playing track viainitialScrollIndex, so the user can scroll up to see history and down to see upcoming.getItemLayout— every row is exactlyROW_HEIGHT(64), which is required forinitialScrollIndexto land in the right place without breaking scroll bounds (the FlatList bug the user identified).IconCaretUp/IconCaretDownIconButtonin the header next to "Clear". Tapping it animates the drawer between collapsed (~85%) and full-screen heights via the existing drawer slideIn animation.ListFooterComponentso it scrolls together with the queue list.Test plan
🤖 Generated with Claude Code