feat: mediabunny + preview canvas refactor

1 files changed, 179 insertions, 0 deletions

diff --git a/apps/web/src/lib/timeline-renderer.ts b/apps/web/src/lib/timeline-renderer.ts
new file mode 100644
index 00000000..1c1eafcd
--- /dev/null
+++ b/apps/web/src/lib/timeline-renderer.ts
@@ -0,0 +1,179 @@
+import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny";

+import type { TimelineTrack } from "@/types/timeline";

+import type { MediaItem } from "@/stores/media-store";

+

+export interface RenderContext {

+  ctx: CanvasRenderingContext2D;

+  time: number;

+  canvasWidth: number;

+  canvasHeight: number;

+  tracks: TimelineTrack[];

+  mediaItems: MediaItem[];

+  backgroundColor?: string;

+  useCache?: boolean;

+  cache?: Map<

+    string,

+    Map<

+      number,

+      {

+        draw: (

+          c: CanvasRenderingContext2D,

+          x: number,

+          y: number,

+          w: number,

+          h: number

+        ) => void;

+      }

+    >

+  >;

+  fps: number;

+}

+

+export async function renderTimelineFrame({

+  ctx,

+  time,

+  canvasWidth,

+  canvasHeight,

+  tracks,

+  mediaItems,

+  backgroundColor,

+  useCache = true,

+  cache,

+  fps,

+}: RenderContext): Promise<void> {

+  // Background

+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

+  if (backgroundColor && backgroundColor !== "transparent") {

+    ctx.fillStyle = backgroundColor;

+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

+  }

+

+  const scaleX = 1;

+  const scaleY = 1;

+  const idToMedia = new Map(mediaItems.map((m) => [m.id, m] as const));

+  const active: Array<{

+    track: TimelineTrack;

+    element: TimelineTrack["elements"][number];

+    mediaItem: MediaItem | null;

+  }> = [];

+

+  for (let t = tracks.length - 1; t >= 0; t -= 1) {

+    const track = tracks[t];

+    for (const element of track.elements) {

+      if ((element as any).hidden) continue;

+      const elementStart = element.startTime;

+      const elementEnd =

+        element.startTime +

+        (element.duration - element.trimStart - element.trimEnd);

+      if (time >= elementStart && time < elementEnd) {

+        let mediaItem: MediaItem | null = null;

+        if (element.type === "media") {

+          mediaItem =

+            element.mediaId === "test"

+              ? null

+              : idToMedia.get(element.mediaId) || null;

+        }

+        active.push({ track, element, mediaItem });

+      }

+    }

+  }

+

+  for (const { element, mediaItem } of active) {

+    if (element.type === "media" && mediaItem) {

+      if (mediaItem.type === "video") {

+        const input = new Input({

+          source: new BlobSource(mediaItem.file),

+          formats: ALL_FORMATS,

+        });

+        const track = await input.getPrimaryVideoTrack();

+        if (!track) continue;

+        const decodable = await track.canDecode();

+        if (!decodable) continue;

+        const sink = new VideoSampleSink(track);

+

+        const localTime = time - element.startTime + element.trimStart;

+        const sample = await sink.getSample(localTime);

+        if (!sample) continue;

+

+        const mediaW = Math.max(1, mediaItem.width || canvasWidth);

+        const mediaH = Math.max(1, mediaItem.height || canvasHeight);

+        const containScale = Math.min(

+          canvasWidth / mediaW,

+          canvasHeight / mediaH

+        );

+        const drawW = mediaW * containScale;

+        const drawH = mediaH * containScale;

+        const drawX = (canvasWidth - drawW) / 2;

+        const drawY = (canvasHeight - drawH) / 2;

+        sample.draw(ctx, drawX, drawY, drawW, drawH);

+      }

+      if (mediaItem.type === "image") {

+        const img = new Image();

+        await new Promise<void>((resolve, reject) => {

+          img.onload = () => resolve();

+          img.onerror = () => reject(new Error("Image load failed"));

+          img.src = mediaItem.url || URL.createObjectURL(mediaItem.file);

+        });

+        const mediaW = Math.max(

+          1,

+          mediaItem.width || img.naturalWidth || canvasWidth

+        );

+        const mediaH = Math.max(

+          1,

+          mediaItem.height || img.naturalHeight || canvasHeight

+        );

+        const containScale = Math.min(

+          canvasWidth / mediaW,

+          canvasHeight / mediaH

+        );

+        const drawW = mediaW * containScale;

+        const drawH = mediaH * containScale;

+        const drawX = (canvasWidth - drawW) / 2;

+        const drawY = (canvasHeight - drawH) / 2;

+        ctx.drawImage(img, drawX, drawY, drawW, drawH);

+      }

+    }

+    if (element.type === "text") {

+      const posX = canvasWidth / 2 + (element as any).x * scaleX;

+      const posY = canvasHeight / 2 + (element as any).y * scaleY;

+      ctx.save();

+      ctx.translate(posX, posY);

+      ctx.rotate(((element as any).rotation * Math.PI) / 180);

+      ctx.globalAlpha = Math.max(0, Math.min(1, (element as any).opacity));

+      const px = (element as any).fontSize * scaleX;

+      const weight = (element as any).fontWeight === "bold" ? "bold " : "";

+      const style = (element as any).fontStyle === "italic" ? "italic " : "";

+      ctx.font = `${style}${weight}${px}px ${(element as any).fontFamily}`;

+      ctx.fillStyle = (element as any).color;

+      ctx.textAlign = (element as any).textAlign;

+      ctx.textBaseline = "middle";

+      const metrics = ctx.measureText((element as any).content);

+      const ascent =

+        (metrics as unknown as { actualBoundingBoxAscent?: number })

+          .actualBoundingBoxAscent ?? px * 0.8;

+      const descent =

+        (metrics as unknown as { actualBoundingBoxDescent?: number })

+          .actualBoundingBoxDescent ?? px * 0.2;

+      const textW = metrics.width;

+      const textH = ascent + descent;

+      const padX = 8 * scaleX;

+      const padY = 4 * scaleX;

+      if ((element as any).backgroundColor) {

+        ctx.save();

+        ctx.fillStyle = (element as any).backgroundColor;

+        let bgLeft = -textW / 2;

+        if (ctx.textAlign === "left") bgLeft = 0;

+        if (ctx.textAlign === "right") bgLeft = -textW;

+        ctx.fillRect(

+          bgLeft - padX,

+          -textH / 2 - padY,

+          textW + padX * 2,

+          textH + padY * 2

+        );

+        ctx.restore();

+      }

+      ctx.fillText((element as any).content, 0, 0);

+      ctx.restore();

+    }

+  }

+}