Renders an audio or video file with the site's own controls. GlobalPlayer plays files and streams in it; the file previews of the dump pages and of the dump form play a file in it.
Renders a media element with the site's own controls. Audio seeks on its waveform when it has one; video gets a slim bar, a fullscreen button, and controls that hide while it plays. Whether it plays is read from the element's own events, so a media key or the OS's controls show too. The volume carries over to the next MediaPlayer, which matters since GlobalPlayer mounts a new one for each track.
Passed to MediaPlayer by GlobalPlayer, which wires the callbacks and the handles to PlayerContext, and by the file previews, which pass only the media.
- autoplay: boolean
- kind: "audio" | "video"
-
onEnded: () => void
Called at the media's end, where GlobalPlayer plays the next item.
-
onError: () => void
Called when the media fails to load or decode, where a stream's URL is re-resolved.
- onPlayStateChange: (playing: boolean) => void
-
onTimeUpdate: () => voidtime: number,duration: number
-
poster: string
Shown before a video plays.
-
seekRef: { current: ((t: number) => void) | null; }
Receives its seek handle while mounted, for PlayerContext's
seekTo. - src: string
-
startTime: number
In seconds. Read on mount only: later seeks go through
seekRef. -
toggleRef: { current: (() => void) | null; }
Receives its play/pause handle while mounted, for
togglePlay. -
waveform: PeaksSource
Where an audio file's waveform comes from. Without it, as for a stream whose bytes another site serves, audio seeks on a plain bar.
Usage
import * as mod from "src/components/player/MediaPlayer.tsx";