shadcn.io is not affiliated with official shadcn/ui
Duration Limit Video File Upload Block for React
A list of lessons with bars drawn to scale against a 40 minute axis and a tick at the limit you choose (5, 10 or 30 minutes); rows past it say how far over and carry a Needs trimming badge.
Installation
Overview
Show which videos are too long before anyone publishes them, with this video upload panel for React with Base UI. It is the upload step of Reelcellar, a course-video tool. Every lesson is a row with a bar to scale and a tick at the limit; a Limit select moves the tick and re-judges every row at once. A row past the limit is drawn lighter beyond the tick, says "Over by 4:20" and carries a Needs trimming Badge; each row also names its stage (Uploaded, Processing, Ready). Add videos opens the File Upload picker and the drop zone sits under the list. The panel is ruled by Guides. For course platforms, lesson libraries and any upload with a length cap.
FAQ
What stays local in the demo?
The six lessons, their durations, sizes and stages are typed, and nothing is uploaded, trimmed or processed. A video you pick is listed by name and size and never opened, so its row says "Duration unknown: not read", is drawn as an empty dashed track and takes no verdict. To wire it for real, read each file's duration on the server after upload (or with a video element in the browser), then feed it to the same row.
How does the limit work?
The Limit select holds 5, 10 or 30 minutes. The tick sits at that share of a 40 minute axis, the part of each bar beyond it is drawn lighter, and a row over the limit says by how much. Changing the limit re-judges every row, and the status line says how many are over.
Why is the axis fixed at 40 minutes?
So rows stay comparable: a bar's length means the same thing in every row, and moving the limit moves only the tick. Change AXIS in the file if your lessons run longer.
What happens when I remove a row?
The row goes, the count updates, and focus moves to the next row's Remove button, or to the drop zone when the list is empty. The list is a held scroll region, so the panel keeps its height.