Skip to content

feat: playback controls (play/pause, skip, seek, volume, shuffle, repeat)#8

Open
Badbeef1 wants to merge 2 commits intomainfrom
feat/playback-controls
Open

feat: playback controls (play/pause, skip, seek, volume, shuffle, repeat)#8
Badbeef1 wants to merge 2 commits intomainfrom
feat/playback-controls

Conversation

@Badbeef1
Copy link
Copy Markdown
Owner

@Badbeef1 Badbeef1 commented Mar 1, 2026

Summary

  • Switches getNowPlaying from GET /me/player/currently-playing to GET /me/player to also receive shuffle state, repeat state, and device volume
  • Extends NowPlayingSchema with shuffleState, repeatState, and volumePercent — new fields propagate automatically through SSE → useSessionStream → component
  • Adds 8 new Spotify API wrappers (skipNext, skipPrevious, pausePlayback, resumePlayback, setVolume, setShuffle, setRepeat, seekToPosition) and corresponding tRPC mutations, each triggering broadcastRefresh
  • Rewrites NowPlaying.tsx with a full playback controls UI: clickable seek bar, play/pause button, skip back/forward, shuffle toggle, repeat cycle (off → all → one → off), and volume slider (committed on pointerUp to avoid API spam)

Test plan

  • bun run typecheck passes
  • Start playing a track in Spotify, visit session page — Play/Pause, Skip Next/Previous work
  • Click the progress bar — playback seeks to that position
  • Drag volume slider and release — volume changes in Spotify
  • Click shuffle — icon highlights and Spotify reflects the toggle
  • Click repeat — cycles off → context (Repeat icon) → track (Repeat1 icon) → off

🤖 Generated with Claude Code

Badbeef1 and others added 2 commits March 1, 2026 14:41
… repeat)

- Switch GET /me/player (superset of currently-playing) to fetch shuffle, repeat, and volume state
- Add 8 new Spotify API wrappers: skipNext/Previous, pause/resume, seek, setVolume, setShuffle, setRepeat
- Wire up 8 new tRPC mutations that call broadcastRefresh after each action
- Extend NowPlayingSchema with shuffleState, repeatState, volumePercent
- Rewrite NowPlaying.tsx with clickable seek bar, play/pause, skip, shuffle toggle, repeat cycle, and volume slider

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Keep main's split/stack layout toggle and mobile single-column layout.
Update nowPlayingSection variable to pass new playback control props.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant