shadcn.io is not affiliated with official shadcn/ui
Podcast Notes Chat Block for React Aria
A listening club's thread beside a twelve-line transcript: Note this posts a quote card with its time into the thread and marks the line, and the notes copy or download as Markdown with their times.
Installation
Overview
Keep the lines worth remembering, with this podcast notes chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Cuepod, a podcast club: three friends listen to episode 41 of a show about old maps, and the pane at the end is the transcript, twelve typed lines with their times. Each line has a ghost Button, "Note this", that posts a quote card into the thread (the time as a chip, the line quoted, who noted it) and marks the line "Noted"; the pane counts "Notes (4)". "Copy notes as Markdown" puts the notes on the clipboard and "Download .md" saves the same text, in transcript order with each time. There is no audio in this demo. The composer's Shine Button, the only colored control, sends your own message. It's built from Button, Badge, Message, Toggle Group, Shine Button and Guides, with a CSS entrance only. For podcast apps, study groups and any club that listens together.
FAQ
What stays in the page, and how do I make it real?
Everything. The transcript is typed in this file, the notes live in the thread's state, the replies come from a short script and nothing is sent. Copy and Download are real, but they only handle the notes you made here. To wire it for real, load a timed transcript from your podcast host, store each note with its episode and seconds, and have the chip seek your player.
What is in the Markdown?
A heading, the episode name, and one bullet per note in transcript order: the time in brackets, the quoted line and who noted it. Copy uses the browser's clipboard, which needs a secure page and may be refused, in which case the status line says so; Download saves a file named for the episode.
What does Noted mean?
That a quote card for that line is already in the thread, from you or from a friend. Pressing it again does not post a second card; the status line says the line is already noted.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, every message starts with a hidden sender and time, and the composer's status line announces what each action did. Each Note this button names its line's time, the transcript scrolls as a list whose buttons are all reachable, and the quote cards are articles named with their time.