@devbycrux/editor 0.1.0 → 0.3.0

package/src/video/timeline/useItemDragDrop.ts

@@ -0,0 +1,190 @@
+import type React from 'react'
+
+export interface Draggable {
+  id: string
+  start: number
+  end: number
+  inPoint?: number
+  outPoint?: number
+  type?: string
+  sourceDuration?: number
+}
+
+export interface DragEventContext {
+  /** The item with updated start/end (and inPoint/outPoint for resize) */
+  item: Draggable
+  /** Horizontal delta in timeline seconds from initial position */
+  dx: number
+  /** Vertical delta in raw pixels from initial position */
+  dy: number
+}
+
+export interface UseItemDragDropConfig {
+  totalDuration: number
+  snapBoundaries: number[]
+  snapThresholdPx?: number // default 8
+  /** Element used for getBoundingClientRect() → pixel-to-time conversion */
+  scrollRef: React.RefObject<HTMLDivElement | null>
+  /** Timeline zoom factor — content width is zoom × scrollRef.width. Required so
+   *  pixel-to-time conversion matches the visible scale (without this, drag/resize
+   *  is `zoom`× too sensitive when zoomed in). */
+  zoomRef?: React.RefObject<number>
+  draggedFlagRef?: React.MutableRefObject<boolean> // sets true during drag (click suppression)
+}
+
+export function useItemDragDrop(config: UseItemDragDropConfig) {
+  const {
+    totalDuration,
+    snapBoundaries,
+    snapThresholdPx = 8,
+    scrollRef,
+    zoomRef,
+    draggedFlagRef,
+  } = config
+
+  function beginResize(
+    e: React.MouseEvent,
+    item: Draggable,
+    edge: 'start' | 'end',
+    callbacks: {
+      onLivePreview: (ctx: DragEventContext) => void
+      onCommit: () => void
+    },
+  ): void {
+    e.stopPropagation()
+    e.preventDefault()
+
+    const initX = e.clientX
+    const initTime = edge === 'start' ? item.start : item.end
+
+    function computeResized(moveE: MouseEvent): Draggable {
+      if (!scrollRef.current) return item
+      const rect = scrollRef.current.getBoundingClientRect()
+      const contentWidth = rect.width * (zoomRef?.current ?? 1)
+      const dt = ((moveE.clientX - initX) / contentWidth) * totalDuration
+      const raw = Math.max(0, Math.min(totalDuration, initTime + dt))
+
+      // Snap to any boundary within threshold
+      const snapThreshold = (snapThresholdPx / contentWidth) * totalDuration
+      let t = raw
+      let bestDist = snapThreshold
+      for (const b of snapBoundaries) {
+        const d = Math.abs(raw - b)
+        if (d < bestDist) {
+          bestDist = d
+          t = b
+        }
+      }
+
+      if (edge === 'start') {
+        const newStart = Math.min(t, item.end - 0.1)
+        if (item.type !== 'video') return { ...item, start: newStart }
+        const dtActual = newStart - item.start
+        return {
+          ...item,
+          start: newStart,
+          inPoint: Math.min(
+            Math.max(0, (item.inPoint ?? 0) + dtActual),
+            (item.outPoint ?? (item.inPoint ?? 0) + (item.end - item.start)) - 0.1,
+          ),
+        }
+      } else {
+        const newEnd = Math.max(t, item.start + 0.1)
+        if (item.type !== 'video') return { ...item, end: newEnd }
+        const origOut = item.outPoint ?? (item.inPoint ?? 0) + (item.end - item.start)
+        const dtActual = newEnd - item.end
+        return {
+          ...item,
+          end: newEnd,
+          outPoint: Math.max(
+            (item.inPoint ?? 0) + 0.1,
+            Math.min(origOut + dtActual, item.sourceDuration ?? Infinity),
+          ),
+        }
+      }
+    }
+
+    function onMove(moveE: MouseEvent) {
+      const resized = computeResized(moveE)
+      callbacks.onLivePreview({ item: resized, dx: 0, dy: 0 })
+    }
+    function onUp() {
+      callbacks.onCommit()
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }
+
+  function beginDrag(
+    e: React.MouseEvent,
+    item: Draggable,
+    callbacks: {
+      onLivePreview: (ctx: DragEventContext) => void
+      onCommit: () => void
+    },
+  ): void {
+    e.stopPropagation()
+
+    const initX = e.clientX
+    const initY = e.clientY
+    const initStart = item.start
+    const initEnd = item.end
+    const duration = initEnd - initStart
+
+    function onMove(moveE: MouseEvent) {
+      if (draggedFlagRef) draggedFlagRef.current = true
+
+      const rect = scrollRef.current?.getBoundingClientRect()
+      const contentWidth = rect ? rect.width * (zoomRef?.current ?? 1) : 0
+      const dx = contentWidth ? ((moveE.clientX - initX) / contentWidth) * totalDuration : 0
+      const dy = moveE.clientY - initY
+
+      const rawStart = Math.max(0, Math.min(totalDuration - duration, initStart + dx))
+      const rawEnd = rawStart + duration
+
+      // Snap leading/trailing edge to nearest item edge within threshold
+      const snapThreshold = contentWidth ? (snapThresholdPx / contentWidth) * totalDuration : 0
+      let newStart = rawStart
+      let newEnd = rawEnd
+      let bestDist = snapThreshold
+      for (const b of snapBoundaries) {
+        const dEnd = Math.abs(rawEnd - b)
+        if (dEnd < bestDist) {
+          bestDist = dEnd
+          newStart = b - duration
+          newEnd = b
+        }
+        const dStart = Math.abs(rawStart - b)
+        if (dStart < bestDist) {
+          bestDist = dStart
+          newStart = b
+          newEnd = b + duration
+        }
+      }
+      newStart = Math.max(0, Math.min(totalDuration - duration, newStart))
+      newEnd = newStart + duration
+
+      const movedItem = { ...item, start: newStart, end: newEnd }
+      callbacks.onLivePreview({ item: movedItem, dx, dy })
+    }
+
+    function onUp() {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+      if (draggedFlagRef && draggedFlagRef.current) {
+        callbacks.onCommit()
+        // reset after click event fires
+        setTimeout(() => {
+          draggedFlagRef!.current = false
+        }, 0)
+      }
+    }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }
+
+  return { beginDrag, beginResize }
+}

package/src/video/timeline/useTimelineZoom.ts

@@ -0,0 +1,48 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+
+export function useTimelineZoom(totalDuration: number) {
+  const [zoom, setZoom] = useState(1)
+  const zoomRef = useRef(zoom)
+  zoomRef.current = zoom
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const pendingScrollRef = useRef<number | null>(null)
+
+  useLayoutEffect(() => {
+    if (pendingScrollRef.current !== null && scrollRef.current) {
+      scrollRef.current.scrollLeft = pendingScrollRef.current
+      pendingScrollRef.current = null
+    }
+  })
+
+  function zoomTo(newZoom: number, pivotClientX?: number) {
+    const clamped = Math.max(1, Math.min(20, newZoom))
+    if (!scrollRef.current || totalDuration === 0) { setZoom(clamped); return }
+    const container = scrollRef.current
+    const containerWidth = container.clientWidth
+    const currentScrollLeft = container.scrollLeft
+    const rect = container.getBoundingClientRect()
+    const pivotOffset = pivotClientX !== undefined
+      ? Math.max(0, Math.min(containerWidth, pivotClientX - rect.left))
+      : containerWidth / 2
+    const pivotPct = Math.max(0, Math.min(1,
+      (currentScrollLeft + pivotOffset) / (containerWidth * zoomRef.current)
+    ))
+    pendingScrollRef.current = Math.max(0, pivotPct * containerWidth * clamped - pivotOffset)
+    setZoom(clamped)
+  }
+
+  function handleTimelineWheel(e: React.WheelEvent) {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault()
+      // Multiplicative step so perceived speed is consistent across zoom levels.
+      // deltaY ≈ 100 per mouse-wheel tick → factor ≈ 0.82 (≈ 18% zoom change).
+      const factor = Math.exp(-e.deltaY * 0.002)
+      zoomTo(zoomRef.current * factor, e.clientX)
+    } else if (e.altKey) {
+      e.preventDefault()
+      if (scrollRef.current) scrollRef.current.scrollLeft += e.deltaY
+    }
+  }
+
+  return { zoom, zoomRef, scrollRef, pendingScrollRef, zoomTo, handleTimelineWheel }
+}

package/src/video/timeline/utils.ts

@@ -0,0 +1,17 @@
+export function formatTime(s: number): string {
+  const m   = Math.floor(s / 60)
+  const sec = (s % 60).toFixed(1)
+  return `${m}:${sec.padStart(4, '0')}`
+}
+
+export function pct(t: number, totalDuration: number): number {
+  return totalDuration > 0 ? (t / totalDuration) * 100 : 0
+}
+
+export function ratioFromClientX(clientX: number, scrubberRect: DOMRect): number {
+  const x = clientX - scrubberRect.left
+  return Math.max(0, Math.min(1, x / scrubberRect.width))
+}
+
+export const trackRow     = 'relative h-10 bg-gray-100 dark:bg-gray-900 rounded overflow-hidden cursor-pointer'
+export const trackRowTall = 'relative h-14 bg-gray-100 dark:bg-gray-900 rounded overflow-hidden cursor-pointer'