API & Playground
The public API stays intentionally small in v1. Consumers pass track metadata plus a few playback and positioning props.
type JukeboxTrack = { videoId: string; title: string; artist?: string;}; type JukeboxTheme = "glass" | "simple" | "sunset" | "ride";type JukeboxChrome = "classic" | "wallet" | "ride"; type JukeboxProps = { tracks: JukeboxTrack[]; autoplay?: boolean; showSeekBar?: boolean; onPlay?: () => void; onPause?: () => void; onTrackChange?: (track: JukeboxTrack, index: number) => void; onEnd?: () => void; keyboard?: boolean; position?: | "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center"; theme?: JukeboxTheme; chrome?: JukeboxChrome; offset?: number | { x: number; y: number }; portal?: boolean; className?: string;};Props
| Prop | Type | Notes |
|---|---|---|
tracks | JukeboxTrack[] | Required. Empty and single-track cases are handled safely. |
position | edge preset | Controls top/bottom placement and supports left, right, or center alignment. |
theme | "glass" | "simple" | "sunset" | "ride" | Optional. Defaults to "glass". |
chrome | "classic" | "wallet" | "ride" | Optional. Switches shell and control styling. Defaults to "classic". |
autoplay | boolean | Defaults to "true" and starts muted on first load. |
offset | number | { x, y } | Applies spacing from the chosen edge preset. |
portal | boolean | Defaults to "true". Inline mode is opt-in. |
className | string | Root-level hook for limited customization in v1. |
showSeekBar를 false로 전달하면 기본 확장 플레이어의 seek bar를 숨길 수 있습니다.
Playground
The live preview below renders inline for docs only. The package default remains portal rendering on the viewport, and you can switch themes and chrome presets here to compare the available combinations.