Export Pipeline

import {
  exportVideo,
  useTimelineEngine,
  type ExportOptions,
  type ExportProgress,
} from '@elah/editor'
import { useState } from 'react'

export function ExportButton() {
  const engine = useTimelineEngine()
  const [progress, setProgress] = useState<ExportProgress | null>(null)

  const handleExport = async () => {
    // fps comes from project.fps — you don't pass it to exportVideo.
    const project = engine.getProject()

    const options: ExportOptions = {
      videoCodec: 'avc',       // 'avc' | 'vp9' | 'vp8' — default: 'avc'
      audioCodec: 'aac',       // 'aac' | 'opus'
      videoBitrate: 8_000_000, // 8 Mbps (default)
      audioBitrate: 192_000,
      outputHeight: 1080,      // optional: the stage's SHORT edge in px; default = native short edge
      onProgress: (p) => setProgress(p),
    }

    try {
      const blob = await exportVideo(project, options)

      // Download the file
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'export.mp4'
      a.click()
      URL.revokeObjectURL(url)
    } finally {
      setProgress(null)
    }
  }

  const percent = progress
    ? Math.round((progress.frame / Math.max(1, progress.totalFrames)) * 100)
    : 0

  return (
    <div>
      <button onClick={handleExport} disabled={!!progress}>
        {progress ? `Exporting ${percent}%` : 'Export MP4'}
      </button>
      {progress && <progress value={percent} max={100} />}
    </div>
  )
}

import { lazyExportVideo } from '@elah/editor'

// Identical signature to exportVideo — resolves with an MP4 Blob.
// mediabunny is only loaded on first call.
const blob = await lazyExportVideo(project, options)

// AudioPlaybackController is wired by EditorProvider automatically.
// Control master output volume / mute via the playback store:
import { usePlaybackStore } from '@elah/editor'

const volume = usePlaybackStore((s) => s.volume)      // 0..1
const setVolume = usePlaybackStore((s) => s.setVolume)
const muted = usePlaybackStore((s) => s.muted)
const toggleMute = usePlaybackStore((s) => s.toggleMute)

// To disable the audio pipeline entirely, pass enableAudio to Preview
// (default: true):
<Preview demuxerFactory={demuxerFactory} enableAudio={false} />

interface ExportProgress {
  frame: number        // current frame being encoded
  totalFrames: number  // total frames in the project
}

// Derive a percentage yourself from frame / totalFrames.
const blob = await exportVideo(project, {
  onProgress: (p) => {
    const percent = Math.round((p.frame / Math.max(1, p.totalFrames)) * 100)
    console.log(`${percent}% (${p.frame}/${p.totalFrames})`)
  },
})