@bycrux/editor 0.8.3 → 0.8.5

package/package.json

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

package/src/video/RenderModal.tsx

@@ -61,6 +61,16 @@ const STEPPER_PHASES: RenderPhase[] = RENDER_PHASES.filter(p => p !== 'done')
 
 const POLL_INTERVAL_MS = 2500
 
+/**
+ * Consecutive status-poll failures tolerated before the modal declares the
+ * render failed. A multi-minute 4K render polls many times; a transient network
+ * blip (a Cloudflare-tunnel hiccup, a backend redeploy, a flaky hop) must not be
+ * mistaken for a render failure — the render keeps running server-side. ~12 ×
+ * 2.5s ≈ 30s of continuous unreachability before giving up. An explicit backend
+ * `error` status is still terminal immediately.
+ */
+const MAX_POLL_FAILURES = 12
+
 // ── Stepper ───────────────────────────────────────────────────────────────────
 
 function PhaseStepper({ current }: { current: RenderPhase }) {
@@ -144,16 +154,28 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           await adapter.renderAsync!(projectId)
           if (unmountedRef.current || cancelledRef.current) return
 
+          let pollFailures = 0
           const tick = async () => {
             if (unmountedRef.current || cancelledRef.current) return
             let snap: RenderStatus
             try {
               snap = await adapter.getRenderStatus!(projectId)
+              pollFailures = 0
             } catch (e) {
               if (unmountedRef.current || cancelledRef.current) return
-              stopPolling()
-              setError(e instanceof Error ? e.message : String(e))
-              setStatus('error')
+              // A transient network blip (Cloudflare-tunnel hiccup, a backend
+              // redeploy, a flaky hop) must NOT be mistaken for a render
+              // failure — the render is still running server-side. This is what
+              // surfaced as "Render failed: Failed to fetch" while the render
+              // actually completed and was delivered. Keep polling; only give
+              // up after MAX_POLL_FAILURES consecutive failures. An explicit
+              // { status: 'error' } reply is still terminal (handled below).
+              pollFailures += 1
+              if (pollFailures >= MAX_POLL_FAILURES) {
+                stopPolling()
+                setError(e instanceof Error ? e.message : String(e))
+                setStatus('error')
+              }
               return
             }
             if (unmountedRef.current || cancelledRef.current) return

package/src/video/__tests__/render-progress.test.tsx

@@ -172,6 +172,56 @@ describe('RenderModal (poll-driven)', () => {
     expect(screen.getByText(/interrupted on the server/i)).toBeTruthy()
     expect(screen.getByText('Close')).toBeTruthy()
   })
+
+  it('tolerates a transient poll failure and still completes', async () => {
+    vi.useFakeTimers()
+    // poll #1 throws (network blip), then it recovers and finishes. The modal
+    // must NOT flip to "Render failed" on the transient throw — the render is
+    // still running server-side.
+    const steps: Array<() => RenderStatus> = [
+      () => { throw new Error('Failed to fetch') },
+      () => ({ status: 'running', phase: 'rendering' } as RenderStatus),
+      () => ({ status: 'done', phase: 'done', media: [DONE_MEDIA] } as RenderStatus),
+    ]
+    let call = 0
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => steps[Math.min(call++, steps.length - 1)]())
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    // Kick + the first poll (which throws) — still "Rendering…", not failed.
+    await act(async () => { for (let i = 0; i < 10; i++) await Promise.resolve() })
+    expect(screen.queryByText('Render failed')).toBeNull()
+    expect(screen.getByText('Rendering…')).toBeTruthy()
+
+    // Subsequent polls recover → running → done.
+    await act(async () => { await vi.advanceTimersByTimeAsync(2500) })
+    await act(async () => { await vi.advanceTimersByTimeAsync(2500) })
+
+    vi.useRealTimers()
+    await waitFor(() => {
+      expect(document.querySelector('video')?.getAttribute('src')).toBe('https://r2/x.mp4')
+    })
+  })
+
+  it('gives up only after sustained consecutive poll failures', async () => {
+    vi.useFakeTimers()
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => { throw new Error('Failed to fetch') })
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    // First poll throws — still running, NOT failed (one blip is tolerated).
+    await act(async () => { for (let i = 0; i < 10; i++) await Promise.resolve() })
+    expect(screen.queryByText('Render failed')).toBeNull()
+
+    // Keep failing past MAX_POLL_FAILURES (~12 × 2.5s) → terminal error.
+    await act(async () => { await vi.advanceTimersByTimeAsync(2500 * 15) })
+    expect(screen.getByText('Render failed')).toBeTruthy()
+    expect(screen.getByText('Failed to fetch')).toBeTruthy()
+  })
 })
 
 // ── Component (SSE fallback when poll methods absent) ──────────────────────────

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'))
+  })
+})