@bycrux/editor 0.6.3 → 0.7.0

package/src/video/VideoEditor.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { Crop, Magnet } from 'lucide-react'
 import type { Project, VideoEditorProps } from '../types'
-import { VideoSourceCropOverlay } from '../crop/VideoSourceCropOverlay'
+import { VideoSourceCropModal } from '../crop/VideoSourceCropModal'
 import { getOverlayDesignCanvas } from './design-canvas'
 import { applyTheme, defaultMontajTheme } from '../theme'
 import { applyCutToItem, applyCutToTracks, collapseGaps, splitAtTime } from './cuts'
@@ -45,6 +45,7 @@ export default function VideoEditor<P extends Project = Project>({
   renderSubcutRegen,
   regenEnabled,
   isClipQueued,
+  onProvideRenderTrigger,
 }: Props<P>) {
   const emit = onProjectChange ?? (() => {})
 
@@ -93,6 +94,7 @@ export default function VideoEditor<P extends Project = Project>({
         renderSubcutRegen={renderSubcutRegen}
         regenEnabled={regenEnabled}
         isClipQueued={isClipQueued}
+        onProvideRenderTrigger={onProvideRenderTrigger}
       />
     </div>
   )
@@ -122,6 +124,7 @@ interface SurfaceProps<P extends Project> {
   getWaveformChunks?: VideoEditorProps<P>['adapter']['getWaveformChunks']
   resolveFilePath: (path: string) => string
   save: (p: P) => void
+  onProvideRenderTrigger?: VideoEditorProps<P>['onProvideRenderTrigger']
 }
 
 function PendingSurface<P extends Project>({
@@ -265,6 +268,7 @@ function ReviewSurface<P extends Project>({
   renderSubcutRegen,
   regenEnabled,
   isClipQueued,
+  onProvideRenderTrigger,
 }: SurfaceProps<P> & {
   renderClipInspector?: VideoEditorProps<P>['renderClipInspector']
   renderSubcutRegen?: VideoEditorProps<P>['renderSubcutRegen']
@@ -279,8 +283,8 @@ function ReviewSurface<P extends Project>({
   const [selectedIds, setSelectedIds] = useState<string[]>([])
   const primarySelectedId = selectedIds[0] ?? null
   const [rippleMode, setRippleMode]   = useState(false)
-  // Source-crop mode: when on, a VideoSourceCropOverlay is mounted over the
-  // preview for the selected tracks[0] video item. Cleared when selection changes.
+  // Source-crop mode: when on, the VideoSourceCropModal opens for the selected
+  // tracks[0] video item. Cleared when selection changes.
   const [cropMode, setCropMode]       = useState(false)
   const [renderOpen, setRenderOpen]   = useState(false)
   const [regenCaptionsOpen, setRegenCaptionsOpen] = useState(false)
@@ -288,22 +292,22 @@ function ReviewSurface<P extends Project>({
   // callbacks. A Montaj-agnostic { kind, id } selector, not a project entity.
   const [inspecting, setInspecting]   = useState<{ kind: 'clip' | 'audio'; id: string } | null>(null)
 
-  const { versions, restoring, setRestoring } = useVersionHistory(adapter, project)
+  // Render trigger — marks the project final, saves, and opens the RenderModal.
+  // Kept stable (latest project/onChange/save read via refs) so a host that
+  // places Render in its own header (onProvideRenderTrigger) can store the
+  // callback once without it going stale.
+  const projectRef         = useRef(project);         projectRef.current = project
+  const onProjectChangeRef = useRef(onProjectChange); onProjectChangeRef.current = onProjectChange
+  const saveRef            = useRef(save);            saveRef.current = save
+  const openRender = useCallback(() => {
+    const final = { ...projectRef.current, status: 'final' } as P
+    onProjectChangeRef.current(final)
+    saveRef.current(final)
+    setRenderOpen(true)
+  }, [])
+  useEffect(() => { onProvideRenderTrigger?.(openRender) }, [onProvideRenderTrigger, openRender])
 
-  // Measured pixel size of the preview's rendered video rect — fed to the crop
-  // overlay as its wrapper dims so renderedSourceRect letterboxes correctly.
-  const previewBoxRef = useRef<HTMLDivElement>(null)
-  const [previewBox, setPreviewBox] = useState<{ w: number; h: number }>({ w: 0, h: 0 })
-  useEffect(() => {
-    if (!cropMode) return
-    const el = previewBoxRef.current
-    if (!el) return
-    const obs = new ResizeObserver(([entry]) => {
-      setPreviewBox({ w: entry.contentRect.width, h: entry.contentRect.height })
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [cropMode])
+  const { versions, restoring, setRestoring } = useVersionHistory(adapter, project)
 
   // Repair caption segments whose words[] text has diverged from edited seg.text.
   // Inline caption edits update seg.text but not seg.words; this normalizes the
@@ -434,7 +438,6 @@ function ReviewSurface<P extends Project>({
         <div className="flex-1 flex items-center justify-center bg-black overflow-hidden p-2">
           {hasContent ? (
             <div
-              ref={previewBoxRef}
               className="relative h-full max-w-full"
               style={{ aspectRatio: (() => { const [w, h] = getOverlayDesignCanvas(project.settings?.resolution); return `${w} / ${h}` })() }}
             >
@@ -450,30 +453,6 @@ function ReviewSurface<P extends Project>({
                 fileUrl={adapter.fileUrl}
                 resolveCaptionTemplate={adapter.resolveCaptionTemplate}
               />
-              {/* Source-crop overlay — mounted over the preview for the selected
-                  tracks[0] video. Persists sourceCrop through handleOverlayChange. */}
-              {cropMode && cropTarget && (
-                <div className="absolute inset-0" style={{ zIndex: 200 }}>
-                  <VideoSourceCropOverlay
-                    item={cropTarget}
-                    resolveSrc={(it) => adapter.fileUrl(it.nobg_preview_src ?? it.src ?? '')}
-                    wrapperWidth={previewBox.w}
-                    wrapperHeight={previewBox.h}
-                    onChange={(next) => handleOverlayChange(cropTarget.id, {
-                      sourceCrop: {
-                        x: Math.min(1, Math.max(0, next.x)),
-                        y: Math.min(1, Math.max(0, next.y)),
-                        w: Math.min(1, Math.max(0, next.w)),
-                        h: Math.min(1, Math.max(0, next.h)),
-                      },
-                    })}
-                    onSrcDimsLoaded={(dims) => {
-                      if (cropTarget.sourceWidth && cropTarget.sourceHeight) return
-                      handleOverlayChange(cropTarget.id, { sourceWidth: dims.width, sourceHeight: dims.height })
-                    }}
-                  />
-                </div>
-              )}
             </div>
           ) : (
             <p className="text-[var(--editor-text)]/60 text-sm">No clips</p>
@@ -522,17 +501,16 @@ function ReviewSurface<P extends Project>({
           >
             <Crop size={12} />
           </button>
-          <button
-            onClick={() => {
-              const final = { ...project, status: 'final' } as P
-              onProjectChange(final)
-              save(final)
-              setRenderOpen(true)
-            }}
-            className="text-xs px-2.5 py-1 rounded-md bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90 transition-colors"
-          >
-            Render →
-          </button>
+          {/* Default placement. A host that sets onProvideRenderTrigger renders
+              Render in its own chrome instead, so the toolbar button is hidden. */}
+          {!onProvideRenderTrigger && (
+            <button
+              onClick={openRender}
+              className="text-xs px-2.5 py-1 rounded-md bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90 transition-colors"
+            >
+              Render →
+            </button>
+          )}
         </div>
 
         <div className="shrink-0 border-t border-[var(--editor-border)] bg-[var(--editor-surface)]">
@@ -577,7 +555,7 @@ function ReviewSurface<P extends Project>({
           right below, one column — not a separate assets column. */}
       {(adapter.listVersionHistory || slots?.runHistory ||
         (assetsPlacement === 'sidebar' && slots?.assetsPanel)) && (
-        <div className={`${assetsPlacement === 'sidebar' ? 'w-64' : 'w-48'} shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden`}>
+        <div className={`${assetsPlacement === 'sidebar' ? 'w-56' : 'w-48'} shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden`}>
           {adapter.listVersionHistory && (
             <VersionPanel versions={versions} restoring={restoring} onRestore={handleRestoreVersion} />
           )}
@@ -606,6 +584,31 @@ function ReviewSurface<P extends Project>({
         </div>
       )}
 
+      {/* Source-crop modal — drag-to-pan, aspect presets, zoom. Commits
+          sourceCrop (+ source dims) to the selected tracks[0] video on Apply. */}
+      {cropMode && cropTarget && (
+        <VideoSourceCropModal
+          item={cropTarget}
+          // Prefer the conformed per-window cache (short, starts at the clip's
+          // first frame → loads instantly and shows a representative frame).
+          // Falls back to the bg-removed proxy, then the raw source.
+          resolveSrc={(it) => adapter.fileUrl(it.nobg_preview_src ?? it.normalizedSrc ?? it.src ?? '')}
+          onApply={(next) => handleOverlayChange(cropTarget.id, {
+            sourceCrop: {
+              x: Math.min(1, Math.max(0, next.x)),
+              y: Math.min(1, Math.max(0, next.y)),
+              w: Math.min(1, Math.max(0, next.w)),
+              h: Math.min(1, Math.max(0, next.h)),
+            },
+          })}
+          onSrcDimsLoaded={(dims) => {
+            if (cropTarget.sourceWidth && cropTarget.sourceHeight) return
+            handleOverlayChange(cropTarget.id, { sourceWidth: dims.width, sourceHeight: dims.height })
+          }}
+          onClose={() => setCropMode(false)}
+        />
+      )}
+
       {/* Render modal — adapter.render stream + host export controls */}
       {renderOpen && (
         <RenderModal

package/src/video/preview/CaptionPreview.tsx

@@ -63,7 +63,13 @@ export default function CaptionPreview({ track, currentTime, fps, compileOverlay
     : null
 
   return (
-    <div ref={wrapRef} className="absolute inset-0 pointer-events-none overflow-hidden">
+    // zIndex 45 keeps captions above the active <video> (z 1) and overlay items
+    // (z `trackIdx + 12`, ≈12–20) — mirroring the final render, where the caption
+    // track composites on top — while staying below the editing affordances
+    // (selection handles z 50, play button z 100). Without an explicit z-index the
+    // root sits at `auto`, so the opaque active video paints over it and captions
+    // never appear in the preview.
+    <div ref={wrapRef} className="absolute inset-0 pointer-events-none overflow-hidden" style={{ zIndex: 45 }}>
       <OverlayErrorBoundary label={`caption: ${track.style}`} resetKey={track.style}>
         {element && scale !== null && (
           <div style={{

package/src/video/preview/PreviewPlayer.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent, type WheelEvent as ReactWheelEvent } from 'react'
+import { videoTransformContainerStyle, videoTransformBoxPct, type VideoTransform } from './transformStyle'
 import type { EditorProject as Project } from '../../schema'
 import type { OverlayFactory } from '../../types'
 import CaptionPreview from './CaptionPreview'
@@ -119,6 +120,71 @@ export default function PreviewPlayer({
     ? { ...cropStyle }
     : { position: 'absolute' as const, inset: 0, width: '100%', height: '100%', objectFit: 'contain' as const }
 
+  // ── Base-video on-canvas transform (position + zoom) ─────────────────────────
+  // The selected tracks[0] video shows drag/resize handles like an overlay: drag
+  // to move (offsetX/offsetY), corner-drag or scroll to scale. Live during a
+  // pointer drag, committed on pointer-up via onOverlayChange; scroll commits
+  // directly. The <video> container reflects it (WYSIWYG with the renderer).
+  const selectedClip = useMemo(
+    () => clips.find(c => c.id === selectedOverlayId) ?? null,
+    [clips, selectedOverlayId],
+  )
+  const showVideoTransform = !isCanvasProject && !!selectedClip && selectedClip.id === activeClip?.id
+  const [liveXf, setLiveXf] = useState<VideoTransform | null>(null)
+  const xfDragRef = useRef<
+    | { kind: 'move'; startClient: { x: number; y: number }; start: VideoTransform }
+    | { kind: 'scale'; center: { x: number; y: number }; startDist: number; start: VideoTransform }
+    | null
+  >(null)
+  const baseXf: VideoTransform = {
+    scale: activeClip?.scale ?? 1,
+    offsetX: activeClip?.offsetX ?? 0,
+    offsetY: activeClip?.offsetY ?? 0,
+  }
+  const xf = liveXf ?? baseXf
+  const transformContainerStyle = videoTransformContainerStyle(xf)
+  const xfBox = videoTransformBoxPct(xf)
+
+  const onXfMoveDown = (e: ReactPointerEvent) => {
+    e.stopPropagation(); e.currentTarget.setPointerCapture?.(e.pointerId)
+    xfDragRef.current = { kind: 'move', startClient: { x: e.clientX, y: e.clientY }, start: baseXf }
+  }
+  const onXfScaleDown = (e: ReactPointerEvent) => {
+    e.stopPropagation(); e.currentTarget.setPointerCapture?.(e.pointerId)
+    const r = containerRef.current?.getBoundingClientRect()
+    if (!r) return
+    const center = { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+    const startDist = Math.hypot(e.clientX - center.x, e.clientY - center.y) || 1
+    xfDragRef.current = { kind: 'scale', center, startDist, start: baseXf }
+  }
+  const onXfMove = (e: ReactPointerEvent) => {
+    const d = xfDragRef.current
+    if (!d) return
+    if (d.kind === 'move') {
+      const ox = (d.start.offsetX ?? 0) + ((e.clientX - d.startClient.x) / (frameSize.w || 1)) * 100
+      const oy = (d.start.offsetY ?? 0) + ((e.clientY - d.startClient.y) / (frameSize.h || 1)) * 100
+      setLiveXf({ ...d.start, offsetX: ox, offsetY: oy })
+    } else {
+      const dist = Math.hypot(e.clientX - d.center.x, e.clientY - d.center.y)
+      const s = Math.min(8, Math.max(0.2, (d.start.scale ?? 1) * (dist / d.startDist)))
+      setLiveXf({ ...d.start, scale: s })
+    }
+  }
+  const onXfUp = () => {
+    const live = liveXf
+    xfDragRef.current = null
+    setLiveXf(null)
+    if (live && selectedClip && onOverlayChange) {
+      onOverlayChange(selectedClip.id, { offsetX: live.offsetX, offsetY: live.offsetY, scale: live.scale })
+    }
+  }
+  const onXfWheel = (e: ReactWheelEvent) => {
+    if (!showVideoTransform || !selectedClip || !onOverlayChange) return
+    const factor = e.deltaY < 0 ? 1.06 : 1 / 1.06
+    const s = Math.min(8, Math.max(0.2, (activeClip?.scale ?? 1) * factor))
+    onOverlayChange(selectedClip.id, { scale: s })
+  }
+
   return (
     <div ref={containerRef} className="relative bg-black h-full max-w-full overflow-hidden rounded" style={{ aspectRatio: `${RENDER_W} / ${RENDER_H}`, isolation: 'isolate' }}>
       {isCanvasProject ? (
@@ -128,7 +194,10 @@ export default function PreviewPlayer({
           No clips
         </div>
       ) : (
-        <>
+        // Transform container — applies the active clip's scale/offset to both
+        // slots (the inactive one is invisible). The frame's overflow-hidden clips
+        // anything pushed outside. Mirrors the renderer's crop→scale→position.
+        <div className="absolute inset-0" style={transformContainerStyle}>
           {/* Slot 0 */}
           <video
             ref={video0Ref}
@@ -161,7 +230,45 @@ export default function PreviewPlayer({
             playsInline
             style={{ ...baseVideoStyle, opacity: showVideo && activeSlot === 1 ? 1 : 0, pointerEvents: activeSlot === 1 ? 'auto' : 'none', zIndex: activeSlot === 1 ? 1 : 0 }}
           />
-        </>
+        </div>
+      )}
+
+      {/* Base-video transform handles — drag to move, corner-drag or scroll to
+          zoom. Shown only when the on-screen clip is selected. Above the
+          play-toggle (z 10), below overlays (z 12+). */}
+      {showVideoTransform && (
+        <div className="absolute inset-0 pointer-events-none" style={{ zIndex: 11 }}>
+          <div
+            onPointerDown={onXfMoveDown}
+            onPointerMove={onXfMove}
+            onPointerUp={onXfUp}
+            onWheel={onXfWheel}
+            style={{
+              position: 'absolute',
+              left: `${xfBox.left}%`, top: `${xfBox.top}%`, width: `${xfBox.width}%`, height: `${xfBox.height}%`,
+              outline: '2px solid var(--editor-selection)', cursor: 'move', pointerEvents: 'auto', touchAction: 'none',
+            }}
+          />
+          {([['nw', 0, 0], ['ne', 1, 0], ['sw', 0, 1], ['se', 1, 1]] as const).map(([k, dx, dy]) => (
+            <div
+              key={k}
+              onPointerDown={onXfScaleDown}
+              onPointerMove={onXfMove}
+              onPointerUp={onXfUp}
+              style={{
+                position: 'absolute',
+                // Clamp into the frame so corners stay grabbable even when the box
+                // is scaled beyond the frame (scale uses pointer-distance, not the
+                // handle's position, so a clamped grab still scales correctly).
+                left: `calc(${Math.min(98, Math.max(2, xfBox.left + dx * xfBox.width))}% - 6px)`,
+                top: `calc(${Math.min(98, Math.max(2, xfBox.top + dy * xfBox.height))}% - 6px)`,
+                width: 12, height: 12, backgroundColor: '#fff',
+                border: '1.5px solid var(--editor-selection)', borderRadius: 2,
+                cursor: 'nwse-resize', pointerEvents: 'auto', touchAction: 'none',
+              }}
+            />
+          ))}
+        </div>
       )}
 
 

package/src/video/preview/__tests__/transformStyle.test.ts

@@ -0,0 +1,34 @@
+/// <reference types="vitest/globals" />
+import { videoTransformContainerStyle, videoTransformBoxPct } from '../transformStyle'
+
+describe('videoTransformContainerStyle', () => {
+  it('identity transform → empty style (no-op)', () => {
+    expect(videoTransformContainerStyle({})).toEqual({})
+    expect(videoTransformContainerStyle({ scale: 1, offsetX: 0, offsetY: 0 })).toEqual({})
+  })
+
+  it('scale + offset → translate then scale, origin center', () => {
+    const s = videoTransformContainerStyle({ scale: 2, offsetX: 10, offsetY: -5 })
+    expect(s.transform).toBe('translate(10%, -5%) scale(2)')
+    expect(s.transformOrigin).toBe('center center')
+  })
+})
+
+describe('videoTransformBoxPct', () => {
+  it('scale 1, no offset → fills the frame', () => {
+    expect(videoTransformBoxPct({})).toEqual({ width: 100, height: 100, left: 0, top: 0 })
+  })
+
+  it('scale 2 centered → 200% box, centered (offset -50%)', () => {
+    expect(videoTransformBoxPct({ scale: 2 })).toEqual({ width: 200, height: 200, left: -50, top: -50 })
+  })
+
+  it('scale 0.5 → 50% box centered at 25%,25%', () => {
+    expect(videoTransformBoxPct({ scale: 0.5 })).toEqual({ width: 50, height: 50, left: 25, top: 25 })
+  })
+
+  it('offset shifts the centered box by frame percent', () => {
+    expect(videoTransformBoxPct({ scale: 2, offsetX: 10, offsetY: -5 }))
+      .toEqual({ width: 200, height: 200, left: -40, top: -55 })
+  })
+})

package/src/video/preview/transformStyle.ts

@@ -0,0 +1,44 @@
+// Pure geometry for the base video's on-canvas TRANSFORM (position + zoom),
+// distinct from its sourceCrop (which sub-rect of the footage). Mirrors the
+// renderer (encode-segment.js buildVideoItemFilterParts): the cropped/contained
+// video is fit into a box of size (canvas × scale), centered, then shifted by
+// offsetX/offsetY which are percentages of the frame — `overlay=x=vw*(0.5*(1-s)
+// + offsetX/100)`. The frame's overflow-hidden clips anything outside.
+//
+// Both helpers are expressed in frame-relative units so they're pixel-size
+// independent: the container transform uses CSS translate %, which is relative to
+// the container's own (frame) size, and scale() around center.
+
+import type { CSSProperties } from 'react'
+
+export interface VideoTransform {
+  scale?: number
+  offsetX?: number // percent of frame width
+  offsetY?: number // percent of frame height
+}
+
+// CSS transform for a frame-sized container wrapping the <video>. translate() %
+// is relative to the container (= frame), matching the renderer's frame-percent
+// offset; scale() is around center, matching the renderer's centered box.
+export function videoTransformContainerStyle(t: VideoTransform): CSSProperties {
+  const s = t.scale ?? 1
+  const ox = t.offsetX ?? 0
+  const oy = t.offsetY ?? 0
+  if (s === 1 && ox === 0 && oy === 0) return {}
+  return { transform: `translate(${ox}%, ${oy}%) scale(${s})`, transformOrigin: 'center center' }
+}
+
+// The transform box as a frame-relative % rect (left/top/width/height in %).
+// This is the canvas-aspect box the cropped video is contained within; the crop
+// handles for the on-canvas transform are drawn on it.
+export function videoTransformBoxPct(t: VideoTransform): { left: number; top: number; width: number; height: number } {
+  const s = t.scale ?? 1
+  const ox = t.offsetX ?? 0
+  const oy = t.offsetY ?? 0
+  return {
+    width: s * 100,
+    height: s * 100,
+    left: ((1 - s) / 2) * 100 + ox,
+    top: ((1 - s) / 2) * 100 + oy,
+  }
+}

package/src/video/preview/useVideoPlayback.ts

@@ -214,6 +214,18 @@ export function useVideoPlayback(
     }
   }
 
+  // Start playback on a slot during an automated clip-boundary switch (context
+  // already running — no gesture needed). If the slot isn't buffered yet (a slow
+  // non-faststart HEVC tail-moov fetch can still be in flight), play() may reject
+  // with AbortError; retry on `canplay` so the switch never dead-stops at the cut.
+  function playSoon(video: HTMLVideoElement) {
+    const p = video.play()
+    if (p) p.catch(() => {
+      const onCanPlay = () => { video.removeEventListener('canplay', onCanPlay); video.play().catch(() => {}) }
+      video.addEventListener('canplay', onCanPlay)
+    })
+  }
+
   function ensureVideoGain(slot: 0 | 1): GainNode | null {
     if (videoGainRef.current[slot]) return videoGainRef.current[slot]
     const video = slot === 0 ? video0Ref.current : video1Ref.current
@@ -569,7 +581,7 @@ export function useVideoPlayback(
       if (preloadSrcRef.current !== src) { nv.src = src; nv.currentTime = effectiveInPoint(nc) }
       const gain = ensureVideoGain(ns)
       if (gain) gain.gain.value = nc.muted ? 0 : (nc.volume ?? 1)
-      nv.play().catch(() => {})
+      playSoon(nv)
     }
     void (activeSlotRef.current === 0 ? video0Ref.current : video1Ref.current)?.pause()
     activeSlotRef.current = ns
@@ -598,6 +610,14 @@ export function useVideoPlayback(
           gapNextIdxRef.current = nextIdx
           getActiveVideo()?.pause()
           gapRAFRef.current     = requestAnimationFrame(tickGap)
+        } else {
+          // Scrubbed PAST the last clip into trailing empty space — there is no
+          // next clip to advance to. Without this the active <video> keeps
+          // playing under the hidden (showVideo=false) frame: the picture goes
+          // dark but its audio keeps going. Stop playback outright.
+          getActiveVideo()?.pause()
+          setIsPlaying(false)
+          syncAudioTracks(currentTime, false)
         }
       }
       return
@@ -659,21 +679,26 @@ export function useVideoPlayback(
     const clipInPoint = effectiveInPoint(clip)
     const outPoint = effectiveOutPoint(clip) ?? clip.end - clip.start + clipInPoint
 
-    // Preload next clip into inactive slot ~1s before end
-    const timeLeft = outPoint - video.currentTime
-    if (timeLeft < 1.0) {
-      const nextIdx = activeIdxRef.current + 1
-      if (nextIdx < clips.length && clips[nextIdx].src) {
-        const inactiveVideo = slot === 0 ? video1Ref.current : video0Ref.current
-        const nextSrc = fileUrlRef.current(playbackSrcFor(clips[nextIdx]))
-        if (inactiveVideo && preloadSrcRef.current !== nextSrc) {
-          preloadSrcRef.current = nextSrc
-          inactiveVideo.src = nextSrc
-          inactiveVideo.currentTime = effectiveInPoint(clips[nextIdx])
-          const inactiveSlot = (1 - slot) as 0 | 1
-          const nextGain = ensureVideoGain(inactiveSlot)
-          if (nextGain) nextGain.gain.value = clips[nextIdx].muted ? 0 : (clips[nextIdx].volume ?? 1)
-        }
+    // Preload the next clip into the inactive slot as early as possible. The
+    // source files are large 4K 10-bit HEVC with the moov atom at the END of the
+    // file (not web-faststart), so the browser needs a slow tail range-fetch to
+    // index and seek before it can decode. The old "~1s before end" lead was far
+    // too short: at a cross-source cut the next slot wasn't ready and play()
+    // stalled, freezing playback at the boundary. (Same-source cuts hid the bug —
+    // the moov was already cached from the active slot.) Give the load the whole
+    // current clip as runway instead; the preloadSrcRef guard keeps it idempotent
+    // and a scrub clears it.
+    const nextIdx = activeIdxRef.current + 1
+    if (nextIdx < clips.length && clips[nextIdx].src) {
+      const inactiveVideo = slot === 0 ? video1Ref.current : video0Ref.current
+      const nextSrc = fileUrlRef.current(playbackSrcFor(clips[nextIdx]))
+      if (inactiveVideo && preloadSrcRef.current !== nextSrc) {
+        preloadSrcRef.current = nextSrc
+        inactiveVideo.src = nextSrc
+        inactiveVideo.currentTime = effectiveInPoint(clips[nextIdx])
+        const inactiveSlot = (1 - slot) as 0 | 1
+        const nextGain = ensureVideoGain(inactiveSlot)
+        if (nextGain) nextGain.gain.value = clips[nextIdx].muted ? 0 : (clips[nextIdx].volume ?? 1)
       }
     }
 
@@ -723,7 +748,7 @@ export function useVideoPlayback(
             }
             const nextGain = ensureVideoGain(nextSlot)
             if (nextGain) nextGain.gain.value = next.muted ? 0 : (next.volume ?? 1)
-            nextVideo.play().catch(() => {})
+            playSoon(nextVideo)
           }
 
           activeSlotRef.current = nextSlot