Media Provider

<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.

Installation

Install the component

npx shadcn add @limeplay/media-provider

Setup the provider in the root

components/player/media-player.tsx

import { MediaProvider } from "@/components/limeplay/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

components/volume-control.tsx

import { useMediaStore } from "@/components/limeplay/media-provider"

export function VolumeStateControlDemo() {
  const muted = useMediaStore((state) => state.muted)    
  const volume = useMediaStore((state) => state.volume)    

  return (
    // ...
  )
}

Understanding