@1agh/maude 0.39.0 → 0.40.0

package/apps/studio/test/video-render-bridge.test.ts

@@ -0,0 +1,149 @@
+// video-render-bridge — DDR-148 addendum (audio export) unit coverage.
+//
+// The actual renderMediaOnWeb call needs a real browser (WebCodecs, canvas
+// decode) — that's a manual/agent-browser verification (see the DDR-148
+// addendum § Manual verification recipe), not a unit test, mirroring
+// video-comp.test.ts's own split between the pure seek-bridge routing (tested
+// here) and live Player rendering (not). What IS pure + testable: `findCompIdIn`
+// (DOM containment resolution) and the `__maude_render_video__` bridge's
+// routing contract — it must merge the registered comp's component/meta with
+// the caller's opts and delegate to the injected `__maudeRenderVideo__`, and
+// fail clearly when either the comp or the render-lib injection is missing.
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+import { findCompIdIn, installMaudeSeekBridge } from '../video-comp.tsx';
+
+interface RenderCall {
+  component: unknown;
+  inputProps: unknown;
+  width: number;
+  height: number;
+  fps: number;
+  durationInFrames: number;
+  [k: string]: unknown;
+}
+
+interface RenderWindow {
+  __maudeVideoComps?: Map<
+    string,
+    {
+      id: string;
+      fps: number;
+      durationInFrames: number;
+      width: number;
+      height: number;
+      ref: { current: null };
+      component: unknown;
+      inputProps: Record<string, unknown>;
+    }
+  >;
+  __maude_render_video__?: (compId: string, opts: Record<string, unknown>) => Promise<unknown>;
+  __maudeRenderVideo__?: (opts: RenderCall) => Promise<unknown>;
+}
+
+function registerComp(
+  id: string,
+  meta: { fps: number; durationInFrames: number; width: number; height: number },
+  component: unknown,
+  inputProps: Record<string, unknown> = {}
+): void {
+  const w = window as unknown as RenderWindow;
+  if (!w.__maudeVideoComps) w.__maudeVideoComps = new Map();
+  w.__maudeVideoComps.set(id, { id, ...meta, ref: { current: null }, component, inputProps });
+}
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+
+afterAll(async () => {
+  await GlobalRegistrator.unregister();
+});
+
+beforeEach(() => {
+  const w = window as unknown as RenderWindow;
+  w.__maudeVideoComps = undefined;
+  w.__maudeRenderVideo__ = undefined;
+  (w as unknown as { __maude_render_video__?: unknown }).__maude_render_video__ = undefined;
+  (w as unknown as { __maude_seek__?: unknown }).__maude_seek__ = undefined;
+  (w as unknown as { __maude_comps__?: unknown }).__maude_comps__ = undefined;
+});
+
+describe('findCompIdIn', () => {
+  test('resolves the nearest [data-comp-id] descendant', () => {
+    document.body.innerHTML =
+      '<div data-dc-screen="reel"><div data-comp-id="videocomp-2"><span>x</span></div></div>';
+    const artboard = document.querySelector('[data-dc-screen="reel"]');
+    expect(artboard).not.toBeNull();
+    expect(findCompIdIn(artboard as Element)).toBe('videocomp-2');
+  });
+
+  test('returns null for an artboard with no registered comp (ordinary/CSS artboard)', () => {
+    document.body.innerHTML = '<div data-dc-screen="static"><p>just a div</p></div>';
+    const artboard = document.querySelector('[data-dc-screen="static"]');
+    expect(findCompIdIn(artboard as Element)).toBeNull();
+  });
+});
+
+describe('__maude_render_video__ bridge', () => {
+  test('merges the registered component + meta with caller opts, delegates to __maudeRenderVideo__', async () => {
+    const w = window as unknown as RenderWindow;
+    installMaudeSeekBridge();
+    const FakeComp = () => null;
+    registerComp('reel', { fps: 30, durationInFrames: 228, width: 960, height: 540 }, FakeComp, {
+      title: 'Showreel',
+    });
+    let received: RenderCall | null = null;
+    w.__maudeRenderVideo__ = async (opts) => {
+      received = opts;
+      return { b64: 'AA==', bytes: 2, container: 'mp4', videoCodec: 'h264', audioCodec: 'aac' };
+    };
+    const result = await w.__maude_render_video__?.('reel', {
+      container: 'mp4',
+      scale: 2,
+      muted: false,
+      frameRange: [0, 30],
+    });
+    expect(result).toEqual({
+      b64: 'AA==',
+      bytes: 2,
+      container: 'mp4',
+      videoCodec: 'h264',
+      audioCodec: 'aac',
+    });
+    expect(received).not.toBeNull();
+    const call = received as unknown as RenderCall;
+    expect(call.component).toBe(FakeComp);
+    expect(call.inputProps).toEqual({ title: 'Showreel' });
+    expect(call.width).toBe(960);
+    expect(call.height).toBe(540);
+    expect(call.fps).toBe(30);
+    expect(call.durationInFrames).toBe(228);
+    // Caller opts pass through alongside the merged meta.
+    expect(call.container).toBe('mp4');
+    expect(call.scale).toBe(2);
+    expect(call.muted).toBe(false);
+    expect(call.frameRange).toEqual([0, 30]);
+  });
+
+  test('throws a clear error for an unregistered compId', async () => {
+    const w = window as unknown as RenderWindow;
+    installMaudeSeekBridge();
+    await expect(w.__maude_render_video__?.('nope', { container: 'mp4' })).rejects.toThrow(
+      /no registered video-comp/i
+    );
+  });
+
+  test('throws a clear error when the render-lib bundle was never injected', async () => {
+    const w = window as unknown as RenderWindow;
+    installMaudeSeekBridge();
+    registerComp('reel', { fps: 30, durationInFrames: 90, width: 960, height: 540 }, () => null);
+    // __maudeRenderVideo__ intentionally left unset (simulates a capture that
+    // skipped addScriptTag — e.g. gif/ordinary-artboard export never injects it).
+    await expect(w.__maude_render_video__?.('reel', { container: 'mp4' })).rejects.toThrow(
+      /render-lib bundle not injected/i
+    );
+  });
+});

package/apps/studio/use-annotation-resize.tsx

@@ -159,6 +159,7 @@ function isResizable(
     s.tool === 'sticky' ||
     s.tool === 'image' ||
     s.tool === 'link' ||
+    s.tool === 'mediaref' ||
     s.tool === 'section'
   );
 }
@@ -374,11 +375,13 @@ export function resizeStroke(
     start.tool === 'sticky' ||
     start.tool === 'polygon' ||
     start.tool === 'link' ||
+    start.tool === 'mediaref' ||
     start.tool === 'section'
   ) {
-    // Rect / polygon / sticky / link all resize via their shared x / y / w / h
-    // bbox. Text re-wraps inside the foreignObject automatically. Sticky stays
-    // 1:1; the link card free-resizes (Shift still locks its current ratio).
+    // Rect / polygon / sticky / link / mediaref all resize via their shared
+    // x / y / w / h bbox. Sticky stays 1:1; the link + media-ref cards
+    // free-resize (Shift still locks their current ratio) so the user can size
+    // the inline player up (DDR-150 dogfood — "video annotation nejde zvětšit").
     const b0 = { x: start.x, y: start.y, w: start.w, h: start.h };
     const box = bboxResizeRotAware(start, b0, corner, wx, wy, mods, start.tool === 'sticky');
     return box as Partial<RectStroke | StickyStroke | PolygonStroke | LinkStroke>;

package/apps/studio/use-canvas-media-drop.tsx

@@ -1,10 +1,14 @@
 /**
  * @file       use-canvas-media-drop.tsx — Phase 23 canvas media intake
  * @scope      apps/studio/use-canvas-media-drop.tsx
- * @purpose    OS-level drag-and-drop + clipboard paste of images and URLs onto
- *             the canvas. Routes each gesture to a create callback owned by
- *             AnnotationsLayer (which holds the commit/undo sink + screenToWorld):
+ * @purpose    OS-level drag-and-drop + clipboard paste of images, video/audio,
+ *             and URLs onto the canvas. Routes each gesture to a create callback
+ *             owned by AnnotationsLayer (which holds the commit/undo sink +
+ *             screenToWorld):
  *               • image file → `onImage(file, world)`  → optimistic stroke + upload
+ *               • video/audio → `onMedia?(file, kind, world)` → upload to assets/
+ *                 + toast the `<Video>`/`<Audio>` snippet (DDR-148; auto-insert
+ *                 into the comp TSX is a documented follow-up)
  *               • http(s) URL → `onLink(url, title, world)` → client-only link chip
  *
  *             The classification + URL helpers are PURE + exported so the unit
@@ -35,6 +39,7 @@ export interface MediaPayload {
 
 export type MediaIntent =
   | { kind: 'image'; file: File }
+  | { kind: 'media'; file: File; mediaKind: 'video' | 'audio' }
   | { kind: 'link'; url: string; title: string };
 
 /** True only for an absolute http(s) URL — the one scheme a link chip accepts. */
@@ -136,6 +141,19 @@ export function anchorTextFromHtml(html: string): string | null {
 export function classifyMediaPayload(p: MediaPayload): MediaIntent | null {
   const imageFile = p.files.find((f) => typeof f.type === 'string' && f.type.startsWith('image/'));
   if (imageFile) return { kind: 'image', file: imageFile };
+  // DDR-148 — video/audio files land in the project's assets/ (the widened asset
+  // route, DDR-088) so a comp can reference them as <Video>/<Audio src="assets/…">.
+  const mediaFile = p.files.find(
+    (f) =>
+      typeof f.type === 'string' && (f.type.startsWith('video/') || f.type.startsWith('audio/'))
+  );
+  if (mediaFile) {
+    return {
+      kind: 'media',
+      file: mediaFile,
+      mediaKind: mediaFile.type.startsWith('video/') ? 'video' : 'audio',
+    };
+  }
   const url = firstHttpUrl(p.uriList) ?? firstHttpUrl(p.plain);
   if (url) {
     const title = anchorTextFromHtml(p.html) ?? prettifyUrl(url);
@@ -242,6 +260,45 @@ export function showCanvasToast(message: string): void {
 export interface MediaDropCallbacks {
   onImage: (file: File, world: [number, number]) => void;
   onLink: (url: string, title: string, world: [number, number]) => void;
+  /**
+   * DDR-148 — a video/audio file was dropped. Optional: when omitted, the hook
+   * uploads it to `assets/` and toasts a ready-to-use `<Video>`/`<Audio>`
+   * snippet (the drop-then-reference flow). A future host can provide this to
+   * auto-insert the element into the composition TSX (the deferred slice — the
+   * comp-placement question, see DDR-148 open items).
+   */
+  onMedia?: (file: File, mediaKind: 'video' | 'audio', world: [number, number]) => void;
+}
+
+/** The snippet the toast surfaces so the dropped clip is one paste away. */
+export function mediaSnippet(mediaKind: 'video' | 'audio', assetPath: string): string {
+  if (mediaKind === 'audio') return `<Audio src="${assetPath}" />`;
+  return `<Video src="${assetPath}" />`;
+}
+
+/**
+ * Default media-drop handler: upload the file to the widened asset route, then
+ * toast the `assets/…` path + the snippet to paste into the comp. Copies the
+ * snippet to the clipboard when available. Exported for reuse/testing.
+ */
+export async function uploadAndAnnounceMedia(
+  file: File,
+  mediaKind: 'video' | 'audio'
+): Promise<void> {
+  const sizeMb = file.size / (1024 * 1024);
+  const res = await uploadAsset(file);
+  if ('error' in res) {
+    showCanvasToast(`Couldn't add ${mediaKind}: ${res.error}`);
+    return;
+  }
+  const snippet = mediaSnippet(mediaKind, res.path);
+  try {
+    await navigator.clipboard?.writeText(snippet);
+  } catch {
+    /* clipboard unavailable — the toast still shows the snippet */
+  }
+  const warn = sizeMb > 20 ? ' · ⚠ >20 MB rides git + sync' : '';
+  showCanvasToast(`Added ${res.path}${warn} — snippet copied: ${snippet}`);
 }
 
 export function useCanvasMediaDrop(opts: {
@@ -317,7 +374,12 @@ export function useCanvasMediaDrop(opts: {
 
     const dispatchIntent = (intent: MediaIntent, world: [number, number]) => {
       if (intent.kind === 'image') callbacks.onImage(intent.file, world);
-      else if (isHttpUrl(intent.url)) callbacks.onLink(intent.url, intent.title, world);
+      else if (intent.kind === 'media') {
+        if (callbacks.onMedia) callbacks.onMedia(intent.file, intent.mediaKind, world);
+        else void uploadAndAnnounceMedia(intent.file, intent.mediaKind);
+      } else if (intent.kind === 'link' && isHttpUrl(intent.url)) {
+        callbacks.onLink(intent.url, intent.title, world);
+      }
     };
 
     document.addEventListener('dragover', onDragOver);