@bycrux/editor 0.8.3 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": false,
   "type": "module",
   "exports": {

package/src/video/preview/OverlayItemsLayer.tsx

@@ -84,6 +84,31 @@ function OverlayVideo({ src, currentTime, itemStart, inPoint, isPlaying, muted,
 }
 
 // ---------------------------------------------------------------------------
+// Recursively rewrite absolute workspace path strings in overlay props to
+// servable proxy URLs (via fileUrl), so <img src> resolves in the browser
+// preview. Mirrors the render-side rewritePathsToFileUrls (bundle.js), which
+// already recurses — without this, image paths nested in array/object props
+// (e.g. players[].src, items[].src) reach <img> raw as /var/hub-scratch/... and
+// render blank in preview even though they render correctly in the final MP4.
+// Already-proxied /api/ URLs are left untouched (idempotent).
+export function resolveOverlayPropPaths(
+  value: unknown,
+  fileUrl: (path: string) => string,
+): unknown {
+  if (typeof value === 'string') {
+    return value.startsWith('/') && !value.startsWith('/api/') ? fileUrl(value) : value
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => resolveOverlayPropPaths(v, fileUrl))
+  }
+  if (value && typeof value === 'object') {
+    return Object.fromEntries(
+      Object.entries(value).map(([k, v]) => [k, resolveOverlayPropPaths(v, fileUrl)]),
+    )
+  }
+  return value
+}
+
 // CustomOverlay: fetches, compiles, and renders a custom JSX overlay file
 //
 // Live overlay-edit reload behavior (Montaj host):
@@ -158,14 +183,7 @@ function CustomOverlay({
 
   if (!factory) return null
 
-  const resolvedProps = Object.fromEntries(
-    Object.entries(props).map(([k, v]) => [
-      k,
-      typeof v === 'string' && v.startsWith('/') && !v.startsWith('/api/')
-        ? fileUrl(v)
-        : v,
-    ]),
-  )
+  const resolvedProps = resolveOverlayPropPaths(props, fileUrl) as Record<string, unknown>
 
   const element = factory(frame, fps, durationFrames, resolvedProps)
   if (!element) return null

package/src/video/preview/__tests__/resolveOverlayPropPaths.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { resolveOverlayPropPaths } from '../OverlayItemsLayer'
+
+// Stand-in for the Hub adapter's fileUrl: workspace path → servable proxy URL.
+const fileUrl = (p: string) => `/api/hub/montaj/files?path=${encodeURIComponent(p)}`
+
+describe('resolveOverlayPropPaths', () => {
+  it('rewrites a top-level workspace path string (photo_card.src case)', () => {
+    const out = resolveOverlayPropPaths(
+      { src: '/var/hub-scratch/p1/assets/a.jpg', text: 'hi' },
+      fileUrl,
+    )
+    expect(out).toEqual({
+      src: '/api/hub/montaj/files?path=' + encodeURIComponent('/var/hub-scratch/p1/assets/a.jpg'),
+      text: 'hi',
+    })
+  })
+
+  it('rewrites workspace paths nested in an array of objects (player_trio.players case)', () => {
+    const out = resolveOverlayPropPaths(
+      {
+        players: [
+          { src: '/var/hub-scratch/p1/assets/a.jpg', name: 'A' },
+          { src: '/var/hub-scratch/p1/assets/b.jpg', name: 'B' },
+        ],
+      },
+      fileUrl,
+    ) as { players: Array<{ src: string; name: string }> }
+    expect(out.players[0].src).toBe(fileUrl('/var/hub-scratch/p1/assets/a.jpg'))
+    expect(out.players[1].src).toBe(fileUrl('/var/hub-scratch/p1/assets/b.jpg'))
+    expect(out.players[0].name).toBe('A')
+  })
+
+  it('leaves already-proxied /api/ URLs and remote URLs untouched (idempotent)', () => {
+    const proxied = '/api/hub/montaj/files?path=%2Fx.jpg'
+    const remote = 'https://cdn.example.com/x.jpg'
+    const out = resolveOverlayPropPaths(
+      { items: [{ src: proxied }, { src: remote }] },
+      fileUrl,
+    ) as { items: Array<{ src: string }> }
+    expect(out.items[0].src).toBe(proxied)
+    expect(out.items[1].src).toBe(remote)
+  })
+
+  it('preserves non-string scalars and nesting depth', () => {
+    const out = resolveOverlayPropPaths(
+      { duration: 90, nested: { deep: [{ src: '/var/x.png' }] } },
+      fileUrl,
+    ) as { duration: number; nested: { deep: Array<{ src: string }> } }
+    expect(out.duration).toBe(90)
+    expect(out.nested.deep[0].src).toBe(fileUrl('/var/x.png'))
+  })
+})