Player Provider

import { PlayerProvider, usePlayer, usePlayerSelector } from '@/registry/react/PlayerProvider';

function Status() {
  // Re-renders only when the selected value changes.
  const state = usePlayerSelector((p) => p.playbackState);
  return <span>{state}</span>;
}

function Controls() {
  const player = usePlayer(); // the raw BeyondWords player instance
  return <button onClick={() => (player.playbackRate = 1.5)}>1.5x</button>;
}

export function App() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <Status />
      <Controls />
    </PlayerProvider>
  );
}

import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { PlayPauseButton } from '@/registry/react/PlayPauseButton';

export function VideoPlayer() {
  return (
    <PlayerProvider args={{ projectId: 54009, contentId: "5ab6a5e1-689c-4103-962d-e7e68a4258ff", video: true, showUserInterface: false }}>
      <PlayPauseButton />
    </PlayerProvider>
  );
}