Unified section component that combines highlight video configuration, AI-powered generation, and video preview/upload into a single composable UI block. ## Key Components ### `HighlightVideoCombinedSection` The primary export. Orchestrates three sub-sections in a vertical stack: 1. **`HighlightConfigSection`** — Duration and subtitle burn settings 2. **`AIEnrichSection`** — Generation trigger button with status feedback and cancel support 3. **Preview + Upload Panel** — Displays the current highlight video or an empty state, with a manual upload button ### `HighlightVideoCombinedSectionProps` Full interface grouping props into three logical namespaces: - **Generation** — `onGenerateHighlight`, `isProcessing`, `canEnrich`, `requiredFields`, `status`, `hasResult` - **Preview** — `highlightVideoUrl`, `highlightVideoSource`, `onUpload`, `onDelete`, `renderVideoPreview` ## Usage Example ```typescript setDuration(s)} // Generation onGenerateHighlight={handleGenerate} isProcessing={isGenerating} canEnrich={hasTranscription} requiredFields={[{ field: 'transcription', label: 'Transcription' }]} status={generationStatus} hasResult={!!highlightUrl} showCancel onCancel={handleCancel} // Preview highlightVideoUrl={highlightUrl} highlightVideoSource="ai_generated" highlightVideoDurationMs={118000} onUpload={async (file) => uploadToStorage(file)} onDelete={async () => deleteHighlight()} renderVideoPreview={({ videoUrl, title, thumbnailUrl, onDelete }) => ( )} /> ``` ## Notes - `renderVideoPreview` follows a render-prop pattern, giving callers full control over the player UI. - The upload button creates a hidden `` via `document.createElement` — no DOM ref required. - Button label auto-toggles between `"Generate Highlight"` and `"Regenerate Highlight"` based on `hasResult`. - Default description is derived from `targetDurationSeconds`: `"Generate a N-minute summary video using Claude AI + Shotstack"`.