@bycrux/editor 0.9.0 → 0.11.0

package/src/video/timeline/Scrubber.tsx

@@ -1,5 +1,6 @@
 import { formatTime, pct, ratioFromClientX } from './utils'
 import { useTimelineContext } from './TimelineContext'
+import { usePlaybackTime } from '../playback-clock'
 
 interface ScrubberProps {
   hoverPct: number | null
@@ -20,12 +21,13 @@ export default function Scrubber({
   onCut,
   cutButtonLabel,
 }: ScrubberProps) {
-  const { currentTime, totalDuration, contentDuration, markers, setMarkers, snapBoundaries, onTimeUpdate, scrubberRef, selection } = useTimelineContext()
+  const { clock, totalDuration, contentDuration, markers, setMarkers, snapBoundaries, scrubberRef, selection } = useTimelineContext()
+  const currentTime = usePlaybackTime(clock)
 
   function handleScrubClick(e: React.MouseEvent<HTMLDivElement>) {
     e.stopPropagation()
     if (totalDuration === 0) return
-    onTimeUpdate(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
+    clock.set(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
   }
 
   function handleScrubDoubleClick(e: React.MouseEvent<HTMLDivElement>) {
@@ -96,14 +98,14 @@ export default function Scrubber({
               const rawT = ratioFromClientX(me.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration
               // Already snapped — hold until cursor escapes release radius
               if (snappedTo !== null) {
-                if (Math.abs(rawT - snappedTo) < release) { onTimeUpdate(snappedTo); return }
+                if (Math.abs(rawT - snappedTo) < release) { clock.set(snappedTo); return }
                 snappedTo = null
               }
               // Scan for attraction
               for (const b of boundaries) {
-                if (Math.abs(rawT - b) < attract) { snappedTo = b; onTimeUpdate(b); return }
+                if (Math.abs(rawT - b) < attract) { snappedTo = b; clock.set(b); return }
               }
-              onTimeUpdate(rawT)
+              clock.set(rawT)
             }
             function onUp() {
               setDraggingPlayhead(false)

package/src/video/timeline/Timeline.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from 'react'
 import AudioTrackRow from './AudioTrackRow'
 import type { GetWaveformChunks, ResolveFilePath } from './AudioWaveformLayer'
 import type { Project } from '../../types'
@@ -6,22 +6,34 @@ import { collapseGaps } from '../cuts'
 import { ratioFromClientX } from './utils'
 import { useTimelineZoom } from './useTimelineZoom'
 import { TimelineContext, type TimelineContextValue } from './TimelineContext'
+import { usePlaybackTime, type PlaybackClock } from '../playback-clock'
 import Scrubber from './Scrubber'
 import TranscriptPanel from './TranscriptPanel'
 import TranscriptModal from './TranscriptModal'
 import VisualTrackRow from './VisualTrackRow'
+import CaptionTrackRow from './CaptionTrackRow'
 import { deleteSelection, toggleSelection } from './multiSelectOps'
+import type { CaptionEditPatch } from './makeCaptionEdit'
 
 interface TimelineProps {
   project: Project
-  currentTime: number
-  onTimeUpdate: (t: number) => void
+  clock: PlaybackClock
   onProjectChange?: (p: Project) => void
   onCaptionEdit?: (p: Project) => void
   onOverlayEdit?: (p: Project) => void
+  /** Open the overlay props dialog (owned by VideoEditor). Threaded to each
+   *  VisualTrackRow so a selected overlay block can offer an edit button. */
+  onEditOverlay?: (id: string) => void
   /** Unified selection — covers both visual items and audio tracks. */
   selectedIds?: string[]
   onSelectIds?: (ids: string[]) => void
+  /** Selected caption segment id — shared with the preview's selection box.
+   *  Mutually exclusive with `selectedIds` (see CaptionTrackRow). */
+  selectedCaptionId?: string | null
+  onSelectCaption?: (id: string | null) => void
+  /** Commit a caption segment patch — text edit or edge-drag retime. Threaded
+   *  straight to CaptionTrackRow (see makeCaptionEdit.ts). */
+  onCaptionSegmentChange?: (segmentId: string, patch: CaptionEditPatch) => void
   onSplit?: (at: number) => void
   onCut?: (cut: { start: number; end: number }) => void
   onInspectClip?: (id: string) => void
@@ -54,29 +66,46 @@ interface TimelineProps {
 }
 
 
-export default function Timeline({ project, currentTime, onTimeUpdate, onProjectChange, onCaptionEdit, onOverlayEdit, selectedIds = [], onSelectIds, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen, onRegenerateCaptions }: TimelineProps) {
+export default function Timeline({ project, clock, onProjectChange, onCaptionEdit, onOverlayEdit, onEditOverlay, selectedIds = [], onSelectIds, selectedCaptionId = null, onSelectCaption, onCaptionSegmentChange, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen, onRegenerateCaptions }: TimelineProps) {
   const primarySelectedId = selectedIds[0] ?? null
 
   // Click/shift-click handler — additive selection on shift or meta (cmd/ctrl).
+  // Also enforces the item→caption half of the two selection models' mutual
+  // exclusivity: selecting a real item clears `selectedCaptionId`, and so does
+  // clicking empty track space (id === null) — otherwise a "deselect all" click
+  // would clear the item handles but leave the caption's preview handles up,
+  // and since nothing else clears caption selection there would be no way to
+  // put a caption down at all. The other half (caption select clears
+  // `selectedIds`) lives in VideoEditor's wrapped `onSelectCaption`, since a
+  // caption can be selected from the preview too — outside Timeline entirely —
+  // not just from CaptionTrackRow.
   function handleSelectItem(id: string | null, additive: boolean) {
     if (!onSelectIds) return
+    onSelectCaption?.(null)
     if (id === null) { onSelectIds([]); return }
     onSelectIds(toggleSelection(selectedIds, id, additive))
   }
   const allTracks      = project.tracks ?? []
   const captionTrack   = project.captions
   const audioTracks    = project.audio?.tracks ?? []
-  const snapBoundaries = [...new Set([
-    ...allTracks.flat().flatMap(c => [c.start, c.end]),
-    ...audioTracks.flatMap(t => [t.start, t.end]),
-  ])]
-  const contentDuration = Math.max(
-    allTracks.flat().reduce((m, i) => Math.max(m, i.end ?? 0), 0),
-    audioTracks.reduce((m, t) => Math.max(m, t.end ?? 0), 0),
-  )
-  // Add 20% padding beyond content so the rightmost item can always be
-  // dragged or resized further out. Minimum 5s headroom.
-  const totalDuration  = contentDuration + Math.max(5, contentDuration * 0.2)
+
+  // Memoized so playback ticks (which re-render Timeline via the ctx useMemo's
+  // clock dependency) don't recompute these on every frame — they only change
+  // when the underlying tracks/audio actually change.
+  const { snapBoundaries, contentDuration, totalDuration } = useMemo(() => {
+    const snapBoundaries = [...new Set([
+      ...allTracks.flat().flatMap(c => [c.start, c.end]),
+      ...audioTracks.flatMap(t => [t.start, t.end]),
+    ])]
+    const contentDuration = Math.max(
+      allTracks.flat().reduce((m, i) => Math.max(m, i.end ?? 0), 0),
+      audioTracks.reduce((m, t) => Math.max(m, t.end ?? 0), 0),
+    )
+    // Add 20% padding beyond content so the rightmost item can always be
+    // dragged or resized further out. Minimum 5s headroom.
+    const totalDuration = contentDuration + Math.max(5, contentDuration * 0.2)
+    return { snapBoundaries, contentDuration, totalDuration }
+  }, [project.tracks, project.audio])
 
   // Auto-crossfade: when two audio tracks overlap, apply fade-out on the earlier
   // and fade-in on the later, each equal to the overlap duration.
@@ -149,15 +178,15 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
       e.preventDefault()
       const step = e.shiftKey ? 1 : frame
       const dir  = e.key === 'ArrowRight' ? 1 : -1
-      const next = Math.max(0, Math.min(totalDuration, currentTime + dir * step))
-      onTimeUpdate(next)
+      const next = Math.max(0, Math.min(totalDuration, clock.get() + dir * step))
+      clock.set(next)
       setKeyNavTime(next)
       if (keyNavTimerRef.current) clearTimeout(keyNavTimerRef.current)
       keyNavTimerRef.current = setTimeout(() => setKeyNavTime(null), 1500)
     }
     document.addEventListener('keydown', onKey)
     return () => document.removeEventListener('keydown', onKey)
-  }, [totalDuration, currentTime, onTimeUpdate, project.settings?.fps, transcriptModalOpen])
+  }, [totalDuration, clock, project.settings?.fps, transcriptModalOpen])
 
   // Derive selection from two placed markers
   const selection = markers[0] !== null && markers[1] !== null
@@ -166,9 +195,9 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
   const ctx = useMemo<TimelineContextValue>(() => ({
     totalDuration, contentDuration, snapBoundaries, zoom, zoomRef, scrollRef, scrubberRef,
-    overlayDraggedRef, currentTime, onTimeUpdate, markers, setMarkers, selection,
+    overlayDraggedRef, clock, markers, setMarkers, selection,
   }), [totalDuration, contentDuration, snapBoundaries, zoom, zoomRef, scrollRef, scrubberRef,
-    overlayDraggedRef, currentTime, onTimeUpdate, markers, setMarkers, selection])
+    overlayDraggedRef, clock, markers, setMarkers, selection])
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
     if ((e.target as HTMLElement).isContentEditable) return
@@ -186,10 +215,11 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
     if (e.key !== 'Enter' || totalDuration === 0) return
     e.preventDefault()
+    const t = clock.get()
     setMarkers(([a, b]) => {
-      if (a === null) return [currentTime, null]
-      if (b === null) return [a, currentTime]
-      return [currentTime, null]
+      if (a === null) return [t, null]
+      if (b === null) return [a, t]
+      return [t, null]
     })
   }
 
@@ -202,9 +232,9 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     const snapThreshold = (8 / rect.width) * totalDuration
     const boundaries = snapBoundaries
     for (const b of boundaries) {
-      if (Math.abs(clickedTime - b) < snapThreshold) { onTimeUpdate(b); return }
+      if (Math.abs(clickedTime - b) < snapThreshold) { clock.set(b); return }
     }
-    onTimeUpdate(clickedTime)
+    clock.set(clickedTime)
   }
 
   const cutButtonLabel = primarySelectedId
@@ -280,6 +310,17 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
             <span>ffmpeg render — overlays are preview only, final text is burned by ffmpeg</span>
           </div>
         )}
+        {/* ── Caption track — its own row above the visual tracks. NOT part of
+            tracks[]; reads/writes project.captions directly (see
+            CaptionTrackRow's file header for the special-track rationale). ── */}
+        <CaptionTrackRow
+          captionTrack={captionTrack}
+          fps={project.settings?.fps ?? 30}
+          selectedCaptionId={selectedCaptionId}
+          onSelectCaption={onSelectCaption}
+          onCaptionSegmentChange={onCaptionSegmentChange}
+        />
+
         {[...allTracks].reverse().map((trackItems, reversedIdx) => {
           const trackIdx = allTracks.length - 1 - reversedIdx
           return (
@@ -292,6 +333,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
               rippleMode={rippleMode}
               onProjectChange={onProjectChange}
               onOverlayEdit={onOverlayEdit}
+              onEditOverlay={onEditOverlay}
               onSelectItem={handleSelectItem}
               onInspectClip={onInspectClip}
               subcutClipId={subcutClipId}
@@ -357,10 +399,13 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
       })()}
 
       {/* ── Transcript editor ── */}
-      <TranscriptPanel
+      {/* Wrapped in a clock-subscribing child so the active-segment highlight
+          tracks the playhead WITHOUT Timeline (and its track rows) re-rendering
+          every tick. */}
+      <TranscriptPanelWithClock
+        clock={clock}
         project={project}
         captionTrack={captionTrack}
-        currentTime={currentTime}
         onCaptionEdit={onCaptionEdit}
         onProjectChange={onProjectChange}
         onExpand={() => setTranscriptModalOpen(true)}
@@ -369,11 +414,10 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
       {/* ── Transcript modal ── */}
       {transcriptModalOpen && (
-        <TranscriptModal
+        <TranscriptModalWithClock
+          clock={clock}
           project={project}
           captionTrack={captionTrack}
-          currentTime={currentTime}
-          onProjectChange={onProjectChange}
           onCaptionEdit={onCaptionEdit}
           onClose={() => setTranscriptModalOpen(false)}
         />
@@ -383,3 +427,23 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     </TimelineContext.Provider>
   )
 }
+
+// The transcript views highlight the active caption segment, so they genuinely
+// display time and must re-render every tick. Subscribing HERE (rather than in
+// Timeline) keeps the per-tick re-render scoped to these leaves — Timeline and
+// the track rows are unaffected.
+function TranscriptPanelWithClock({
+  clock,
+  ...rest
+}: { clock: PlaybackClock } & Omit<ComponentProps<typeof TranscriptPanel>, 'currentTime'>) {
+  const currentTime = usePlaybackTime(clock)
+  return <TranscriptPanel currentTime={currentTime} {...rest} />
+}
+
+function TranscriptModalWithClock({
+  clock,
+  ...rest
+}: { clock: PlaybackClock } & Omit<ComponentProps<typeof TranscriptModal>, 'currentTime'>) {
+  const currentTime = usePlaybackTime(clock)
+  return <TranscriptModal currentTime={currentTime} {...rest} />
+}

package/src/video/timeline/TimelineContext.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react'
+import type { PlaybackClock } from '../playback-clock'
 
 export interface TimelineContextValue {
   totalDuration: number
@@ -9,8 +10,7 @@ export interface TimelineContextValue {
   scrollRef: React.RefObject<HTMLDivElement | null>
   scrubberRef: React.RefObject<HTMLDivElement | null>
   overlayDraggedRef: React.MutableRefObject<boolean>
-  currentTime: number
-  onTimeUpdate: (t: number) => void
+  clock: PlaybackClock
   markers: [number | null, number | null]
   setMarkers: (m: [number | null, number | null] | ((prev: [number | null, number | null]) => [number | null, number | null])) => void
   selection: { start: number; end: number } | null

package/src/video/timeline/TranscriptModal.tsx

@@ -9,12 +9,17 @@ interface TranscriptModalProps {
   captionTrack: Project['captions'] | undefined
   currentTime: number
   project: Project
-  onProjectChange?: (project: Project) => void
+  // `onProjectChange` deliberately NOT accepted here: `makeCaptionEdit` fires
+  // both callbacks it's given with the same updated project (see
+  // makeCaptionEdit.ts), and a text edit only fires once (on blur), so there is
+  // no live-preview gesture to route through a second channel — only
+  // `onCaptionEdit` (the commit path) is needed. Accepting-but-ignoring it would
+  // invite a future call site to re-introduce the double-commit bug this fixed.
   onCaptionEdit?: (project: Project) => void
   onClose: () => void
 }
 
-export default function TranscriptModal({ captionTrack, currentTime, project, onProjectChange, onCaptionEdit, onClose }: TranscriptModalProps) {
+export default function TranscriptModal({ captionTrack, currentTime, project, onCaptionEdit, onClose }: TranscriptModalProps) {
   useEffect(() => {
     const onKey = (e: globalThis.KeyboardEvent) => { if (e.key === 'Escape') onClose() }
     document.addEventListener('keydown', onKey)
@@ -50,7 +55,9 @@ export default function TranscriptModal({ captionTrack, currentTime, project, on
               >
                 <span className="text-gray-600 text-[10px] font-mono shrink-0 w-12 pt-px">{formatTime(seg.start)}</span>
                 <span className={`text-sm leading-snug ${isActive ? 'text-white' : 'text-gray-300'}`}>
-                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, onProjectChange, onCaptionEdit)} />
+                  {/* Commit-only — see the file-header note on why `onProjectChange`
+                      isn't accepted/passed here. */}
+                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, undefined, onCaptionEdit)} />
                 </span>
               </div>
             )

package/src/video/timeline/TranscriptPanel.tsx

@@ -213,7 +213,13 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
                 {vi > 0 && ' '}
                 <span className="text-gray-500 text-[10px] font-mono mr-1">{formatTime(seg.start)}</span>
                 <span className={isActive ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}>
-                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, onProjectChange, onCaptionEdit)} />
+                  {/* Commit-only: `onProjectChange` is this component's LIVE-preview
+                      channel (see the fontsize/color controls above) — but a text
+                      edit fires once, on blur, and is already a complete, discrete
+                      change, not a continuous gesture. Passing both callbacks here
+                      would double-fire `sync.mutate` for one edit (two undo entries,
+                      two queued saves); `onCaptionEdit` is the single commit path. */}
+                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, undefined, onCaptionEdit)} />
                 </span>
               </span>
             )

package/src/video/timeline/VisualTrackRow.tsx

@@ -1,9 +1,11 @@
-import { Volume2, VolumeX, Info, Scissors } from 'lucide-react'
+import { memo } from 'react'
+import { Volume2, VolumeX, Info, Scissors, Pencil } from 'lucide-react'
 import type { VisualItem } from '../../schema'
 import type { Project } from '../../types'
 import { collapseGaps } from '../cuts'
 import { pct, ratioFromClientX, trackRow, trackRowTall } from './utils'
 import { useTimelineContext } from './TimelineContext'
+import PlayheadLine from './PlayheadLine'
 import { useItemDragDrop } from './useItemDragDrop'
 import type { Draggable, DragEventContext } from './useItemDragDrop'
 import { applyMuteToSelection, applyResizeDeltaToSelection, deleteSelection } from './multiSelectOps'
@@ -17,6 +19,8 @@ interface VisualTrackRowProps {
   rippleMode: boolean
   onProjectChange?: (p: Project) => void
   onOverlayEdit?: (p: Project) => void
+  /** Open the overlay props dialog for an overlay item (VideoEditor owns it). */
+  onEditOverlay?: (id: string) => void
   /** Click handler — additive when shift/meta is held. */
   onSelectItem: (id: string | null, additive: boolean) => void
   onInspectClip?: (id: string) => void
@@ -41,7 +45,7 @@ const trackColors = [
   { bg: 'bg-amber-700/60',  bgHov: 'hover:bg-amber-700/80',  bgSel: 'bg-amber-600/80',  ring: 'ring-amber-400/80',  border: 'border-amber-500/50',  text: 'text-amber-200',  resHov: 'hover:bg-amber-300/40'  },
 ]
 
-export default function VisualTrackRow({
+function VisualTrackRow({
   trackItems,
   trackIdx,
   project,
@@ -49,6 +53,7 @@ export default function VisualTrackRow({
   rippleMode,
   onProjectChange,
   onOverlayEdit,
+  onEditOverlay,
   onSelectItem,
   onInspectClip,
   subcutClipId,
@@ -56,7 +61,7 @@ export default function VisualTrackRow({
   regenEnabled,
   isClipQueued,
 }: VisualTrackRowProps) {
-  const { totalDuration, snapBoundaries, scrollRef, scrubberRef, currentTime, onTimeUpdate, markers, setMarkers, selection, overlayDraggedRef, zoomRef } = useTimelineContext()
+  const { totalDuration, snapBoundaries, scrollRef, scrubberRef, clock, markers, setMarkers, selection, overlayDraggedRef, zoomRef } = useTimelineContext()
   const tc = trackColors[trackIdx % trackColors.length]
   const markerActive = markers[0] !== null || selection !== null
   const primarySelectedId = selectedIds[0] ?? null
@@ -193,18 +198,11 @@ export default function VisualTrackRow({
     const snapThreshold = rect ? (8 / rect.width) * totalDuration : 0
     const boundaries = snapBoundaries
     for (const b of boundaries) {
-      if (Math.abs(clickedTime - b) < snapThreshold) { onTimeUpdate(b); return }
+      if (Math.abs(clickedTime - b) < snapThreshold) { clock.set(b); return }
     }
-    onTimeUpdate(clickedTime)
+    clock.set(clickedTime)
   }
 
-  const playheadLine = (
-    <div
-      className="absolute top-0 bottom-0 w-[2px] bg-red-500 pointer-events-none z-10"
-      style={{ left: `${pct(currentTime, totalDuration)}%` }}
-    />
-  )
-
   return (
     <div className={`${trackIdx === 0 ? trackRowTall : trackRow} transition-opacity ${dimmed ? 'opacity-30 pointer-events-none' : ''}`} onClick={handleTrackClick} onDoubleClick={handleScrubDoubleClick}>
       {trackItems.map((item) => {
@@ -223,7 +221,7 @@ export default function VisualTrackRow({
               onSelectItem(item.id, additive)
               // Only seek playhead on a plain single-select click (not on
               // additive shift-clicks, which shouldn't disrupt scrubbing).
-              if (!additive && !isSel) onTimeUpdate(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
+              if (!additive && !isSel) clock.set(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
             }}
             onDoubleClick={(e) => {
               e.stopPropagation()
@@ -267,6 +265,13 @@ export default function VisualTrackRow({
                 title="Subcut regenerate"
               ><Scissors size={10} /></button>
             )}
+            {isSel && onEditOverlay && item.type === 'overlay' && !!item.src && (
+              <button
+                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-60 hover:opacity-100 ${tc.text}`}
+                onClick={(e) => { e.stopPropagation(); onEditOverlay(item.id) }}
+                title="Edit overlay"
+              ><Pencil size={10} /></button>
+            )}
             {isSel && (
               <button
                 className={`shrink-0 ml-1 mr-3 z-10 cursor-pointer opacity-60 hover:opacity-100 ${tc.text} text-[11px] leading-none`}
@@ -281,7 +286,7 @@ export default function VisualTrackRow({
           </div>
         )
       })}
-      {playheadLine}
+      <PlayheadLine />
       {selection && (
         <div
           className="absolute inset-y-0 bg-red-500/20 pointer-events-none"
@@ -291,3 +296,5 @@ export default function VisualTrackRow({
     </div>
   )
 }
+
+export default memo(VisualTrackRow)