shadcn.io is not affiliated with official shadcn/ui
Video Timestamp Comments Block for React Aria
A film review window with a drawn 16:9 frame, a time scrubber with a marker for each comment, Back 5 s and Forward 5 s, chapter buttons, and a side list whose composer reads Comment at 1:12 from the current time.
Installation
Overview
Leave feedback at the exact second of a film, with this timestamp review window for React with React Aria. There is no header above the window: its top bar holds the title and the one Shine Button, Post comment. The stage is a drawn greyscale 16:9 frame that says "No video in this demo"; its picture follows the time. Under it a scrubber (a native range input) runs from 0:00 to 2:30 with a marker button for each comment, Back 5 s and Forward 5 s step the time, and four chapter buttons jump to a scene. The side list starts with a composer that reads "Comment at 1:12" from the current time, then the comments in time order; pressing a comment's time (or its marker) seeks there and outlines the comment. The window's height never changes, and below the medium breakpoint the list sits under the stage. It is built from Button, Shine Button, Textarea, Field, Avatar and Guides, with a CSS entrance only. For video, audio and screen-recording review.
FAQ
How do I use my own video?
Replace the Frame component with a video element that reads the same seconds (set currentTime from it, and update seconds from timeupdate), then edit LENGTH, CHAPTERS and LINES. A comment has the second it was written at, an author and the text; markers and the list are placed from the seconds, so they stay right at any size.
How do I move through time without a mouse?
Tab to the time slider and use the arrow keys (one second), Page Up and Page Down, Home and End. Back 5 s and Forward 5 s are buttons, each comment has a marker button on the scrubber and a time button in the list, and Ctrl or Command and Enter in the composer posts.
What stays local, and how do I make it real?
Everything. Nothing plays, and Post comment adds a comment to the page at the current time and says "Nothing was sent." For real, send the second, the text and the video version to your server, and keep the comment with the version so a re-cut does not point at the wrong frame.
Is it accessible?
The drawn frame is hidden and described in the caption. The scrubber is a native range input with a spoken value ("1:12 of 2:30"), each marker is a button named "Comment at 0:34 by Matthias Greaves", and the time on a comment is a button, not a link. A status line speaks seeks and posts. The time line stays left to right in right-to-left pages, like any time line.