@bycrux/editor 0.11.2 → 1.0.1

package/src/video/timeline/AudioTrackRow.tsx

@@ -1,404 +0,0 @@
-// AudioTrackRow — renders one audio lane on the timeline.
-//
-// A lane can contain one or more AudioTrack items (e.g. two voiceover segments
-// at different times sharing the same row). Supports: drag-to-reposition,
-// cross-lane drag, edge trim, mute toggle, inline volume, delete,
-// click-to-select, and inspect button.
-
-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'
-import type { GetWaveformChunks, ResolveFilePath } from './AudioWaveformLayer'
-import { applyMuteToSelection, applyResizeDeltaToSelection } from './multiSelectOps'
-
-interface AudioTrackRowProps {
-  tracks: AudioTrack[]
-  laneIndex: number
-  laneCount: number
-  project: Project
-  onProjectChange?: (p: Project) => void
-  onOverlayEdit?: (p: Project) => void
-  /** Unified multi-selection — same array shared across visual + audio rows. */
-  selectedIds: string[]
-  onSelectItem: (id: string | null, additive: boolean) => void
-  onInspect?: (id: string) => void
-  getWaveformChunks?: GetWaveformChunks
-  resolveFilePath?: ResolveFilePath
-}
-
-const LANE_HEIGHT_PX = 40 // must match the h-10 (2.5rem = 40px) on the row container
-
-function updateAudioTrack(project: Project, trackId: string, changes: Partial<AudioTrack>): Project {
-  return {
-    ...project,
-    audio: {
-      ...project.audio,
-      tracks: (project.audio?.tracks ?? []).map(t =>
-        t.id === trackId ? { ...t, ...changes } : t,
-      ),
-    },
-  }
-}
-
-function AudioTrackRow({
-  tracks,
-  laneIndex,
-  laneCount,
-  project,
-  onProjectChange,
-  onOverlayEdit,
-  selectedIds,
-  onSelectItem,
-  onInspect,
-  getWaveformChunks,
-  resolveFilePath,
-}: AudioTrackRowProps) {
-  const {
-    totalDuration,
-    snapBoundaries,
-    scrollRef,
-    overlayDraggedRef,
-    zoomRef,
-  } = useTimelineContext()
-
-  const { beginDrag, beginResize } = useItemDragDrop({
-    totalDuration,
-    snapBoundaries,
-    scrollRef,
-    zoomRef,
-    draggedFlagRef: overlayDraggedRef,
-  })
-
-  return (
-    <div className="relative h-10 bg-gray-100 dark:bg-gray-900 rounded overflow-hidden cursor-pointer">
-      <PlayheadLine />
-      {tracks.map(track => (
-        <AudioTrackItem
-          key={track.id}
-          track={track}
-          laneIndex={laneIndex}
-          laneCount={laneCount}
-          project={project}
-          totalDuration={totalDuration}
-          selected={selectedIds.includes(track.id)}
-          selectedIds={selectedIds}
-          onSelectItem={onSelectItem}
-          onInspect={onInspect}
-          onProjectChange={onProjectChange}
-          onOverlayEdit={onOverlayEdit}
-          beginDrag={beginDrag}
-          beginResize={beginResize}
-          overlayDraggedRef={overlayDraggedRef}
-          getWaveformChunks={getWaveformChunks}
-          resolveFilePath={resolveFilePath}
-        />
-      ))}
-      {/* Crossfade indicators — shown in the overlap zone between two tracks */}
-      {(() => {
-        const sorted = [...tracks].filter(t => !t.muted).sort((a, b) => a.start - b.start)
-        const indicators = []
-        for (let i = 0; i < sorted.length - 1; i++) {
-          const a = sorted[i], b = sorted[i + 1]
-          if (a.end > b.start) {
-            const overlapStart = b.start
-            const overlapEnd = Math.min(a.end, b.end)
-            indicators.push(
-              <div
-                key={`xfade-${a.id}-${b.id}`}
-                className="absolute top-0 bottom-0 pointer-events-none z-[5] flex items-center justify-center"
-                style={{
-                  left: `${pct(overlapStart, totalDuration)}%`,
-                  width: `${pct(overlapEnd - overlapStart, totalDuration)}%`,
-                }}
-              >
-                {/* Crossfade background highlight */}
-                <div className="absolute inset-0 bg-amber-400/15 border-x border-amber-400/30" />
-                {/* Crossfade icon — two crossing lines */}
-                <svg width="16" height="16" viewBox="0 0 16 16" className="relative text-amber-300/70 drop-shadow-sm">
-                  <line x1="2" y1="12" x2="14" y2="4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                  <line x1="2" y1="4" x2="14" y2="12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                </svg>
-              </div>
-            )
-          }
-        }
-        return indicators
-      })()}
-    </div>
-  )
-}
-
-export default memo(AudioTrackRow)
-
-// ── Single audio item within a lane ──────────────────────────────────────────
-
-interface AudioTrackItemProps {
-  track: AudioTrack
-  laneIndex: number
-  laneCount: number
-  project: Project
-  totalDuration: number
-  selected: boolean
-  selectedIds: string[]
-  onSelectItem: (id: string | null, additive: boolean) => void
-  onInspect?: (id: string) => void
-  onProjectChange?: (p: Project) => void
-  onOverlayEdit?: (p: Project) => void
-  beginDrag: ReturnType<typeof useItemDragDrop>['beginDrag']
-  beginResize: ReturnType<typeof useItemDragDrop>['beginResize']
-  overlayDraggedRef: React.RefObject<boolean>
-  getWaveformChunks?: GetWaveformChunks
-  resolveFilePath?: ResolveFilePath
-}
-
-function AudioTrackItem({
-  track,
-  laneIndex,
-  laneCount: _laneCount,
-  project,
-  totalDuration,
-  selected,
-  selectedIds,
-  onSelectItem,
-  onInspect,
-  onProjectChange,
-  onOverlayEdit,
-  beginDrag,
-  beginResize,
-  overlayDraggedRef,
-  getWaveformChunks,
-  resolveFilePath,
-}: AudioTrackItemProps) {
-  const [confirmingDelete, setConfirmingDelete] = useState(false)
-  const deleteTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  useEffect(() => () => { if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current) }, [])
-
-  const left = pct(track.start, totalDuration)
-  const width = pct(track.end - track.start, totalDuration)
-  const label = track.label ?? track.src.split('/').pop() ?? 'audio'
-
-  // ── Drag to reposition (horizontal + cross-lane) ──
-  function handleDragStart(e: React.MouseEvent) {
-    if ((e.target as HTMLElement).classList.contains('cursor-ew-resize')) return
-    if (!onProjectChange) return
-    let lastUpdated = project
-
-    beginDrag(e, track as Draggable, {
-      onLivePreview: ({ item: moved, dy }: DragEventContext) => {
-        // Cross-lane: compute target lane from vertical drag.
-        // Positive dy = dragged down = higher lane index.
-        const laneDelta = Math.round(dy / LANE_HEIGHT_PX)
-        const targetLane = Math.max(0, laneIndex + laneDelta)
-
-        const next = updateAudioTrack(project, track.id, {
-          start: moved.start,
-          end: moved.end,
-          lane: targetLane,
-        })
-        lastUpdated = next
-        onProjectChange!(next)
-      },
-      onCommit: () => {
-        onOverlayEdit?.(lastUpdated)
-      },
-    })
-  }
-
-  // ── Edge trim ──
-  function handleResizeStart(e: React.MouseEvent, edge: 'start' | 'end') {
-    if (!onProjectChange) return
-    let lastUpdated = project
-
-    const origStart = track.start
-    const origEnd = track.end
-    const origInPoint = track.inPoint ?? 0
-    const origOutPoint = track.outPoint ?? (origInPoint + (origEnd - origStart))
-    const srcDur = track.sourceDuration ?? Infinity
-    const multiTargets = selectedIds.length > 1 && selectedIds.includes(track.id)
-
-    beginResize(e, track as Draggable, edge, {
-      onLivePreview: ({ item: resized }: DragEventContext) => {
-        let newInPoint = origInPoint
-        let newOutPoint = origOutPoint
-
-        if (edge === 'start') {
-          const dt = resized.start - origStart
-          newInPoint = Math.max(0, Math.min(origInPoint + dt, origOutPoint - 0.1))
-        } else {
-          const dt = resized.end - origEnd
-          newOutPoint = Math.max(origInPoint + 0.1, Math.min(origOutPoint + dt, srcDur))
-        }
-
-        let next = updateAudioTrack(project, track.id, {
-          start: resized.start,
-          end: resized.end,
-          inPoint: newInPoint,
-          outPoint: newOutPoint,
-        })
-        if (multiTargets) {
-          const dStart = edge === 'start' ? resized.start - origStart : 0
-          const dEnd = edge === 'end' ? resized.end - origEnd : 0
-          next = applyResizeDeltaToSelection(next, track.id, selectedIds, edge, { dStart, dEnd })
-        }
-        lastUpdated = next
-        onProjectChange!(next)
-      },
-      onCommit: () => {
-        onOverlayEdit?.(lastUpdated)
-      },
-    })
-  }
-
-  // ── Mute toggle ──
-  function handleToggleMute(e: React.MouseEvent) {
-    e.stopPropagation()
-    if (!onProjectChange) return
-    const newMuted = !track.muted
-    // Multi-selection: set every selected item to the new state. Solo: just this.
-    const targetIds = selectedIds.length > 1 && selectedIds.includes(track.id) ? selectedIds : [track.id]
-    const updated = applyMuteToSelection(project, targetIds, newMuted)
-    onProjectChange(updated)
-    onOverlayEdit?.(updated)
-  }
-
-  // ── Delete (two-step confirm) ──
-  function handleDeleteClick(e: React.MouseEvent) {
-    e.stopPropagation()
-    if (confirmingDelete) {
-      if (!onProjectChange) return
-      const updated: Project = {
-        ...project,
-        audio: {
-          ...project.audio,
-          tracks: (project.audio?.tracks ?? []).filter(t => t.id !== track.id),
-        },
-      }
-      onProjectChange(updated)
-      onOverlayEdit?.(updated)
-      onSelectItem(null, false)
-      setConfirmingDelete(false)
-    } else {
-      setConfirmingDelete(true)
-      if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current)
-      deleteTimerRef.current = setTimeout(() => setConfirmingDelete(false), 3000)
-    }
-  }
-
-  // ── Click to select ──
-  function handleBarClick(e: React.MouseEvent) {
-    e.stopPropagation()
-    if (overlayDraggedRef.current) return
-    const additive = e.shiftKey || e.metaKey || e.ctrlKey
-    onSelectItem(track.id, additive)
-  }
-
-  // ── Double-click to open inspector ──
-  function handleBarDoubleClick(e: React.MouseEvent) {
-    e.stopPropagation()
-    if (overlayDraggedRef.current) return
-    onInspect?.(track.id)
-  }
-
-  return (
-    <div
-      className={`absolute top-1 bottom-1 rounded cursor-grab active:cursor-grabbing flex items-center overflow-hidden
-        ${track.muted ? 'bg-white/10' : 'bg-emerald-500/40 border border-emerald-500/60'}
-        ${selected ? 'ring-1 ring-inset ring-emerald-300/80' : ''}`}
-      style={{ left: `${left}%`, width: `${width}%` }}
-      title={label}
-      onClick={handleBarClick}
-      onDoubleClick={handleBarDoubleClick}
-      onMouseDown={handleDragStart}
-    >
-      {/* Waveform layer */}
-      <AudioWaveformLayer
-        track={track}
-        projectId={project.id}
-        getWaveformChunks={getWaveformChunks}
-        resolveFilePath={resolveFilePath}
-      />
-
-      {/* Fade-in gradient */}
-      {(track.fadeIn ?? 0) > 0 && (
-        <div
-          className="absolute top-0 bottom-0 left-0 pointer-events-none z-[2]"
-          style={{
-            width: `${Math.min(100, ((track.fadeIn ?? 0) / (track.end - track.start)) * 100)}%`,
-            background: 'linear-gradient(to right, rgba(0,0,0,0.6), transparent)',
-          }}
-        />
-      )}
-      {/* Fade-out gradient */}
-      {(track.fadeOut ?? 0) > 0 && (
-        <div
-          className="absolute top-0 bottom-0 right-0 pointer-events-none z-[2]"
-          style={{
-            width: `${Math.min(100, ((track.fadeOut ?? 0) / (track.end - track.start)) * 100)}%`,
-            background: 'linear-gradient(to left, rgba(0,0,0,0.6), transparent)',
-          }}
-        />
-      )}
-
-      {/* Left resize handle */}
-      <div
-        className="absolute left-0 top-0 bottom-0 w-1.5 cursor-ew-resize z-10 hover:bg-emerald-300/40"
-        onMouseDown={(e) => handleResizeStart(e, 'start')}
-      />
-
-      {/* Mute toggle */}
-      <button
-        className="shrink-0 ml-2 z-10 cursor-pointer"
-        onClick={handleToggleMute}
-        title={track.muted ? 'Unmute' : 'Mute'}
-      >
-        {track.muted
-          ? <VolumeX className="w-3.5 h-3.5 text-white/30" />
-          : <Volume2 className="w-3.5 h-3.5 text-emerald-200" />}
-      </button>
-
-      {/* Track type label */}
-      <span className="text-[10px] text-emerald-200 truncate flex-1 min-w-0 ml-1.5 pointer-events-none z-[1] drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]">
-        {track.type === 'voiceover' ? 'Voiceover' : track.type === 'music' ? 'Music' : label}
-      </span>
-
-      {/* Info button when selected */}
-      {selected && onInspect && (
-        <button
-          className="shrink-0 ml-1 z-10 cursor-pointer opacity-50 hover:opacity-100 text-emerald-200"
-          onClick={(e) => { e.stopPropagation(); onInspect(track.id) }}
-          title="Inspect audio track"
-        >
-          <Info size={12} />
-        </button>
-      )}
-
-      {/* Delete button when selected (two-step confirm) */}
-      {selected && (
-        <button
-          className={`shrink-0 ml-1 mr-2 z-10 cursor-pointer transition-colors ${
-            confirmingDelete
-              ? 'opacity-100 text-red-400'
-              : 'opacity-60 hover:opacity-100 text-emerald-200'
-          }`}
-          onClick={handleDeleteClick}
-          title={confirmingDelete ? 'Click again to confirm delete' : 'Delete audio track'}
-        >
-          <Trash2 size={12} />
-        </button>
-      )}
-
-      {/* Right resize handle */}
-      <div
-        className="absolute right-0 top-0 bottom-0 w-1.5 cursor-ew-resize z-10 hover:bg-emerald-300/40"
-        onMouseDown={(e) => handleResizeStart(e, 'end')}
-      />
-    </div>
-  )
-}

package/src/video/timeline/AudioWaveformLayer.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useState } from 'react'
-import type { WaveformChunk } from '../../types'
-import type { AudioTrack } from '../../schema'
-
-/**
- * Fetches the waveform chunks for one audio track. Threaded from the timeline
- * root (VideoEditor supplies `adapter.getWaveformChunks` in V4). The package is
- * host-agnostic: it takes the fn as a prop rather than reaching for an adapter.
- */
-export type GetWaveformChunks = (
-  projectId: string,
-  trackId: string,
-  trackSrc: string,
-  chunkDurationS?: number,
-) => Promise<WaveformChunk[]>
-
-/** Resolves a host-internal chunk path into a displayable URL (e.g. Montaj's
- *  `/api/files?path=…`). Defaults to identity when the host omits it. */
-export type ResolveFilePath = (path: string) => string
-
-interface Props {
-  track: AudioTrack
-  projectId: string
-  /** When absent/undefined, no waveform is rendered (graceful fallback). */
-  getWaveformChunks?: GetWaveformChunks
-  resolveFilePath?: ResolveFilePath
-}
-
-function LoadingBar() {
-  return (
-    <div className="relative w-full h-full overflow-hidden rounded bg-emerald-500/20">
-      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
-    </div>
-  )
-}
-
-function PlainFallback() {
-  return <div className="w-full h-full rounded bg-emerald-500/40 border border-emerald-500/60" />
-}
-
-export default function AudioWaveformLayer({ track, projectId, getWaveformChunks, resolveFilePath }: Props) {
-  const [chunks, setChunks] = useState<WaveformChunk[] | null>(null)
-  const [error, setError] = useState(false)
-
-  useEffect(() => {
-    if (!getWaveformChunks) return
-    let cancelled = false
-    setChunks(null)
-    setError(false)
-
-    getWaveformChunks(projectId, track.id, track.src)
-      .then((result) => {
-        if (!cancelled) setChunks(result)
-      })
-      .catch(() => {
-        if (!cancelled) setError(true)
-      })
-
-    return () => {
-      cancelled = true
-    }
-  }, [track.id, track.src, projectId, getWaveformChunks])
-
-  const isMuted = track.muted ?? false
-
-  // No fetcher supplied → render nothing (graceful: the bar shows its base color).
-  if (!getWaveformChunks) return null
-
-  const resolvePath = resolveFilePath ?? ((p: string) => p)
-
-  const content = (() => {
-    if (error) return <PlainFallback />
-    if (!chunks) return <LoadingBar />
-
-    const sourceDur = track.sourceDuration ?? (track.end - track.start)
-    const inPt = track.inPoint ?? 0
-    const outPt = track.outPoint ?? sourceDur
-    const visibleSpan = outPt - inPt
-
-    if (visibleSpan <= 0) return <PlainFallback />
-
-    // Filter to chunks that overlap [inPt, outPt]
-    const visible = chunks.filter((c) => c.end > inPt && c.start < outPt)
-
-    return (
-      <div className="relative w-full h-full overflow-hidden rounded">
-        {visible.map((chunk) => {
-          const leftPct = ((chunk.start - inPt) / visibleSpan) * 100
-          const widthPct = ((chunk.end - chunk.start) / visibleSpan) * 100
-
-          return (
-            <img
-              key={chunk.path}
-              src={resolvePath(chunk.path)}
-              alt=""
-              draggable={false}
-              className="absolute top-0 h-full object-fill"
-              style={{
-                left: `${leftPct}%`,
-                width: `${widthPct}%`,
-              }}
-            />
-          )
-        })}
-      </div>
-    )
-  })()
-
-  return (
-    <div
-      className="absolute inset-0 pointer-events-none"
-      style={{ opacity: isMuted ? 0.3 : 1 }}
-    >
-      {content}
-    </div>
-  )
-}