@bycrux/editor 0.10.0 → 0.11.0

package/src/video/timeline/__tests__/CaptionTrackRow.test.tsx

@@ -0,0 +1,241 @@
+/// <reference types="vitest/globals" />
+import { render, screen, fireEvent } from '@testing-library/react'
+import { createPlaybackClock } from '../../playback-clock'
+import { TimelineContext, type TimelineContextValue } from '../TimelineContext'
+import CaptionTrackRow from '../CaptionTrackRow'
+import type { CaptionSegment } from '../../../schema'
+
+// Content width matches totalDuration 1:1 (1000px / 100s) so a clientX delta
+// of N px is exactly N/10 seconds — makes the drag-math assertions readable.
+const RECT = {
+  width: 1000, height: 40, left: 0, top: 0, right: 1000, bottom: 40, x: 0, y: 0,
+  toJSON: () => ({}),
+} as DOMRect
+
+function makeCtx(overrides: Partial<TimelineContextValue> = {}): TimelineContextValue {
+  return {
+    totalDuration: 100,
+    contentDuration: 100,
+    snapBoundaries: [],
+    zoom: 1,
+    zoomRef: { current: 1 },
+    scrollRef: { current: { getBoundingClientRect: () => RECT } as unknown as HTMLDivElement },
+    scrubberRef: { current: null },
+    overlayDraggedRef: { current: false },
+    clock: createPlaybackClock(),
+    markers: [null, null],
+    setMarkers: () => {},
+    selection: null,
+    ...overrides,
+  }
+}
+
+const seg = (over: Partial<CaptionSegment> = {}): CaptionSegment => ({
+  id: 'cap-0', text: 'hello world', start: 10, end: 20, ...over,
+})
+
+test('empty state renders when captionTrack is absent', () => {
+  render(
+    <TimelineContext.Provider value={makeCtx()}>
+      <CaptionTrackRow captionTrack={undefined} fps={30} selectedCaptionId={null} />
+    </TimelineContext.Provider>,
+  )
+  expect(screen.getByText('Captions')).toBeTruthy()
+})
+
+test('empty state renders when captionTrack has zero segments', () => {
+  render(
+    <TimelineContext.Provider value={makeCtx()}>
+      <CaptionTrackRow captionTrack={{ style: 'clean', segments: [] }} fps={30} selectedCaptionId={null} />
+    </TimelineContext.Provider>,
+  )
+  expect(screen.getByText('Captions')).toBeTruthy()
+})
+
+test('clicking a segment selects it and seeks the playhead into it', () => {
+  const ctx = makeCtx()
+  const onSelectCaption = vi.fn()
+  render(
+    <TimelineContext.Provider value={ctx}>
+      <CaptionTrackRow
+        captionTrack={{ style: 'clean', segments: [seg()] }}
+        fps={30}
+        selectedCaptionId={null}
+        onSelectCaption={onSelectCaption}
+      />
+    </TimelineContext.Provider>,
+  )
+  // The row itself (trackRow) also carries `cursor-pointer`, so anchor off the
+  // segment's text and walk up to its block instead of querying the class.
+  const block = screen.getByText('hello world').parentElement as HTMLDivElement
+  fireEvent.click(block)
+  expect(onSelectCaption).toHaveBeenCalledWith('cap-0')
+  expect(ctx.clock.get()).toBeCloseTo(10 + 0.5 / 30)
+})
+
+// Regression guard: the seek must survive CaptionPreview's frame quantization.
+// The preview computes `t = Math.round(currentTime * fps) / fps` before running
+// the templates' `t >= start && t < end` test, so seeking to a `start` that is
+// not frame-aligned used to round DOWN into the PREVIOUS segment — the operator
+// clicked a caption in the timeline and the preview drew its box over the one
+// before it. Whisper emits arbitrary floats, so this hit about half of all
+// segments.
+test('the seek lands inside the clicked segment even when its start is not frame-aligned', () => {
+  const fps = 30
+  // 3.44 * 30 = 103.2 → frame 103 → t = 3.4333, which is BEFORE 3.44.
+  const segments: CaptionSegment[] = [
+    { id: 'cap-0', text: 'first',  start: 0,    end: 3.44 },
+    { id: 'cap-1', text: 'second', start: 3.44, end: 6.02 },
+  ]
+  const ctx = makeCtx()
+  render(
+    <TimelineContext.Provider value={ctx}>
+      <CaptionTrackRow
+        captionTrack={{ style: 'clean', segments }}
+        fps={fps}
+        selectedCaptionId={null}
+        onSelectCaption={vi.fn()}
+      />
+    </TimelineContext.Provider>,
+  )
+  fireEvent.click(screen.getByText('second').parentElement as HTMLDivElement)
+
+  const t = Math.round(ctx.clock.get() * fps) / fps
+  const active = segments.find((s) => t >= s.start && t < s.end)
+  expect(active?.id).toBe('cap-1')
+})
+
+// Regression guard: `steps/lyrics/caption.py` emits segments with no `id`
+// field at all — ids are only minted later by VideoEditor's
+// backfillCaptionIds effect. On first render `live` is null, so `live?.id`
+// is undefined; an id-less segment's `seg.id` is also undefined, and
+// undefined === undefined used to make `isLive` true and dereference `live!`
+// while it was still null. This is the normal shape of every real project on
+// its first paint, not an edge case.
+test('renders without throwing when segments have no id field (pre-backfill shape)', () => {
+  const segments = [
+    { text: 'hello world', start: 10, end: 20 },
+  ] as unknown as CaptionSegment[]
+  expect(() =>
+    render(
+      <TimelineContext.Provider value={makeCtx()}>
+        <CaptionTrackRow
+          captionTrack={{ style: 'clean', segments }}
+          fps={30}
+          selectedCaptionId={null}
+        />
+      </TimelineContext.Provider>,
+    ),
+  ).not.toThrow()
+})
+
+describe('edge-drag retiming', () => {
+  // Regression guard for the single easiest way to break this feature: a
+  // retime patch must carry ONLY the dragged edge. If `text` ever leaked in,
+  // makeCaptionEdit would respread word timings and destroy per-word timing.
+  it('dragging the right edge sends { end } only — never text/words/other fields', () => {
+    const ctx = makeCtx()
+    const onCaptionSegmentChange = vi.fn()
+    const { container } = render(
+      <TimelineContext.Provider value={ctx}>
+        <CaptionTrackRow
+          captionTrack={{ style: 'clean', segments: [seg()] }}
+          fps={30}
+          selectedCaptionId={null}
+          onCaptionSegmentChange={onCaptionSegmentChange}
+        />
+      </TimelineContext.Provider>,
+    )
+    const handles = container.querySelectorAll('.cursor-ew-resize')
+    const rightHandle = handles[1] as HTMLDivElement
+
+    fireEvent.mouseDown(rightHandle, { clientX: 500 })
+    fireEvent.mouseMove(document, { clientX: 600 }) // +100px = +10s
+    // Not committed until mouseup — retiming must not fire on every tick
+    // (unlike VisualTrackRow, onCaptionSegmentChange pushes an undo entry and
+    // queues a save PER CALL).
+    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
+
+    fireEvent.mouseUp(document)
+    expect(onCaptionSegmentChange).toHaveBeenCalledTimes(1)
+    const [id, patch] = onCaptionSegmentChange.mock.calls[0]
+    expect(id).toBe('cap-0')
+    expect(patch).toEqual({ end: 30 })
+    expect(Object.keys(patch)).toEqual(['end'])
+  })
+
+  // `useItemDragDrop.beginResize` has no travel threshold (unlike `beginDrag`)
+  // and calls onCommit unconditionally on mouseup, so a bare click on the 6px
+  // edge handle used to commit the edge's unchanged value — one undo entry and
+  // one queued save for a project that did not change.
+  it('a press-and-release on an edge handle with no movement commits nothing', () => {
+    const ctx = makeCtx()
+    const onCaptionSegmentChange = vi.fn()
+    const { container } = render(
+      <TimelineContext.Provider value={ctx}>
+        <CaptionTrackRow
+          captionTrack={{ style: 'clean', segments: [seg()] }}
+          fps={30}
+          selectedCaptionId={null}
+          onCaptionSegmentChange={onCaptionSegmentChange}
+        />
+      </TimelineContext.Provider>,
+    )
+    const rightHandle = container.querySelectorAll('.cursor-ew-resize')[1] as HTMLDivElement
+
+    fireEvent.mouseDown(rightHandle, { clientX: 500 })
+    fireEvent.mouseUp(document)
+    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
+  })
+
+  // A drag that returns to where it started is likewise a no-op — the edge
+  // value is what matters, not whether the pointer moved.
+  it('a drag that ends back at the original edge commits nothing', () => {
+    const ctx = makeCtx()
+    const onCaptionSegmentChange = vi.fn()
+    const { container } = render(
+      <TimelineContext.Provider value={ctx}>
+        <CaptionTrackRow
+          captionTrack={{ style: 'clean', segments: [seg()] }}
+          fps={30}
+          selectedCaptionId={null}
+          onCaptionSegmentChange={onCaptionSegmentChange}
+        />
+      </TimelineContext.Provider>,
+    )
+    const rightHandle = container.querySelectorAll('.cursor-ew-resize')[1] as HTMLDivElement
+
+    fireEvent.mouseDown(rightHandle, { clientX: 500 })
+    fireEvent.mouseMove(document, { clientX: 600 })
+    fireEvent.mouseMove(document, { clientX: 500 })
+    fireEvent.mouseUp(document)
+    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
+  })
+
+  it('dragging the left edge sends { start } only', () => {
+    const ctx = makeCtx()
+    const onCaptionSegmentChange = vi.fn()
+    const { container } = render(
+      <TimelineContext.Provider value={ctx}>
+        <CaptionTrackRow
+          captionTrack={{ style: 'clean', segments: [seg()] }}
+          fps={30}
+          selectedCaptionId={null}
+          onCaptionSegmentChange={onCaptionSegmentChange}
+        />
+      </TimelineContext.Provider>,
+    )
+    const handles = container.querySelectorAll('.cursor-ew-resize')
+    const leftHandle = handles[0] as HTMLDivElement
+
+    fireEvent.mouseDown(leftHandle, { clientX: 500 })
+    fireEvent.mouseMove(document, { clientX: 400 }) // -100px = -10s
+    fireEvent.mouseUp(document)
+
+    expect(onCaptionSegmentChange).toHaveBeenCalledTimes(1)
+    const [id, patch] = onCaptionSegmentChange.mock.calls[0]
+    expect(id).toBe('cap-0')
+    expect(patch).toEqual({ start: 0 })
+    expect(Object.keys(patch)).toEqual(['start'])
+  })
+})

package/src/video/timeline/__tests__/TranscriptModal.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import type { Project } from '../../../types'
+import type { CaptionSegment } from '../../../schema'
+import TranscriptModal from '../TranscriptModal'
+
+afterEach(() => cleanup())
+
+function makeProject(segments: CaptionSegment[]): Project {
+  return { id: 'p1', captions: { style: 'word-by-word', segments } } as unknown as Project
+}
+
+describe('TranscriptModal caption text edits', () => {
+  // Regression: makeCaptionEdit fires every callback it's given with the same
+  // updated project. TranscriptModal used to pass BOTH onProjectChange and
+  // onCaptionEdit into makeCaptionEdit for a text edit, and — at this
+  // component's real call site (VideoEditor's ReviewSurface, via Timeline) —
+  // both land on sync.mutate, so one text edit produced two undo entries and
+  // two queued saves. Only onCaptionEdit (the commit channel) should fire;
+  // onProjectChange is no longer even an accepted prop (see TranscriptModal.tsx).
+  it('a completed text edit produces exactly one commit, not two', () => {
+    const onCaptionEdit = vi.fn()
+    const project = makeProject([{ id: 'cap-0', text: 'hello world', start: 0, end: 2 }])
+    render(
+      <TranscriptModal
+        captionTrack={project.captions}
+        currentTime={0}
+        project={project}
+        onCaptionEdit={onCaptionEdit}
+        onClose={() => {}}
+      />,
+    )
+
+    const span = screen.getByText('hello world')
+    span.textContent = 'hello there'
+    fireEvent.blur(span)
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.segments[0].text).toBe('hello there')
+  })
+})

package/src/video/timeline/__tests__/TranscriptPanel.test.tsx

@@ -83,3 +83,25 @@ describe('TranscriptPanel caption color controls', () => {
     expect((screen.getByLabelText('Caption highlight color') as HTMLInputElement).value).toBe('#00ff00')
   })
 })
+
+describe('TranscriptPanel caption text edits', () => {
+  // Regression: makeCaptionEdit fires every callback it's given with the same
+  // updated project. TranscriptPanel used to pass BOTH onProjectChange and
+  // onCaptionEdit into makeCaptionEdit for a text edit, and — at this
+  // component's real call site (VideoEditor's ReviewSurface) — both land on
+  // sync.mutate, so one text edit produced two undo entries and two queued
+  // saves. Only onCaptionEdit (the commit channel) should fire.
+  it('a completed text edit produces exactly one commit, not two', () => {
+    const { onCaptionEdit, onProjectChange } = renderPanel('karaoke', {
+      segments: [{ id: 'cap-0', text: 'hello world', start: 0, end: 2 }],
+    })
+
+    const span = screen.getByText('hello world')
+    span.textContent = 'hello there'
+    fireEvent.blur(span)
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.segments[0].text).toBe('hello there')
+    expect(onProjectChange).not.toHaveBeenCalled()
+  })
+})

package/src/video/timeline/__tests__/makeCaptionEdit.test.ts

@@ -0,0 +1,123 @@
+import { describe, it, expect, vi } from 'vitest'
+import type { Project } from '../../../types'
+import type { CaptionSegment } from '../../../schema'
+import { makeCaptionEdit } from '../makeCaptionEdit'
+
+function seg(overrides: Partial<CaptionSegment> = {}): CaptionSegment {
+  return { id: 'cap-0', text: 'hello world', start: 0, end: 2, ...overrides }
+}
+
+function project(segments: CaptionSegment[]): Project {
+  return { id: 'p1', captions: { style: 'word-by-word', segments } } as unknown as Project
+}
+
+describe('makeCaptionEdit', () => {
+  it('is a no-op when project.captions is absent', () => {
+    const onProjectChange = vi.fn()
+    const onCaptionEdit = vi.fn()
+    const p = { id: 'p1' } as unknown as Project
+    makeCaptionEdit(0, p, onProjectChange, onCaptionEdit)('new text')
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+  })
+
+  it('accepts a bare string, treated as { text }, and respreads words (index target)', () => {
+    const onProjectChange = vi.fn()
+    const p = project([seg()])
+    makeCaptionEdit(0, p, onProjectChange)('foo bar baz')
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    const out = updated.captions!.segments[0]
+    expect(out.text).toBe('foo bar baz')
+    expect(out.words).toHaveLength(3)
+    expect(out.words![0]).toEqual({ word: 'foo', start: 0, end: 2 / 3 })
+    expect(out.words![2].end).toBeCloseTo(2)
+  })
+
+  it('addresses a segment by string id', () => {
+    const onProjectChange = vi.fn()
+    const p = project([seg({ id: 'cap-0' }), seg({ id: 'cap-1', text: 'second', start: 2, end: 4 })])
+    makeCaptionEdit('cap-1', p, onProjectChange)('renamed')
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    expect(updated.captions!.segments[0].text).toBe('hello world') // untouched
+    expect(updated.captions!.segments[1].text).toBe('renamed')
+  })
+
+  it('applies a position-only patch without touching words', () => {
+    const onProjectChange = vi.fn()
+    const original = seg({ words: [{ word: 'hello', start: 0, end: 1 }, { word: 'world', start: 1, end: 2 }] })
+    const p = project([original])
+    makeCaptionEdit(0, p, onProjectChange)({ offsetX: 10, offsetY: -5 })
+    const out = onProjectChange.mock.calls[0][0].captions.segments[0] as CaptionSegment
+    expect(out.offsetX).toBe(10)
+    expect(out.offsetY).toBe(-5)
+    expect(out.text).toBe('hello world')
+    expect(out.words).toEqual(original.words)
+  })
+
+  it('applies a retime-only patch ({ start, end }) without touching words', () => {
+    const onProjectChange = vi.fn()
+    const original = seg({ words: [{ word: 'hello', start: 0, end: 1 }, { word: 'world', start: 1, end: 2 }] })
+    const p = project([original])
+    makeCaptionEdit(0, p, onProjectChange)({ start: 5, end: 9 })
+    const out = onProjectChange.mock.calls[0][0].captions.segments[0] as CaptionSegment
+    expect(out.start).toBe(5)
+    expect(out.end).toBe(9)
+    expect(out.words).toEqual(original.words)
+  })
+
+  it('respreads words against the NEW duration when text and start/end change together', () => {
+    const onProjectChange = vi.fn()
+    const p = project([seg({ start: 0, end: 2 })])
+    makeCaptionEdit(0, p, onProjectChange)({ text: 'foo bar', start: 10, end: 14 })
+    const out = onProjectChange.mock.calls[0][0].captions.segments[0] as CaptionSegment
+    expect(out.words).toEqual([
+      { word: 'foo', start: 10, end: 12 },
+      { word: 'bar', start: 12, end: 14 },
+    ])
+  })
+
+  it('does not let undefined keys in the patch clobber existing values', () => {
+    const onProjectChange = vi.fn()
+    const p = project([seg({ offsetX: 7 })])
+    makeCaptionEdit(0, p, onProjectChange)({ offsetX: undefined, scale: 1.5 })
+    const out = onProjectChange.mock.calls[0][0].captions.segments[0] as CaptionSegment
+    expect(out.offsetX).toBe(7)
+    expect(out.scale).toBe(1.5)
+  })
+
+  it('leaves other segments untouched', () => {
+    const onProjectChange = vi.fn()
+    const p = project([seg({ id: 'cap-0' }), seg({ id: 'cap-1', text: 'second' })])
+    makeCaptionEdit(0, p, onProjectChange)({ scale: 2 })
+    const segments = onProjectChange.mock.calls[0][0].captions.segments as CaptionSegment[]
+    expect(segments[1]).toEqual(p.captions!.segments[1])
+  })
+
+  it('is a no-op (no callback) when the numeric index is out of range', () => {
+    const onProjectChange = vi.fn()
+    const onCaptionEdit = vi.fn()
+    const p = project([seg()])
+    makeCaptionEdit(5, p, onProjectChange, onCaptionEdit)('x')
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+  })
+
+  it('is a no-op (no callback) when the string id matches no segment', () => {
+    const onProjectChange = vi.fn()
+    const onCaptionEdit = vi.fn()
+    const p = project([seg({ id: 'cap-0' })])
+    makeCaptionEdit('cap-nope', p, onProjectChange, onCaptionEdit)({ scale: 1.2 })
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+  })
+
+  it('calls both onProjectChange and onCaptionEdit with the updated project', () => {
+    const onProjectChange = vi.fn()
+    const onCaptionEdit = vi.fn()
+    const p = project([seg()])
+    makeCaptionEdit(0, p, onProjectChange, onCaptionEdit)({ scale: 1.5 })
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onProjectChange.mock.calls[0][0]).toBe(onCaptionEdit.mock.calls[0][0])
+  })
+})

package/src/video/timeline/makeCaptionEdit.ts

@@ -1,28 +1,51 @@
 import type { Project } from '../../types'
+import type { CaptionSegment } from '../../schema'
+
+/** Fields `makeCaptionEdit` can patch onto a single caption segment. */
+export type CaptionEditPatch = Partial<CaptionSegment>
 
 export function makeCaptionEdit(
-  globalIdx: number,
+  target: number | string,
   project: Project,
   onProjectChange?: (p: Project) => void,
   onCaptionEdit?: (p: Project) => void,
 ) {
-  return (text: string) => {
+  return (patch: string | CaptionEditPatch) => {
     if (!project.captions) return
+    const segments = project.captions.segments
+    // `target` addresses a segment by index (legacy call sites) or by `id`
+    // (new callers). A non-matching target is a no-op — no update, no callback.
+    const idx = typeof target === 'number' ? target : segments.findIndex((s) => s.id === target)
+    if (idx < 0 || idx >= segments.length) return
+
+    // A bare string is sugar for `{ text }`, preserving EditableSegment's contract.
+    const patchObj: CaptionEditPatch = typeof patch === 'string' ? { text: patch } : patch
+    // Only keys explicitly present (and not undefined) may overwrite the
+    // segment — an omitted or undefined key must never clobber the existing value.
+    const definedPatch = Object.fromEntries(
+      Object.entries(patchObj).filter(([, v]) => v !== undefined),
+    ) as CaptionEditPatch
+
     const updated = {
       ...project,
       captions: {
         ...project.captions,
-        segments: project.captions.segments.map((s, j) => {
-          if (j !== globalIdx) return s
-          const newWords = text.split(/\s+/).filter(Boolean)
-          const segDur = s.end - s.start
+        segments: segments.map((s, j) => {
+          if (j !== idx) return s
+          const next: CaptionSegment = { ...s, ...definedPatch }
+          if (definedPatch.text === undefined) return next
+          // Respread words evenly across the segment duration. Applied AFTER the
+          // patch merge so a combined `{ text, start, end }` edit retimes words
+          // against the new duration, not the stale one.
+          const newWords = next.text.split(/\s+/).filter(Boolean)
+          const segDur = next.end - next.start
           const wordDur = segDur / (newWords.length || 1)
-          const words = newWords.map((w, wi) => ({
+          next.words = newWords.map((w, wi) => ({
             word: w,
-            start: s.start + wi * wordDur,
-            end: s.start + (wi + 1) * wordDur,
+            start: next.start + wi * wordDur,
+            end: next.start + (wi + 1) * wordDur,
           }))
-          return { ...s, text, words }
+          return next
         }),
       },
     }