@codivion/editor-preview-area/README.md

Preview area component for timeline video editor projects

# @timeline-editor/preview-area

A React component for rendering video timeline projects with real-time preview capabilities.

## Installation

```bash
npm install @timeline-editor/preview-area
```

## Usage

```tsx
import PreviewArea from '@timeline-editor/preview-area';
import type { ProjectData } from '@timeline-editor/preview-area';

const projectData: ProjectData = {
  id: "project-1",
  name: "My Project",
  description: "A sample project",
  settings: {
    width: 1920,
    height: 1080,
    frameRate: 30,
    aspectRatio: "16:9",
    backgroundColor: "#000000"
  },
  scenes: [
    {
      id: "scene-1",
      name: "Scene 1",
      settings: { start: 0, duration: 10 },
      elements: [
        {
          id: "element-1",
          name: "Text Element",
          type: "text",
          properties: {
            x: 100,
            y: 100,
            width: 200,
            height: 50,
            text: "Hello World",
            fontSize: 24,
            color: "#ffffff"
          },
          start: 0,
          duration: 5
        }
      ]
    }
  ],
  globalElements: []
};

function App() {
  const [currentTime, setCurrentTime] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <PreviewArea
      projectData={projectData}
      currentTime={currentTime}
      isPlaying={isPlaying}
      width={480}
      height={270}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `projectData` | `ProjectData` | required | The project data containing scenes and elements |
| `currentTime` | `number` | required | Current playback time in seconds |
| `isPlaying` | `boolean` | `false` | Whether playback is active |
| `aspectRatio` | `string` | `"16:9"` | Display aspect ratio |
| `width` | `number` | `480` | Canvas width in pixels |
| `height` | `number` | `270` | Canvas height in pixels |

## Element Types

- **image**: Displays images with position, size, and transformation
- **video**: Displays video elements (requires source URL)
- **text**: Renders text with customizable styling
- **audio**: Audio elements (not visually rendered)

## Coordinate System

- Origin (0,0) is at the top-left corner
- X increases rightward, Y increases downward
- All positions and sizes are in pixels relative to the canvas

## License

MIT