shadcn.io is not affiliated with official shadcn/ui
Video Page Music Block for React
A music video page with a drawn stage frame and control bar, views, like and dislike toggles that hold one vote, a description, an Up next list, and a comments band with Top and Newest and a composer that posts locally.
Installation
Overview
Give a live session its own page, with this music video page for React with Base UI. It shows one Kinefold video in a hairline frame with a plus mark on each corner: a 16:9 frame that draws a stage in greyscale, with light beams over a silhouette, under the words "No video in this demo", and a control bar with play or pause, a scrubber and the time. Play is the only Shine Button. Under it are the title, the channel, the views in compact notation, like and dislike Toggles that hold one vote at a time and add one to their count while pressed, and a Collapsible description. A side cell lists four Up next videos with drawn thumbnails. A comments band has four typed comments with Avatars, a Toggle Group that orders them Top or Newest, and a composer with a Textarea: a posted comment is added to the page only and shown first. On a phone the frame comes first, then Up next, then the comments. It's built from Toggle, Toggle Group, Textarea, Collapsible, Avatar, Shine Button, Button and Guides, with a CSS entrance only. For artist channels, live-session archives and any page with a video and a thread.
FAQ
How do I use my own video and comments?
Edit VIDEO (title, channel, length, views, likes and dislikes), DESCRIPTION, COMMENTS and UP_NEXT. Each comment has a name, initials, its text, a like count, an ISO time and the time as it is shown. To play a real video, replace the drawn frame with a video element or your player, keep the control bar's order and names, and set the scrubber from its time updates. The stage is drawn in code, so no image is needed.
How do likes and dislikes work?
They are two toggle buttons that hold one vote at a time. Pressing Like adds one to its count and, if Dislike was pressed, takes that one back; pressing the pressed button again takes the vote back. The counts are shown in compact notation, and a polite status line says what happened, for example "You liked this video." Votes live in the page and reset on a reload; send them to your API from the two handlers.
What does Post comment do, and what stays local?
It adds the comment to the list on this page only, switches the order to Newest so it shows first, empties the box and says "Posted here only. Nothing was sent." An empty box is refused with a message instead. To make it real, send the text to your API in the submit handler and add the comment returned by the server, with its real id and time.
Does anything play?
No. The frame says so: no video plays in this demo. Play and Pause change the button and the status line, and the position moves only when you drag the scrubber. The scrubber is a drawn bar over a native range input, so it is named Position in the video, moves with the arrow keys and reads its value as minutes and seconds.
How do I use it from the keyboard?
Tab runs the control bar, the two vote buttons, the description, the Up next videos, the Top and Newest group, the comment box and Post comment. Every control is named; the vote buttons say Like or Dislike before their count. The Up next videos are buttons that say, in the status line, that nothing opens in this demo; in your app they are links.