Components
Media Provider
Setup zustand singleton store for media player accessible via hooks.
<MediaProvider /> is a composition of React's context and zustand store. This component exposes a hook useMediaStore which is an implementation of zustand store getter.
As we keep on adding bound slices to the store in lib/create-media-store.ts file this hook will act as a getter for those values.
Usage
- Setup the provider in the root
import { MediaProvider } from "@/registry/default/ui/media-provider"
// ... other imports
export function MediaPlayer() {
return (
<MediaProvider>
<PlayerHooks />
<Suspense>
<Layout.RootContainer height={720} width={1280}>
<Layout.PlayerContainer>
<MediaElement />
<Layout.ControlsContainer>
<BottomControls />
</Layout.ControlsContainer>
</Layout.PlayerContainer>
</Layout.RootContainer>
</Suspense>
</MediaProvider>
)
}- Call the store anywhere inside the component tree
import { useMediaStore } from "@/registry/default/ui/media-provider"
export function VolumeStateControlDemo() {
const muted = useMediaStore((state) => state.muted)
const volume = useMediaStore((state) => state.volume)
return (
// ...
)
}Prerequisites
The above example relies on volume slice which should be added first.