Renders the track MediaPlayer seeks on: an audio file's waveform, or a plain bar for a stream, a video, or audio whose waveform isn't in yet. The dump page's audio preview shows one too, beside its cover.
Renders a slider over the media's timeline. A pointer seeks where it lets
go, showing where it is while held; arrows seek KEY_STEP seconds,
Home and End to either end. The played part of the waveform is the same
path clipped to the playhead by a nested <svg>, so it moves smoothly
within a bar.
Passed to Scrubber by MediaPlayer and FilePreview. Times are in seconds.
- current: number
- duration: number
-
onScrub: (time: number | null) => void
Called with the time under the pointer while it holds the scrubber, and with null once it lets go, so MediaPlayer's clock can follow the drag.
-
onSeek: (time: number) => void
Called once a click, a drag or a key lands somewhere.
-
peaks: number[] | null
The waveform's heights from 0 to 1; without them, a plain bar.
-
slim: boolean
Draws the thin bar of a video's controls instead of the audio track.
Usage
import * as mod from "src/components/player/Scrubber.tsx";