shadcn.io is not affiliated with official shadcn/ui
Collab Workspace Music Block for Radix UI
A shared mix with five versions: pick a base and a version to compare with two radios, read the difference track by track in words (Bass: -2 dB, Vocal stem: new take, Drums: unchanged), merge one into the other to move the Current marker, and keep a comment thread whose composer adds to the top.
Installation
Overview
Let a band see what changed between two mixes before they agree on one, with this collaboration workspace for React with Radix UI. It holds one shared mix of Bouncepoint, a collaboration workspace, in a hairline frame with a plus mark on each corner, with an Avatar stack of the four collaborators in the header and three columns. The first is a version list, v1 to v5, with the author, a note and a fixed time, a Base and a Compare radio on each row and a Current badge. The second is the difference between the two you picked, one row for each of five tracks with a glyph and words (a level change in dB, a new take, added, removed, unchanged) and the block's one primary, a Shine Button that reads "Merge v5 into v4" and moves the Current marker. The third is a thread of four comments with a Textarea and a Button to post. It's built from Avatar, Badge, Shine Button, Textarea, Button and Guides, with a CSS entrance only. For music, video and design review tools.
FAQ
How do I fill it with my versions?
Edit VERSIONS: each has an id, an author, a note, a display time and an ISO when, and a mix listing, for each track it contains, its level in dB and which take it uses. Tracks are listed in TRACKS. Everything else, the rows of the difference, their glyphs and the count of changed tracks, is worked out from the two versions you pick.
How is the difference worked out?
Track by track, from the base to the version you compare. A track in only one of them is added or removed; otherwise a different level is read as a signed number of dB and a different take as a new take, and both are shown together if both changed. A track that is the same says unchanged, and picking the same version twice says nothing differs.
What does Merge do?
In the example it moves the Current marker to the version you compare and says it merged in this demo, and it refuses with a reason when the two versions are the same or the version is already current. Replace the handler with a call that merges the two mixes on your server and set the Current marker from its result.
How do I use it from the keyboard?
Each column of radios is a native group, so the arrow keys move within Base or within Compare and Tab leaves the group. The Merge button explains itself when it cannot act, the thread is a named region you can scroll with the keyboard, and one polite status line says what changed. Colour never carries the difference: every row says it in words.