@bycrux/editor 0.10.0 → 0.11.0

package/src/video/__tests__/VideoEditor.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, waitFor } from '@testing-library/react'
+import { render, waitFor, act, fireEvent } from '@testing-library/react'
 import type {
+  CaptionEvent,
   EditorAdapter,
   ImageElement,
   Project,
@@ -47,14 +48,30 @@ function makeVideoProject(overrides: Partial<Project> = {}): Project {
 
 interface FakeAdapter extends EditorAdapter<Project> {
   saveCalls: Array<{ id: string; project: Project }>
+  /** Push a server-authored SSE frame to every active subscriber. */
+  emit: (project: Project) => void
+  /** When true, saveProject() blocks until flushSaves() so a save stays pending. */
+  setHoldSaves: (hold: boolean) => void
+  /** Resolve every held saveProject() promise. */
+  flushSaves: () => void
 }
 
 function makeFakeAdapter(): FakeAdapter {
   const saveCalls: Array<{ id: string; project: Project }> = []
+  let subscribers: Array<(project: Project) => void> = []
+  let holdSaves = false
+  let saveResolvers: Array<() => void> = []
   return {
     loadProject: vi.fn(async () => makeVideoProject()),
-    saveProject: vi.fn(async (id: string, project: Project) => { saveCalls.push({ id, project }) }),
-    subscribe: () => () => {},
+    saveProject: vi.fn(async (id: string, project: Project) => {
+      saveCalls.push({ id, project })
+      if (holdSaves) await new Promise<void>((resolve) => saveResolvers.push(resolve))
+    }),
+    // Capture the sync core's frame callback so a test can drive SSE frames.
+    subscribe: (_id: string, onFrame: (project: Project) => void) => {
+      subscribers.push(onFrame)
+      return () => { subscribers = subscribers.filter((s) => s !== onFrame) }
+    },
     render: async function* (): AsyncIterable<RenderEvent> {
       yield { type: 'done', outputPath: '/out.mp4' }
     },
@@ -70,6 +87,9 @@ function makeFakeAdapter(): FakeAdapter {
     resolveCaptionTemplate: (style: string) => `/caption/${style}`,
     getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
     saveCalls,
+    emit: (project: Project) => { for (const s of [...subscribers]) s(project) },
+    setHoldSaves: (hold: boolean) => { holdSaves = hold },
+    flushSaves: () => { const r = saveResolvers; saveResolvers = []; r.forEach((res) => res()) },
   }
 }
 
@@ -244,4 +264,226 @@ describe('VideoEditor — editor-package integration', () => {
     expect(merged.offsetX).toBe(5)
     expect(merged.offsetY).toBe(10)
   })
+
+  // ── Sync core adoption: undo/redo + SSE echo protection ──────────────────────
+  // These drive the one reliable DOM-triggerable mutation (the Render button,
+  // which flips status draft→final through sync.mutate) and then exercise the
+  // shared save/undo core the editor now routes through.
+
+  it('undo restores the pre-mutation project and re-persists it', async () => {
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    const { findByText } = render(
+      <VideoEditor
+        project={makeVideoProject({ status: 'draft' })}
+        adapter={adapter}
+        onProjectChange={onProjectChange}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    // Mutation: Render flips status draft → final and persists via the queue.
+    const renderBtn = await findByText('Render →')
+    await act(async () => { renderBtn.click() })
+    await waitFor(() => expect(adapter.saveCalls[adapter.saveCalls.length - 1]?.project.status).toBe('final'))
+
+    // Undo (Cmd+Z): restores 'draft' AND enqueues a save of the restored state.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    await waitFor(() => expect(adapter.saveCalls[adapter.saveCalls.length - 1]?.project.status).toBe('draft'))
+    // Host is notified of the restored (draft) authoritative state.
+    expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ status: 'draft' }))
+  })
+
+  it('redo re-applies an undone mutation and re-persists it', async () => {
+    const adapter = makeFakeAdapter()
+    const { findByText } = render(
+      <VideoEditor
+        project={makeVideoProject({ status: 'draft' })}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    const renderBtn = await findByText('Render →')
+    await act(async () => { renderBtn.click() })
+    await waitFor(() => expect(adapter.saveCalls[adapter.saveCalls.length - 1]?.project.status).toBe('final'))
+
+    // Undo back to draft…
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    await waitFor(() => expect(adapter.saveCalls[adapter.saveCalls.length - 1]?.project.status).toBe('draft'))
+
+    // …then Redo (Cmd+Shift+Z) re-applies 'final'.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true, shiftKey: true }))
+    })
+    await waitFor(() => expect(adapter.saveCalls[adapter.saveCalls.length - 1]?.project.status).toBe('final'))
+  })
+
+  it('does not clobber an optimistic edit with an SSE frame that arrives mid-save', async () => {
+    const adapter = makeFakeAdapter()
+    adapter.setHoldSaves(true) // saves hang so the mutation queue stays pending
+    const onProjectChange = vi.fn()
+    const { findByText } = render(
+      <VideoEditor
+        project={makeVideoProject({ status: 'draft', name: 'Original' })}
+        adapter={adapter}
+        onProjectChange={onProjectChange}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    // Optimistic mutation: status → final. Its save is now in-flight (held).
+    const renderBtn = await findByText('Render →')
+    await act(async () => { renderBtn.click() })
+    await waitFor(() =>
+      expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ status: 'final' })),
+    )
+
+    // A stale server frame arrives WHILE the save is pending. It must be deferred,
+    // not applied — otherwise it would regress the optimistic 'final' edit.
+    await act(async () => {
+      adapter.emit(makeVideoProject({ status: 'draft', name: 'StaleServerFrame' }))
+    })
+    // Optimistic edit intact: still 'final', and the stale frame never reached the host.
+    expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ status: 'final' }))
+    expect(onProjectChange).not.toHaveBeenCalledWith(expect.objectContaining({ name: 'StaleServerFrame' }))
+
+    // Once the save drains, the deferred frame is applied (last-write-wins).
+    await act(async () => { adapter.flushSaves() })
+    await waitFor(() =>
+      expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ name: 'StaleServerFrame' })),
+    )
+  })
+
+  // Regression: cancelOverlayEdit routes through sync.applyExternal (see
+  // use-project-sync.ts) to revert the live preview. applyExternal used to leave
+  // the sync core's transient-gesture baseline pointing at the pre-edit snapshot;
+  // if a real external frame then arrived before the *next* gesture, that next
+  // gesture would see a non-null baseline and skip re-baselining, so its commit
+  // pushed the STALE pre-first-gesture snapshot as the undo target — a later
+  // Undo would silently discard the external change. Drives the actual DOM path
+  // (select overlay → open dialog → live preview → Cancel) rather than the core
+  // directly, to prove the fix holds through VideoEditor's wiring too.
+  it('Cancel after previewing an overlay-props edit reverts the project, and a later gesture is not corrupted by the stale pre-edit baseline', async () => {
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    const initial = makeVideoProject({
+      name: 'Original',
+      tracks: [
+        [{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 4, inPoint: 0, outPoint: 4 }],
+        [{ id: 'overlay-1', type: 'overlay', src: 'overlay.jsx', start: 0, end: 4, props: { text: 'Old text' } }],
+      ],
+    })
+    const { findByText, findByTitle, findByLabelText, getByText } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={onProjectChange}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    // Select the overlay item — additive (metaKey) click sidesteps the plain-
+    // click playhead-seek branch, which needs real layout metrics jsdom doesn't
+    // provide — then open its props dialog via the timeline's Pencil button.
+    const overlayBlock = await findByText('▪ overlay')
+    fireEvent.click(overlayBlock, { metaKey: true })
+    const editBtn = await findByTitle('Edit overlay')
+    fireEvent.click(editBtn)
+
+    // Preview an edit — mutateTransient baselines against the pre-gesture state.
+    const textField = await findByLabelText('text')
+    fireEvent.change(textField, { target: { value: 'Live preview' } })
+    await waitFor(() => expect(onProjectChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        tracks: expect.arrayContaining([
+          expect.arrayContaining([expect.objectContaining({ id: 'overlay-1', props: { text: 'Live preview' } })]),
+        ]),
+      }),
+    ))
+
+    // Cancel — routes through applyExternal, reverting to the pre-edit snapshot.
+    fireEvent.click(getByText('Cancel'))
+    await waitFor(() => expect(onProjectChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: 'Original',
+        tracks: expect.arrayContaining([
+          expect.arrayContaining([expect.objectContaining({ id: 'overlay-1', props: { text: 'Old text' } })]),
+        ]),
+      }),
+    ))
+
+    // A real external frame now arrives (SSE echo / caption regen / restoreVersion)
+    // — an authoritative change that must survive whatever the cancelled gesture
+    // left behind in the sync core.
+    await act(async () => { adapter.emit({ ...initial, name: 'FromServer' }) })
+    await waitFor(() => expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ name: 'FromServer' })))
+
+    // A second overlay-props gesture must baseline against THIS state, not a
+    // stale pre-first-gesture snapshot left behind if Cancel failed to clear it.
+    const editBtn2 = await findByTitle('Edit overlay')
+    fireEvent.click(editBtn2)
+    const textField2 = await findByLabelText('text')
+    fireEvent.change(textField2, { target: { value: 'Second edit' } })
+    fireEvent.click(getByText('Save'))
+
+    // Undo should remove only the second gesture, landing back on the external
+    // ('FromServer') state — not the stale first-gesture baseline ('Original').
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    await waitFor(() => expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ name: 'FromServer' })))
+  })
+
+  // Regression: the caption-repair effect (VideoEditor.tsx, near backfillCaptionIds)
+  // used to be keyed on project.id ONLY, so it ran once per project load and never
+  // again. CaptionRegenModal's onDone replaces project.captions via applyExternal
+  // WITHOUT changing project.id, so a mid-session regeneration used to skip word
+  // repair entirely until a remount. The effect is now also keyed on
+  // project.captions.
+  it('regenerating captions mid-session (no project.id change) re-runs word repair, and the effect settles instead of looping', async () => {
+    const adapter = makeFakeAdapter()
+    // Text has a double space between words and no words[] at all — this
+    // exercises both "needs a repair pass" AND (via captionRepair.ts's
+    // whitespace-normalized comparison) "the repair reaches a fixed point on
+    // the very next pass", which is what stops the widened effect from
+    // applyExternal-ing forever.
+    adapter.generateCaptions = async function* (): AsyncIterable<CaptionEvent> {
+      yield {
+        type: 'done',
+        captions: { style: 'clean', segments: [{ id: 's1', text: 'brand  new text', start: 0, end: 3 }] },
+      }
+    }
+    const onProjectChange = vi.fn()
+    const { findByText } = render(
+      <VideoEditor
+        project={makeVideoProject({ status: 'draft' })}
+        adapter={adapter}
+        onProjectChange={onProjectChange}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    const regenBtn = await findByText('Regenerate')
+    await act(async () => { regenBtn.click() })
+
+    // Repair fired for a captions-only replacement — words[] derived from the
+    // (whitespace-collapsed) text, not left stale/absent.
+    await waitFor(() => {
+      const last = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+      expect(last.captions?.segments[0]?.words?.map((w) => w.word)).toEqual(['brand', 'new', 'text'])
+    })
+
+    // Settles: once repaired, flushing further ticks must produce no additional
+    // onProjectChange calls — proves the effect reached its fixed point instead
+    // of looping.
+    const settledCallCount = onProjectChange.mock.calls.length
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)) })
+    expect(onProjectChange.mock.calls.length).toBe(settledCallCount)
+  })
 })

package/src/video/__tests__/backfillCaptionIds.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import type { Project } from '../../types'
+import type { CaptionSegment } from '../../schema'
+import { backfillCaptionIds } from '../VideoEditor'
+
+function project(segments: CaptionSegment[] | null): Project {
+  return (segments
+    ? { id: 'p1', captions: { style: 'word-by-word', segments } }
+    : { id: 'p1' }) as unknown as Project
+}
+
+function seg(over: Partial<CaptionSegment> = {}): CaptionSegment {
+  return { text: 'hello', start: 0, end: 1, ...over }
+}
+
+const ids = (p: Project) => p.captions!.segments.map((s) => s.id)
+
+describe('backfillCaptionIds', () => {
+  it('returns the SAME reference when there is nothing to do', () => {
+    // This is the property the backfill effect's loop-safety rests on: after our
+    // own applyExternal re-fires the effect, the second pass must be a no-op.
+    const noCaptions = project(null)
+    expect(backfillCaptionIds(noCaptions)).toBe(noCaptions)
+
+    const empty = project([])
+    expect(backfillCaptionIds(empty)).toBe(empty)
+
+    const done = project([seg({ id: 'cap-0' }), seg({ id: 'cap-1' })])
+    expect(backfillCaptionIds(done)).toBe(done)
+  })
+
+  it('is idempotent — backfilling the result changes nothing further', () => {
+    const once = backfillCaptionIds(project([seg(), seg(), seg()]))
+    expect(backfillCaptionIds(once)).toBe(once)
+  })
+
+  it('mints cap-<index> for an all-id-less track (regenerated captions)', () => {
+    const out = backfillCaptionIds(project([seg(), seg(), seg()]))
+    expect(ids(out)).toEqual(['cap-0', 'cap-1', 'cap-2'])
+  })
+
+  it('never overwrites an existing id', () => {
+    const out = backfillCaptionIds(project([seg({ id: 'kept' }), seg()]))
+    expect(ids(out)[0]).toBe('kept')
+  })
+
+  it('does not mint a duplicate of an id already in use', () => {
+    // `cap-1` is already taken at index 2; index 1 must not be handed the same id.
+    const out = backfillCaptionIds(project([seg({ id: 'cap-0' }), seg(), seg({ id: 'cap-1' })]))
+    const got = ids(out)
+    expect(got).toEqual(['cap-0', 'cap-2', 'cap-1'])
+    expect(new Set(got).size).toBe(got.length)
+  })
+
+  it('stays collision-free across a mixed track (backfilled + freshly regenerated)', () => {
+    const out = backfillCaptionIds(project([
+      seg(), seg({ id: 'cap-0' }), seg(), seg({ id: 'cap-3' }), seg(), seg({ id: 'cap-1' }), seg(),
+    ]))
+    const got = ids(out)
+    expect(new Set(got).size).toBe(got.length)
+    expect(got.every((id) => !!id)).toBe(true)
+    // Deterministic: the counter only moves forward, skipping ids already taken.
+    expect(got).toEqual(['cap-2', 'cap-0', 'cap-4', 'cap-3', 'cap-5', 'cap-1', 'cap-6'])
+  })
+
+  it('preserves every other field on the segments it touches', () => {
+    const out = backfillCaptionIds(project([seg({ text: 'x', start: 2, end: 4, offsetX: 10, scale: 1.5 })]))
+    expect(out.captions!.segments[0]).toMatchObject({ text: 'x', start: 2, end: 4, offsetX: 10, scale: 1.5 })
+  })
+})