<!-- source-hash: 3352f684fadb713012ab77b57ce2cf6a -->
Unified React component for managing highlight video generation and playback, combining AI-powered generation controls, manual upload, and video preview into a single configurable UI.

## Key Components

### `HighlightVideoSection` (default export)

The primary component rendering three distinct sections:

- **AI generation panel** — Wraps `AIEnrichSection` with Claude AI + Shotstack integration, progress reporting, and optional cancel support
- **Preview/upload panel** — Displays the current highlight video (via a custom `VideoPreviewComponent` or the built-in `Video` component), upload trigger, AI-generated badge, duration badge, and delete control

### `HighlightVideoSectionProps`

Full TypeScript interface controlling all behavior. Key prop groups:

| Group | Props |
|---|---|
| Current video state | `highlightVideoUrl`, `highlightVideoThumbnail`, `highlightVideoDurationMs`, `highlightVideoSource` |
| AI generation | `onGenerateHighlight`, `isGenerating`, `generationProgress`, `generationStatus`, `generationStatusMessage` |
| Upload | `onUploadHighlight`, `isUploading` |
| Cancellation | `onCancelGeneration`, `isCancelling` |
| Extensibility | `VideoPreviewComponent`, `disabled`, `className` |

## Usage Example

```typescript
import { HighlightVideoSection } from './highlight-video-section';

<HighlightVideoSection
  highlightVideoUrl={interview.highlightUrl}
  highlightVideoThumbnail={interview.highlightThumbnail}
  highlightVideoSource="ai_generated"
  targetDurationSeconds={180}
  onTargetDurationChange={(secs) => setTargetDuration(secs)}
  onGenerateHighlight={handleGenerateHighlight}
  isGenerating={isGenerating}
  generationProgress={progress}
  generationStatus={status}
  canGenerateHighlight={!!interview.transcriptId}
  requiredFields={[{ label: 'Transcript', fulfilled: !!interview.transcriptId }]}
  onUploadHighlight={async (file) => uploadHighlight(file)}
  onDeleteHighlight={handleDeleteHighlight}
  onCancelGeneration={handleCancel}
/>
```

**Source:** [`highlight-video-section.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/highlight-video-section.tsx)