Skip to content

feat(mobile): now playing indicator with animated eq bars#14369

Merged
dylanjeffers merged 1 commit into
mainfrom
claude/mobile-now-playing-indicator
May 21, 2026
Merged

feat(mobile): now playing indicator with animated eq bars#14369
dylanjeffers merged 1 commit into
mainfrom
claude/mobile-now-playing-indicator

Conversation

@dylanjeffers
Copy link
Copy Markdown
Contributor

Summary

  • Adds a now-playing indicator to track rows in playlist / track list views on mobile
  • Active track row now uses a subtle purple background tint (rgba(130,86,220,0.07)) and a purple title color (#8256DC)
  • While the track is playing, the artwork shows an animated equalizer overlay (4 bars, #CC5DE8, height ~4→18px, staggered durations / delays) using React Native Animated with useNativeDriver: false
  • New reusable AnimatedEqBars component lives next to TrackArtwork in packages/mobile/src/components/track-list/

The paused-but-active state (active row, not currently playing) still shows the existing play-icon overlay — only the playing state swaps in the equalizer animation.

Files changed

  • packages/mobile/src/components/track-list/AnimatedEqBars.tsx (new)
  • packages/mobile/src/components/track-list/TrackArtwork.tsx
  • packages/mobile/src/components/track-list/TrackListItem.tsx

Test plan

  • Open a playlist on iOS, tap a track to play it
    • That row gets a purple tint and the title turns purple
    • Bars animate over the artwork (4 bars, anchored bottom-center, staggered)
  • Pause playback
    • Row stays purple-tinted; artwork shows the play icon (no animation)
  • Skip to another track in the same list
    • Indicator follows to the new row; old row reverts to default styling
  • Same checks on Android
  • Reorderable playlist (drag mode): tinted row still renders correctly
  • Locked / unlisted / deleted tracks remain unaffected when not active

Add a now-playing indicator to track rows in playlist/track list views:
purple row tint and purple title for the active track, plus an animated
equalizer overlay on the artwork while the track is playing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 21, 2026

⚠️ No Changeset found

Latest commit: 9fa9faa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@dylanjeffers dylanjeffers merged commit 8f27fa6 into main May 21, 2026
2 checks passed
@dylanjeffers dylanjeffers deleted the claude/mobile-now-playing-indicator branch May 21, 2026 00:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant