@bycrux/editor 0.9.0 → 0.10.0

package/src/video/timeline/AudioTrackRow.tsx

@@ -5,12 +5,13 @@
 // cross-lane drag, edge trim, mute toggle, inline volume, delete,
 // click-to-select, and inspect button.
 
-import { useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import { Volume2, VolumeX, Trash2, Info } from 'lucide-react'
 import type { AudioTrack } from '../../schema'
 import type { Project } from '../../types'
 import { pct } from './utils'
 import { useTimelineContext } from './TimelineContext'
+import PlayheadLine from './PlayheadLine'
 import { useItemDragDrop } from './useItemDragDrop'
 import type { Draggable, DragEventContext } from './useItemDragDrop'
 import AudioWaveformLayer from './AudioWaveformLayer'
@@ -46,7 +47,7 @@ function updateAudioTrack(project: Project, trackId: string, changes: Partial<Au
   }
 }
 
-export default function AudioTrackRow({
+function AudioTrackRow({
   tracks,
   laneIndex,
   laneCount,
@@ -61,7 +62,6 @@ export default function AudioTrackRow({
 }: AudioTrackRowProps) {
   const {
     totalDuration,
-    currentTime,
     snapBoundaries,
     scrollRef,
     overlayDraggedRef,
@@ -78,11 +78,7 @@ export default function AudioTrackRow({
 
   return (
     <div className="relative h-10 bg-gray-100 dark:bg-gray-900 rounded overflow-hidden cursor-pointer">
-      {/* Playhead line */}
-      <div
-        className="absolute top-0 bottom-0 w-[2px] bg-red-500 pointer-events-none z-10"
-        style={{ left: `${pct(currentTime, totalDuration)}%` }}
-      />
+      <PlayheadLine />
       {tracks.map(track => (
         <AudioTrackItem
           key={track.id}
@@ -139,6 +135,8 @@ export default function AudioTrackRow({
   )
 }
 
+export default memo(AudioTrackRow)
+
 // ── Single audio item within a lane ──────────────────────────────────────────
 
 interface AudioTrackItemProps {

package/src/video/timeline/PlayheadLine.tsx

@@ -0,0 +1,18 @@
+import { useTimelineContext } from './TimelineContext'
+import { usePlaybackTime } from '../playback-clock'
+import { pct } from './utils'
+
+/** Leaf playhead indicator: the ONLY per-tick subscriber inside track rows.
+ *  Isolating the clock subscription here means VisualTrackRow/AudioTrackRow
+ *  (and everything else in a row) no longer re-render on every playback tick. */
+export default function PlayheadLine() {
+  const { clock, totalDuration } = useTimelineContext()
+  const currentTime = usePlaybackTime(clock)
+  if (totalDuration === 0) return null
+  return (
+    <div
+      className="absolute top-0 bottom-0 w-[2px] bg-red-500 pointer-events-none z-10"
+      style={{ left: `${pct(currentTime, totalDuration)}%` }}
+    />
+  )
+}

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,6 +6,7 @@ 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'
@@ -14,11 +15,13 @@ import { deleteSelection, toggleSelection } from './multiSelectOps'
 
 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
@@ -54,7 +57,7 @@ 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, 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).
@@ -66,17 +69,24 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
   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 +159,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 +176,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 +196,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 +213,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
@@ -292,6 +303,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 +369,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,10 +384,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 +398,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/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)

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

@@ -0,0 +1,60 @@
+/// <reference types="vitest/globals" />
+import { render, act } from '@testing-library/react'
+import { createPlaybackClock } from '../../playback-clock'
+import { TimelineContext, type TimelineContextValue } from '../TimelineContext'
+import PlayheadLine from '../PlayheadLine'
+
+function makeCtx(overrides: Partial<TimelineContextValue> = {}): TimelineContextValue {
+  return {
+    totalDuration: 10,
+    contentDuration: 10,
+    snapBoundaries: [],
+    zoom: 1,
+    zoomRef: { current: 1 },
+    scrollRef: { current: null },
+    scrubberRef: { current: null },
+    overlayDraggedRef: { current: false },
+    clock: createPlaybackClock(),
+    markers: [null, null],
+    setMarkers: () => {},
+    selection: null,
+    ...overrides,
+  }
+}
+
+test('PlayheadLine moves on clock.set without re-rendering a sibling row', () => {
+  const ctx = makeCtx()
+  let siblingRenders = 0
+
+  function Sibling() {
+    siblingRenders++
+    return null
+  }
+  function Root() {
+    return (
+      <TimelineContext.Provider value={ctx}>
+        <PlayheadLine />
+        <Sibling />
+      </TimelineContext.Provider>
+    )
+  }
+
+  const { container } = render(<Root />)
+  const before = siblingRenders
+
+  act(() => { ctx.clock.set(4) })
+
+  const line = container.querySelector('div') as HTMLDivElement
+  expect(line.style.left).toBe('40%')
+  expect(siblingRenders).toBe(before)
+})
+
+test('renders nothing when totalDuration is 0', () => {
+  const ctx = makeCtx({ totalDuration: 0 })
+  const { container } = render(
+    <TimelineContext.Provider value={ctx}>
+      <PlayheadLine />
+    </TimelineContext.Provider>,
+  )
+  expect(container.firstChild).toBeNull()
+})