Media Scrubber
A clip timeline with a drawn thumbnail strip, a playhead, a hover preview frame, chapter markers and in/out trim handles.
Preview
Kiln yard · rough cut
Drag the playhead or the ember trim handles. Press I or O to set the trim at the playhead.
0:47 / 2:34In 0:12 · Out 2:18 · 2:06
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | — | Clip length in seconds. |
| renderFrame | (time: number) => ReactNode | — | Draws the frame at a time; used for the strip and the hover preview. |
| frames | number | 10 | Thumbnails in the strip. |
| chapters | { start, title }[] | [] | Markers on the strip; names in the preview. |
| value / defaultValue / onValueChange | number | 0 | Playhead position in seconds. |
| trim / defaultTrim / onTrimChange | [in, out] | [0, duration] | Trim window in seconds; I and O set it at the playhead. |
| minLength | number | 1 | Shortest trim window in seconds. |
| label | string | "Timeline" | Accessible name of the timeline. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.