Reusable React component for displaying and managing highlight video previews with support for manual file upload, AI-generated badges, and customizable video rendering. ## Key Components ### `HighlightVideoPreviewProps` | Prop | Type | Description | |------|------|-------------| | `highlightVideoUrl` | `string \| null` | URL of the highlight video | | `highlightVideoThumbnail` | `string \| null` | Video thumbnail URL | | `highlightVideoDurationMs` | `number \| null` | Duration in milliseconds | | `highlightVideoSource` | `'manual' \| 'ai_generated' \| null` | Origin of the video | | `onUpload` | `(file: File) => Promise` | Upload handler returning new URL | | `onDelete` | `() => Promise` | Delete handler | | `renderVideoPreview` | `(props) => ReactNode` | Render prop for custom video player | | `uploadProgressComponent` | `ReactNode` | Optional upload progress UI | ### `HighlightVideoPreview` The primary exported component. Renders a label row with optional `AIGeneratedBadge` and duration badge, an upload button, optional progress indicator, and either the video preview (via render prop) or an empty state message. **Internal helper:** `formatDuration(ms)` converts milliseconds to `M:SS` display format. ## Usage Example ```typescript import { HighlightVideoPreview } from './highlight-video-preview'; { const url = await uploadToStorage(file); return url; }} onDelete={async () => { await deleteHighlightVideo(interview.id); }} renderVideoPreview={({ videoUrl, thumbnailUrl, onDelete }) => ( )} /> ``` > **Note:** The `renderVideoPreview` render prop pattern keeps this component entity-agnostic, making it reusable across `CustomerInterview` and `ProductRelease` entities without coupling to a specific player implementation.