Video · Marketing & editorial
Mini player
Picture-in-picture mini player with floating, inline, and dock variants, collapsed/expanded states, queue metadata, action slots, progress, and close/expand controls.
@byronwade/foundation@byronwade/thumbnail@byronwade/button@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
3 examples
Default, Dock, Expanded.
Tagged for youtube, video, tier:simple
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "floating" | "inline" | "dock" | floating | Controls the mini-player layout. |
| size | "sm" | "md" | "lg" | md | Controls player scale. |
| state | "default" | "collapsed" | "expanded" | default | Controls how much secondary content is shown. |
| title | string | - | Now-playing title. |
| playing | boolean | - | Controlled play state. |
| queueLabel | ReactNode | - | Optional playlist or queue context. |
| metadata | ReactNode | - | Optional channel, episode, or watch-progress details. |
| actions | ReactNode | - | Secondary control slot. |
| onPlayingChange | (playing: boolean) => void | - | Fired when play toggles. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/thumbnail | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/mini-player.tsx |
| Default example | content/examples/mini-player/default.tsx |
| Dock example | content/examples/mini-player/dock.tsx |
| Expanded example | content/examples/mini-player/expanded.tsx |