<!-- source-hash: 1995e98822c487bba791ce8689ae2447 -->
Unified toggle component for selecting between a YouTube URL input and a direct video file upload, managing upload state, progress, and preview rendering internally.

## Key Components

### Exports
- **`VideoSourceSelector`** — Main React component (default + named export)
- **`VideoSourceType`** — Union type: `'youtube' | 'uploaded'`
- **`VideoSourceSelectorProps`** — Full prop interface for the component

### Internal State
| State | Purpose |
|---|---|
| `isUploading` | Tracks active upload operation |
| `uploadProgress` | Numeric progress (0–100) |
| `uploadMessage` | Status message during upload |
| `uploadError` | Error string if upload fails |

### Key Handlers
- **`handleUploadClick`** — Programmatically triggers a hidden `<input type="file">`, invokes `onUploadVideo`, and manages progress callbacks
- **`handleDeleteVideo`** — Clears the uploaded video URL via `onMainVideoUrlChange('')`

## Usage Example

```typescript
import { VideoSourceSelector, VideoSourceType } from './video-source-selector';

function MyForm() {
  const [sourceType, setSourceType] = useState<VideoSourceType>('youtube');
  const [youtubeUrl, setYoutubeUrl] = useState('');
  const [videoUrl, setVideoUrl] = useState('');

  const handleUpload = async (file: File, onProgress?: (p: number) => void) => {
    const formData = new FormData();
    formData.append('file', file);
    // ... upload logic with progress callbacks
    return 'https://cdn.example.com/video.mp4';
  };

  return (
    <VideoSourceSelector
      videoSourceType={sourceType}
      onVideoSourceTypeChange={setSourceType}
      youtubeUrl={youtubeUrl}
      onYoutubeUrlChange={setYoutubeUrl}
      mainVideoUrl={videoUrl}
      onMainVideoUrlChange={setVideoUrl}
      onUploadVideo={handleUpload}
      isAIGenerated={false}
      title="Course Video"
    />
  );
}
```

## Notes

- Switching between `youtube` and `uploaded` tabs **preserves both values** — no data is cleared on toggle
- Accepts optional `VideoPreviewComponent` and `UploadProgressComponent` for custom rendering; falls back to built-in implementations if omitted
- All text labels and placeholders are customizable via props for reuse across different contexts