Video Playlist Now Playing

FreeNew

Use this when a page plays one video at a time from a list: a stage with the current video and a peeking row of cards whose pressed state shows what is playing.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

defaultId

Guide and examples

When to use it

Use it for course lessons, product videos and talks, where the next items should stay visible under the player.

Do not use it for a long catalogue. Use a paged list with search.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/video-playlist-now-playing.json

It composes Carousel Peek, which the CLI installs for you.

Usage

import { VideoPlaylistNowPlaying } from "@/components/video-playlist-now-playing"

<VideoPlaylistNowPlaying
  label="Course lessons"
  videos={lessons}
  onSelect={(video) => player.load(video.id)}
/>

Props

Prop	Type	Default	Description
`videos`	`PlaylistVideo[]`	`-`	Each video has an id, title, duration, description and poster node.
`label`	`string`	`-`	Accessible name of the playlist carousel.
`defaultId`	`string`	`first`	Id of the video that starts selected.
`onSelect`	`(video: PlaylistVideo) => void`	`-`	Called when a card is chosen.

Accessibility

Each card is a button with aria-pressed for the video that is playing, and its name includes the title and duration.
The stage heading changes with the selection and has a polite live region so the change is announced once.
Cards are real buttons inside the carousel, so focusing one brings it into view.
Keyboard: Tab: move through cards
Keyboard: Enter or Space: play the card

Testing

The pattern ships with a Testing Library test (video-playlist-now-playing.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.