@bycrux/editor 0.11.2 → 1.0.1

package/src/video/timeline/TrackSettingsPopover.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import { Switch } from '../../ui/switch'
+import SpeedControl from './SpeedControl'
+import VolumeControl from './VolumeControl'
+
+/**
+ * Track-wide settings, opened from the rail's icon button (see TrackGutter.tsx).
+ *
+ * Portaled to `document.body`, exactly like `Tooltip.tsx` and for the same
+ * reason: the rail sits inside the timeline's `overflow-x-auto` scroll
+ * container, so a popover positioned `absolute` inside its own row would be
+ * clipped the moment it grew past the row's own bounds. Positioning is a
+ * two-pass "render once off-screen, measure, place" — same shape Tooltip uses
+ * for its horizontal clamp, extended here to both axes since this panel is
+ * tall enough to run past the bottom of the viewport on a row near the end of
+ * a long timeline.
+ *
+ * Each section is independently optional and renders only when ITS OWN
+ * value+callback pair is given — the same "no dead control" rule the rail's
+ * skip toggle already follows (a control wired to nothing is worse than no
+ * control). In practice `Timeline.tsx` wires all of them together, but the
+ * component itself doesn't assume that.
+ */
+
+/** Gap in px between the trigger's edge and the popover. */
+const OFFSET_PX = 6
+/** Keeps the popover from hanging off any edge of the window. */
+const VIEWPORT_MARGIN_PX = 8
+
+interface Position {
+  left: number
+  top: number
+  /** True when there wasn't room to open downward, so the popover is anchored
+   *  from its own BOTTOM edge (opens upward) instead. */
+  flipped: boolean
+}
+
+export interface TrackSettingsPopoverProps {
+  /** The rail button this popover is anchored to and positioned against. */
+  anchorRef: RefObject<HTMLButtonElement | null>
+  onClose: () => void
+  /** Names WHICH row this is, e.g. "Video track" / "Overlay track" / "Audio" —
+   *  shown as the popover's own heading and its `aria-label`. */
+  title: string
+  /** Volume section — give both `volume` and `onVolumeChange` to show it. */
+  volume?: number
+  /** `commit: false` on every drag tick (live preview only, mirrors
+   *  CaptionListPanel's fontsize slider); `commit: true` once, on
+   *  release/keyup — the same preview-then-commit split every continuous
+   *  timeline control uses, so a drag never produces one undo entry per
+   *  pixel. */
+  onVolumeChange?: (volume: number, commit: boolean) => void
+  /** Distinct wording from `title` on purpose — "Mute audio lane" needs to
+   *  read differently from AudioTrackRow's own per-clip "Mute"/"Unmute"
+   *  button, which already exists and is a different control. */
+  volumeAriaLabel?: string
+  /** Mute section — give both `muted` and `onMutedChange` to show it. A mute
+   *  click is a single, already-complete gesture — no preview/commit split
+   *  needed, same as the rail's existing skip toggle. */
+  muted?: boolean
+  onMutedChange?: (muted: boolean) => void
+  muteAriaLabel?: string
+  /** Present only for visual tracks — audio lanes have no skip concept. When
+   *  given, `onToggle` is the SAME callback the rail's inline eye icon calls;
+   *  this is a second surface for it, not a second mutation path. */
+  skip?: { skipped: boolean; onToggle: () => void; ariaLabel: string }
+  /**
+   * Speed section — give both `speed` and `onApplySpeed` to show it. Present
+   * only for visual (video) tracks; speed is a video-only concept, same as
+   * volume/mute above.
+   *
+   * Applies directly, no button: it is a track control, so touching it is the
+   * intent to set the whole track. It previews into local state during a slider
+   * drag and commits `onApplySpeed` on release (and immediately on a chip
+   * click) — the same live-preview-then-commit split the volume fader uses,
+   * just committing to every clip instead of a track-level value.
+   */
+  speed?: number
+  /** Applies `speed` to EVERY clip on the track. Fired on slider release and on
+   *  a preset-chip click (via SpeedControl's `onCommit`), not per drag tick. */
+  onApplySpeed?: (speed: number) => void
+  /** Editor theme mode — light/dark. Only affects the Mute/Skip switches'
+   *  unchecked track colour. Absent -> dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
+}
+
+export default function TrackSettingsPopover({
+  anchorRef,
+  onClose,
+  title,
+  volume,
+  onVolumeChange,
+  volumeAriaLabel,
+  muted,
+  onMutedChange,
+  muteAriaLabel,
+  skip,
+  speed,
+  onApplySpeed,
+  mode = 'dark',
+}: TrackSettingsPopoverProps) {
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<Position | null>(null)
+
+  const showVolume = volume !== undefined && !!onVolumeChange
+  const showMute = muted !== undefined && !!onMutedChange
+  const showSpeed = speed !== undefined && !!onApplySpeed
+
+  // Local slider value during a drag, seeded from the committed `speed` and
+  // reset whenever it changes under us — same shape as `liveVolume` below. The
+  // bulk apply to every clip runs on commit (slider release / chip click) via
+  // SpeedControl's `onCommit`, not on each drag tick.
+  const [localSpeed, setLocalSpeed] = useState(speed ?? 1)
+  useEffect(() => {
+    if (speed !== undefined) setLocalSpeed(speed)
+  }, [speed])
+
+  // Live slider value during a drag — local state so a mid-drag frame doesn't
+  // stutter waiting on a round trip through the project. Reset whenever the
+  // committed value changes under us (e.g. undo while the popover is open).
+  // Exactly CaptionListPanel's `fontsize` pattern.
+  const [liveVolume, setLiveVolume] = useState(volume ?? 1)
+  useEffect(() => {
+    if (volume !== undefined) setLiveVolume(volume)
+  }, [volume])
+
+  // Measure once the popover has a real size, then place it. Anchored from
+  // the trigger's top-left by default (NOT centered — the rail sits at the
+  // left edge of the timeline pane, so centering a wider panel under a 16px
+  // icon would push its left edge off-screen as often as not). Flips to open
+  // upward when there isn't room below before the viewport's bottom edge;
+  // only ever needs a LEFTWARD horizontal clamp, since the rail is the
+  // leftmost UI element and the trigger's own left edge is always ≥ 0.
+  useLayoutEffect(() => {
+    const anchorRect = anchorRef.current?.getBoundingClientRect()
+    const popover = popoverRef.current
+    if (!anchorRect || !popover) return
+    const { width, height } = popover.getBoundingClientRect()
+
+    let left = anchorRect.left
+    if (left + width > window.innerWidth - VIEWPORT_MARGIN_PX) {
+      left = window.innerWidth - VIEWPORT_MARGIN_PX - width
+    }
+
+    const fitsBelow = anchorRect.bottom + OFFSET_PX + height <= window.innerHeight - VIEWPORT_MARGIN_PX
+    const top = fitsBelow ? anchorRect.bottom + OFFSET_PX : anchorRect.top - OFFSET_PX
+    setPosition({ left, top, flipped: !fitsBelow })
+  }, [anchorRef])
+
+  // Close on outside click / Escape — same shape as ImageToneMenu.tsx's.
+  // "Outside" excludes both the trigger (a click on it is the button's own
+  // toggle, handled by TrackGutter) and the popover's own portaled content.
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (anchorRef.current?.contains(target)) return
+      if (popoverRef.current?.contains(target)) return
+      onClose()
+    }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [anchorRef, onClose])
+
+  if (typeof document === 'undefined') return null
+
+  return createPortal(
+    <div
+      ref={popoverRef}
+      role="dialog"
+      aria-label={title}
+      className="fixed z-[100] w-64 rounded-lg border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-3 flex flex-col gap-3"
+      style={{
+        left: position?.left ?? -9999,
+        top: position?.top ?? -9999,
+        // Invisible until positioned: the first render has nothing measured
+        // to position against yet, so it paints once off-screen for the
+        // effect above to measure, then becomes visible in its real place —
+        // never a visible jump.
+        visibility: position ? 'visible' : 'hidden',
+        transform: position?.flipped ? 'translateY(-100%)' : undefined,
+      }}
+    >
+      <p className="text-xs font-semibold text-[var(--editor-text)]/90">{title}</p>
+
+      {showVolume && (
+        <VolumeControl
+          value={liveVolume}
+          onChange={v => { setLiveVolume(v); onVolumeChange!(v, false) }}
+          onCommit={v => onVolumeChange!(v, true)}
+          label="Volume"
+          ariaLabel={volumeAriaLabel}
+          idBase="track-volume"
+        />
+      )}
+
+      {showSpeed && (
+        <SpeedControl
+          value={localSpeed}
+          onChange={setLocalSpeed}
+          onCommit={onApplySpeed}
+          label="Speed"
+          idBase="track-speed"
+        />
+      )}
+
+      {showMute && (
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] text-[var(--editor-text)]/70">Mute</span>
+          <Switch checked={!!muted} onCheckedChange={onMutedChange!} aria-label={muteAriaLabel} mode={mode} />
+        </div>
+      )}
+
+      {skip && (
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] text-[var(--editor-text)]/70">Skip</span>
+          <Switch checked={skip.skipped} onCheckedChange={() => skip.onToggle()} aria-label={skip.ariaLabel} mode={mode} />
+        </div>
+      )}
+    </div>,
+    document.body,
+  )
+}

package/src/video/timeline/VolumeControl.tsx

@@ -0,0 +1,113 @@
+/**
+ * A controlled volume picker: a slider plus a row of clickable preset chips
+ * snapping it to a common level. The audio twin of `SpeedControl` — same shape,
+ * same look, so the two controls read as siblings wherever they sit together
+ * (the track-wide settings popover and the per-clip inspect modal).
+ *
+ * Controlled, not stateful: the caller owns `value` and reacts to `onChange`,
+ * exactly like the range inputs elsewhere in this rail. The two mount points
+ * wire it up differently — the track popover previews into local state and
+ * commits directly via `onCommit` (slider release and chip click); the clip
+ * modal previews live and commits on an explicit Save button (so it omits
+ * `onCommit` and just reads `onChange`).
+ *
+ * The slider itself is the shared `<Slider>` (ui/Slider.tsx): its own
+ * `onCommit` already fires on gesture-end carrying the value, so this is a
+ * direct rewiring rather than a reshaping. One behaviour change comes along
+ * for free — `Slider` only commits when the gesture actually moved the value,
+ * where the old bare `<input>` committed on every pointerup/keyup regardless.
+ * That is strictly better (no more no-op undo entries) and no test here
+ * depended on the old wart.
+ */
+import { Slider } from '../../ui'
+
+/** `20·log10(v)` dB, matching the readout the volume faders used before this
+ *  control existed. Escapes for U+2212 (minus) and U+221E (infinity) so the
+ *  glyphs survive whatever transform sits between here and the DOM. */
+function volumeToDb(v: number): string {
+  if (v === 0) return '−∞ dB'
+  return `${(20 * Math.log10(v)).toFixed(1)} dB`
+}
+
+export interface VolumeControlProps {
+  value: number
+  onChange: (v: number) => void
+  /** Optional commit signal, fired on slider release (pointer/keyboard) and on
+   *  a chip click, carrying the value to commit. Callers that commit on their
+   *  own control (e.g. a Save button) omit it and just read `onChange`. */
+  onCommit?: (v: number) => void
+  min?: number
+  max?: number
+  step?: number
+  /** Levels the chips snap to, as raw multipliers (1 = unity / 0 dB). Rendered
+   *  as whole-percent labels. */
+  presets?: number[]
+  label?: string
+  /** Overrides the slider's `aria-label` — used where the accessible name must
+   *  differ from the visible `label` (e.g. "Mute audio lane" vs "Volume"). */
+  ariaLabel?: string
+  /** Base id for the slider input, so a caller can wire a `<label htmlFor>`
+   *  to it. Optional — the control is already self-labelled via `aria-label`. */
+  idBase?: string
+}
+
+const DEFAULT_PRESETS = [0, 0.5, 1, 1.5, 2]
+
+export default function VolumeControl({
+  value,
+  onChange,
+  onCommit,
+  min = 0,
+  max = 2,
+  step = 0.01,
+  presets = DEFAULT_PRESETS,
+  label,
+  ariaLabel,
+  idBase,
+}: VolumeControlProps) {
+  const sliderId = idBase ? `${idBase}-volume-slider` : undefined
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className={`flex items-center text-[11px] text-[var(--editor-text)]/70 ${label ? 'justify-between' : 'justify-end'}`}>
+        {label && <span>{label}</span>}
+        <span className="font-mono text-[10px] text-[var(--editor-text)]/50">
+          {value.toFixed(2)} ({volumeToDb(value)})
+        </span>
+      </div>
+      <Slider
+        id={sliderId}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        aria-label={ariaLabel ?? label ?? 'Volume'}
+        onChange={onChange}
+        onCommit={onCommit}
+      />
+      {/* Quick-set chips under the slider — a click snaps straight to that
+          level rather than dragging for it. The active one is marked with
+          `aria-pressed` and the accent fill, matching SpeedControl's chips. */}
+      <div role="group" aria-label={label ? `${label} presets` : 'Volume presets'} className="flex flex-wrap gap-1">
+        {presets.map(p => {
+          const active = Math.abs(value - p) < 1e-6
+          return (
+            <button
+              key={p}
+              type="button"
+              aria-pressed={active}
+              onClick={() => { onChange(p); onCommit?.(p) }}
+              className={`rounded-md border px-2 py-0.5 text-[11px] font-mono transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] ${
+                active
+                  ? 'border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)]'
+                  : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
+              }`}
+            >
+              {Math.round(p * 100)}%
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/video/timeline/__tests__/Timeline.backgroundClick.test.tsx

@@ -0,0 +1,110 @@
+/// <reference types="vitest/globals" />
+/**
+ * Clicks that land on the timeline COLUMN but on no row: the readout strip
+ * above the tracks, the gaps between rows, the space under the last one.
+ *
+ * These went dead in canvas mode and nothing noticed. `handleContainerClick`
+ * mapped x→time through the scrubber bar's rect, and canvas mode doesn't
+ * render that bar, so `scrubberRef.current` was null and every such click fell
+ * out of an early return. The visible symptom was a ~40px strip under the
+ * toolbar that looked like timeline and ignored you — including for the thing
+ * people most expect from a background click, dropping the selection.
+ *
+ * There was no failing assertion to catch that: "looks live, does nothing" is
+ * invisible to a test that doesn't ask. So these ask.
+ *
+ * jsdom lays everything out at 0×0, so the canvas surface's rect is stubbed to
+ * a real one via `installCanvasHarness` — without it every click reads as x=0
+ * in a 0-wide surface and the seek half of this can't be observed at all.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, cleanup, fireEvent } from '@testing-library/react'
+import type { Project } from '../../../types'
+import { createPlaybackClock } from '../../playback-clock'
+import Timeline from '../Timeline'
+import { installCanvasHarness, SURFACE_LEFT } from './_canvasSelect'
+
+let uninstall: () => void
+
+beforeEach(() => {
+  uninstall = installCanvasHarness()
+})
+
+afterEach(() => {
+  cleanup()
+  uninstall()
+})
+
+/** 10s of content. NOT a round 100px/second on the fitted surface — "fit" is
+ *  computed against `computeDerivedTiming().totalDuration`, which is content
+ *  duration PLUS drag headroom (`+ max(5, content * 0.2)`), so 10s of content
+ *  fits as 15s of fitted timeline (≈66.7px/s here), not 100px/s. Nothing below
+ *  asserts the scale, so the exact value was never load-bearing — this note is
+ *  just so a reader doesn't assume a round number computing their own point. */
+function makeProject(): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [[{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+  } as unknown as Project
+}
+
+function mount(clockAt = 0) {
+  const clock = createPlaybackClock(clockAt)
+  const onSelectIds = vi.fn()
+  const utils = render(
+    <Timeline
+      project={makeProject()}
+      clock={clock}
+      selectedIds={['clip-0']}
+      onSelectIds={onSelectIds}
+    />,
+  )
+  // The strip is the column's own background: the row area is a child, so
+  // clicking the root element itself is exactly a click that hit no row.
+  const root = utils.container.firstElementChild as HTMLElement
+  return { clock, onSelectIds, root, ...utils }
+}
+
+describe('Timeline — background clicks in canvas mode', () => {
+  it('clears the selection', () => {
+    const { root, onSelectIds } = mount()
+    fireEvent.click(root, { clientX: 600, clientY: 10 })
+    expect(onSelectIds).toHaveBeenCalledWith([])
+  })
+
+  it('seeks to the clicked time on the canvas axis', () => {
+    const { root, clock } = mount()
+    // 600 - SURFACE_LEFT = 500px into a 1000px surface showing 10s of content.
+    fireEvent.click(root, { clientX: 600, clientY: 10 })
+    expect(clock.get()).toBeGreaterThan(0)
+    expect(clock.get()).toBeLessThan(10)
+  })
+
+  it('does not seek from over the track rail, but still clears the selection', () => {
+    const { root, clock, onSelectIds } = mount(4)
+    fireEvent.click(root, { clientX: SURFACE_LEFT - 20, clientY: 10 })
+    expect(onSelectIds).toHaveBeenCalledWith([])
+    expect(clock.get()).toBe(4)   // no time axis over the rail
+  })
+
+  it('leaves a click on a button alone — the zoom and readout controls are chrome', () => {
+    const { root, clock, onSelectIds } = mount(4)
+    const button = document.createElement('button')
+    root.appendChild(button)
+    fireEvent.click(button, { clientX: 600, clientY: 10, bubbles: true })
+    expect(onSelectIds).not.toHaveBeenCalled()
+    expect(clock.get()).toBe(4)
+  })
+
+  it('leaves a click on a [data-timeline-chrome] readout alone', () => {
+    const { root, clock, onSelectIds } = mount(4)
+    const readout = document.createElement('span')
+    readout.setAttribute('data-timeline-chrome', '')
+    root.appendChild(readout)
+    fireEvent.click(readout, { clientX: 600, clientY: 10, bubbles: true })
+    expect(onSelectIds).not.toHaveBeenCalled()
+    expect(clock.get()).toBe(4)
+  })
+})

package/src/video/timeline/__tests__/Timeline.crossfade.test.tsx

@@ -0,0 +1,104 @@
+/// <reference types="vitest/globals" />
+/**
+ * The auto-crossfade pass must land as ONE commit, on a delay — not one per
+ * change. Audio timing moves on every mousemove of a drag, and the effect used
+ * to `onOverlayEdit` (commit) synchronously on each, which recorded dozens of
+ * undo entries for a single audio move. It is now debounced; a drag's own
+ * commit folds the fade into its single undo step, and this pass is the
+ * catch-all for audio-timing changes that arrive outside a gesture.
+ *
+ * jsdom lays out at 0×0 and has no 2D canvas, so both are stubbed via
+ * `installCanvasHarness` — the canvas-mode timeline mounts a real <canvas>
+ * surface underneath Timeline. This file dispatches no pointer event and
+ * `computeAutoCrossfade` reads only audio-track start/end/lane data, so the
+ * harness's surface-inset geometry (vs. this file's old blanket one-rect-fits-
+ * all stub) changes nothing this file asserts.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, cleanup, act } from '@testing-library/react'
+import type { Project } from '../../../types'
+import { createPlaybackClock } from '../../playback-clock'
+import Timeline, { CROSSFADE_COMMIT_DELAY_MS } from '../Timeline'
+import { installCanvasHarness } from './_canvasSelect'
+
+let uninstall: () => void
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  uninstall = installCanvasHarness()
+})
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+  uninstall()
+})
+
+/** Two audio tracks that overlap by 1s and carry NO fades — so
+ *  `computeAutoCrossfade` has a real change to make (fadeOut/fadeIn = 1). */
+function projectWithOverlap(): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [[{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+    audio: { tracks: [
+      { id: 'a0', src: 'v.mp3', start: 0, end: 5, lane: 0 },
+      { id: 'a1', src: 'w.mp3', start: 4, end: 9, lane: 0 },
+    ] },
+  } as unknown as Project
+}
+
+/** Same shape, but the fades are already correct — the pass must find nothing. */
+function projectAlreadyFaded(): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [[{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+    audio: { tracks: [
+      { id: 'a0', src: 'v.mp3', start: 0, end: 5, lane: 0, fadeOut: 1 },
+      { id: 'a1', src: 'w.mp3', start: 4, end: 9, lane: 0, fadeIn: 1 },
+    ] },
+  } as unknown as Project
+}
+
+function mount(project: Project) {
+  const onOverlayEdit = vi.fn()
+  const onProjectChange = vi.fn()
+  render(
+    <Timeline
+      project={project}
+      clock={createPlaybackClock(0)}
+      selectedIds={[]}
+      onSelectIds={vi.fn()}
+      onProjectChange={onProjectChange}
+      onOverlayEdit={onOverlayEdit}
+    />,
+  )
+  return { onOverlayEdit, onProjectChange }
+}
+
+describe('Timeline — auto-crossfade commit is debounced', () => {
+  it('does not commit synchronously, then commits once after the delay', () => {
+    const { onOverlayEdit } = mount(projectWithOverlap())
+    // The per-change commit is exactly the audio-move-undo bug — it must not
+    // fire on mount / on the audio-timing change itself.
+    expect(onOverlayEdit).not.toHaveBeenCalled()
+
+    act(() => { vi.advanceTimersByTime(CROSSFADE_COMMIT_DELAY_MS) })
+
+    expect(onOverlayEdit).toHaveBeenCalledTimes(1)
+    const committed = onOverlayEdit.mock.calls[0][0] as Project
+    const a0 = committed.audio!.tracks.find(t => t.id === 'a0')!
+    const a1 = committed.audio!.tracks.find(t => t.id === 'a1')!
+    expect(a0.fadeOut).toBe(1)
+    expect(a1.fadeIn).toBe(1)
+  })
+
+  it('never commits when the crossfade is already applied (idempotent)', () => {
+    const { onOverlayEdit } = mount(projectAlreadyFaded())
+    act(() => { vi.advanceTimersByTime(CROSSFADE_COMMIT_DELAY_MS * 4) })
+    expect(onOverlayEdit).not.toHaveBeenCalled()
+  })
+})