# Phase 1: Types Split

## Goal

Split the 369-line `types.ts` into domain-specific files and move helper functions to utils.

## Current Structure

```typescript
// types.ts (369 lines)
// Contains:
// 1. Source types (UrlSource, YouTubeSource, VimeoSource, HLSSource, etc.)
// 2. Player types (PlayerMode, AspectRatioValue, VideoPlayerProps, etc.)
// 3. Provider types (VidstackProviderProps, NativeProviderProps, etc.)
// 4. Helper functions (resolvePlayerMode, resolveFileSource, isSimpleStreamSource)
```

## Target Files

### types/sources.ts (~120 lines)

All source type definitions:

```typescript
/**
 * Video source type definitions
 */

// URL source (direct video URL)
export interface UrlSource {
  type: 'url';
  url: string;
  mimeType?: string;
}

// YouTube embed
export interface YouTubeSource {
  type: 'youtube';
  videoId: string;
  startTime?: number;
}

// Vimeo embed
export interface VimeoSource {
  type: 'vimeo';
  videoId: string;
  startTime?: number;
}

// HLS streaming
export interface HLSSource {
  type: 'hls';
  url: string;
}

// DASH streaming
export interface DASHSource {
  type: 'dash';
  url: string;
}

// HTTP Range streaming with auth
export interface StreamSource {
  type: 'stream';
  streamKey: string;
  fileName: string;
  fileSize?: number;
  mimeType?: string;
  getStreamUrl: (streamKey: string) => Promise<string>;
}

// Simple stream (resolved via context)
export interface SimpleStreamSource {
  type: 'stream';
  streamKey: string;
  fileName: string;
  fileSize?: number;
  mimeType?: string;
}

// Blob (ArrayBuffer)
export interface BlobSource {
  type: 'blob';
  data: ArrayBuffer;
  mimeType?: string;
  fileName?: string;
}

// Data URL (base64)
export interface DataUrlSource {
  type: 'data-url';
  dataUrl: string;
  mimeType?: string;
}

// Union of all sources
export type VideoSourceUnion =
  | UrlSource
  | YouTubeSource
  | VimeoSource
  | HLSSource
  | DASHSource
  | StreamSource
  | BlobSource
  | DataUrlSource;
```

### types/player.ts (~100 lines)

Player configuration and main component types:

```typescript
/**
 * Player configuration types
 */

import type { ReactNode, CSSProperties } from 'react';
import type { VideoSourceUnion } from './sources';

// Player mode
export type PlayerMode = 'auto' | 'vidstack' | 'native' | 'streaming';

// Aspect ratio
export type AspectRatioValue = number | 'auto' | 'fill';

// Common settings
export interface CommonPlayerSettings {
  autoPlay?: boolean;
  muted?: boolean;
  loop?: boolean;
  playsInline?: boolean;
  controls?: boolean;
  preload?: 'none' | 'metadata' | 'auto';
}

// Common events
export interface CommonPlayerEvents {
  onPlay?: () => void;
  onPause?: () => void;
  onEnded?: () => void;
  onTimeUpdate?: (currentTime: number) => void;
  onError?: (error: Error) => void;
  onLoadStart?: () => void;
  onCanPlay?: () => void;
}

// Error fallback props
export interface ErrorFallbackProps {
  error: Error | null;
  source: VideoSourceUnion;
  retry?: () => void;
}

// Main component props
export interface VideoPlayerProps extends CommonPlayerSettings, CommonPlayerEvents {
  source: VideoSourceUnion;
  mode?: PlayerMode;
  aspectRatio?: AspectRatioValue;
  poster?: string;
  className?: string;
  style?: CSSProperties;
  errorFallback?: (props: ErrorFallbackProps) => ReactNode;
}

// Ref API
export interface VideoPlayerRef {
  play: () => Promise<void>;
  pause: () => void;
  seek: (time: number) => void;
  setVolume: (volume: number) => void;
  setMuted: (muted: boolean) => void;
  requestFullscreen: () => Promise<void>;
  exitFullscreen: () => Promise<void>;
  readonly currentTime: number;
  readonly duration: number;
  readonly paused: boolean;
  readonly muted: boolean;
  readonly volume: number;
  readonly isFullscreen: boolean;
}
```

### types/provider.ts (~80 lines)

Provider-specific types:

```typescript
/**
 * Provider-specific types
 */

import type { ReactNode } from 'react';
import type { VideoSourceUnion, StreamSource, BlobSource, DataUrlSource } from './sources';
import type { CommonPlayerSettings, CommonPlayerEvents, AspectRatioValue, ErrorFallbackProps } from './player';

// Vidstack provider props
export interface VidstackProviderProps extends CommonPlayerSettings, CommonPlayerEvents {
  source: VideoSourceUnion;
  aspectRatio?: AspectRatioValue;
  poster?: string;
  className?: string;
  errorFallback?: (props: ErrorFallbackProps) => ReactNode;
}

// Native provider props
export interface NativeProviderProps extends CommonPlayerSettings, CommonPlayerEvents {
  source: VideoSourceUnion;
  aspectRatio?: AspectRatioValue;
  poster?: string;
  className?: string;
  disableContextMenu?: boolean;
}

// Stream provider props
export interface StreamProviderProps extends CommonPlayerSettings, CommonPlayerEvents {
  source: StreamSource | BlobSource | DataUrlSource;
  aspectRatio?: AspectRatioValue;
  poster?: string;
  className?: string;
  errorFallback?: (props: ErrorFallbackProps) => ReactNode;
}

// File source resolution options
export interface ResolveFileSourceOptions {
  fileName: string;
  content: string | ArrayBuffer;
  mimeType?: string;
}

// Context value
export interface VideoPlayerContextValue {
  getStreamUrl?: (streamKey: string) => Promise<string>;
}

export interface VideoPlayerProviderProps {
  getStreamUrl: (streamKey: string) => Promise<string>;
  children: ReactNode;
}
```

### types/index.ts

Re-export all types:

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

// Source types
export type {
  UrlSource,
  YouTubeSource,
  VimeoSource,
  HLSSource,
  DASHSource,
  StreamSource,
  SimpleStreamSource,
  BlobSource,
  DataUrlSource,
  VideoSourceUnion,
} from './sources';

// Player types
export type {
  PlayerMode,
  AspectRatioValue,
  CommonPlayerSettings,
  CommonPlayerEvents,
  ErrorFallbackProps,
  VideoPlayerProps,
  VideoPlayerRef,
} from './player';

// Provider types
export type {
  VidstackProviderProps,
  NativeProviderProps,
  StreamProviderProps,
  ResolveFileSourceOptions,
  VideoPlayerContextValue,
  VideoPlayerProviderProps,
} from './provider';
```
