Timelinx

ExportDialog

Modal dialog for timeline export progress, download, and error states

ExportDialog is a modal overlay that displays export progress, handles browser compatibility errors, shows a download link on completion, and allows cancellation during encoding.

Live Example

Loading...

Usage

import { ExportDialog } from '@timelinx/ui';
import type { ExportState } from '@timelinx/ui';

<ExportDialog
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  exportState={state}
  onCancel={cancelExport}
  onStartExport={startExport}
  isSupported={true}
/>

Props

Prop

Type

ExportState

interface ExportState {
  status: 'idle' | 'preparing' | 'encoding' | 'complete' | 'error';
  progress: number;       // 0–1
  error: string | null;
  downloadUrl: string | null;
  fileName: string;
}

Standalone

ExportDialog is a standalone component - no context providers needed.

On this page