[dylanjeffers]

Summary

Community feature request from Discord #feature-requests (posted Jun 29, 2026): "Add sample previews on remix competitions".

Adds a play/pause button to each row of the contest page's Stems & Downloads card so entrants can hear a stem (or the full track) before downloading it.

• New useStemPreview hook resolves a signed stream url the same way the playback saga does (signGatedContentRequest + sdk.tracks.getTrackStreamUrl) and plays it through a standalone HTMLAudioElement.
• Stems are not queued through the main player: their metadata has no title or artwork, so the play bar would show an empty row, and a preview shouldn't replace the listener's queue. The main player is paused when a preview starts, and a preview stops if the main player resumes.
• Previews pass skip_play_count=true.
• Only one preview plays at a time; switching rows stops the previous one, and a request counter guards against a slow url lookup starting playback after the user moved on.
• The button is only shown when the listener already has download access (!shouldDisplayPremiumDownloadLocked), so locked stems aren't previewable.

Test plan

• vitest for useStemPreview: plays with skipPlayCount, toggles off, switches stems, pauses the main player, resets on url failure
• tsc and eslint clean for packages/web
• Manually on a contest with stems: play a stem, switch stems, start the main player mid-preview, try a contest whose downloads are locked

Open questions

• The card follows a Figma spec that doesn't include a preview control. Placement (left of the download icon) is a guess; design may want something different.
• I couldn't verify against a running stack that stem tracks always stream through /tracks/{id}/stream for download-gated parents. The button is hidden in the locked case, but worth a manual check on a gated contest.

---

Generated by Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: a9bbb7c

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