`tsx
hlsSrc="video.m3u8"
spriteVttUrl="sprites.vtt"
chaptersVttUrl="chapters.vtt"
/>
`

Recording & Upload

$3

Import only the provider you need for optimal bundle size:

`tsx
import { useVideoRecorder } from '@classytic/react-video';
import { createS3Provider } from '@classytic/react-video/providers/s3';
// Or: import { createCloudflareProvider } from '@classytic/react-video/providers/cloudflare';

function Recorder() {
const s3Provider = createS3Provider({ apiBase: '/api/upload' });

const recorder = useVideoRecorder({
provider: s3Provider,
quality: 'medium',
});

return (


`tsx
import { useVideoRecorder } from '@classytic/react-video';

function Recorder() {
const recorder = useVideoRecorder({
provider: 's3', // String: 's3' or 'cloudflare'
providerConfig: { apiBase: '/api/upload' },
quality: 'medium',
});

// ... rest of component
}
`

Note: String-based imports bundle all providers. Use tree-shakeable imports for smaller bundles.

Available Primitives

$3

`tsx
src="video.mp4"
hlsSrc="video.m3u8"
poster="poster.jpg"
spriteVttUrl="sprites.vtt"
/>
`

$3

`tsx
src="short.mp4"
creator={{ name: '@user', avatar: '/avatar.jpg' }}
description="Check this out!"
likes={1250}
comments={45}
onLike={() => {}}
onComment={() => {}}
onShare={() => {}}
/>
`

$3

`tsx
items={[
{ id: '1', src: '/video1.mp4', poster: '/poster1.jpg' },
{ id: '2', src: '/video2.mp4', poster: '/poster2.jpg' },
{ id: '3', src: '/video3.mp4', poster: '/poster3.jpg' },
]}
autoPlay
autoAdvance
smoothTransitions
/>
`

Features:
- Tap left/right edges to navigate
- Tap center to play/pause
- Story progress bars at top
- Smooth crossfade transitions
- Next video preloading

$3

`tsx
src="movie.mp4"
title="Movie Title"
autoPlay={false}
/>
`

Keyboard Shortcuts

| Key | Action |
|-----|--------|
| Space / K | Play/Pause |
| ← / J | Seek backward 10s |
| → / L | Seek forward 10s |
| ↑ | Volume up |
| ↓ | Volume down |
| M | Toggle mute |
| F | Toggle fullscreen |
| 0-9 | Jump to % of video |

TypeScript

Full TypeScript support with exported types:

`tsx
import type {
VideoState,
VideoActions,
QualityLevel,
TextTrack,
Chapter
} from '@classytic/react-video';
`

Architecture

$3

Primitives give you full control over styling and layout:

`tsx
// ❌ Limited customization


// ✅ Full control with Tailwind




`

$3

Pre-built players are reference implementations you can:
1. Use directly for quick prototypes
2. Copy and customize for your design system
3. Study as examples of how to compose primitives

They're not meant to be "one size fits all" - they're starting points.

Upload Providers (Advanced)

$3

This library uses a provider pattern for uploads - you choose where to upload:

`typescript
import { createS3Provider, createCloudflareProvider } from '@classytic/react-video';

// S3 via presigned URLs (no AWS SDK required)
const s3 = createS3Provider({ apiBase: '/api/upload' });

// Cloudflare Stream
const cloudflare = createCloudflareProvider({ apiBase: '/api/upload' });

// Use any provider with VideoRecorder
const recorder = new VideoRecorder(s3, { id: 'recording-123' });
`

Benefits:
- ✅ No vendor lock-in - Switch providers without changing code
- ✅ Small bundle - No cloud SDKs bundled (uses fetch)
- ✅ Testable - Mock providers easily
- ✅ Extensible - Implement custom providers

$3

Implement the UploadProvider interface for custom backends:

`typescript
import type { UploadProvider } from '@classytic/react-video';

const customProvider: UploadProvider = {
name: 'custom',

async initUpload(params) {
const res = await fetch('/my-api/init-upload', {
method: 'POST',
body: JSON.stringify(params),
});
return res.json();
},

async uploadChunk(session, chunk, partNumber) {
// Upload chunk to your backend
return { partNumber, size: chunk.size };
},

async completeUpload(session, parts, metadata) {
// Finalize upload
return { success: true, url: '...' };
},

async abortUpload(session) {
// Cancel upload
},
};

// Use custom provider
const recorder = new VideoRecorder(customProvider, { id: 'rec-123' });
`

Advanced Usage

$3

`tsx