Components
Player Bar
What's playing, along the bottom of the screen, sitting on a TabBar on phones. useMediaPlayer drives your own <audio> or <video>; useMediaSession puts it on the lock screen and the media keys.
Import
import { PlayerBar, useMediaPlayer, useMediaSession } from '@rinzai/zen';Examples
On tab bar
On a phone, it sits on the TabBar beside it, and the page pads its end by both bars' heights (--zen-tab-bar-height and --zen-player-bar-height).
API reference
<PlayerBar>
What's playing, along the bottom of the screen: a glass bar for the cover, the title, the controls and a SeekBar, laid out as you like. It sits on a TabBar beside it (in the same parent), and clears the home indicator where there's none. Its height is kept in --zen-player-bar-height on that parent, for the page to pad its end by. Name it with an aria-label ("Now playing"). Drive it with useMediaPlayer.
No props of its own; it accepts the props of the element it renders.