Canvas renderer and exporter

apps/web/package.json

@@ -39,10 +39,12 @@
     "dotenv": "^16.5.0",
     "drizzle-orm": "^0.44.2",
     "embla-carousel-react": "^8.5.1",
+    "eventemitter3": "^5.0.1",
     "feed": "^5.1.0",
     "framer-motion": "^11.13.1",
     "input-otp": "^1.4.1",
     "lucide-react": "^0.468.0",
+    "mediabunny": "^1.11.2",
     "motion": "^12.18.1",
     "nanoid": "^5.1.5",
     "next": "^15.4.5",
@@ -67,6 +69,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "unified": "^11.0.5",
+    "use-deep-compare-effect": "^1.8.1",
     "vaul": "^1.1.1",
     "zod": "^3.25.67",
     "zustand": "^5.0.2"

apps/web/src/app/editor/[project_id]/page.tsx

@@ -10,13 +10,14 @@ import {
 import { MediaPanel } from "../../../components/editor/media-panel";
 import { PropertiesPanel } from "../../../components/editor/properties-panel";
 import { Timeline } from "../../../components/editor/timeline";
-import { PreviewPanel } from "../../../components/editor/preview-panel";
 import { EditorHeader } from "@/components/editor-header";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { EditorProvider } from "@/components/editor-provider";
 import { usePlaybackControls } from "@/hooks/use-playback-controls";
 import { Onboarding } from "@/components/onboarding";
+import { CanvasPreviewPanel as PreviewPanel } from "@/components/editor/renderer/canvas-preview-panel";
+// import { PreviewPanel } from "@/components/editor/preview-panel";
 
 export default function Editor() {
   const {
@@ -275,6 +276,7 @@ export default function Editor() {
                         onResize={setPreviewPanel}
                         className="min-w-0 min-h-0 flex-1"
                       >
+                        {/* <PreviewPanel /> */}
                         <PreviewPanel />
                       </ResizablePanel>
                     </ResizablePanelGroup>

apps/web/src/components/editor-header.tsx

@@ -20,7 +20,8 @@ import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
 import { PanelPresetSelector } from "./panel-preset-selector";
-import { ExportButton } from "./export-button";
+// import { ExportButton } from "./export-button";
+import { ExportDialog } from "./editor/renderer/export-dialog";
 
 export function EditorHeader() {
   const { activeProject, renameProject, deleteProject } = useProjectStore();
@@ -116,7 +117,9 @@ export function EditorHeader() {
     <nav className="flex items-center gap-2">
       <PanelPresetSelector />
       <KeyboardShortcutsHelp />
-      <ExportButton />
+      <ExportDialog>
+        <Button>Export</Button>
+      </ExportDialog>
       <Button
         size="icon"
         variant="text"

apps/web/src/components/editor/renderer/canvas-preview-panel.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useMemo, useRef } from "react";
+import useDeepCompareEffect from "use-deep-compare-effect";
+
+import { useRafLoop } from "@/hooks/use-raf-loop";
+import { SceneNode } from "@/lib/renderer/nodes/scene-node";
+import { SceneRenderer } from "@/lib/renderer/scene-renderer";
+import { useMediaStore } from "@/stores/media-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+import { useRendererStore } from "@/stores/renderer-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useProjectStore } from "@/stores/project-store";
+import { buildScene } from "@/lib/renderer/build-scene";
+
+// TODO: get preview size in a better way
+function usePreviewSize() {
+  const { activeProject } = useProjectStore();
+  return {
+    width: activeProject?.canvasSize?.width || 600,
+    height: activeProject?.canvasSize?.height || 320,
+  };
+}
+
+function RendererSceneController() {
+  const setScene = useRendererStore((s) => s.setScene);
+
+  const tracks = useTimelineStore((s) => s.tracks);
+  const mediaItems = useMediaStore((s) => s.mediaItems);
+
+  const getTotalDuration = useTimelineStore((s) => s.getTotalDuration);
+  const { width, height } = usePreviewSize();
+
+  useDeepCompareEffect(() => {
+    const scene = buildScene({
+      tracks,
+      mediaItems,
+      duration: getTotalDuration(),
+      canvasSize: {
+        width,
+        height,
+      },
+    });
+
+    setScene(scene);
+  }, [tracks, mediaItems, getTotalDuration]);
+
+  return null;
+}
+
+function PreviewCanvas() {
+  const ref = useRef<HTMLCanvasElement>(null);
+  const lastFrameRef = useRef(0);
+  const lastSceneRef = useRef<SceneNode | null>(null);
+  const renderingRef = useRef(false);
+
+  const { width, height } = usePreviewSize();
+
+  const renderer = useMemo(() => {
+    return new SceneRenderer({
+      width,
+      height,
+      fps: 30, // TODO: get fps from project
+    });
+  }, [width, height]);
+
+  const scene = useRendererStore((s) => s.scene);
+
+  const render = useCallback(() => {
+    if (ref.current && scene && !renderingRef.current) {
+      const time = usePlaybackStore.getState().currentTime;
+      const frame = Math.floor(time * renderer.fps);
+
+      if (frame !== lastFrameRef.current || scene !== lastSceneRef.current) {
+        renderingRef.current = true;
+        lastSceneRef.current = scene;
+        lastFrameRef.current = frame;
+        renderer.renderToCanvas(scene, frame, ref.current).then(() => {
+          renderingRef.current = false;
+        });
+      }
+    }
+  }, [renderer, scene, width, height]);
+
+  useRafLoop(render);
+
+  return (
+    <canvas
+      ref={ref}
+      width={width}
+      height={height}
+      className="max-w-full max-h-full block border"
+    />
+  );
+}
+
+export function CanvasPreviewPanel() {
+  return (
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm relative">
+      <div className="flex flex-1 items-center justify-center min-h-0 min-w-0 p-2">
+        <PreviewCanvas />
+        <RendererSceneController />
+      </div>
+    </div>
+  );
+}

apps/web/src/components/editor/renderer/export-dialog.tsx

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import { SceneExporter } from "@/lib/renderer/scene-exporter";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { buildScene } from "@/lib/renderer/build-scene";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useMediaStore } from "@/stores/media-store";
+import { useProjectStore } from "@/stores/project-store";
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+}
+
+function ExportProgress({ progress }: { progress: number }) {
+  return (
+    <div className="w-full flex flex-col text-sm text-muted-foreground">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">Rendering video...</div>
+        <div className="text-xs text-muted-foreground">
+          {Math.round(progress * 100)}%
+        </div>
+      </div>
+      <Progress value={progress * 100} className="mt-2" />
+    </div>
+  );
+}
+
+export function ExportDialog({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const [exporter, setExporter] = useState<SceneExporter | null>(null);
+
+  const handleOpenChange = (open: boolean) => {
+    if (isExporting) {
+      return;
+    }
+
+    setIsOpen(open);
+    setError(null);
+    setProgress(0);
+  };
+
+  const handleExport = async () => {
+    setProgress(0);
+    setIsExporting(true);
+
+    const project = useProjectStore.getState().activeProject;
+
+    const width = project?.canvasSize.width ?? 640;
+    const height = project?.canvasSize.height ?? 720;
+    const fps = project?.fps ?? 30;
+
+    const scene = buildScene({
+      tracks: useTimelineStore.getState().tracks,
+      mediaItems: useMediaStore.getState().mediaItems,
+      duration: useTimelineStore.getState().getTotalDuration(),
+      canvasSize: {
+        width,
+        height,
+      },
+    });
+
+    const exporter = new SceneExporter({
+      width,
+      height,
+      fps,
+    });
+
+    setExporter(exporter);
+
+    exporter.on("progress", (progress) => {
+      setProgress(progress);
+    });
+
+    exporter.on("complete", (blob) => {
+      downloadBlob(blob, `export-${Date.now()}.mp4`);
+      setIsOpen(false);
+    });
+
+    exporter.on("error", (error) => {
+      setError(error.message);
+    });
+
+    await exporter.export(scene);
+    setIsExporting(false);
+    setExporter(null);
+  };
+
+  const handleCancel = () => {
+    exporter?.cancel();
+    setIsExporting(false);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog modal open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Export Video</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>Export the scene as a video file.</DialogDescription>
+        <div className="min-h-16 text-sm flex items-end">
+          {isExporting && <ExportProgress progress={progress} />}
+          {error && <div className="text-red-500">{error}</div>}
+        </div>
+        <DialogFooter>
+          {isExporting && (
+            <Button variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+          )}
+          <Button disabled={isExporting} onClick={handleExport}>
+            Export
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/hooks/use-raf-loop.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+
+export function useRafLoop(callback: (time: number) => void) {
+  const requestRef = useRef<number>(0);
+  const previousTimeRef = useRef<number>(0);
+
+  useEffect(() => {
+    const loop = (time: number) => {
+      if (previousTimeRef.current !== undefined) {
+        const deltaTime = time - previousTimeRef.current;
+        callback(deltaTime);
+      }
+      previousTimeRef.current = time;
+      requestRef.current = requestAnimationFrame(loop);
+    };
+
+    requestRef.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(requestRef.current);
+  }, [callback]);
+}