@bycrux/editor 0.11.2 → 1.0.1

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

@@ -0,0 +1,134 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import type { CaptionEvent, EditorAdapter, ImageElement, Project, RenderEvent, VersionEntry, WaveformChunk } from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// ── T1 — host-driven caption trigger seam ────────────────────────────────────
+//
+// `onRegenerateCaptions` / `captionsGenerating` (VideoEditorProps) let a host
+// run caption generation as its own background job instead of the package's
+// built-in blocking `CaptionRegenModal`. Purely additive: mounts the REAL
+// VideoEditor (classic layout — no `slots.mediaPanel`, so the caption panel
+// renders directly in the right rail, no tab navigation needed) and drives
+// the actual "Regenerate captions" footer button, mirroring
+// VideoEditor.captionDelete.test.tsx's mounting pattern.
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 4, inPoint: 0, outPoint: 4 }],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    // Non-empty caption track: the "Regenerate captions" footer button (the
+    // one under test) only renders once there is at least one segment — an
+    // empty track shows a different "Generate captions" empty-state button.
+    captions: {
+      style: 'clean',
+      segments: [{ id: 'cap-0', text: 'hello', start: 0, end: 1, words: [{ word: 'hello', start: 0, end: 1 }] }],
+    },
+    ...overrides,
+  } as Project
+}
+
+function makeFakeAdapter(): EditorAdapter<Project> {
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async () => {}),
+    subscribe: () => () => {},
+    render: async function* (): AsyncIterable<RenderEvent> {
+      yield { type: 'done', outputPath: '/out.mp4' }
+    },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async () => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+    // Present in BOTH tests below, deliberately: the host-prop test proves
+    // `onRegenerateCaptions` wins even though `adapter.generateCaptions` is
+    // also available — a real host that passes the prop still implements
+    // this to power the background job it owns (see types.ts's doc comment
+    // on `onRegenerateCaptions`).
+    generateCaptions: vi.fn(async function* (): AsyncIterable<CaptionEvent> {
+      yield { type: 'log', message: 'transcribing…' }
+    }),
+  } as unknown as EditorAdapter<Project>
+}
+
+beforeEach(() => {
+  // The caption panel now splits into Style / Captions sub-tabs and defaults
+  // to Style; these tests want the transcript + Regenerate trigger visible, so
+  // pin the sub-tab to 'captions' (usePersistentState reads this at mount).
+  window.localStorage.setItem('montaj.editor.captionPanelTab', JSON.stringify('captions'))
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+describe('VideoEditor — host-driven caption trigger seam', () => {
+  it('clicking the trigger calls the host onRegenerateCaptions and never mounts the built-in modal', async () => {
+    // Proves a host that owns the caption job (Mel's Hub running it as a
+    // background task) gets its callback invoked instead of the package
+    // racing its own blocking modal against it.
+    const adapter = makeFakeAdapter()
+    const onRegenerateCaptions = vi.fn()
+    render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        onRegenerateCaptions={onRegenerateCaptions}
+      />,
+    )
+
+    const trigger = await screen.findByText('Regenerate captions')
+    fireEvent.click(trigger)
+
+    expect(onRegenerateCaptions).toHaveBeenCalledTimes(1)
+    expect(screen.queryByText('Regenerating captions…')).toBeNull()
+  })
+
+  it('clicking the trigger still opens the built-in modal when the host prop is absent', async () => {
+    // Hub and Los Parceros never pass `onRegenerateCaptions` — this pins the
+    // pre-existing blocking-modal path so it can never silently regress.
+    const adapter = makeFakeAdapter()
+    render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+      />,
+    )
+
+    const trigger = await screen.findByText('Regenerate captions')
+    fireEvent.click(trigger)
+
+    await waitFor(() => expect(screen.getByText('Regenerating captions…')).toBeTruthy())
+  })
+})

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

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { geometryAt, geometryFor } from '@bycrux/timeline-core'
+
+/**
+ * SP9d — clips animate their geometry in the preview, and their opacity does not.
+ *
+ * OverlayItemsLayer resolves an item's live transform through the same two
+ * timeline-core calls asserted here; this pins the RULE those calls encode, which
+ * is the part that must not drift from the renderer.
+ */
+describe('SP9d — preview geometry for clips', () => {
+  const clip = {
+    id: 'v1', type: 'video' as const, src: '/tmp/a.mp4', start: 0, end: 3,
+    scale: 0.75, offsetX: 0, offsetY: 0, opacity: 0.4,
+    keyframes: [
+      { prop: 'offsetX' as const, points: [{ t: 0, value: -20 }, { t: 3, value: 20 }] },
+      { prop: 'scale' as const, points: [{ t: 0, value: 0.5 }, { t: 3, value: 1 }] },
+      { prop: 'rotation' as const, points: [{ t: 0, value: 0 }, { t: 3, value: 30 }] },
+      { prop: 'opacity' as const, points: [{ t: 0, value: 0 }, { t: 3, value: 1 }] },
+    ],
+  }
+
+  // Exactly what OverlayItemsLayer computes for a non-overlay item.
+  const previewGeometry = (t: number) => ({
+    ...geometryAt(clip, 'video', t - clip.start),
+    opacity: geometryFor(clip, 'video').opacity,
+  })
+
+  it('position, scale and rotation all advance with the playhead', () => {
+    const a = previewGeometry(0)
+    const b = previewGeometry(1.5)
+    const c = previewGeometry(3)
+    expect(a.offsetX).toBeLessThan(b.offsetX)
+    expect(b.offsetX).toBeLessThan(c.offsetX)
+    expect(a.scale).toBeLessThan(c.scale)
+    expect(a.rotation).toBeLessThan(c.rotation)
+  })
+
+  it('opacity does NOT animate — ffmpeg cannot express it, so neither may the preview', () => {
+    // The whole point: an opacity curve exists on this clip and is ignored.
+    expect(previewGeometry(0).opacity).toBe(0.4)
+    expect(previewGeometry(1.5).opacity).toBe(0.4)
+    expect(previewGeometry(3).opacity).toBe(0.4)
+    // ...while the curve itself would very much have moved.
+    expect(geometryAt(clip, 'video', 1.5).opacity).not.toBe(0.4)
+  })
+
+  it('an overlay still animates opacity, because its render path can', () => {
+    const ov = { ...clip, type: 'overlay' as const }
+    expect(geometryAt(ov, 'overlay', 0).opacity).toBe(0)
+    expect(geometryAt(ov, 'overlay', 3).opacity).toBe(1)
+  })
+
+  it('a clip with no keyframes resolves exactly as it always did', () => {
+    const plain = { id: 'v2', type: 'video' as const, src: '/tmp/b.mp4', start: 0, end: 3, scale: 0.6, offsetX: 4, offsetY: -2, opacity: 0.9 }
+    const g = { ...geometryAt(plain, 'video', 1), opacity: geometryFor(plain, 'video').opacity }
+    expect(g).toMatchObject({ scale: 0.6, offsetX: 4, offsetY: -2, opacity: 0.9 })
+  })
+})

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

@@ -0,0 +1,44 @@
+/// <reference types="vite/client" />
+import { describe, it, expect } from 'vitest'
+import src from '../VideoEditor.tsx?raw'
+
+/**
+ * A source-level assertion rather than a render test: VideoEditor mounts the
+ * whole editor (engine, canvas timeline, workers) and is not cheaply
+ * renderable in jsdom. What matters here is only that the reporter is wired
+ * to the real clock and the real selection state — which the source shows
+ * directly, and which is exactly what a future refactor could silently break.
+ */
+describe('VideoEditor context reporting', () => {
+  it('calls useReportContext', () => {
+    expect(src).toMatch(/useReportContext\(/)
+  })
+
+  it('passes the real clock and both selection states', () => {
+    const call = src.match(/useReportContext\(\{[\s\S]*?\}\)/)?.[0] ?? ''
+    expect(call).toMatch(/clock/)
+    expect(call).toMatch(/selectedIds/)
+    expect(call).toMatch(/selectedCaptionId/)
+    expect(call).toMatch(/adapter/)
+  })
+
+  // D1: captions share `selectedIds` with clips/audio now, so `selectedCaptionId`
+  // must be DERIVED from that array rather than tracked as its own `useState` —
+  // a second selection model is exactly the bug a future refactor could
+  // reintroduce silently, since both compile and both satisfy the assertion
+  // above.
+  it('derives selectedCaptionId from selectedIds instead of its own useState', () => {
+    expect(src).not.toMatch(/\[selectedCaptionId, setSelectedCaptionId\]/)
+    const decl = src.match(/const selectedCaptionId = [^\n]+/)?.[0] ?? ''
+    expect(decl).toMatch(/selectedIds\.find/)
+  })
+
+  // handleSelectCaption used to keep two selection models mutually exclusive
+  // (set the caption id AND clear selectedIds). Under D1 there is one model,
+  // so selecting a caption is just replacing selectedIds.
+  it('handleSelectCaption sets selectedIds directly, not a separate caption state', () => {
+    const fn = src.match(/const handleSelectCaption = useCallback\(\([\s\S]*?\}, \[\]\)/)?.[0] ?? ''
+    expect(fn).toMatch(/setSelectedIds/)
+    expect(fn).not.toMatch(/setSelectedCaptionId/)
+  })
+})

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

@@ -0,0 +1,55 @@
+/// <reference types="vite/client" />
+import { describe, it, expect } from 'vitest'
+import src from '../VideoEditor.tsx?raw'
+
+/**
+ * Source-level, same rationale as VideoEditor.context.test.tsx: VideoEditor
+ * mounts the whole editor (engine, canvas timeline, workers) and is not
+ * cheaply renderable in jsdom, so the closure logic here can't be exercised
+ * through a real double-click. The three things that DO need a live DOM or a
+ * plain function call — "a canvas double-click calls onEditCaption(id)", "a
+ * changed editFocusId nonce scrolls/focuses the sidebar row", and "the nonce
+ * actually climbs off the previous request, not a fixed value" — are already
+ * covered where they live: TimelineCanvas.pointer.test.tsx, CaptionListPanel's
+ * own `editFocusId` tests, and CaptionListPanel.test.tsx's `nextEditFocus`
+ * suite (the increment is a pure exported function specifically so that last
+ * one can be proven behaviourally instead of by matching source text, which
+ * only pins formatting and would miss a wrong-operator bug). What's unique to
+ * VideoEditor, and only lives here, is the bridge between them: that
+ * `handleEditCaption` actually calls both `handleSelectCaption` and
+ * `nextEditFocus` rather than reimplementing either inline.
+ */
+describe('VideoEditor caption edit-focus bridge (Phase 6)', () => {
+  it('imports nextEditFocus from CaptionListPanel — the same shared helper the composition check below points at', () => {
+    expect(src).toMatch(/import CaptionListPanel, \{[^}]*nextEditFocus[^}]*\} from '\.\/CaptionListPanel'/)
+  })
+
+  it('holds editFocusId as its own state, shaped { id, nonce } | null', () => {
+    expect(src).toMatch(/const \[editFocusId, setEditFocusId\] = useState<CaptionEditFocusRequest \| null>\(null\)/)
+  })
+
+  it('handleEditCaption both selects the caption and requests a focus', () => {
+    const fn = src.match(/const handleEditCaption = useCallback\(\([\s\S]*?\}, \[handleSelectCaption\]\)/)?.[0] ?? ''
+    expect(fn).not.toBe('')
+    expect(fn).toMatch(/handleSelectCaption\(id\)/)
+    expect(fn).toMatch(/setEditFocusId/)
+  })
+
+  // A composition check, not a match on the increment's arithmetic — that
+  // arithmetic is unit-tested behaviourally in CaptionListPanel.test.tsx's
+  // `nextEditFocus` suite (`?? 0` vs `?? 1`, `+ 1` present or dropped, etc).
+  // What this can honestly prove from source text alone is that
+  // `handleEditCaption` actually CALLS the shared helper rather than
+  // reimplementing the increment inline — a reformat of `nextEditFocus`'s
+  // body won't break this the way matching its expression verbatim would.
+  it('derives the next focus request via the shared nextEditFocus helper, not an inline reimplementation', () => {
+    const fn = src.match(/const handleEditCaption = useCallback\(\([\s\S]*?\}, \[handleSelectCaption\]\)/)?.[0] ?? ''
+    expect(fn).toMatch(/setEditFocusId\(prev => nextEditFocus\(prev, id\)\)/)
+    expect(fn).not.toMatch(/prev\?\.nonce/)
+  })
+
+  it('threads onEditCaption into Timeline and editFocusId into the sidebar CaptionListPanel', () => {
+    expect(src).toMatch(/onEditCaption=\{handleEditCaption\}/)
+    expect(src).toMatch(/editFocusId=\{editFocusId\}/)
+  })
+})