@bycrux/editor 0.6.4 → 0.7.1

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)]">
@@ -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/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

@@ -610,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

package/src/video/timeline/Timeline.tsx

@@ -131,7 +131,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
   const [subcutClipId, setSubcutClipId]       = useState<string | null>(null)
 
-  const { zoom, zoomRef, scrollRef, zoomTo, handleTimelineWheel } = useTimelineZoom(totalDuration)
+  const { zoom, zoomRef, scrollRef, zoomTo } = useTimelineZoom(totalDuration)
 
   useEffect(() => {
     if (totalDuration === 0) return
@@ -245,7 +245,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
       )}
 
       {/* Scroll container for zoomed tracks */}
-      <div ref={scrollRef} className="overflow-x-auto" onWheel={handleTimelineWheel}>
+      <div ref={scrollRef} className="overflow-x-auto">
       <div style={{ width: zoom > 1 ? `${zoom * 100}%` : '100%' }} className="min-w-full">
 
       {/* Scrubber + tracks wrapped in a relative container so the hover indicator spans the full height */}

package/src/video/timeline/useTimelineZoom.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 
 export function useTimelineZoom(totalDuration: number) {
   const [zoom, setZoom] = useState(1)
@@ -31,7 +31,14 @@ export function useTimelineZoom(totalDuration: number) {
     setZoom(clamped)
   }
 
-  function handleTimelineWheel(e: React.WheelEvent) {
+  // ⌘/Ctrl + wheel = zoom; Alt + wheel = horizontal scroll. Both call
+  // preventDefault, so the listener MUST be non-passive. React's onWheel prop is
+  // registered passive at the root, which makes preventDefault a no-op and spams
+  // "Unable to preventDefault inside passive event listener" — so attach a native
+  // listener with { passive: false } instead. A ref to the latest handler keeps
+  // it current without re-binding on every render.
+  const wheelHandlerRef = useRef<(e: WheelEvent) => void>(() => {})
+  wheelHandlerRef.current = (e: WheelEvent) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault()
       // Multiplicative step so perceived speed is consistent across zoom levels.
@@ -44,5 +51,13 @@ export function useTimelineZoom(totalDuration: number) {
     }
   }
 
-  return { zoom, zoomRef, scrollRef, pendingScrollRef, zoomTo, handleTimelineWheel }
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const onWheel = (e: WheelEvent) => wheelHandlerRef.current(e)
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => el.removeEventListener('wheel', onWheel)
+  }, [])
+
+  return { zoom, zoomRef, scrollRef, pendingScrollRef, zoomTo }
 }