Skip to content

Conversation

@mihar-22
Copy link
Member

@mihar-22 mihar-22 commented Feb 2, 2026

Closes #367

Summary

Add the React Player API with createPlayer() factory, player context, and media primitives. This provides typed store access via usePlayer() hook with selector support, and standalone-capable Video/Audio components.

Changes

  • Add PlayerContextProvider, usePlayerContext for base player context
  • Add usePlayer() with selector overload, useMedia(), useMediaRegistration() hooks
  • Add Container component that attaches media to store
  • Add createPlayer({ features }) factory returning typed Provider, Container, usePlayer
  • Update Video component with forwardRef, works standalone (no error outside Provider)
  • Add Audio component mirroring Video implementation
  • Remove deprecated createStore/useStoreContext from @videojs/store/react
  • Update @videojs/store/react to export only useStore, useSelector
Implementation details

usePlayer behavior:

  • Base context (context.tsx): loose types for UI primitives — UnknownStore, UnknownState
  • Typed (createPlayer result): full types for app code — FeatureStore<Features>, UnionFeatureState<Features>
  • Without selector: returns store (no subscription, direct access to methods)
  • With selector: returns selected state (subscribes via shallowEqual)

Video/Audio standalone: useMediaRegistration() returns undefined outside Provider, components just render native elements without error.

Container: Uses forwardRef + useComposedRefs, attaches { media, container } to store when media is set.

Testing

pnpm -F @videojs/react test
pnpm -F @videojs/store test
pnpm typecheck
pnpm lint

- Add PlayerContextValue, PlayerContextProvider, usePlayerContext
- Add usePlayer, useMedia, useMediaRegistration hooks
- Add Container component with forwardRef
- Add createPlayer factory returning typed Provider and usePlayer
- Update Video to use useMediaRegistration, works standalone
- Add Audio component mirroring Video
- Remove createStore/useStoreContext from @videojs/store/react
@vercel
Copy link

vercel bot commented Feb 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
vjs-10-website Skipped Skipped Feb 2, 2026 3:07am

Request Review

@mihar-22 mihar-22 changed the title feat(react): add player context and createPlayer factory feat(react): setup react player api Feb 2, 2026
@mihar-22 mihar-22 merged commit d28dda1 into main Feb 2, 2026
4 checks passed
@mihar-22 mihar-22 deleted the feat/react-player-api branch February 2, 2026 03:08
@github-actions github-actions bot mentioned this pull request Feb 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Player API: React Player API

2 participants