Skip to content

React: Add <Video> component and utility hooks #294

@mihar-22

Description

@mihar-22

Summary

The @videojs/react package needs a Video component that auto-attaches to the store context and utility hooks for common React patterns.

Requirements

Video Component

  • Automatically attach the video element to the nearest store context on mount
  • Support React 19 ref cleanup pattern for automatic detach
  • Accept all standard video element props and children (source, track elements)
  • Work with external refs

Utilities

  • useComposedRefs(...refs): Compose multiple refs into a single callback ref
  • composeRefs(...refs): Non-hook version for use outside components

Re-exports

For convenience, re-export from @videojs/store/react:

  • createStore, useStoreContext
  • useSelector, useRequest, useTasks
  • Related types

Testing

  • Set up vitest testing infrastructure for the package
  • Add tests for Video component and useComposedRefs utility

Usage Example

import { createStore, Video } from '@videojs/react';
import { media } from '@videojs/core/dom';

const { Provider, useSelector, useRequest } = createStore({
  slices: [media.playback],
});

function App() {
  return (
    <Provider>
      <Video src="video.mp4" />
      <Controls />
    </Provider>
  );
}

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions