shadcn.io is not affiliated with official shadcn/ui
Scrubbing Video Thumbnails Gallery Block for React
Three video-course posters on their own hairline cells with a length badge, a watched line and a fixed view count, that step through four drawn storyboard frames as you move across them or press the arrow keys.
Installation
Overview
A video-thumbnail gallery for React with Base UI, for Showhow, a video-course platform. Three lessons sit in cells with an overshoot on their own hairlines, three across from md and one on a phone. Each poster is a drawn frame (never a photograph) with a length badge, a thin line for how much you have watched and, under it, the title, the teacher and a view count. Move the pointer across a poster, or focus it and press an arrow key, and it steps through four drawn storyboard frames of the lesson with the chapter's name over each; on a touch screen, tap or drag across it. No video is loaded or played. The courses, teachers and counts are made up for the example. Built from Badge, Progress and Guides.
FAQ
How does scrubbing work?
A range input covers the poster, invisible, and its value is the frame. On a mouse the pointer's place across the poster sets the frame (mirrored in a right-to-left page) and the poster returns to the first frame when the pointer leaves; a keyboard or a finger moves the range itself. Its spoken value names the frame and the chapter.
How does it work with a keyboard?
Tab reaches each poster, which has a visible focus ring, and Left and Right (or Down and Up) step through the frames, Home and End go to the first and last. A poster is a slider, not a link: put the link on the title.
How do I use real video?
Replace each frame's drawing with a still from the lesson (img in the stack), keep the four frames and the chapter names, and put the video link on the title. If your frames come from a sprite sheet, move the object-position instead of stacking images.
Is the watched line live?
No: watched is a fixed number in each lesson's data, and so is the view count. Connect them to your own records.
Related
- Pro
Mini Preview Gallery Widget
Stage and thumbnailsA shared-album widget: a 2 x 2 grid of thumbnails with a +8 count, a View all button that opens a contact sheet of twelve pictures, and Set as cover, which puts a picture first in the widget.
- Pro
Thumbnail Strip Gallery
Stage and thumbnailsA viewer for a lighting shop: a framed 4:3 stage with Previous and Next, its caption beside it, and a scrollable strip of twelve thumbnails whose arrow keys step through the pictures.
- Pro
Stories Gallery
Carousels and slidesA tray of six round highlights for a day-journal app that opens a full-screen viewer with segmented progress bars, tap zones, Previous and Next, a Pause toggle, auto-advance and focus that returns to the highlight.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.
- Pro
Video Seekbar Scrubber Features
Carousels and mediaA features section drawn as a product-tour scrubber: a preview frame in UI over a seekbar with six chapter markers, a tooltip with a miniature of each chapter on hover or focus, and a skip link with one Shine Button.
- Pro
Filmstrip Frame Row Features
Carousels and mediaA storyboard row of five numbered frames for a demo recorder, each a small greyscale drawing with a scene line, in one band of shared hairlines in a snapping scroll area with a visible scrollbar thumb.