# Phase 4: Components Organization

## Goal

Move standalone components to a dedicated `components/` folder for consistency.

## Current Location

```
VideoPlayer/
├── VideoPlayer.tsx          # Main orchestrator
├── VideoControls.tsx        # Vidstack controls
├── VideoErrorFallback.tsx   # Error UI
└── providers/               # Provider implementations
```

## Target Location

```
VideoPlayer/
├── components/
│   ├── index.ts
│   ├── VideoPlayer.tsx
│   ├── VideoControls.tsx
│   └── VideoErrorFallback.tsx
└── providers/               # Unchanged
```

## Files to Create

### components/index.ts

```typescript
/**
 * VideoPlayer components - Public API
 */

export { VideoPlayer } from './VideoPlayer';
export { VideoControls } from './VideoControls';
export {
  VideoErrorFallback,
  createVideoErrorFallback,
} from './VideoErrorFallback';
```

## Component Updates

### VideoPlayer.tsx

Update imports to use new paths:

```typescript
// Before
import { VidstackProvider } from './providers';
import { NativeProvider } from './providers';
import { StreamProvider } from './providers';
import { resolvePlayerMode, isSimpleStreamSource, resolveStreamSource } from './types';
import { useVideoPlayerContext } from './VideoPlayerContext';

// After
import { VidstackProvider, NativeProvider, StreamProvider } from '../providers';
import { resolvePlayerMode, isSimpleStreamSource, resolveStreamSource } from '../utils';
import { useVideoPlayerContext } from '../context';
```

### VideoControls.tsx

Update imports:

```typescript
// Before
import type { ... } from './types';

// After
import type { ... } from '../types';
```

### VideoErrorFallback.tsx

Update imports:

```typescript
// Before
import type { ErrorFallbackProps } from './types';

// After
import type { ErrorFallbackProps } from '../types';
```

## Notes

- VideoPlayer.tsx is the main entry point, moved to components/
- Providers stay in their own folder (already well-organized)
- Context moves to context/ folder
- All imports updated to reflect new structure
