Components
MediaPlayer
Unstable: the controls for a podcast, a tutorial or a product video, artwork, title, a scrubber and play, pause, back and forward. It holds no media: wire it to your audio or video. Import it from @nizivo/react/unstable/media-player.
Examples
Basic
A player, paused at 1:12 of 3:48. Wire playing, currentTime, duration and the handlers to your <audio> or <video>; the player holds no media.
import type { JSX } from 'react';
import { MediaPlayer } from '@nizivo/react/unstable/media-player';
export function MediaPlayerExample(): JSX.Element {
return (
<MediaPlayer
title="Making the autumn glaze"
subtitle="Moss & Kiln · Studio notes"
playing={false}
currentTime={72}
duration={228}
/>
);
}
Import
import { MediaPlayer } from '@nizivo/react/unstable/media-player';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/slider.css
import '@nizivo/react/css/media-player.css';Static or interactive
Client. It is controls only. How to choose.
Wiring it
Pass playing, currentTime and duration (in seconds) from your <audio> or <video>, and
handle onPlayingChange, onSeek, onSkipBack and onSkipForward. It never starts playback on
its own, so it never autoplays.
Accessibility
Play and Pause are one button whose name changes with its icon. The scrubber is a
Slider named "Seek" and read as "1 minute 12 seconds of 3 minutes 48
seconds"; its arrow keys seek 5 seconds. The design also asks for aria-pressed on the play button,
but a name that changes already says the state, and the two together say it twice.
Props
Client component Renders data-slot="media-player" with the class nz-media-player. Props: MediaPlayerProps. Source: src/unstable/media-player/media-player.client.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
artwork | ReactNode | – | The artwork: an image, decorative unless you name it. |
currentTimerequired | number | – | Where it is, in seconds. |
durationrequired | number | – | How long it is, in seconds. |
labels | Partial<MediaPlayerLabels> | – | |
locale | string | 'en-US' | BCP 47 tag for the times. |
onPlayingChange | (playing: boolean) => void | – | |
onSeek | (time: number) => void | – | The scrubber moved: seek the media there, in seconds. |
onSkipBack | () => void | – | |
onSkipForward | () => void | – | |
playingrequired | boolean | – | Whether the media plays. |
render | RenderProp<Record<string, never>> | – | Must render a |
subtitle | ReactNode | – | Under the title: who and where. |
titlerequired | ReactNode | – |
- Also takes every attribute of
<div>excepttitle. (Omit<ComponentPropsWithRef<"div">, "title">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
MediaPlayerLabelstypeimport type { MediaPlayerLabels } from '@nizivo/react/unstable/media-player'MediaPlayer's own strings (§16.4): serialisable, English defaults.
Name Type Default Description pauserequiredstring'Pause'The toggle's name while playing.
playrequiredstring'Play'The toggle's name while paused.
positionrequiredstring'{current} of {duration}'The scrubber's value in words:
{current}and{duration}.seekrequiredstring'Seek'The scrubber's name.
skipBackrequiredstring'Skip back'skipForwardrequiredstring'Skip forward'MediaPlayerPropstypeimport type { MediaPlayerProps } from '@nizivo/react/unstable/media-player'The props of
MediaPlayer, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
media-player.nz-media-player | MediaPlayerroot (takes render) | none |
media-player-control.nz-media-player-control | MediaPlayerinner element (CSS only); interactive, focus: self | none |
media-player-title.nz-media-player-title | MediaPlayerinner element (CSS only) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-media-player, .nz-media-player-artwork, .nz-media-player-control, .nz-media-player-controls, .nz-media-player-meta, .nz-media-player-play, .nz-media-player-scrubber, .nz-media-player-subtitle, .nz-media-player-times, .nz-media-player-title, .nz-slider.
Tokens this stylesheet reads (21)
--nz-bg-brand, --nz-bg-brand-hover, --nz-bg-hover, --nz-bg-muted, --nz-bg-surface, --nz-elevation-3, --nz-font-body-s, --nz-font-label-l, --nz-font-label-m, --nz-radius-2xl, --nz-radius-full, --nz-radius-xl, --nz-space-10, --nz-space-2, --nz-space-4, --nz-space-5, --nz-space-6, --nz-text-on-brand, --nz-text-primary, --nz-text-secondary, --nz-tracking-label-l
Accessibility
These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:
media-player-control: draws the focus outline itself on keyboard focus.
Keyboard
To be written.
LivePulse
Unstable: a live or online mark, a dot whose ring grows and fades, always beside the words that say what is live. Import it from @nizivo/react/unstable/live-pulse.
Menu
A menu of actions or links opened from a button, with groups, separators, shortcuts, a critical tone, and checkbox and radio items. For choosing a form value, use Select; for navigation between views, use TabNav.