@timeline-editor/preview-area

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

Installation

npm install @timeline-editor/preview-area

Usage

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