Media Controls — cinder playground

Overview

Accessible playback controls for play, pause, and replay actions with optional progress display.

<script lang="ts">
  import { MediaControls } from '@lostgradient/cinder/media-controls';
</script>

You need waveform visualization or Web Audio integration — wire that separately.
You need a full media player UI with seek scrubbing — use a dedicated player component.

Live preview

Use when

Avoid when

You need waveform visualization or Web Audio integration — wire that separately.
You need a full media player UI with seek scrubbing — use a dedicated player component.

Play, pause, and replay actions with optional progress. Compact icon-only layout suitable for a toolbar.

All states: paused, playing, loading, disabled, and unavailable.

Props for media-controls
Name	Type	Default	Description
`playing`	`boolean`	`false`	Current playback state.
`replay`	`boolean`	`false`	Show a replay action instead of play/pause when the track has ended.
`disabled`	`boolean`	`false`	Disable all controls.
`loading`	`boolean`	`false`	Show a loading spinner and prevent interaction while media is buffering.
`unavailable`	`boolean`	`false`	Controls are unavailable (e.g. media source missing).
`progress`	`number`		Progress value between 0 and 1. Omit to hide the progress bar.
`progressLabel`	`text`	`'Playback progress'`	Human-readable accessible label for the progress bar.
`layout`	`'compact' \| 'expanded'`	`'compact'`	Layout mode: `compact` renders icon-only, `expanded` renders icon+label.
`onPlay`	`() => void`		Called when the user triggers playback.
`onPause`	`() => void`		Called when the user pauses playback.
`onReplay`	`() => void`		Called when the user triggers replay.